/* ==========================================================================
   TRAINING.SIDDHARTHPAL.COM — Premium AI & Business Growth Training
   Part 1: Tokens, reset, background system, cursor, nav, hero, buttons
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Surfaces — carbon black → deep navy */
  --bg-0:#04060D;          /* page base */
  --bg-1:#070B16;          /* section alt */
  --bg-2:#0B1122;          /* raised */
  --glass:rgba(18,26,48,.55);
  --glass-hi:rgba(30,42,74,.55);
  /* Opaque stand-in for --glass on the ~70 cards that no longer blur their
     backdrop. Tuned to match how --glass read over the page background. */
  --card-bg:linear-gradient(160deg,rgba(21,30,54,.92),rgba(13,19,36,.94));
  --line:rgba(140,165,220,.14);
  --line-hi:rgba(150,180,255,.30);

  /* Brand */
  --blue:#2E6BFF;
  --blue-lo:#1B49C4;
  --cyan:#35E0F0;
  --violet:#8B5CF6;
  --violet-hi:#A855F7;
  --gold:#E8B44A;
  --gold-hi:#FFD98E;

  /* Text */
  --ink:#EEF2FB;
  --ink-2:#B7C2DA;
  --ink-3:#7E8CAB;
  --ink-4:#5A6885;

  /* Gradients */
  --grad-brand:linear-gradient(100deg,#35E0F0 0%,#2E6BFF 42%,#8B5CF6 100%);
  --grad-gold:linear-gradient(100deg,#FFD98E 0%,#E8B44A 55%,#C98F2E 100%);
  --grad-text:linear-gradient(96deg,#EAF3FF 0%,#7FD8FF 30%,#7E9BFF 58%,#C4A6FF 100%);

  /* Type */
  --f-display:'Sora','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;

  /* Rhythm */
  --shell:1240px;
  --gut:clamp(20px,5vw,44px);
  --sec-y:clamp(76px,10vw,140px);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

/* Conic-border angle (progressively enhanced) */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;              /* anchor jumps only; never affects wheel input */
  overflow-x:clip;
}
body{
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.68;
  font-weight:400;
  overflow-x:clip;                     /* hard guard: no horizontal scroll */
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:rgba(46,107,255,.34);color:#fff}

/* Focus — visible + premium, never removed */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* Screen-reader only */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Skip link */
.skip{
  position:fixed;top:-100px;left:16px;z-index:999;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:10px;
  font-weight:600;transition:top .25s var(--e-out);
}
.skip:focus{top:16px}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--sec-y);z-index:1}
.sec--tight{padding-block:clamp(56px,7vw,96px)}

/* Section top hairline with centre glow */
.sec--edge::before{
  content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi) 22%,rgba(53,224,240,.5) 50%,var(--line-hi) 78%,transparent);
  opacity:.6;
}

/* ---------- 4. TYPOGRAPHY ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);
  font-size:clamp(10px,1.05vw,11.5px);
  letter-spacing:.20em;text-transform:uppercase;font-weight:500;
  color:var(--cyan);margin-bottom:20px;
}
.eyebrow::before{
  content:'';width:26px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--cyan));
}
.eyebrow--gold{color:var(--gold-hi)}
.eyebrow--gold::before{background:linear-gradient(90deg,transparent,var(--gold))}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.025em}
.h-xl{font-size:clamp(2.35rem,6.4vw,4.5rem);line-height:1.03;letter-spacing:-.035em}
.h-lg{font-size:clamp(1.95rem,4.4vw,3.25rem);line-height:1.09;letter-spacing:-.03em}
.h-md{font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.18}
.h-sm{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.32;letter-spacing:-.015em}

.lede{font-size:clamp(1.02rem,1.45vw,1.18rem);color:var(--ink-2);line-height:1.72;max-width:64ch}
.muted{color:var(--ink-3)}
.sec-head{max-width:60rem;margin-bottom:clamp(44px,5.5vw,72px)}
.sec-head--mid{margin-inline:auto;text-align:center}
.sec-head--mid .eyebrow::before{display:none}
.sec-head p{margin-top:22px}
.sec-head--mid p{margin-inline:auto}

/* Gradient / emphasis text */
.g{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.g-gold{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Shimmer sweep — used sparingly on the single most important phrase */
.g-shine{
  background:linear-gradient(96deg,#EAF3FF 0%,#7FD8FF 26%,#FFFFFF 44%,#7E9BFF 62%,#C4A6FF 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shine 7s linear infinite;
}
@keyframes shine{to{background-position:-220% 0}}

/* Hand-drawn underline stroke under a keyword */
.u-stroke{position:relative;white-space:nowrap}
.u-stroke svg{
  position:absolute;left:0;right:0;bottom:-.28em;width:100%;height:.42em;
  overflow:visible;pointer-events:none;
}
.u-stroke path{
  fill:none;stroke:url(#ustroke);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  /* pathLength=1 set inline, so dash math is resolution-independent */
}

/* ---------- 5. ANIMATED BACKGROUND SYSTEM ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* 5a. Perspective grid floor */
/* PERF: the outer element owns the 3D transform + mask and never animates.
   The inner ::before owns the lines and drifts via translate3d, so the motion
   is a compositor transform instead of a full repaint of a ~9500px-wide layer
   (animating background-position repaints every frame). */
.bg__grid{
  position:absolute;inset:-20% -30% -10%;
  transform:perspective(760px) rotateX(58deg) translateZ(-90px);
  transform-origin:50% 0;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 26%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 26%,#000 0%,transparent 76%);
  overflow:hidden;
}
.bg__grid::before{
  content:'';position:absolute;
  inset:-62px 0;                /* one spare tile top and bottom = seamless loop */
  background-image:
    linear-gradient(rgba(120,160,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,255,.075) 1px,transparent 1px);
  background-size:62px 62px;
  animation:gridDrift 26s linear infinite;
  will-change:transform;
}
@keyframes gridDrift{to{transform:translate3d(0,62px,0)}}

/* 5b. Slow-drifting colour orbs */
.orb{
  position:absolute;border-radius:50%;filter:blur(78px);opacity:.42;
  will-change:transform;
}
.orb--1{width:52vw;height:52vw;max-width:640px;max-height:640px;top:-14%;left:-12%;
  background:radial-gradient(circle,#2E6BFF 0%,rgba(46,107,255,0) 68%);animation:drift1 34s var(--e-io) infinite}
.orb--2{width:46vw;height:46vw;max-width:560px;max-height:560px;top:24%;right:-14%;
  background:radial-gradient(circle,#8B5CF6 0%,rgba(139,92,246,0) 68%);animation:drift2 40s var(--e-io) infinite}
.orb--3{width:40vw;height:40vw;max-width:480px;max-height:480px;bottom:-8%;left:26%;
  background:radial-gradient(circle,#35E0F0 0%,rgba(53,224,240,0) 70%);opacity:.26;animation:drift3 46s var(--e-io) infinite}
@keyframes drift1{50%{transform:translate3d(11vw,7vh,0) scale(1.16)}}
@keyframes drift2{50%{transform:translate3d(-9vw,-9vh,0) scale(1.1)}}
@keyframes drift3{50%{transform:translate3d(6vw,-6vh,0) scale(1.2)}}

/* 5c. AI network canvas (nodes + links) */
.bg__net{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

/* 5d. Light beams */
.beam{
  position:absolute;top:-30%;width:1px;height:160%;
  background:linear-gradient(180deg,transparent,rgba(53,224,240,.42),transparent);
  filter:blur(.6px);opacity:0;animation:beam 11s var(--e-io) infinite;
}
.beam--a{left:18%;animation-delay:0s}
.beam--b{left:52%;animation-delay:3.8s;background:linear-gradient(180deg,transparent,rgba(139,92,246,.4),transparent)}
.beam--c{left:81%;animation-delay:7.2s;background:linear-gradient(180deg,transparent,rgba(232,180,74,.3),transparent)}
@keyframes beam{0%{opacity:0;transform:translateY(-24%)}18%,42%{opacity:1}100%{opacity:0;transform:translateY(24%)}}

/* 5e. Film grain / noise texture */
/* PERF: no mix-blend-mode. A full-viewport `overlay` layer forces everything
   behind it into a blend group, which the compositor must re-resolve on every
   frame. Plain low opacity reads the same over this dark palette. */
.bg__noise{
  position:absolute;inset:-160px;opacity:.035;
  will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}      20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}       60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,4%)}
}

/* 5f. Vignette to seat content */
.bg__vig{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 96% 72% at 50% 0%,transparent 34%,rgba(4,6,13,.72) 100%);
}

/* ---------- 6. CUSTOM CURSOR (fine pointers only) ---------- */
.cur,.cur-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;opacity:0;
  transform:translate3d(-50%,-50%,0);will-change:transform;
}
.cur{width:6px;height:6px;background:var(--cyan);box-shadow:0 0 12px rgba(53,224,240,.9)}
.cur-ring{
  width:38px;height:38px;border:1px solid rgba(160,190,255,.55);
  transition:width .3s var(--e-out),height .3s var(--e-out),
             border-color .3s var(--e-out),background-color .3s var(--e-out);
}
.cur-ring.is-hot{
  width:66px;height:66px;
  border-color:rgba(53,224,240,.9);
  background:rgba(53,224,240,.09);
}
@media (pointer:fine) and (min-width:900px){
  html.cursor-on,html.cursor-on *{cursor:none !important}
}

/* ---------- 7. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 30px;border-radius:100px;border:0;
  font-family:var(--f-display);font-size:.96rem;font-weight:600;letter-spacing:-.008em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn__ico{width:17px;height:17px;flex:none;transition:transform .42s var(--e-out)}
.btn:hover .btn__ico{transform:translateX(5px)}

/* Primary — brand gradient, glow, shimmer sweep on hover */
.btn--pri{
  color:#fff;
  background:linear-gradient(100deg,var(--blue-lo),var(--blue) 46%,var(--violet));
  box-shadow:0 10px 30px -10px rgba(46,107,255,.72),
             inset 0 1px 0 rgba(255,255,255,.26);
}
.btn--pri::after{                    /* sweep */
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-120%);
}
.btn--pri:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px -12px rgba(46,107,255,.9),
             0 0 0 1px rgba(140,180,255,.32),
             inset 0 1px 0 rgba(255,255,255,.32);
}
.btn--pri:hover::after{transform:translateX(120%);transition:transform .78s var(--e-out)}

/* Secondary — glass with gradient hairline */
.btn--sec{
  color:var(--ink);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-hi);
}
.btn--sec:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.085);
  border-color:rgba(53,224,240,.5);
  box-shadow:0 14px 34px -14px rgba(53,224,240,.6);
}

