:root {
	--primary:       #ff7a41;
	--primary-dark:  #ec6328;
	--primary-light: #ff9b70;
	--brand-orange:  #ff7a41;
	--brand-blue:    #004ab8;
	--brand-plum:    #713274;
	--bg-dark:       #1a0d22;   /* plum-tinted near black, replaces #0d0d0d */
	--bg-dark2:      #221029;
	--on-primary:    #1a0d22;   /* text on orange */

	/* Be Vietnam Pro, the typeface of ier.solutions, replaces the theme's
	   Plus Jakarta Sans + Instrument Serif. The theme's serif <em> accents
	   become the italic of the same family. */
	--font-main:     'Be Vietnam Pro', sans-serif;
	--font-serif:    'Be Vietnam Pro', sans-serif;

	/* the theme's orange + blue glow, in brand colours */
	--ier-glow:
		radial-gradient(ellipse at 20% 50%, rgba(255,122,65,.20) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 50%, rgba(0,74,184,.38) 0%, transparent 60%);
}

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */
.skip-to-content {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100000;
	background: var(--bg-dark);
	color: #fff;
	padding: 10px 18px;
	border-radius: 50px;
	font-weight: 600;
}
.skip-to-content:focus { top: 16px; color: #fff; }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid var(--brand-blue);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Dark panels: hero, process card, CTA, footer — same glow, brand colours
   --------------------------------------------------------------------------- */
.hero-bg-gradient::before,
.process-vector-wrapper::before,
.cta-inner::before,
.rewards-panel::before,
.footer-area::before {
	background: var(--ier-glow);
}

/* ---------------------------------------------------------------------------
   Labels
   --------------------------------------------------------------------------- */
.eyebrow {
	background: rgba(0,74,184,.06);
	border-color: rgba(0,74,184,.18);
	color: var(--brand-blue);
}
.eyebrow span { background: var(--primary); }

/* on dark panels the label stays orange, as in the theme */
.hero-tag,
.cta-inner .eyebrow,
.rewards-panel .eyebrow {
	background: rgba(255,122,65,.12);
	border-color: rgba(255,122,65,.28);
	color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.atf-themes-btn::before { background: var(--brand-blue); }
.atf-themes-btn:hover .btn-icon { color: var(--brand-blue); }

.btn-primary-custom,
.btn-primary-custom:hover,
.btn-primary-custom:focus { color: var(--on-primary); }
.btn-primary-custom:hover { box-shadow: 0 12px 32px rgba(255,122,65,.35); }

.atf-header-login {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-dark);
	transition: color .3s;
}
.atf-header-login:hover { color: var(--brand-blue); }

/* ---------------------------------------------------------------------------
   Links and interactive accents on light backgrounds
   --------------------------------------------------------------------------- */
.atf-title-hover:hover { color: var(--brand-blue); }
.atf-title-hover:hover { background-image: linear-gradient(180deg, var(--brand-blue) 0%, var(--brand-blue) 100%); }
.feature-desc a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }

.accordion-btn-custom.open { color: var(--brand-plum); background: rgba(113,50,116,.04); }
.accordion-body-custom { background: rgba(113,50,116,.02); }

/* ---------------------------------------------------------------------------
   Badges — plum fill so their white text stays readable
   --------------------------------------------------------------------------- */
.faq-float-badge {
	background: var(--brand-plum);
	box-shadow: 0 8px 28px rgba(113,50,116,.4);
}

/* ---------------------------------------------------------------------------
   Header and mobile menu
   --------------------------------------------------------------------------- */
.atf-site-logo img { width: 190px; height: auto; }
.atf-hamburger-logo img { width: 180px; height: auto; }

/* Be Vietnam Pro is wider than the theme's font: keep menu items on one line
   and tighten the theme's 18px / 40px spacing so six items fit at 1200px */
.atf-main-menu nav ul li a { white-space: nowrap; }
.atf-main-menu > nav > ul > li { margin-right: 30px; }
.atf-main-menu > nav > ul > li > a { font-size: 16px; }
@media (min-width: 1200px) and (max-width: 1399px) {
	.atf-main-menu > nav > ul > li { margin-right: 22px; }
	.atf-main-menu > nav > ul > li > a { font-size: 15px; }
}

