/* =========================================================================
   Alrasly — home.css
   Homepage-only sections. Enqueued on the front page only (functions.php).
   Brand law: CLAUDE.md. Tokens: assets/css/tokens.css. Mobile-first.
   ========================================================================= */

/* ---------- HERO ----------
   Default (no .js) = finished, settled, fully-visible hero (text + 4x4 mosaic).
   The scatter→resolve sequence and text rise are CSS-only enhancements gated
   behind `.js` (set pre-paint by the inline head script); count-up + pointer
   parallax are JS enhancements in reveal.js. If JS fails, the settled hero shows. */
.hero{
	position:relative; isolation:isolate; overflow:hidden;
	min-height:100vh; min-height:100dvh;   /* full viewport; dvh with vh fallback */
	display:flex; align-items:center;
	padding-block:var(--space-5);   /* mobile; bumped at tablet/desktop below */
	/* Approved mock background — ambient lighting inside the navy palette (CSS only). */
	background:
		radial-gradient(120% 90% at 82% 18%, rgba(9,91,244,.55) 0%, rgba(9,91,244,0) 55%),
		radial-gradient(110% 90% at 95% 95%, rgba(85,70,250,.5) 0%, rgba(85,70,250,0) 50%),
		radial-gradient(90% 80% at 12% 90%, rgba(41,37,97,.9) 0%, rgba(41,37,97,0) 60%),
		linear-gradient(135deg,#211d4e 0%,#292561 45%,#191636 100%);
}
/* Resolve the hero's bottom into the EXACT deep tone (#191636) the page gradient
   holds at this boundary, so hero→next-section is seamless (no edge under the stats).
   Behind content (z-0); content stays above. */
.hero::before{
	content:""; position:absolute; inset-inline:0; bottom:0; height:55%; z-index:0; pointer-events:none;
	background:linear-gradient(to bottom, rgba(25,22,54,0), #191636);
}
/* Faint square grid overlay (separate layer, above the gradient, behind the squares). */
.hero::after{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background-image:
		linear-gradient(rgba(174,234,253,.18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(174,234,253,.18) 1px, transparent 1px);
	background-size:60px 60px;
	opacity:.16;
	-webkit-mask-image:radial-gradient(120% 100% at 80% 30%, #000 30%, transparent 75%);
	        mask-image:radial-gradient(120% 100% at 80% 30%, #000 30%, transparent 75%);
}

/* ---------- Overlaid transparent header (homepage / dark hero only) ----------
   Conditional via the .has-overlay-header body class (functions.php → is_front_page()).
   Inner pages keep the solid light header + full-colour logo (unchanged in main.css). */
.has-overlay-header .site-header{
	position:absolute; inset-inline:0; top:0; z-index:50;
	background:transparent; border-bottom:0;
}
.has-overlay-header .site-header__inner{ max-width:1200px; }   /* align with the wider hero */
.has-overlay-header .site-title{ color:var(--white); }
.has-overlay-header .nav-menu a{ color:var(--white); }
.has-overlay-header .nav-menu a:hover,
.has-overlay-header .nav-menu a:focus{ color:var(--sky); }
.has-overlay-header .nav-menu .current-menu-item > a,
.has-overlay-header .nav-menu .current_page_item > a{ color:var(--sky); }
/* Visible focus on the transparent header — a sky ring reads clearly on navy. */
.has-overlay-header .nav-menu a:focus-visible,
.has-overlay-header .menu-toggle:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
/* Hamburger stays visible on navy: transparent with a white hairline (bars are white). */
.has-overlay-header .menu-toggle{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
/* Mobile menu open → solid navy header so items don't sit over hero content. */
.has-overlay-header.nav-open .site-header{ background:var(--navy); }

/* Full-viewport hero: clear the overlaid header so centred content isn't behind it.
   Mobile values; bumped at the tablet/desktop breakpoints below. */
.has-overlay-header .hero{ padding-top:calc(56px + var(--space-3)); }

.hero__inner{
	position:relative; z-index:1;
	width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--container-pad);
	display:grid; grid-template-columns:1fr; gap:var(--space-4); align-items:center;
}
.hero__copy{ max-width:100%; }

.hero__eyebrow{ display:inline-flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-2); }
.hero__tick{ display:inline-flex; line-height:0; }
.hero__kicker{ color:var(--sky); }                 /* sky as accent on navy (CLAUDE.md §5) */

/* Mobile: a step smaller (H1 + subhead) so the whole hero fits one screen (100dvh). */
.hero__title{
	font-size:var(--fs-h1); line-height:var(--lh-h1);
	font-weight:var(--fw-bold); color:var(--white); margin:0 0 var(--space-3); max-width:26ch;
}
.hero__lead{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--white); max-width:62ch; margin:0 0 var(--space-4); }

/* Mobile: stacked, near-full-width, centred-label CTAs. */
.hero__actions{ display:flex; flex-direction:column; gap:var(--space-2); margin:0 0 var(--space-4); }
.hero__actions .btn{ width:100%; text-align:center; }

/* Proof strip (inside the copy column) — large numbers with count-up. auto-fit keeps
   each label on ONE line (min column ≥ label width) and wraps the group gracefully
   when narrow instead of breaking a label mid-phrase. */
/* Proof = KPI stat tiles — own full-width row; dark/translucent fill with a thin
   brand edge per stat, light text. Not links → gentle hover highlight only. */
.hero__proof{
	grid-column:1 / -1;
	list-style:none; margin:var(--space-7) 0 0; padding:0;
	display:grid; grid-template-columns:1fr; gap:var(--space-4);   /* stack on small screens */
}
.proof{
	display:flex; flex-direction:column; gap:var(--space-2);
	padding:var(--space-4) var(--space-5);
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.14);
	transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.proof--blue{ border-color:rgba(9,91,244,.55); }
.proof--purple{ border-color:rgba(85,70,250,.50); }
.proof--sky{ border-color:rgba(174,234,253,.45); }
.proof:hover{ background:rgba(255,255,255,.07); transform:translateY(-3px); }   /* gentle highlight (not a link) */
.proof--blue:hover{ border-color:var(--blue); }
.proof--purple:hover{ border-color:var(--purple-blue); }
.proof--sky:hover{ border-color:var(--sky); }
.proof__spark{ display:inline-flex; line-height:0; }
.proof__num{ font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:1; color:var(--white); font-variant-numeric:tabular-nums; }
.proof__label{ font-size:var(--fs-small); color:var(--sky); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .proof:hover{ transform:none; } }

/* Device — the 16-square mosaic, NO frame (its own square geometry is the edge).
   Mobile: compact accent, moved ABOVE the copy (order:-1). Squares scatter beyond
   this box (no clipping) and converge into the 4x4 grid. */
.hero__device{ order:-1; width:100%; display:flex; justify-content:center; }
.hero__squares{
	position:relative; width:100%; max-width:150px; aspect-ratio:1 / 1;
	display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
}
.hero-square{ position:relative; display:block; width:100%; height:100%; transition:transform .18s ease, box-shadow .18s ease; }

/* Enhancement (JS present): wide scatter → drift → converge, once. fill BACKWARDS so
   that after the sequence the squares revert to their settled base — which frees the
   transform for the pointer-inspect effect below. Default (no .js) = settled mosaic. */
.js .hero-square{ animation:heroSquareIn 2.4s var(--d,0s) cubic-bezier(.62,0,.2,1) backwards; }

/* Pointer inspect — the square nearest the cursor lifts and a crisp gap-ring carves it
   out of the mosaic, reading like inspecting a data point. Fine pointer only (JS-set). */
.js .hero-square.is-hot{ transform:scale(1.18) translateY(-6%); z-index:3; box-shadow:0 0 0 3px #191636; }
@keyframes heroSquareIn{
	0%   { opacity:0; transform:translate(var(--tx),var(--ty)) scale(var(--sc)); }
	14%  { opacity:1; }
	34%  { transform:translate(var(--tx),var(--ty)) scale(var(--sc)) translateY(-7px); }
	56%  { opacity:1; transform:translate(var(--tx),var(--ty)) scale(var(--sc)); }
	90%  { transform:translate(0,0) scale(1); }
	100% { opacity:1; transform:translate(0,0) scale(1); }
}

/* Text rise (JS present). Without JS the text is settled and visible. */
.js .hero__eyebrow{ animation:heroRise .6s .05s both; }
.js .hero__title{   animation:heroRise .7s .15s both; }
.js .hero__lead{    animation:heroRise .7s .28s both; }
.js .hero__actions{ animation:heroRise .7s .40s both; }
.js .hero__proof{   animation:heroRise .7s .52s both; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* Reduced motion: no drift/assemble/rise/parallax — show the finished hero at once. */
@media (prefers-reduced-motion:reduce){
	.js .hero-square,
	.js .hero__eyebrow, .js .hero__title, .js .hero__lead, .js .hero__actions, .js .hero__proof{
		animation:none !important; opacity:1 !important; transform:none !important;
	}
	.hero__squares{ transition:none !important; }
}

/* =========================================================================
   ATMOSPHERE — ONE CONTINUOUS DARK SURFACE (no seams).
   Sections are TRANSPARENT; the PAGE carries a single vertical navy gradient that
   breathes deep↔lighter across the whole scroll (peaks/troughs land mid-page, so
   every section boundary falls on a matching tone — no edge, no line). One large,
   heavily-blurred brand square per section adds depth (alternating sides).
   Light text on dark (AA+).
   ========================================================================= */
.surface-dark,
.surface-dark--deep{ position:relative; isolation:isolate; overflow:hidden; color:var(--white); }   /* transparent — the page gradient shows through */
.surface-dark > .container,
.surface-dark--deep > .container{ position:relative; z-index:1; }
.surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4,
.surface-dark--deep h1,.surface-dark--deep h2,.surface-dark--deep h3,.surface-dark--deep h4{ color:var(--white); }
.surface-dark .overline,.surface-dark--deep .overline{ color:var(--sky); }   /* sky accent on dark */
.surface-dark .link,.surface-dark--deep .link{ color:var(--sky); }
.surface-dark .link:hover,.surface-dark .link:focus,
.surface-dark--deep .link:hover,.surface-dark--deep .link:focus{ color:var(--white); }

/* ONE large heavily-blurred brand square per section — alternating sides (reference's
   big soft shapes). Square (radius 0), low-opacity, behind content; blur softens it. */
.blur-sq{
	position:absolute; top:50%; transform:translateY(-50%);
	width:min(56vw,460px); aspect-ratio:1 / 1; z-index:0; pointer-events:none;
	filter:blur(80px);
}
.blur-sq--left{ left:-12%; }
.blur-sq--right{ right:-12%; }
.blur-sq--blue{ background:rgba(9,91,244,.38); }
.blur-sq--purple{ background:rgba(85,70,250,.34); }
.blur-sq--sky{ background:rgba(174,234,253,.20); }

/* ONE continuous page surface (front page): a single vertical navy gradient that
   breathes deep↔lighter over the full scroll + a faint uniform square grid. No
   per-section backgrounds → no boundary seams. Holds deep through the (locked) hero
   region so hero→first-section matches. Uses near-black + a second-tier blue subtly. */
.has-overlay-header{
	background:
		linear-gradient(rgba(174,234,253,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(174,234,253,.045) 1px, transparent 1px),
		linear-gradient(180deg,
			#191636 0%, #191636 24%,
			#241f55 40%,
			#15122c 54%,
			#2a2560 70%,
			#191636 86%,
			#221d52 100%);
	background-size:64px 64px, 64px 64px, 100% 100%;
}

/* ---------- PAIN (problem-first; two-column: copy/cards + "vanity metrics" panel) ---------- */
.section-kicker{ display:inline-flex; line-height:0; margin-bottom:var(--space-3); }   /* reusable section kicker */
.pain__inner{ display:grid; grid-template-columns:1fr; gap:var(--space-7); align-items:start; }
.pain__head{ margin-bottom:var(--space-6); }
.pain__title{ max-width:18ch; margin:0; }
.pain__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }   /* stacked cards in the copy column */
.pain__card{
	background:rgba(255,255,255,.04); color:rgba(255,255,255,.88);
	border:1px solid rgba(255,255,255,.12); border-inline-start:4px solid var(--blue);   /* translucent navy card, blue edge */
	padding:var(--space-5);
	font-size:var(--fs-body-lg); line-height:var(--lh-body);
}
.pain__transition{ font-weight:var(--fw-semibold); font-size:var(--fs-h3); line-height:var(--lh-h3); color:var(--white); max-width:32ch; margin:var(--space-8) 0 0; }

/* "Vanity metrics, no answer" panel — transparent: bars / labels / empty result
   square sit directly on the section surface (no white box). */
.pain__visual{ width:100%; display:flex; justify-content:center; }
.pain__panel{
	position:relative; width:100%; max-width:380px; aspect-ratio:1 / 1;   /* transparent */
}

.pain__chart{ position:absolute; inset:0; width:100%; height:100%; }
.pain__chart text{ font-family:var(--font-latin); font-weight:var(--fw-medium); }
.pain-label--ask{ font-weight:var(--fw-semibold); }   /* the punchline label */

/* Entrance (JS + in view): bars grow up; the empty result-square draws its outline
   LAST and holds. Default (no .js) = final; reduced-motion = final, no animation. */
.js .pain__visual .pain-bar{ transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; }
.js .pain__visual .pain-empty{ stroke-dasharray:280; stroke-dashoffset:280; }
.js .pain__visual .pain-label{ opacity:0; }
.js .pain__visual.is-visible .pain-bar{ animation:painBar .6s var(--d,0s) cubic-bezier(.62,0,.2,1) forwards; }
.js .pain__visual.is-visible .pain-label{ animation:painLabel .4s .5s ease-out forwards; }
.js .pain__visual.is-visible .pain-empty{ animation:painDraw .75s .6s ease-out forwards; }
@keyframes painBar{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes painLabel{ from{ opacity:0; } to{ opacity:1; } }
@keyframes painDraw{ from{ stroke-dashoffset:280; } to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion:reduce){
	.js .pain__visual .pain-bar{ transform:none !important; animation:none !important; }
	.js .pain__visual .pain-empty{ stroke-dashoffset:0 !important; animation:none !important; }
	.js .pain__visual .pain-label{ opacity:1 !important; animation:none !important; }
}

/* ---------- SERVICES (image squares — reusable .al-duo; component CSS in al-components.css) ---------- */
.services__lead{ max-width:24ch; margin-bottom:var(--space-6); }
.services__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); grid-template-columns:1fr; }
.services__item{ display:block; }   /* grid cell; the .al-duo square fills it */
.services__more{ margin:var(--space-6) 0 0; }

/* ---------- DIFFERENTIATOR (two-column; square radar focused on the goal) ---------- */
.diff__inner{ display:grid; grid-template-columns:1fr; gap:var(--space-7); align-items:center; }
.diff__copy{ max-width:48ch; }
.diff__title{ max-width:18ch; }
.diff__body{ color:var(--white); margin-bottom:var(--space-6); }

.diff__visual{ width:100%; display:flex; justify-content:center; }
.diff__radar{ position:relative; width:100%; max-width:300px; aspect-ratio:1 / 1; }
.diff__grid{ display:block; width:100%; height:100%; }

/* Square chips locked to the N/E/S/W of the radar (centring on the slot via flex,
   so the chip's own transform is free for the slide-in animation). */
.diff-slot{ position:absolute; display:flex; pointer-events:none; }
.diff-slot--top{ top:1%; inset-inline:0; justify-content:center; }
.diff-slot--bottom{ bottom:1%; inset-inline:0; justify-content:center; }
.diff-slot--left{ left:1%; inset-block:0; align-items:center; }
.diff-slot--right{ right:1%; inset-block:0; align-items:center; }
.diff-chip{
	background:var(--blue); color:var(--white);
	padding:var(--space-1) var(--space-2);   /* 4 / 8 — square, no radius */
	font-size:var(--fs-small); font-weight:var(--fw-medium); line-height:1.2; white-space:nowrap;
}
.diff-chip--alt{ background:var(--purple-blue); }

/* Entrance (JS + in view): chips slide in & lock, goal scale-settles — once, then rest.
   Default (no .js) = final state shown; reduced-motion = final state, no animation. */
.js .diff__visual .diff-chip,
.js .diff__visual .diff-goal{ opacity:0; }
.js .diff__visual.is-visible .diff-slot--top .diff-chip{ animation:diffChipTop .55s .05s ease-out both; }
.js .diff__visual.is-visible .diff-slot--right .diff-chip{ animation:diffChipRight .55s .15s ease-out both; }
.js .diff__visual.is-visible .diff-slot--bottom .diff-chip{ animation:diffChipBottom .55s .25s ease-out both; }
.js .diff__visual.is-visible .diff-slot--left .diff-chip{ animation:diffChipLeft .55s .35s ease-out both; }
.js .diff__visual.is-visible .diff-goal{ animation:diffGoal .5s .45s ease-out both; transform-box:fill-box; transform-origin:center; }
@keyframes diffChipTop{ from{ opacity:0; transform:translateY(-22px); } to{ opacity:1; transform:none; } }
@keyframes diffChipBottom{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes diffChipLeft{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
@keyframes diffChipRight{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
@keyframes diffGoal{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
	.js .diff__visual .diff-chip,
	.js .diff__visual .diff-goal{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ---------- METHOD — "The Triple D O Process" (reusable .al-flow, on-dark variant) ---------- */
.method__title{ margin-bottom:var(--space-2); }
.method__sub{ color:rgba(255,255,255,.78); max-width:50ch; margin:0 0 var(--space-7); }
.method__note{ max-width:56ch; margin:var(--space-6) 0 0; color:rgba(255,255,255,.82); }
/* continuous-improvement caption beneath the flow (sky accent on dark — §5) */
.method__caption{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-small); color:var(--sky); margin:var(--space-6) 0 0; }
.method__caption-sq{ width:12px; height:12px; background:var(--sky); flex:0 0 auto; }

/* ---------- ACADEMY — three online-course pillar cards ---------- */
.academy__head{ max-width:64ch; margin:0 0 var(--space-7); }
.academy__title{ max-width:24ch; }
.academy__sub{ color:rgba(255,255,255,.80); max-width:60ch; margin:var(--space-4) 0 var(--space-5); }
.academy__link{ font-weight:var(--fw-semibold); }

.pillars{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.pillar{
	display:flex; flex-direction:column; overflow:hidden;
	background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);   /* translucent navy card */
}
.pillar--blue{ border-color:rgba(9,91,244,.50); }
.pillar--purple{ border-color:rgba(85,70,250,.45); }
.pillar--sky{ border-color:rgba(174,234,253,.42); }

/* "Course-screen" header — signals an online course. */
.pillar__screen{
	position:relative; overflow:hidden;
	display:flex; align-items:center; gap:var(--space-4);
	padding:var(--space-5); min-height:122px;
	background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.08);
}
.pillar__tile{ position:absolute; pointer-events:none; }   /* faint brand-square texture */
.pillar__tile--a{ top:-14px; right:20%; width:52px; height:52px; }
.pillar__tile--b{ bottom:-18px; right:-12px; width:66px; height:66px; }
.pillar--blue   .pillar__tile{ background:rgba(9,91,244,.10); }
.pillar--purple .pillar__tile{ background:rgba(85,70,250,.10); }
.pillar--sky    .pillar__tile{ background:rgba(174,234,253,.10); }

.pillar__play{ position:relative; z-index:1; flex:0 0 auto; display:inline-flex; line-height:0; }   /* square block + triangle */
.pillar__playtri{ fill:#FFFFFF; }
.pillar--blue   .pillar__playbg{ fill:var(--blue); }
.pillar--purple .pillar__playbg{ fill:var(--purple-blue); }
.pillar--sky    .pillar__playbg{ fill:var(--sky); }
.pillar--sky    .pillar__playtri{ fill:var(--navy); }

.pillar__lines{ position:relative; z-index:1; display:flex; flex-direction:column; gap:9px; flex:1 1 auto; }
.pillar__lines span{ display:block; height:7px; background:rgba(255,255,255,.14); }
.pillar__lines span:nth-child(1){ width:82%; }
.pillar__lines span:nth-child(2){ width:62%; }
.pillar__lines span:nth-child(3){ width:72%; }

.pillar__badge{
	position:absolute; top:var(--space-3); right:var(--space-3); z-index:2;
	padding:var(--space-1) var(--space-2);
	font-size:var(--fs-caption); font-weight:var(--fw-medium); letter-spacing:.02em;
	color:var(--sky); background:rgba(174,234,253,.12); border:1px solid rgba(174,234,253,.30);
}

/* Body */
.pillar__body{ display:flex; flex-direction:column; gap:var(--space-3); flex:1 1 auto; padding:var(--space-5); }
.pillar__name{ font-size:var(--fs-h3); color:var(--white); margin:0; }
.pillar__line{ font-size:var(--fs-small); color:rgba(255,255,255,.78); margin:0; }
.pillar__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.pillar__tag{ font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--white); padding:var(--space-1) var(--space-2); border:1px solid rgba(255,255,255,.16); }
.pillar--blue   .pillar__tag{ background:rgba(9,91,244,.14); }
.pillar--purple .pillar__tag{ background:rgba(85,70,250,.14); }
.pillar--sky    .pillar__tag{ background:rgba(174,234,253,.12); }

.pillar__modules{ margin-top:auto; padding-top:var(--space-3); display:flex; align-items:center; gap:var(--space-3); }
.pillar__seg{ display:inline-flex; gap:4px; }
.pillar__seg i{ display:block; width:16px; height:8px; }   /* "modules inside" — neutral cue, not progress */
.pillar--blue   .pillar__seg i{ background:var(--blue); }
.pillar--purple .pillar__seg i{ background:var(--purple-blue); }
.pillar--sky    .pillar__seg i{ background:var(--sky); }
.pillar__modules-label{ font-size:var(--fs-caption); color:rgba(255,255,255,.60); }

/* Motion (per card, on scroll-in): play settles, lesson lines + module segments fill once.
   Default (no .js) = finished; reduced-motion = finished, no animation. */
.js .pillar__play{ opacity:0; transform:scale(.6); }
.js .pillar__lines span{ transform:scaleX(0); transform-origin:left; }
.js .pillar__seg i{ opacity:.2; }
.js .pillar.is-visible .pillar__play{ animation:pillarPlay .5s .15s cubic-bezier(.62,0,.2,1) both; }
.js .pillar.is-visible .pillar__lines span{ animation:pillarLine .5s ease-out both; }
.js .pillar.is-visible .pillar__lines span:nth-child(1){ animation-delay:.25s; }
.js .pillar.is-visible .pillar__lines span:nth-child(2){ animation-delay:.35s; }
.js .pillar.is-visible .pillar__lines span:nth-child(3){ animation-delay:.45s; }
.js .pillar.is-visible .pillar__seg i{ animation:pillarSeg .3s ease-out both; }
.js .pillar.is-visible .pillar__seg i:nth-child(1){ animation-delay:.42s; }
.js .pillar.is-visible .pillar__seg i:nth-child(2){ animation-delay:.50s; }
.js .pillar.is-visible .pillar__seg i:nth-child(3){ animation-delay:.58s; }
.js .pillar.is-visible .pillar__seg i:nth-child(4){ animation-delay:.66s; }
.js .pillar.is-visible .pillar__seg i:nth-child(5){ animation-delay:.74s; }
.js .pillar.is-visible .pillar__seg i:nth-child(6){ animation-delay:.82s; }
@keyframes pillarPlay{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes pillarLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes pillarSeg{ from{ opacity:.2; } to{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
	.js .pillar__play{ opacity:1 !important; transform:none !important; animation:none !important; }
	.js .pillar__lines span{ transform:none !important; animation:none !important; }
	.js .pillar__seg i{ opacity:1 !important; animation:none !important; }
}

/* ---------- FINAL CTA (page payoff — bigger, deeper, with an ascending growth ramp) ---------- */
.cta{ padding-block:var(--space-9); }
.cta::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;   /* soft deep-blue pool — richness, no seam */
	background:radial-gradient(62% 72% at 50% 42%, rgba(9,91,244,.16), rgba(9,91,244,0) 70%); }
.cta__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-6); }
.cta__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-5); max-width:34rem; }
.cta__title{ color:var(--white); margin:0; }
.cta__btn{ font-size:var(--fs-body-lg); }   /* a touch larger — it's the payoff */
.cta__viz{ width:100%; max-width:300px; opacity:.92; }   /* sits beside the copy, never fights the button */
.cta__ramp{ display:block; width:100%; height:auto; overflow:visible; }
.cta-blk,.cta-tip{ transform-box:fill-box; }

/* motion: blocks rise & settle left→right; the arrow-tip lands last */
.js .cta__viz .cta-blk,
.js .cta__viz .cta-tip{ opacity:0; }
.js .cta__viz.is-visible .cta-blk--0{ animation:ctaRise .55s .10s cubic-bezier(.62,0,.2,1) both; }
.js .cta__viz.is-visible .cta-blk--1{ animation:ctaRise .55s .28s cubic-bezier(.62,0,.2,1) both; }
.js .cta__viz.is-visible .cta-blk--2{ animation:ctaRise .55s .46s cubic-bezier(.62,0,.2,1) both; }
.js .cta__viz.is-visible .cta-blk--3{ animation:ctaRise .55s .64s cubic-bezier(.62,0,.2,1) both; }
.js .cta__viz.is-visible .cta-tip{   animation:ctaTip  .50s .86s cubic-bezier(.62,0,.2,1) both; }
@keyframes ctaRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes ctaTip{ from{ opacity:0; transform:translate(-10px,10px); } to{ opacity:1; transform:translate(0,0); } }
@media (prefers-reduced-motion:reduce){
	.js .cta__viz .cta-blk,
	.js .cta__viz .cta-tip{ opacity:1 !important; animation:none !important; transform:none !important; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width:600px){
	/* Tablet hero: roomier — bigger device + full type, row CTAs (still one column, device on top). */
	.hero{ padding-block:var(--space-7); }
	.has-overlay-header .hero{ padding-top:calc(64px + var(--space-5)); }
	.hero__inner{ gap:var(--space-6); }
	.hero__eyebrow{ margin-bottom:var(--space-4); }
	.hero__title{ font-size:var(--fs-display); line-height:var(--lh-display); margin-bottom:var(--space-5); }
	.hero__lead{ font-size:var(--fs-body-lg); max-width:56ch; margin-bottom:var(--space-6); }
	.hero__actions{ flex-direction:row; gap:var(--space-4); margin-bottom:var(--space-7); }
	.hero__actions .btn{ width:auto; }
	.hero__squares{ max-width:260px; }
	.hero__proof{ grid-template-columns:repeat(2,1fr); }   /* 2x2 tiles on tablet */

	.pain__head{ margin-bottom:var(--space-7); }
	/* cards stay stacked in the copy column (panel carries the visual weight) */
	.services__grid{ grid-template-columns:repeat(2,1fr); }
	.diff__radar{ max-width:340px; }
	.cta__inner{ flex-direction:row; align-items:center; gap:var(--space-8); }
	.cta__copy{ flex:1 1 auto; }
	.cta__viz{ flex:0 0 auto; }
}

@media (min-width:1040px){
	/* Desktop hero (unchanged behaviour): two balanced columns, device back on the
	   right (order 0), wider text column so the subhead breathes and the proof sits
	   four-up on one line each. */
	.hero{ padding-block:var(--space-8); }
	.has-overlay-header .hero{ padding-top:calc(72px + var(--space-6)); }
	.hero__inner{ grid-template-columns:1fr minmax(340px, 440px); gap:var(--space-7); }
	.hero__proof{ grid-template-columns:repeat(4,1fr); }   /* 4-up KPI tiles, full-width row */
	.hero__copy{ max-width:46rem; }
	.hero__title{ max-width:20ch; margin-bottom:var(--space-5); }
	.hero__lead{ max-width:56ch; margin-bottom:var(--space-6); }
	.hero__device{ order:0; }
	.hero__squares{ max-width:440px; }

	/* Desktop: more confident section headings (h1 step — still below the hero's
	   display size; mobile stays at h2 for a compact fit). Within the locked scale. */
	.pain__title, .services__lead, .diff__title,
	.method__title, .academy__title{ font-size:var(--fs-h1); line-height:var(--lh-h1); }
	/* CTA is the payoff: largest heading on the page, roomiest section, bigger ramp. */
	.cta{ padding-block:calc(var(--space-9) + var(--space-5)); }
	.cta__title{ font-size:var(--fs-display); line-height:var(--lh-display); max-width:18ch; }
	.cta__viz{ max-width:340px; }

	.pain__card{ padding:var(--space-6); }
	/* Pain: two columns — copy + cards left, the "vanity metrics" panel right. */
	.pain__inner{ grid-template-columns:1fr minmax(320px, 420px); gap:var(--space-8); align-items:center; }
	.pain__panel{ max-width:420px; }

	/* Differentiator: two balanced columns — copy left, square radar right (mirrors in RTL). */
	.diff__inner{ grid-template-columns:1.05fr 0.95fr; gap:var(--space-8); }
	.diff__radar{ max-width:420px; }

	.services__grid{ grid-template-columns:repeat(3,1fr); }

	.pillars{ grid-template-columns:repeat(3,1fr); }   /* 3-up pillar cards on desktop */
}