/* Gold — reserved for the single highest-intent CTA */
.btn--gold{
  color:#1A1204;
  background:var(--grad-gold);
  box-shadow:0 10px 30px -10px rgba(232,180,74,.62),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(232,180,74,.85)}

/* WhatsApp */
.btn--wa{color:#04160C;background:linear-gradient(100deg,#4BD97F,#20BA5A);
  box-shadow:0 10px 30px -12px rgba(37,211,102,.66),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 18px 42px -14px rgba(37,211,102,.85)}

.btn--full{width:100%}
.btn--lg{padding:19px 38px;font-size:1.02rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none !important;filter:saturate(.6)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- 8. NAV + ANNOUNCEMENT ---------- */
.ann{
  position:relative;z-index:60;
  background:linear-gradient(90deg,rgba(46,107,255,.16),rgba(139,92,246,.16),rgba(53,224,240,.14));
  border-bottom:1px solid var(--line);
  font-size:.82rem;color:var(--ink-2);
  text-align:center;padding:10px var(--gut);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ann b{color:var(--ink);font-weight:600}
.ann__dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);
  margin-right:9px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(53,224,240,.7);animation:pulse 2.4s var(--e-io) infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(53,224,240,0)}100%{box-shadow:0 0 0 0 rgba(53,224,240,0)}}

.nav{position:sticky;top:0;z-index:70;transition:background .4s var(--e-out),border-color .4s var(--e-out),box-shadow .4s var(--e-out);border-bottom:1px solid transparent}
.nav.is-stuck{
  background:rgba(5,8,17,.82);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);
  box-shadow:0 12px 40px -22px rgba(0,0,0,.9);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mk{
  width:38px;height:38px;border-radius:11px;flex:none;position:relative;
  background:linear-gradient(140deg,var(--blue),var(--violet));
  display:grid;place-items:center;
  box-shadow:0 6px 20px -8px rgba(46,107,255,.8),inset 0 1px 0 rgba(255,255,255,.28);
}
.brand__mk span{font-family:var(--f-display);font-weight:700;font-size:1rem;color:#fff}
.brand__tx{display:flex;flex-direction:column;line-height:1.16}
.brand__tx b{font-family:var(--f-display);font-size:1rem;font-weight:600;letter-spacing:-.02em}
.brand__tx i{font-style:normal;font-size:.66rem;color:var(--ink-3);letter-spacing:.13em;text-transform:uppercase;font-family:var(--f-mono)}

.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{
  position:relative;font-size:.9rem;color:var(--ink-2);font-weight:500;
  transition:color .28s var(--e-out);padding-block:6px;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--e-out);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:flex;align-items:center;gap:12px}
.nav__cta .btn{padding:12px 22px;font-size:.86rem}

/* Mobile menu */
.burger{
  display:none;width:44px;height:44px;border-radius:12px;flex:none;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:13px;width:18px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .38s var(--e-out),opacity .24s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:65;
  background:rgba(4,6,13,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:88px var(--gut) 40px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .42s var(--e-out),transform .42s var(--e-out),visibility .42s;
  overflow-y:auto;
}
.mnav.is-open{opacity:1;visibility:visible;transform:none}
.mnav a{
  font-family:var(--f-display);font-size:clamp(1.4rem,6vw,1.9rem);font-weight:600;
  padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);
  letter-spacing:-.02em;
}
.mnav a:last-of-type{border-bottom:0}
.mnav .btn{margin-top:26px}

/* ---------- 9. HERO ---------- */
.hero{position:relative;z-index:1;padding-block:clamp(56px,8vw,104px) clamp(72px,9vw,120px);overflow:visible}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(40px,5vw,72px);align-items:center;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 10px;border-radius:100px;margin-bottom:26px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-hi);
  font-size:.78rem;color:var(--ink-2);font-weight:500;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero__badge b{
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;
  padding:4px 9px;border-radius:100px;color:#04101F;background:var(--grad-brand);
}
.hero h1{margin-bottom:26px}
.hero__sub{max-width:56ch;margin-bottom:14px}
.hero__sub2{max-width:56ch;color:var(--ink-3);font-size:.98rem;margin-bottom:34px}
.hero__micro{margin-top:26px;font-size:.86rem;color:var(--ink-3);max-width:50ch}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;
}
.hero__trust span{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 13px;border-radius:100px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}

/* 9a. Hero 3D stage — the "AI core" */
.stage-scroll{position:relative;width:100%;min-width:0}
.stage{
  position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto;
  perspective:1200px;transform-style:preserve-3d;
}
/* Pointer-parallax layer. Matches .stage's box so the HUD cards keep their
   original percentage offsets. */
.hud-layer{position:absolute;inset:0;pointer-events:none}
.hud{pointer-events:auto}
.core{
  position:absolute;inset:0;display:grid;place-items:center;
  transform-style:preserve-3d;will-change:transform;
}
/* Rotating rings — hollow. A radial mask keeps only the outer 1.6px band,
   so the conic gradient reads as a glowing ring, not a filled disc. */
.ring{
  position:absolute;border-radius:50%;transform-style:preserve-3d;
  background:conic-gradient(from var(--ang),
    transparent 0deg,var(--cyan) 60deg,var(--blue) 130deg,var(--violet) 200deg,transparent 300deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 calc(100% - 1.6px));
  animation:angSpin 7s linear infinite;
  filter:drop-shadow(0 0 6px rgba(53,224,240,.35));
}
/* Fallback for engines without conic-gradient or mask support */
@supports not ((background:conic-gradient(from 0deg,red,blue)) and (mask:radial-gradient(#000,#000))){
  .ring{background:none;border:1px solid var(--line-hi);-webkit-mask:none;mask:none;filter:none}
}
@keyframes angSpin{to{--ang:360deg}}
.ring--1{width:88%;height:88%;transform:rotateX(74deg) rotateZ(0deg);animation-duration:9s}
.ring--2{width:68%;height:68%;transform:rotateX(74deg) rotateY(58deg);animation-duration:13s;animation-direction:reverse}
.ring--3{width:100%;height:100%;transform:rotateX(18deg) rotateY(-24deg);animation-duration:17s;opacity:.7}

/* Glass cube at centre.
   NOTE: translateZ() does NOT accept percentages — the cube needs a real
   length, so --cs drives both the size and the half-depth of each face. */
.cube{
  --cs:clamp(74px,13vw,118px);
  position:relative;width:var(--cs);height:var(--cs);
  transform-style:preserve-3d;animation:cubeSpin 20s linear infinite;
}
@keyframes cubeSpin{to{transform:rotateX(360deg) rotateY(720deg)}}
.cube__f{
  position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(46,107,255,.30),rgba(139,92,246,.16));
  border:1px solid rgba(150,190,255,.42);
  /* PERF: no backdrop-filter — inside a preserve-3d transform it is both
     expensive and visually indistinguishable from the flat tint. */
  box-shadow:inset 0 0 30px rgba(53,224,240,.24);
  border-radius:8px;
}
/* Each face pushed out by half the cube size */
.cube__f:nth-child(1){transform:translateZ(calc(var(--cs)/2))}
.cube__f:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--cs)/2))}
.cube__f:nth-child(3){transform:rotateY(90deg)  translateZ(calc(var(--cs)/2))}
.cube__f:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--cs)/2))}
.cube__f:nth-child(5){transform:rotateX(90deg)  translateZ(calc(var(--cs)/2))}
.cube__f:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--cs)/2))}