/* the theme's preloader names its old font directly */
.atf-preloader__text { font-family: var(--font-main); }

.atf-hamburger-member .btn-primary-custom { margin-bottom: 18px; }
.atf-hamburger-login {
	display: block;
	font-weight: 600;
	color: var(--bg-dark);
}
.atf-hamburger-login:hover { color: var(--brand-blue); }
.atf-hamburger-info span a:hover { color: var(--brand-blue); }

/* ---------------------------------------------------------------------------
   Semantic markup inside theme components
   (lists, quotes and headings that the theme wrote as plain divs)
   --------------------------------------------------------------------------- */
ol.process-steps { list-style: none; margin: 0; }

figure.testimonial-card { margin: 0 12px; }
blockquote.testimonial-text { margin: 0 0 28px; }

.accordion-heading-custom {
	margin: 0;
	font: inherit;
	line-height: inherit;
}

#contact address {
	margin: 0;
	font-style: normal;
}
#contact .atf-contact-address a:hover { color: var(--brand-blue); }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.footer-brand img { width: 200px; height: auto; }
.footer-desc { max-width: 340px; }
.footer-col h3 { font-size: 20px; margin-bottom: 28px; }
.footer-links li {
	font-size: 15px;
	color: rgba(255,255,255,.65);
	margin-bottom: 12px;
	line-height: 1.6;
}
.footer-links li a { margin-bottom: 0; }
.footer-bottom .footer-copy { margin: 0; }
.footer-bottom a { color: #fff; font-weight: 600; }
.footer-bottom a:hover { color: var(--primary); }

/* ---------------------------------------------------------------------------
   Rewards — a dark panel in the same style as the hero and CTA banner
   --------------------------------------------------------------------------- */
.rewards-panel {
	position: relative;
	overflow: hidden;
	background: var(--bg-dark);
	border-radius: var(--radius-xl);
	padding: 80px 60px;
}
.rewards-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
}
.rewards-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.rewards-panel > * { position: relative; z-index: 1; }
.rewards-panel .section-heading { margin-bottom: 24px; }

.rewards-desc {
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255,255,255,.7);
	margin-bottom: 26px;
}
.rewards-values {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 30px;
}
.rewards-values li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--radius-sm);
	background: rgba(255,255,255,.04);
}
.rewards-values strong { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75); }
.rewards-values span { font-size: 20px; font-weight: 800; color: var(--primary); }

.reward-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}
.reward-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 22px 10px 18px;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,.05);
	transition: var(--transition);
}
.reward-card:hover {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,122,65,.45);
	transform: translateY(-4px);
}
.reward-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff;
	color: var(--brand, var(--brand-blue));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin-bottom: 14px;
}
.reward-name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.reward-type { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; line-height: 1.3; }
.rewards-note {
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255,255,255,.5);
	margin: 18px 0 0;
}

/* ---------------------------------------------------------------------------
   Member feedback — anonymous: an icon stands in for the member's photo
   --------------------------------------------------------------------------- */
.testimonial-avatar {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(113,50,116,.1);
	color: var(--brand-plum);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}
.testimonial-author .author-name { font-size: 17px; }

/* ---------------------------------------------------------------------------
   FAQ — topic tabs above the theme's accordion
   --------------------------------------------------------------------------- */
.faq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}
.faq-tabs .nav-link {
	border: 1px solid var(--border);
	border-radius: 50px;
	background: var(--bg-white);
	color: var(--text-mid);
	font-size: 14px;
	font-weight: 600;
	padding: 9px 20px;
	transition: var(--transition);
}
.faq-tabs .nav-link:hover { color: var(--brand-blue); border-color: rgba(0,74,184,.3); }
.faq-tabs .nav-link.active {
	background: var(--bg-dark);
	border-color: var(--bg-dark);
	color: #fff;
}
.faq-more {
	margin: 20px 0 0;
	font-size: 15px;
	color: var(--text-mid);
}
.faq-more a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 992px) {
	/* the question list is taller than the photo, so the photo follows along */
	.faq-sticky { position: sticky; top: 110px; }
}