/* Core glow */
.core__glow{
  position:absolute;width:46%;height:46%;border-radius:50%;
  background:radial-gradient(circle,rgba(53,224,240,.55),transparent 68%);
  filter:blur(26px);animation:corePulse 4.4s var(--e-io) infinite;
}
@keyframes corePulse{50%{transform:scale(1.28);opacity:.72}}

/* Orbiting dots */
.orbit{position:absolute;inset:0;transform-style:preserve-3d;animation:orbSpin 14s linear infinite}
.orbit--b{animation-duration:19s;animation-direction:reverse;transform:rotateY(62deg)}
@keyframes orbSpin{to{transform:rotateZ(360deg)}}
.orbit--b{animation-name:orbSpinB}
@keyframes orbSpinB{from{transform:rotateY(62deg) rotateZ(0)}to{transform:rotateY(62deg) rotateZ(-360deg)}}
.dot{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px rgba(53,224,240,.95);
  top:50%;left:50%;margin:-4.5px 0 0 -4.5px;
}
.dot--v{background:var(--violet-hi);box-shadow:0 0 14px rgba(168,85,247,.95)}
.dot--g{background:var(--gold-hi);box-shadow:0 0 14px rgba(232,180,74,.95)}

/* Floating glass HUD cards around the core */
.hud{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:14px;
  background:var(--glass);border:1px solid var(--line-hi);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1);
  white-space:nowrap;will-change:transform;
}
.hud__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:rgba(53,224,240,.13);border:1px solid rgba(53,224,240,.3)}
.hud__ic svg{width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hud b{display:block;font-family:var(--f-display);font-size:.8rem;font-weight:600;line-height:1.3}
.hud i{font-style:normal;font-size:.68rem;color:var(--ink-3);font-family:var(--f-mono);letter-spacing:.04em}
.hud--1{top:6%;left:-6%}
.hud--2{bottom:16%;right:-8%}
.hud--3{bottom:2%;left:4%}
.hud--2 .hud__ic{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.32)}
.hud--2 .hud__ic svg{stroke:var(--violet-hi)}
.hud--3 .hud__ic{background:rgba(232,180,74,.13);border-color:rgba(232,180,74,.3)}
.hud--3 .hud__ic svg{stroke:var(--gold-hi)}

/* 9b. Animated curved guide arrow */
.guide{position:absolute;pointer-events:none;z-index:2;overflow:visible}
.guide path{
  fill:none;stroke:url(#guideG);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:6 7;animation:dash 1.4s linear infinite;opacity:.75;
}
@keyframes dash{to{stroke-dashoffset:-13}}
.guide__head{fill:var(--cyan);opacity:.9}
.guide--hero{left:6%;top:100%;width:190px;height:90px;margin-top:-6px}
@media (max-width:1024px){.guide--hero{display:none}}

/* ==========================================================================
   Part 2: Cards, sections, marquee, form, footer, responsive, motion-safety
   ========================================================================== */

/* ---------- 10. GLASS CARD SYSTEM ---------- */
.card{
  position:relative;padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);
  /* PERF: no backdrop-filter here. There are ~70 cards on this page and each
     blurred backdrop is re-sampled by the compositor while scrolling, which
     cost ~2x frame time on Retina displays. The card sits on a near-opaque
     dark background, so a solid tint is visually equivalent and free.
     backdrop-filter is reserved for the few places it actually reads:
     nav, mobile menu, hero badge, HUD cards, portrait caption, form panel. */
  background:var(--card-bg);
  border:1px solid var(--line);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .5s var(--e-out),border-color .5s var(--e-out),box-shadow .5s var(--e-out);
  overflow:hidden;height:100%;
  contain:layout paint;         /* isolate each card's paint from the rest */
}
/* Cursor-tracked spotlight (--mx/--my written by JS) */
.card::before{
  content:'';position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(90,150,255,.13),transparent 62%);
  transition:opacity .45s var(--e-out);
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line-hi);
  box-shadow:0 34px 70px -34px rgba(0,0,0,1),0 0 0 1px rgba(120,160,255,.1);
}
.card:hover::before{opacity:1}

/* Conic animated border — reserved for high-priority cards */
.card--lit{border-color:transparent;background:
  linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
  conic-gradient(from var(--ang),rgba(53,224,240,.6),rgba(46,107,255,.5) 90deg,rgba(139,92,246,.6) 180deg,rgba(53,224,240,.2) 270deg,rgba(53,224,240,.6)) border-box;
  animation:angSpin 9s linear infinite;
}
@supports not (background:conic-gradient(from 0deg,red,blue)){
  .card--lit{background:var(--glass);border-color:var(--line-hi)}
}
.card--gold{border-color:rgba(232,180,74,.28);background:linear-gradient(160deg,rgba(238,186,84,.10),rgba(16,23,42,.95) 58%)}

/* Card internals */
.card__n{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;color:var(--ink-4);
  display:block;margin-bottom:16px;
}
.card h3{margin-bottom:12px}
.card p{color:var(--ink-2);font-size:.94rem;line-height:1.7}

/* Icon tile — animated on hover */
.ic{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(150deg,rgba(46,107,255,.2),rgba(139,92,246,.11));
  border:1px solid rgba(120,160,255,.26);flex:none;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.ic svg{width:23px;height:23px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.06);box-shadow:0 12px 28px -12px rgba(53,224,240,.6)}
/* Stroke draw-on for icons entering the viewport */
.ic svg path,.ic svg circle,.ic svg rect,.ic svg line,.ic svg polyline{
  stroke-dasharray:var(--len,90);stroke-dashoffset:0;
}
html[data-anim] .ic svg path,html[data-anim] .ic svg circle,
html[data-anim] .ic svg rect,html[data-anim] .ic svg line,
html[data-anim] .ic svg polyline{stroke-dashoffset:var(--len,90)}
/* NOTE: must out-specify the html[data-anim] hidden rule above, otherwise the
   icons stay permanently undrawn. Keep the html[data-anim] prefix here. */
html[data-anim] .ic.is-drawn svg path,html[data-anim] .ic.is-drawn svg circle,
html[data-anim] .ic.is-drawn svg rect,html[data-anim] .ic.is-drawn svg line,
html[data-anim] .ic.is-drawn svg polyline,
.ic.is-drawn svg path,.ic.is-drawn svg circle,.ic.is-drawn svg rect,
.ic.is-drawn svg line,.ic.is-drawn svg polyline{
  stroke-dashoffset:0;transition:stroke-dashoffset 1.05s var(--e-out);
}

/* ---------- 11. GRIDS ---------- */
.grid{display:grid;gap:clamp(16px,1.9vw,24px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span-2{grid-column:span 2}

/* ---------- 12. RECOGNITION MARQUEE ---------- */
.mq{position:relative;overflow:hidden;padding-block:26px;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq__track{display:flex;gap:clamp(34px,5vw,68px);width:max-content;animation:mqRun 34s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
@keyframes mqRun{to{transform:translateX(-50%)}}
.mq__i{
  font-family:var(--f-display);font-size:clamp(1rem,1.8vw,1.32rem);font-weight:600;
  color:var(--ink-4);letter-spacing:-.02em;white-space:nowrap;
  transition:color .4s var(--e-out),opacity .4s var(--e-out);opacity:.7;
}
.mq__i:hover{color:var(--ink);opacity:1}
.mq__note{text-align:center;font-size:.78rem;color:var(--ink-4);max-width:62ch;margin:14px auto 0;line-height:1.6}

/* ---------- 13. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--bg-1);padding:clamp(22px,2.6vw,32px);text-align:center;
  transition:background .45s var(--e-out)}
.stat:hover{background:var(--bg-2)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(1.9rem,4vw,2.9rem);
  font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:9px}
.stat > span{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.5}

/* ---------- 14. PROBLEM / FAILURE LIST ---------- */
.fail{display:grid;gap:12px}
.fail li{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  padding:15px 18px;border-radius:var(--r-sm);
  background:rgba(255,90,90,.045);border:1px solid rgba(255,110,110,.15);
  font-size:.94rem;color:var(--ink-2);
  transition:transform .4s var(--e-out),border-color .4s var(--e-out),background .4s var(--e-out);
}
.fail li:hover{transform:translateX(5px);border-color:rgba(255,110,110,.34);background:rgba(255,90,90,.075)}
.fail li::before{
  content:'';flex:none;width:16px;height:16px;margin-top:4px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,110,110,.9) 32%,transparent 34%);
  border:1px solid rgba(255,110,110,.42);
}
/* Positive variant */
.win li{background:rgba(53,224,240,.05);border-color:rgba(53,224,240,.17)}
.win li:hover{border-color:rgba(53,224,240,.4);background:rgba(53,224,240,.085)}
.win li::before{background:radial-gradient(circle,rgba(53,224,240,.95) 32%,transparent 34%);border-color:rgba(53,224,240,.45)}

/* Pull-quote / highlight statement */
.quote{
  position:relative;padding:clamp(28px,3.4vw,44px);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(46,107,255,.09),rgba(139,92,246,.055));
  border:1px solid var(--line-hi);overflow:hidden;
}
.quote::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-brand);
}
.quote p{font-family:var(--f-display);font-size:clamp(1.12rem,2.1vw,1.5rem);
  font-weight:500;line-height:1.44;letter-spacing:-.02em;color:var(--ink)}

/* ---------- 15. PROGRAMME CARDS ---------- */
.prog{display:flex;flex-direction:column;gap:0}
.prog__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.prog__tag{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;padding:6px 11px;border-radius:100px;
  background:rgba(53,224,240,.1);border:1px solid rgba(53,224,240,.26);color:var(--cyan);flex:none;
}
.prog__promise{color:var(--ink-2);font-size:.95rem;margin-bottom:22px}
.prog__list{display:grid;gap:9px;margin-bottom:22px}
.prog__list li{
  position:relative;padding-left:22px;font-size:.88rem;color:var(--ink-3);line-height:1.6;
}
.prog__list li::before{
  content:'';position:absolute;left:0;top:.62em;width:8px;height:1.5px;border-radius:2px;
  background:var(--grad-brand);
}
.prog__foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.prog__meta b{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.prog__meta span{font-size:.86rem;color:var(--ink-2);line-height:1.55}
.prog__out{
  padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(232,180,74,.07);border:1px solid rgba(232,180,74,.2);
}
.prog__out b{color:var(--gold-hi)}
.prog__out span{color:var(--ink-2)}

/* Collapsible topic list on mobile */
.prog__more{display:none}

/* ---------- 16. KEYNOTE LIST ---------- */
.key{display:grid;gap:0;border-top:1px solid var(--line)}
.key__i{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,34px);align-items:center;
  padding:clamp(20px,2.6vw,30px) clamp(6px,1.4vw,18px);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  transition:padding-inline .5s var(--e-out);
}
.key__i::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(90deg,rgba(46,107,255,.11),transparent 62%);
  transition:opacity .5s var(--e-out);
}
.key__i:hover::before{opacity:1}
.key__i:hover{padding-inline:clamp(14px,2.2vw,30px) clamp(6px,1.4vw,18px)}
.key__n{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-4);letter-spacing:.1em}
/* Both are <span>s inside a <span> — they MUST be block or the title and
   description run together on one line. */
.key__t{display:block;font-family:var(--f-display);font-size:clamp(1.02rem,1.9vw,1.34rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.3;margin-bottom:6px}
.key__d{display:block;font-size:.87rem;color:var(--ink-3);line-height:1.6;max-width:70ch}
.key__ar{width:20px;height:20px;stroke:var(--ink-4);fill:none;stroke-width:1.6;flex:none;
  transition:transform .45s var(--e-out),stroke .45s var(--e-out)}
.key__i:hover .key__ar{transform:translateX(6px);stroke:var(--cyan)}

/* ---------- 17. FORMATS ---------- */
.fmt__dur{
  font-family:var(--f-display);font-size:clamp(1.5rem,2.8vw,2.05rem);font-weight:700;
  letter-spacing:-.035em;line-height:1;margin-bottom:6px;
}
.fmt__unit{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);display:block;margin-bottom:20px}
.fmt__row{padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.fmt__row b{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.fmt__row span{font-size:.86rem;color:var(--ink-2);line-height:1.6}

/* ---------- 18. PROCESS / STEPS RAIL ---------- */
.rail{position:relative;display:grid;gap:0}
.rail::before{
  content:'';position:absolute;left:23px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-hi) 8%,var(--line-hi) 92%,transparent);
}
/* JS-driven scroll progress line */
.rail__prog{
  position:absolute;left:23px;top:14px;width:1px;height:0;
  background:linear-gradient(180deg,var(--cyan),var(--blue),var(--violet));
  box-shadow:0 0 12px rgba(53,224,240,.75);z-index:1;
}
.step{display:grid;grid-template-columns:48px 1fr;gap:clamp(18px,2.4vw,30px);
  padding-block:clamp(18px,2.2vw,26px);position:relative;z-index:2}
.step__b{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--bg-2);border:1px solid var(--line-hi);
  font-family:var(--f-mono);font-size:.82rem;font-weight:600;color:var(--ink-3);
  transition:border-color .5s var(--e-out),color .5s var(--e-out),box-shadow .5s var(--e-out),background .5s var(--e-out);
}
.step.is-on .step__b{
  border-color:rgba(53,224,240,.6);color:var(--cyan);background:rgba(53,224,240,.09);
  box-shadow:0 0 22px -6px rgba(53,224,240,.7);
}
.step h3{font-size:clamp(1.02rem,1.7vw,1.2rem);margin-bottom:8px}
.step p{color:var(--ink-3);font-size:.92rem;max-width:62ch}

/* ---------- 19. C.L.E.A.R. FRAMEWORK ---------- */
.clear{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cl{
  position:relative;padding:clamp(20px,2.2vw,26px);border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);overflow:hidden;
  transition:transform .5s var(--e-out),border-color .5s var(--e-out);
}
.cl:hover{transform:translateY(-6px);border-color:var(--line-hi)}
.cl__l{
  font-family:var(--f-display);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;
  line-height:1;letter-spacing:-.05em;margin-bottom:14px;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.cl h3{font-size:.98rem;margin-bottom:9px}
.cl p{font-size:.85rem;color:var(--ink-3);line-height:1.6}

/* ---------- 20. ABOUT ---------- */
.about{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(34px,4.5vw,64px);align-items:start}
.pfp{
  position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(160deg,var(--bg-2),#0A0F1E);
  border:1px solid var(--line-hi);
  box-shadow:0 40px 90px -46px rgba(0,0,0,1);
}
.pfp img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* Placeholder shown until a real photo is dropped in */
.pfp__ph{
  position:absolute;inset:0;display:grid;place-items:center;gap:10px;
  text-align:center;padding:26px;color:var(--ink-4);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;line-height:1.8;
}
.pfp__ring{
  position:absolute;inset:-1px;border-radius:var(--r-xl);pointer-events:none;
  background:conic-gradient(from var(--ang),transparent,rgba(53,224,240,.55) 70deg,transparent 140deg);
  animation:angSpin 8s linear infinite;
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;
}
.pfp__cap{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  padding:14px 16px;border-radius:var(--r-md);
  background:rgba(6,10,20,.76);border:1px solid var(--line-hi);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.pfp__cap b{display:block;font-family:var(--f-display);font-size:1rem;font-weight:600}
.pfp__cap span{font-size:.78rem;color:var(--ink-3)}

.creds{display:grid;gap:10px;margin-top:26px}
.creds li{
  display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);
  padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.028);border:1px solid var(--line);
  transition:border-color .4s var(--e-out),transform .4s var(--e-out);
}
.creds li:hover{border-color:var(--line-hi);transform:translateX(4px)}
.creds svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 21. FIT / NOT-FIT SPLIT ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.split__h{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.split__h b{font-family:var(--f-display);font-size:1.06rem;font-weight:600}
.split__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.split__ic--y{background:rgba(53,224,240,.13);border:1px solid rgba(53,224,240,.32)}
.split__ic--n{background:rgba(255,110,110,.1);border:1px solid rgba(255,110,110,.28)}
.split__ic svg{width:16px;height:16px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.split__ic--y svg{stroke:var(--cyan)}
.split__ic--n svg{stroke:#FF8A8A}

/* ---------- 22. FAQ ---------- */
.faq{display:grid;gap:12px;max-width:56rem;margin-inline:auto}
.qa{border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass);overflow:hidden;
  transition:border-color .45s var(--e-out),background .45s var(--e-out)}
.qa[open]{border-color:var(--line-hi);background:var(--bg-2)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;
  padding:clamp(17px,2vw,22px) clamp(18px,2.2vw,26px);
  font-family:var(--f-display);font-size:clamp(.96rem,1.5vw,1.06rem);font-weight:600;
  letter-spacing:-.015em;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:'';flex:none;width:11px;height:11px;
  border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .42s var(--e-out),border-color .42s;
}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--cyan)}
.qa__b{padding:0 clamp(18px,2.2vw,26px) clamp(20px,2.2vw,26px);color:var(--ink-2);font-size:.93rem;line-height:1.72}
.qa__b ul{display:grid;gap:6px;margin-top:10px}
.qa__b li{padding-left:18px;position:relative;font-size:.9rem;color:var(--ink-3)}
.qa__b li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--grad-brand);border-radius:2px}

/* ---------- 23. FORM ---------- */
.form-wrap{
  position:relative;padding:clamp(24px,3.4vw,46px);border-radius:var(--r-xl);
  background:linear-gradient(165deg,rgba(16,24,46,.94),rgba(8,12,24,.97));
  border:1px solid var(--line);
  box-shadow:0 50px 110px -50px rgba(0,0,0,1);
}
/* Rotating conic frame on the money section.
   NOTE: do NOT use z-index:-1 here. backdrop-filter (applied to .form-wrap on
   mobile) makes this element a stacking context, which would paint a -1 child
   ON TOP of its own background and flood the card with the gradient.
   Masking to a 1px ring is stacking-context-proof. */