/* ---------------------------------------------------------------------------
   Stats — the theme's counter rewrites the number every frame. With
   proportional digits the text changed width as it counted, and "500 pts"
   wrapped mid-count, so the boxes and the photo below jumped while
   scrolling. Fixed-width digits on one line keep the box still.
   --------------------------------------------------------------------------- */
.stat-number {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Contact — white section so the theme's light cards stand out, with the
   section's own bottom padding separating it from the footer card
   --------------------------------------------------------------------------- */
#contact { background: var(--bg-white); }
#contact .row > div { display: flex; }
#contact .atf-contact-details { width: 100%; }
/* the address reads as two clean lines (street, then city and country)
   wherever the card is wide enough for that */
@media (min-width: 992px) {
	#contact address span { white-space: nowrap; }
}
/* icon above the text, so each card's full width is available for the
   address, email and phone number */
#contact .atf-contact-icon {
	width: 72px;
	height: 72px;
	line-height: 72px;
	font-size: 26px;
}
#contact .atf-contact-details { padding: 28px; }
#contact .atf-contact-address h3 { margin-bottom: 6px; }

/* How it works: the theme placed its button inside the dark diagram; it now
   follows the four steps on the left, where the reading ends */
.process-cta { margin-top: 30px; }

/* equal-height member feedback cards inside the theme's slider */
#testi-row .slick-track { display: flex; }
#testi-row .slick-slide { height: auto; }
#testi-row .slick-slide > div,
#testi-row .slick-slide > div > div,
#testi-row .testimonial-card { height: 100%; }
#testi-row .testimonial-card { display: flex; flex-direction: column; }
#testi-row .testimonial-author { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------------------
   CTA banner: in the theme a team section separated it from the grey topics
   strip above. With that section gone the banner touched the strip, so it gets
   the theme's standard section spacing on top (and on phones, 60px).
   --------------------------------------------------------------------------- */
#cta-banner { padding-top: 110px; }
@media (max-width: 767px) {
	#cta-banner { padding-top: 60px; }
}

/* ---------------------------------------------------------------------------
   CTA banner: .cta-inner is a centred flex column, so its row shrank to the
   heading's content width and the text-split animation then wrapped the
   heading into a narrow box. Give the row the full width of the banner.
   --------------------------------------------------------------------------- */
.cta-inner > .row { width: 100%; }

/* ---------------------------------------------------------------------------
   404 page — the hero's dark panel, centred, with an outlined "404" in the
   style of the theme's stat numbers
   --------------------------------------------------------------------------- */
.error-404 { padding: 10px 0 110px; }
.error-panel { padding: 100px 60px 90px; }
.error-code {
	margin: 0 0 6px;
	font-family: var(--font-main);
	font-size: clamp(110px, 18vw, 210px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255,255,255,.35);
}
.error-code span {
	color: var(--primary);
	-webkit-text-stroke: 0;
}
.error-desc { max-width: 560px; margin-left: auto; margin-right: auto; }
.error-actions { justify-content: center; }
.error-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.1);
}
.error-links a {
	font-size: 15px;
	font-weight: 500;
	color: rgba(255,255,255,.7);
	transition: color .3s;
}
.error-links a:hover { color: var(--primary); }
@media (max-width: 767px) {
	.error-panel { padding: 70px 22px 60px; }
}

/* ---------------------------------------------------------------------------
   Spacing and corner fixes
   --------------------------------------------------------------------------- */
/* the hero panel started right under the header: give it breathing room
   below the menu */
#hero { padding-top: 24px; }

/* survey topic cards: the photo side is rounded (24px) but the cream text
   side had square corners; round it to match, and leave the same 15px white
   gap between photo and text that frames the card (5px border + 10px padding) */
.portfolio-content-side { border-radius: var(--radius-lg); }
.portfolio-card { gap: 15px; }

/* ---------------------------------------------------------------------------
   Audit fixes (Oct 2026)
   --------------------------------------------------------------------------- */