.form-wrap::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(53,224,240,.75),rgba(46,107,255,.35) 90deg,rgba(139,92,246,.75) 180deg,rgba(232,180,74,.45) 260deg,rgba(53,224,240,.75));
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:angSpin 11s linear infinite;
}
@supports not ((background:conic-gradient(from 0deg,red,blue)) and (mask-composite:exclude)){
  .form-wrap{border-color:var(--line-hi)}
  .form-wrap::before{display:none}
}

.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;
}
.field label .req{color:var(--cyan);margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  color:var(--ink);font-size:.93rem;font-family:var(--f-body);
  transition:border-color .32s var(--e-out),background .32s var(--e-out),box-shadow .32s var(--e-out);
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:104px;line-height:1.62}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(53,224,240,.62);background:rgba(53,224,240,.045);
  box-shadow:0 0 0 3px rgba(53,224,240,.11);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
/* Native select arrow */
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237E8CAB' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;cursor:pointer;
}
.field select option{background:#0B1122;color:var(--ink)}
/* Invalid state only after a submit attempt */
.form.was-tried .field input:invalid,
.form.was-tried .field select:invalid,
.form.was-tried .field textarea:invalid{border-color:rgba(255,110,110,.6);background:rgba(255,110,110,.05)}
.err{font-size:.76rem;color:#FF9A9A;min-height:0}

/* Honeypot — hidden from humans, visible to naive bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}

/* Math challenge */
.chal{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:16px 18px;border-radius:var(--r-md);
  background:rgba(53,224,240,.05);border:1px solid rgba(53,224,240,.2);
}
.chal__q{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:1.02rem;font-weight:600;color:var(--ink);
  letter-spacing:.02em;user-select:none;
}
.chal__q b{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-size:1.18rem;
}
.chal input{max-width:110px;text-align:center;font-family:var(--f-mono);font-weight:600}
.chal__re{
  background:none;border:0;cursor:pointer;color:var(--ink-3);padding:7px;border-radius:8px;
  display:grid;place-items:center;transition:color .3s,transform .5s var(--e-out),background .3s;
}
.chal__re:hover{color:var(--cyan);background:rgba(53,224,240,.09);transform:rotate(-180deg)}
.chal__re svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chal__ok{font-size:.78rem;color:var(--ink-3);margin-left:auto}
.chal.is-bad{border-color:rgba(255,110,110,.5);background:rgba(255,110,110,.06);animation:shake .42s var(--e-io)}
.chal.is-good{border-color:rgba(70,220,140,.5);background:rgba(70,220,140,.06)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* Form status messages */
.fstat{display:none;padding:16px 18px;border-radius:var(--r-md);font-size:.9rem;line-height:1.62;margin-top:18px}
.fstat.is-on{display:block;animation:fadeUp .5s var(--e-out) both}
.fstat--ok{background:rgba(70,220,140,.09);border:1px solid rgba(70,220,140,.34);color:#9CF3C4}
.fstat--no{background:rgba(255,110,110,.09);border:1px solid rgba(255,110,110,.34);color:#FFB4B4}
.fstat b{display:block;font-family:var(--f-display);font-size:1rem;margin-bottom:5px;color:inherit}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}

/* Success takeover panel */
.done{
  display:none;text-align:center;padding:clamp(34px,5vw,60px) clamp(20px,3vw,40px);
}
.done.is-on{display:block;animation:fadeUp .6s var(--e-out) both}
.done__ic{
  width:74px;height:74px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(70,220,140,.22),transparent 68%);
  border:1px solid rgba(70,220,140,.45);
}
.done__ic svg{width:32px;height:32px;stroke:#5BE49B;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:tick .7s var(--e-out) .22s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.privacy{font-size:.78rem;color:var(--ink-4);text-align:center;margin-top:16px;line-height:1.6}

/* ---------- 24. CONTACT CARDS ---------- */
.cx{display:grid;gap:12px}
.cx__i{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.03);border:1px solid var(--line)}
.cx__i b{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.cx__i span{font-size:.9rem;color:var(--ink-2);line-height:1.55;word-break:break-word}
.cx__i svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 25. FINAL CTA ---------- */
.fcta{
  position:relative;text-align:center;padding:clamp(44px,6vw,82px) clamp(22px,4vw,60px);
  border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(ellipse 76% 130% at 50% 110%,rgba(46,107,255,.28),transparent 62%),
    linear-gradient(165deg,rgba(14,22,44,.92),rgba(6,10,20,.96));
  border:1px solid var(--line-hi);
  box-shadow:0 50px 110px -54px rgba(0,0,0,1);
}
.fcta .btn-row{justify-content:center}
.fcta__glow{
  position:absolute;left:50%;bottom:-52%;width:min(760px,120%);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(53,224,240,.19),transparent 62%);
  animation:corePulse 6.5s var(--e-io) infinite;
}

/* ---------- 26. FOOTER ---------- */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(6,10,20,.7));padding-block:clamp(48px,6vw,76px) 34px}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(30px,4vw,58px);padding-bottom:38px;border-bottom:1px solid var(--line)}
.foot__desc{color:var(--ink-3);font-size:.9rem;max-width:42ch;margin-top:18px;line-height:1.7}
.foot h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:18px;font-weight:500}
.foot__ls{display:grid;gap:11px}
.foot__ls a{font-size:.89rem;color:var(--ink-2);transition:color .3s var(--e-out),transform .3s var(--e-out);
  display:inline-block}
.foot__ls a:hover{color:var(--cyan);transform:translateX(4px)}
.foot__bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding-top:26px;font-size:.8rem;color:var(--ink-4)}

/* ---------- 27. SCROLL-REVEAL BASE STATE ----------
   Hidden state is applied ONLY when JS confirms the motion layer is live
   (html[data-anim]). If GSAP/JS fails, every element stays visible. */
html[data-anim] .rv{opacity:0;transform:translateY(30px)}
html[data-anim] .rv-l{opacity:0;transform:translateX(-30px)}
html[data-anim] .rv-r{opacity:0;transform:translateX(30px)}
html[data-anim] .rv-s{opacity:0;transform:scale(.94)}

/* No-JS / CDN-failure fallback: force everything visible */
.no-anim .rv,.no-anim .rv-l,.no-anim .rv-r,.no-anim .rv-s{
  opacity:1 !important;transform:none !important;
}

/* Scroll progress bar */
.prog-bar{
  position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad-brand);z-index:80;box-shadow:0 0 12px rgba(53,224,240,.65);
}

/* ---------- 28. RESPONSIVE ---------- */
@media (max-width:1080px){
  /* minmax(0,1fr) — a bare 1fr floors at min-content and lets the column
     (and the 3D stage inside it) push wider than the viewport. */
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(48px,7vw,68px)}
  .stage-scroll{order:-1}
  .stage{max-width:420px}
  .hud--1{left:-2%}.hud--2{right:-2%}
  .about{grid-template-columns:1fr;gap:38px}
  .pfp{max-width:400px}
  .clear{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .nav__links,.nav__cta .btn{display:none}
  .burger{display:block}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .key__i{grid-template-columns:auto 1fr;gap:16px}
  .key__ar{display:none}
}
@media (max-width:720px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .split{grid-template-columns:1fr}
  .clear{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .fmt__row{margin-top:14px;padding-top:14px}
  .hud{padding:9px 12px;border-radius:11px}
  .hud b{font-size:.72rem}
  .hud i{font-size:.62rem}
  .hud__ic{width:25px;height:25px;border-radius:7px}
  .hud__ic svg{width:12px;height:12px}
  .hud--3{display:none}
  /* Pull the floating cards fully inside the viewport on phones —
     negative offsets clip them against the screen edge. */
  .hud{max-width:min(62vw,240px)}
  .hud--1{left:0}
  .hud--2{right:0}
  .hud b,.hud i{overflow:hidden;text-overflow:ellipsis}
  .chal{flex-direction:column;align-items:stretch}
  .chal__ok{margin-left:0}
  .chal input{max-width:none}
  .foot__top{grid-template-columns:1fr;gap:32px}
  .foot__bot{flex-direction:column;text-align:center;gap:10px}
  .ann{font-size:.74rem;padding:9px 16px}
  /* Full-width taps on phones. Labels MUST be allowed to wrap here —
     the inherited white-space:nowrap overflows the pill on long CTAs. */
  .btn{width:100%;white-space:normal;text-align:center;line-height:1.34}
  .btn--lg{padding:17px 24px;font-size:.97rem}
  .btn-row{flex-direction:column;align-items:stretch}
  .nav__in{height:64px}
}
@media (max-width:420px){
  .clear{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{padding:20px}
}

/* Mobile perf: kill the most expensive paint work */
@media (max-width:900px){
  .bg__net{display:none}                  /* canvas off — biggest win */
  .beam{display:none}
  .bg__noise{opacity:.035;animation:none}
  .orb{filter:blur(56px);animation-duration:52s}
  .hud,.form-wrap,.mnav,.nav.is-stuck{
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  }
  .bg__grid{animation-duration:40s}
}

/* ---------- 29. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rv,.rv-l,.rv-r,.rv-s{opacity:1 !important;transform:none !important}
  .bg__net,.beam,.bg__noise,.orb{display:none}
  .cur,.cur-ring{display:none}
  .mq__track{animation:none;transform:none}
  .prog-bar{display:none}
}

/* ---------- 30. PRINT ---------- */
@media print{
  .bg,.cur,.cur-ring,.nav,.ann,.prog-bar,.mnav,.stage{display:none}
  body{background:#fff;color:#000}
  .card,.form-wrap{border:1px solid #ccc;background:none;box-shadow:none}
  .g,.g-gold,.g-shine{-webkit-text-fill-color:#000;color:#000}
}

/* ==========================================================================
   Part 3: Late additions — word-reveal, enquiry grid, small fixes
   ========================================================================== */

/* Headline word-reveal: .wl clips, .w slides up from below.
   Extra padding prevents descenders (g, y, p) being shaved off. */
.wl{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.12em;margin-bottom:-.12em;
}
.w{display:inline-block;transform-origin:50% 100%}

/* Enquiry section: form + sticky sidebar → stacks on tablet */
@media (max-width:1080px){
  #enqGrid{grid-template-columns:1fr !important}
  #enqGrid aside{position:static !important}
}

/* Perspective for the 3D tilt-in reveals */
.sec{perspective:1400px}

/* NOTE: the sidebar must NEVER get a max-height. It previously carried
   max-height:calc(100vh - 120px) with overflow:visible, which clamped the box
   to the viewport while its taller content spilled out and painted over the
   next section. A sticky element taller than the viewport is fine — it simply
   scrolls with the page once it un-pins. */
#enqGrid aside{max-height:none}

/* Programme cards: the topic lists are long — cap and scroll on desktop so
   cards in a row stay visually balanced, full height on mobile. */
@media (min-width:721px){
  .prog__list{max-height:none}
}

/* Date input: normalise the native picker in dark UI */
.field input[type="date"]{min-height:47px}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(.7) sepia(1) saturate(3) hue-rotate(150deg);cursor:pointer;
}

/* Number input: hide spinners for the challenge box */
.chal input::-webkit-outer-spin-button,
.chal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chal input[type=number]{-moz-appearance:textfield}

/* Marquee: guarantee both halves are identical width for a seamless loop */
.mq__track{will-change:transform}

/* Cards inside .card grids need equal heights */
.grid > .card{display:flex;flex-direction:column}
.grid > .card > p:last-child{margin-top:auto;padding-top:0}
.prog.card > p:last-child{margin-top:0}

/* Prevent the fixed background from being painted over the footer edge */
.foot{isolation:isolate}

/* Orbit radius scales with the stage so dots never escape the frame */
.stage{--orad:clamp(88px,19vw,170px)}

/* Grid children must be allowed to shrink below their min-content width,
   otherwise long words / fixed-size media force horizontal overflow. */
.hero__grid > *,.grid > *,.about > *,.split > *,.clear > *{min-width:0}
.hero__copy{min-width:0}

/* ==========================================================================
   Part 4: 3D data visuals, two-step form, conversion components
   ========================================================================== */

/* ---------- 31. 3D CHART STAGE ---------- */
.viz{
  position:relative;width:100%;perspective:1400px;perspective-origin:50% 42%;
}
.viz__plane{
  position:relative;width:100%;transform-style:preserve-3d;
  transform:rotateX(16deg) rotateZ(-1deg);
  transition:transform .6s var(--e-out);
}
@media (max-width:720px){
  .viz__plane{transform:rotateX(9deg)}      /* flatter on phones = readable */
}
.viz svg{width:100%;height:auto;display:block;overflow:visible}

/* Chart frame */
.viz__card{
  position:relative;padding:clamp(20px,2.6vw,34px);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(19,27,50,.94),rgba(9,14,28,.97));
  border:1px solid var(--line);overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.05);
}
/* Sweeping light across the chart surface */
.viz__card::after{
  content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(120,190,255,.055),transparent);
  animation:vizSweep 9s var(--e-io) infinite;
}
@keyframes vizSweep{0%{left:-40%}60%,100%{left:120%}}

.viz__head{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.viz__title{font-family:var(--f-display);font-size:clamp(1rem,1.7vw,1.16rem);font-weight:600;letter-spacing:-.02em}
.viz__note{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-4);padding:5px 10px;border-radius:100px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}

/* Axes + grid */
.viz-grid line{stroke:rgba(140,170,230,.11);stroke-width:1}
.viz-axis{stroke:rgba(150,180,240,.3);stroke-width:1.2}
.viz-tick{
  font-family:var(--f-mono);font-size:9.5px;fill:var(--ink-4);letter-spacing:.06em;
}
.viz-label{
  font-family:var(--f-mono);font-size:10px;fill:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;
}

/* Curves — drawn by GSAP via stroke-dashoffset (pathLength=1) */
.viz-line{
  fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
html:not([data-anim]) .viz-line{stroke-dashoffset:0}   /* no-JS: show fully */
.no-anim .viz-line{stroke-dashoffset:0 !important}
.viz-area{opacity:0}
.no-anim .viz-area{opacity:.5 !important}

/* Data points */
.viz-dot{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.no-anim .viz-dot{opacity:1 !important}
.viz-dot circle{filter:drop-shadow(0 0 6px currentColor)}

/* Floating value chips above the curve */
.viz-chip{opacity:0}
.no-anim .viz-chip{opacity:1 !important}
.viz-chip rect{fill:rgba(10,16,32,.92);stroke:rgba(150,190,255,.34);stroke-width:1}
.viz-chip text{font-family:var(--f-mono);font-size:10px;fill:var(--ink);letter-spacing:.04em}

/* Isometric bars (opportunity surface) */
.viz-bar{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.no-anim .viz-bar{opacity:1 !important}

/* Legend */
.viz__legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.viz__legend span{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--ink-2)}
.viz__legend i{width:15px;height:3px;border-radius:2px;flex:none}
.viz__takeaway{
  margin-top:20px;padding:15px 17px;border-radius:var(--r-sm);
  background:rgba(46,107,255,.07);border-left:2px solid var(--blue);
  font-size:.9rem;color:var(--ink-2);line-height:1.62;
}
.viz__takeaway b{color:var(--ink);font-weight:600}

/* ---------- 32. TWO-STEP FORM ---------- */
.fsteps{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.fstep{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.fstep__n{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.74rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-4);
  transition:background .4s var(--e-out),border-color .4s var(--e-out),color .4s var(--e-out);
}
.fstep__t{font-size:.8rem;color:var(--ink-4);transition:color .4s var(--e-out);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fstep.is-on .fstep__n{background:var(--grad-brand);border-color:transparent;color:#05101F}
.fstep.is-on .fstep__t{color:var(--ink)}
.fstep.is-done .fstep__n{background:rgba(53,224,240,.14);border-color:rgba(53,224,240,.5);color:var(--cyan)}
.fstep__bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden;min-width:16px}
.fstep__bar::after{content:'';position:absolute;inset:0;background:var(--grad-brand);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e-out)}
.fsteps.at-2 .fstep__bar::after{transform:scaleX(1)}

.fpane{display:none}
.fpane.is-on{display:block}
.fpane__hint{
  font-size:.82rem;color:var(--ink-4);margin-bottom:20px;line-height:1.6;
}
.fnav{display:flex;gap:12px;margin-top:4px}
.fnav .btn{flex:1}
@media (max-width:600px){.fnav{flex-direction:column}}

/* Optional-field marker */
.opt{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);margin-left:6px;
}

/* ---------- 33. REASSURANCE STRIP ---------- */
.assure{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
@media (max-width:720px){.assure{grid-template-columns:repeat(2,minmax(0,1fr))}}
.assure div{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  padding:14px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.028);border:1px solid var(--line);
}
.assure svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.assure b{font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.25}
.assure span{font-size:.68rem;color:var(--ink-4);line-height:1.4}

/* ---------- 34. STICKY MOBILE CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgba(6,10,20,.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-hi);
  display:flex;align-items:center;gap:12px;
  transform:translateY(110%);transition:transform .45s var(--e-out);
}
.sticky-cta.is-on{transform:none}
.sticky-cta__tx{flex:1;min-width:0}
.sticky-cta__tx b{display:block;font-family:var(--f-display);font-size:.85rem;font-weight:600;line-height:1.25}
.sticky-cta__tx span{font-size:.7rem;color:var(--ink-3)}
.sticky-cta .btn{width:auto;flex:none;padding:12px 20px;font-size:.85rem;white-space:nowrap}
@media (min-width:901px){.sticky-cta{display:none}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---------- 35. LEAD MAGNET ---------- */
.magnet{
  position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(28px,4vw,54px);border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(ellipse 70% 120% at 92% 50%,rgba(232,180,74,.16),transparent 62%),
    linear-gradient(160deg,rgba(17,24,45,.95),rgba(8,13,26,.97));
  border:1px solid rgba(232,180,74,.24);
}
@media (max-width:900px){.magnet{grid-template-columns:1fr;gap:30px}}
.magnet__form{display:flex;gap:10px;margin-top:22px}
@media (max-width:600px){.magnet__form{flex-direction:column}}
.magnet__form input{
  flex:1;min-width:0;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);border:1px solid var(--line-hi);color:var(--ink);font-size:.93rem;
}
.magnet__form input:focus{outline:none;border-color:rgba(232,180,74,.6);background:rgba(232,180,74,.06)}
.magnet__form .btn{flex:none}
@media (max-width:600px){.magnet__form .btn{width:100%}}
.magnet__list{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;margin-top:22px}
.magnet__list span{
  font-size:.78rem;color:var(--ink-3);position:relative;padding-left:15px;line-height:1.5;
}
.magnet__list span::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:1.5px;background:var(--grad-gold);border-radius:2px}

/* Floating 3D document stack */
/* width:100% is required — every child is absolutely positioned, so without it
   the element has no intrinsic width and `margin-inline:auto` collapses this
   grid item to 0×0 (aspect-ratio then keeps it square at zero). */
.doc3d{position:relative;width:100%;aspect-ratio:1/1;max-width:280px;margin-inline:auto;
  perspective:900px;transform-style:preserve-3d}
.doc3d__s{
  position:absolute;left:14%;top:12%;width:72%;height:76%;border-radius:12px;
  background:linear-gradient(160deg,rgba(30,42,72,.96),rgba(14,20,38,.98));
  border:1px solid rgba(232,180,74,.3);
  box-shadow:0 26px 54px -26px rgba(0,0,0,1);
  transform-style:preserve-3d;
}
.doc3d__s:nth-child(1){transform:translateZ(-46px) translate(-16px,16px) rotate(-7deg);opacity:.42}
.doc3d__s:nth-child(2){transform:translateZ(-23px) translate(-8px,8px) rotate(-3.5deg);opacity:.68}
.doc3d__s:nth-child(3){border-color:rgba(232,180,74,.55)}
.doc3d__ln{position:absolute;left:12%;height:3px;border-radius:2px;background:rgba(160,190,255,.2)}
.doc3d__ln--t{top:14%;width:52%;background:var(--grad-gold);height:5px}
.doc3d__ln:nth-of-type(2){top:30%;width:70%}
.doc3d__ln:nth-of-type(3){top:41%;width:60%}
.doc3d__ln:nth-of-type(4){top:52%;width:74%}
.doc3d__ln:nth-of-type(5){top:63%;width:44%}
.doc3d__chk{position:absolute;left:12%;bottom:12%;display:flex;gap:6px}
.doc3d__chk i{width:8px;height:8px;border-radius:3px;background:rgba(232,180,74,.65)}

/* ---------- 36. CONTACT CARD (WhatsApp replaced) ---------- */
.cta-card{
  position:relative;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(46,107,255,.16),rgba(139,92,246,.09) 60%,rgba(10,15,30,.96));
  border:1px solid var(--line-hi);
}
.cta-card__glow{
  position:absolute;right:-30%;top:-40%;width:80%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(53,224,240,.24),transparent 66%);
  animation:corePulse 6s var(--e-io) infinite;
}
.rt{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:.8rem;color:var(--ink-2)}
.rt i{width:7px;height:7px;border-radius:50%;background:#4BD97F;flex:none;
  box-shadow:0 0 0 0 rgba(75,217,127,.7);animation:pulse 2.4s var(--e-io) infinite}