/* Custom cursor: the theme parks it in the top-left corner until the mouse
   moves, and shows it on phones where there is no mouse. Reveal it on the
   first mouse move (ier.js) and never show it on touch screens. */
.cursor_body { opacity: 0; transition: opacity .3s; }
body.has-cursor .cursor_body { opacity: 1; }
@media (hover: none), (pointer: coarse) {
	.cursor_body { display: none; }
}

/* About ring: the spinning arcs ran straight through the labels. The theme
   calls them "stat pills", so give them a pill so the arcs pass behind. */
.wwa-stat {
	z-index: 2;
	background: var(--bg-white);
	padding: 6px 12px 6px 10px;
	border-radius: 50px;
	box-shadow: 0 4px 14px rgba(26,13,34,.08);
}
.wwa-big-num { z-index: 1; }

/* Ways to Earn: the centre photo set the row height (520px), stretching the
   two top cards with an empty lower half. Let the cards set the height and
   the photo fill it. */
#services .service-center-thumb { min-height: 0; }
#services .service-center-thumb img { position: absolute; inset: 0; }

/* How it works: the diagram panel now runs the full height of the steps
   column instead of floating short beside the button. */
#how-it-works .row.align-items-center { align-items: stretch !important; }
#how-it-works .process-vector-wrapper { height: 100%; }

/* Why IER banner: drop the theme's diagonal dark band (made for an abstract
   image behind a play button, it cut across faces) and use a brand-tint
   frame instead of the theme's pink-beige. */
.video-area.atf-cover-bg::before { display: none; }
.video-area { border-color: rgba(113,50,116,.12); }

/* The theme capitalises every word in these, which turned "ier.solutions"
   into "Ier.Solutions"; the markup carries the right capitals instead. */
.blog-card-link,
.stat-label { text-transform: none; }

/* Stat labels: the theme's "◆ " bullet is a text character Be Vietnam Pro
   does not have, so it came from a fallback font, sat low and spaced oddly.
   Draw the same 6px orange dot the section labels use, centred on the text,
   and darken the label a step for readability. */
.stat-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-mid);
}
.stat-label::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary);
	flex-shrink: 0;
}

/* Footer bottom bar: legal links between the copyright and credit */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-legal a { font-size: 15px; color: rgba(255,255,255,.7); }
.footer-legal a:hover { color: var(--primary); }

/* ---------------------------------------------------------------------------
   Small-screen fixes to the theme
   --------------------------------------------------------------------------- */
/* The theme clips the page with overflow:hidden, but an overflow:hidden box
   can still be scrolled sideways by an in-page jump (#faq etc.), which shifted
   the whole page left on phones. clip hides the overflow without making the
   wrapper scrollable. Older browsers keep the theme's hidden. */
.page-wrapper { overflow: hidden; overflow: clip; }

@media (max-width: 991px) {
	.rewards-panel { padding: 60px 30px; }
}
@media (max-width: 767px) {
	.reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rewards-panel { padding: 50px 20px; border-radius: var(--radius-lg); }
}

@media (max-width: 767px) {
	/* the stacked centre photo needs a height of its own on phones */
	#services .service-center-thumb { min-height: 380px; }
}
@media (max-width: 575px) {
	/* the ring's labels spill off a phone screen or cover the number: show
	   the ring on its own and line the four labels up as pills below it */
	.wwa-circle-outer {
		width: 100%;
		max-width: 340px;
		height: auto;
		padding-top: 300px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
	.wwa-ring { inset: 0 auto auto 50%; width: 290px; height: 290px; margin-left: -145px; }
	.wwa-big-num { top: 145px; }
	.wwa-big-num .n-main { font-size: 80px; }
	.wwa-big-num .n-plus { font-size: 60px; }
	.wwa-stat { position: static; }

	/* the stats card is min-width:400px in the theme — wider than a phone */
	.hero-float-card { min-width: 0; margin-left: 0; }

	/* two stat columns did not fit a phone with the theme's 36px side padding */
	.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat-box { padding: 40px 18px; }
	.stat-number { font-size: 34px; }
}

/* ---------------------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ticker-track,
	.about_round_text,
	.eyebrow span,
	.hero-tag span { animation: none !important; }
}