/* ==========================================================================
   Part 5: livelier background texture + animated icons
   ========================================================================== */

/* ---------- 37. BACKGROUND MOTION (more visible) ----------
   The previous values were so subtle the motion read as static. These are
   raised to where the texture is clearly alive without competing with copy. */
.bg__grid::before{
  background-image:
    linear-gradient(rgba(125,170,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,170,255,.11) 1px,transparent 1px);
  animation-duration:14s;                 /* was 26s — now perceptible */
}
.orb{opacity:.5}
.orb--1{animation-duration:22s}
.orb--2{animation-duration:26s}
.orb--3{animation-duration:30s;opacity:.32}
.bg__noise{opacity:.05;animation-duration:4.5s}
.beam{animation-duration:8s}

/* A second, slower counter-drifting grid adds parallax depth to the texture */
.bg__grid::after{
  content:'';position:absolute;inset:-124px 0;
  background-image:
    linear-gradient(rgba(90,130,215,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,130,215,.06) 1px,transparent 1px);
  background-size:124px 124px;
  animation:gridDriftSlow 34s linear infinite;
  will-change:transform;
}
@keyframes gridDriftSlow{to{transform:translate3d(0,-124px,0)}}

/* Slow hue drift across the whole backdrop — keeps long scrolls feeling alive */
.bg__vig{animation:hueDrift 30s var(--e-io) infinite}
@keyframes hueDrift{
  0%,100%{background:radial-gradient(ellipse 96% 72% at 50% 0%,transparent 34%,rgba(4,6,13,.72) 100%)}
  50%    {background:radial-gradient(ellipse 92% 76% at 58% 4%,transparent 36%,rgba(5,7,16,.74) 100%)}
}

@media (max-width:900px){
  .bg__grid::after{display:none}          /* keep phones cheap */
  .bg__vig{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .bg__grid::after,.bg__vig{animation:none}
}

/* ---------- 38. ANIMATED ICONS ----------
   Draw-on when scrolled into view (JS adds .is-drawn), then a continuous
   micro-motion so the icon never looks like a static glyph. */
.ic svg{transition:transform .5s var(--e-out)}
.ic.is-drawn svg{animation:icoBreathe 5.5s var(--e-io) infinite}
@keyframes icoBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-1.5px) scale(1.045)}
}
/* Stagger the breathing so a grid of icons never pulses in lockstep */
.grid > *:nth-child(3n+2) .ic.is-drawn svg{animation-delay:-1.8s}
.grid > *:nth-child(3n+3) .ic.is-drawn svg{animation-delay:-3.6s}
.grid > *:nth-child(4n+2) .ic.is-drawn svg{animation-delay:-1.2s}
.grid > *:nth-child(4n+4) .ic.is-drawn svg{animation-delay:-2.9s}

/* Rotating conic halo behind the icon tile */
.ic{position:relative;overflow:hidden}
.ic::before{
  content:'';position:absolute;inset:-60%;opacity:0;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0deg,rgba(53,224,240,.30) 70deg,transparent 150deg);
  animation:angSpin 5s linear infinite;
  transition:opacity .5s var(--e-out);
}
.card:hover .ic::before{opacity:1}
@supports not (background:conic-gradient(from 0deg,red,blue)){.ic::before{display:none}}

/* Icon stroke picks up a glow once drawn */
.ic.is-drawn svg{filter:drop-shadow(0 0 5px rgba(53,224,240,.42))}

@media (prefers-reduced-motion:reduce){
  .ic.is-drawn svg{animation:none;filter:none}
  .ic::before{display:none}
}

/* Chart text scales with the viewBox, so it shrinks on phones. Bump the
   axis type only — chip rects have fixed widths and would overflow. */
@media (max-width:720px){
  .viz-tick{font-size:12.5px}
  .viz-label{font-size:12px}
}

/* ==========================================================================
   Part 6: design corrections + cross-browser hardening
   ========================================================================== */

/* ---------- 39. CROSS-BROWSER SAFETY ----------
   overflow:clip is Safari 16+. Older Safari/Firefox ESR ignore it entirely,
   which would let the page scroll sideways. Provide a real fallback. */
@supports not (overflow: clip){
  html,body{overflow-x:hidden}
}
/* Safari needs the -webkit- mask longhands; grouped here so they can't be
   forgotten when the shorthand above changes. */
.ring,.form-wrap::before,.pfp__ring{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* iOS momentum + avoid rubber-band flashes of the fixed backdrop */
body{-webkit-overflow-scrolling:touch}
/* Firefox renders thin scrollbars over the dark UI badly without this */
@supports (scrollbar-color: red blue){
  html{scrollbar-color:rgba(120,150,220,.35) transparent;scrollbar-width:thin}
}

/* ---------- 40. STATS — numbers were too small vs their labels ---------- */
.stat{padding:clamp(26px,3vw,38px) clamp(18px,2vw,26px)}
.stat b{
  font-size:clamp(2.6rem,5.2vw,4rem);      /* was 1.9–2.9rem */
  letter-spacing:-.05em;margin-bottom:12px;
  line-height:.95;
}
.stat > span{display:block;font-size:.88rem;color:var(--ink-2);max-width:22ch;margin-inline:auto;line-height:1.5}

/* ---------- 41. ABOUT — kill the dead space under the portrait ---------- */
@media (min-width:1081px){
  .about{align-items:start}
  /* The bio column is much taller than the portrait, which left a large empty
     block underneath. Sticking the portrait keeps that space active while the
     long bio scrolls past it. */
  .about > div:first-child{position:sticky;top:96px}
}
.pfp{aspect-ratio:4/5;max-height:560px}
/* Credential list sits tighter to the quote above it */
.creds{margin-top:18px}
.creds li{padding:12px 15px}

/* ---------- 42. FORM BUTTONS — proportion and rhythm ---------- */
.fnav{gap:14px;margin-top:26px;align-items:stretch}
.fnav .btn{padding:17px 30px;font-size:.97rem;min-height:56px}
.fnav .btn--sec{flex:0 0 auto;min-width:120px}
.fnav .btn--pri{flex:1}
@media (max-width:600px){
  .fnav{flex-direction:column-reverse}   /* primary action on top on phones */
  .fnav .btn--sec{width:100%}
}
.fpane__hint{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fsteps{margin-bottom:30px}
/* Breathing room between the last field and the actions */
.fpane .fgrid{margin-bottom:4px}

/* ---------- 43. ASSURE STRIP — icons must never render unsized ---------- */
.assure{margin-top:28px;gap:12px}
.assure div{padding:16px 12px;gap:9px}
/* Explicit attributes as well as CSS, so an unstyled render still behaves */
.assure svg{width:18px;height:18px;flex:none}

/* ---------- 44. LEAD MAGNET — input and list polish ---------- */
.magnet__list{gap:9px 20px;margin-top:26px}
.magnet__list span{font-size:.8rem;padding-left:17px}
.magnet__form{margin-top:28px;gap:12px}
.magnet__form input{
  padding:16px 18px;font-size:.95rem;min-height:56px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(232,180,74,.28);
  color:var(--ink);
}
.magnet__form input::placeholder{color:var(--ink-4)}
.magnet__form input:focus{
  outline:none;border-color:rgba(232,180,74,.8);
  background:rgba(232,180,74,.07);
  box-shadow:0 0 0 3px rgba(232,180,74,.14);
}
.magnet__form .btn{min-height:56px;padding-inline:30px}

/* ---------- 45. FOOTER — more structure and presence ---------- */
.foot{padding-block:clamp(60px,7vw,92px) 32px}
.foot__top{
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));
  gap:clamp(34px,5vw,72px);padding-bottom:44px;
}
.foot__brand .brand{margin-bottom:4px}
.foot__desc{font-size:.92rem;line-height:1.75;margin-top:20px;max-width:44ch}
.foot h4{margin-bottom:20px;color:var(--cyan);opacity:.75}
.foot__ls{gap:13px}
.foot__ls a{position:relative;padding-left:0}
.foot__bot{
  padding-top:30px;font-size:.82rem;gap:18px;
  border-top:1px solid var(--line);margin-top:0;
}
/* A quiet closing statement gives the footer weight instead of dead space */
.foot__note{
  margin-top:26px;padding:18px 20px;border-radius:var(--r-md);
  background:rgba(255,255,255,.028);border:1px solid var(--line);
  font-size:.86rem;color:var(--ink-3);line-height:1.7;max-width:52ch;
}
.foot__note b{color:var(--ink-2);font-weight:600}
@media (max-width:900px){
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:600px){
  .foot__top{grid-template-columns:1fr;gap:32px}
}

/* ---------- 46. CHART TEXT — guarantee sizing even mid-cascade ---------- */
.viz svg text{font-family:var(--f-mono)}
.viz-tick{font-size:10px;fill:var(--ink-4)}
.viz-label{font-size:10.5px;fill:var(--ink-3)}
@media (max-width:720px){
  .viz-tick{font-size:13px}
  .viz-label{font-size:12.5px}
}

/* ---------- 47. HEADING WORD MOTION ---------- */
.hw{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity}
.sec-head h2,.sec-head h3{perspective:900px}

/* ---------- 48. AMBIENT DRIFTING ACCENTS ---------- */
.amb{
  position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;
  background:var(--cyan);opacity:.5;
  box-shadow:0 0 14px 3px rgba(53,224,240,.5);
  z-index:0;
}
.amb:nth-child(3n){background:var(--violet-hi);box-shadow:0 0 14px 3px rgba(168,85,247,.5)}
.amb:nth-child(3n+1){background:var(--gold-hi);box-shadow:0 0 14px 3px rgba(232,180,74,.42)}
[data-ambient]{position:relative;overflow:hidden}
[data-ambient] > .shell{position:relative;z-index:1}
@media (max-width:900px),(prefers-reduced-motion:reduce){.amb{display:none}}

/* ---------- 49. MAGNETIC BUTTONS ---------- */
.btn--pri,.btn--gold{will-change:transform}

/* ---------- 50. RICHER ICON MOTION ----------
   Each icon tile now has: draw-on stroke, a continuous breathe, a rotating
   halo on hover, and a subtle orbiting spark. Icons should never look static. */
.ic::after{
  content:'';position:absolute;top:6px;left:50%;width:3px;height:3px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px 2px rgba(53,224,240,.75);
  opacity:0;transform-origin:0 18px;
}
.ic.is-drawn::after{opacity:.9;animation:icoOrbit 4.2s linear infinite}
@keyframes icoOrbit{to{transform:rotate(360deg)}}
.card:hover .ic svg{transform:scale(1.1) rotate(-8deg)}
@media (prefers-reduced-motion:reduce){
  .ic.is-drawn::after{animation:none;opacity:0}
}

/* The counter <span> lives inside <b>; make it inherit the big number size
   explicitly so no later `.stat span` rule can ever shrink it again. */
.stat b > span{font-size:inherit;line-height:inherit;letter-spacing:inherit}

/* Mobile refinements for the lead magnet */
@media (max-width:600px){
  .magnet__list{grid-template-columns:1fr;gap:8px}   /* 2 cols wrapped badly at 375px */
  .magnet__list span{font-size:.85rem}
  .magnet .eyebrow{letter-spacing:.13em;font-size:10px}
}
/* Long mono eyebrows wrap awkwardly on narrow screens */
@media (max-width:420px){
  .eyebrow{letter-spacing:.12em}
}

/* ==========================================================================
   Part 7: corner-glow correction + sticky-safe ambient hosts
   ========================================================================== */

/* ---------- 51. AMBIENT HOSTS MUST NOT BREAK position:sticky ----------
   `overflow:hidden` makes an element the containing block for sticky
   descendants, which silently kills them. `overflow:clip` clips without
   creating a scroll container, so sticky children keep working. */
[data-ambient]{position:relative;overflow:clip}
@supports not (overflow: clip){
  /* Older Safari: prefer working sticky over clipping a few 4px dots. */
  [data-ambient]{overflow:visible}
}

/* ---------- 52. ORB PALETTE — kill the magenta cast ----------
   orb--2 was pure violet (#8B5CF6) at 50% opacity with a 78px blur. Over the
   dark navy that reads as a pink/magenta wash, most visibly in the bottom-right
   corner of the enquiry section where it also bled past the viewport edge.
   Pulled toward indigo/blue, dimmed, and kept inside the right edge. */
.orb--2{
  right:-6%;                                  /* was -14%: bled off-screen */
  background:radial-gradient(circle,#5B6BE8 0%,rgba(91,107,232,0) 68%);
  opacity:.34;
}
.orb--1{opacity:.42}
.orb--3{opacity:.26}

/* Keep every orb inside the viewport so no glow hugs the right edge */
.bg{contain:paint}

/* ---------- 53. ENQUIRY GRID BALANCE ----------
   On step 1 the form holds only 5 fields, so its card ended well above the
   sidebar and left a large ragged void on the left. Stretching the card to the
   row height keeps the two columns visually balanced at every step, and the
   sidebar gets real sticky travel once step 2 makes the form taller. */
@media (min-width:1081px){
  #enqGrid{align-items:stretch}
  #enqGrid > .form-wrap{
    align-self:stretch;
    display:flex;flex-direction:column;
  }
  #enqGrid > .form-wrap > form{flex:1;display:flex;flex-direction:column}
  #enqGrid > .form-wrap .fpane.is-on{flex:1;display:flex;flex-direction:column}
  /* push the step actions to the bottom of the card instead of leaving a void */
  #enqGrid > .form-wrap .fnav{margin-top:auto;padding-top:26px}
  #enqGrid > aside{align-self:start}
}

/* ==========================================================================
   Part 8: mobile vertical rhythm
   ========================================================================== */

/* On phones the section padding stacked to ~174px between sections — 21% of a
   844px screen spent on emptiness. Tightening the token only (no layout
   change) restores a confident rhythm without touching desktop spacing. */
@media (max-width:720px){
  :root{--sec-y:58px}
  .sec--tight{padding-block:44px}
  .sec-head{margin-bottom:32px}
  .sec-head p{margin-top:16px}
}
@media (max-width:420px){
  :root{--sec-y:50px}
}