/* ============================================================
   HUNTERS AI — "Project Catalyst"
   Cinematic, keynote-style flagship experience · scoped to .ai-page
   Full-screen stages · one dominant visual + minimal copy each
   Builds on styles.css tokens (navy / gold / ivory / type)
   ============================================================ */

.ai-page{
  --ai-panel:    rgba(255,255,255,.04);
  --ai-panel-2:  rgba(255,255,255,.07);
  --ai-stroke:   rgba(240,235,224,.12);
  --ai-stroke-2: rgba(240,235,224,.24);
  --ai-gold-soft:rgba(230,200,127,.16);
  --ai-ok:       #7fb88a;
  --ai-ok-dim:   rgba(127,184,138,.16);
  --ai-bad:      #d99a6c;
  --ai-bad-dim:  rgba(217,154,108,.14);
  --ai-glass: blur(18px) saturate(125%);
  --ai-radius: 18px;
  background:var(--navy-dk);
}
.ai-page main{ position:relative; z-index:1; }
.ai-page .ai-field{ display:none; } /* tones now live per-stage for the light/grey/dark rhythm */

/* =============================================================
   SECTION TONES — alternating light / soft-grey / dark
   Each stage owns its background, ambient light and text tone.
   ============================================================= */
.ai-stage{ isolation:isolate; }
.ai-stage--dark{
  --ink:var(--ivory); --ink-dim:var(--ivory-dim); --eyebrow:var(--gold-bright); --em:var(--gold-bright);
  --panel:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.08); --stroke:rgba(240,235,224,.12); --stroke-2:rgba(240,235,224,.24);
  color:var(--ink);
  background:
    radial-gradient(120% 85% at 78% -8%, rgba(46,80,132,.55), transparent 58%),
    radial-gradient(90% 75% at 6% 112%, rgba(184,146,58,.12), transparent 58%),
    linear-gradient(180deg,#0c2139 0%, #0a1a30 100%);
}
.ai-stage--light{
  --ink:#16283d; --ink-dim:#5b6a79; --eyebrow:#b8923a; --em:#9a7327;
  --panel:rgba(255,255,255,.72); --panel-2:rgba(255,255,255,.9); --stroke:rgba(22,40,61,.10); --stroke-2:rgba(22,40,61,.18);
  color:var(--ink);
  background:
    radial-gradient(100% 70% at 82% -10%, rgba(230,200,127,.20), transparent 55%),
    radial-gradient(80% 80% at -5% 105%, rgba(26,48,80,.06), transparent 55%),
    linear-gradient(180deg,#f8f5ef 0%, #efe9dd 100%);
}
.ai-stage--grey{
  --ink:#16283d; --ink-dim:#5b6a79; --eyebrow:#b8923a; --em:#9a7327;
  --panel:rgba(255,255,255,.66); --panel-2:rgba(255,255,255,.85); --stroke:rgba(22,40,61,.10); --stroke-2:rgba(22,40,61,.18);
  color:var(--ink);
  background:
    radial-gradient(110% 80% at 50% -12%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(70% 60% at 90% 110%, rgba(230,200,127,.12), transparent 55%),
    linear-gradient(180deg,#eae7e0 0%, #dcd8cf 100%);
}
/* hairline blend between adjoining tones for a cinematic seam */
.ai-stage + .ai-stage{ box-shadow:0 -1px 0 rgba(255,255,255,.04); }

/* ---- ambient field: travels the whole journey (fixed) ---- */
.ai-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ai-field__aurora{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; will-change:transform; }
.ai-field__aurora--gold{ width:46vw; height:46vw; top:-12vw; right:-6vw;
  background:radial-gradient(circle at 50% 50%, rgba(230,200,127,.30), transparent 62%); animation:aiFloat 18s ease-in-out infinite; }
.ai-field__aurora--navy{ width:56vw; height:56vw; bottom:-24vw; left:-14vw;
  background:radial-gradient(circle at 50% 50%, rgba(40,72,120,.55), transparent 60%); animation:aiFloat 24s ease-in-out infinite reverse; }
@keyframes aiFloat{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(2%,3%) scale(1.06);} }
.ai-field__grid{ position:absolute; inset:0;
  background-image:linear-gradient(var(--ai-stroke) 1px,transparent 1px),linear-gradient(90deg,var(--ai-stroke) 1px,transparent 1px);
  background-size:72px 72px; opacity:.35;
  mask-image:radial-gradient(120% 100% at 60% 30%, #000 8%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 100% at 60% 30%, #000 8%, transparent 72%); }
.ai-field__grain{ position:absolute; inset:0; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* =============================================================
   STAGE SHELL — each major beat is a full-screen moment
   ============================================================= */
.ai-stage{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(7rem,13vh,10rem) var(--pad); gap:clamp(1.6rem,4vh,2.8rem); }
.ai-stage__copy{ max-width:100%; }
.ai-stage__copy--center{ text-align:center; margin-inline:auto; }
.kicker{ display:inline-block; }

.ai-page .kicker{ color:var(--eyebrow); }
.ai-display{ font-family:var(--display); font-weight:500; letter-spacing:-.015em; line-height:1.0; color:var(--ink);
  font-size:clamp(2.5rem,5.6vw,5.4rem); max-width:18ch; margin-inline:auto; text-wrap:balance; }
.ai-display em{ font-style:italic; color:var(--em); }
.ai-display--lg{ font-size:clamp(2.9rem,7vw,6.6rem); line-height:.98; }
.ai-display--md{ font-size:clamp(2.3rem,5vw,4.6rem); }

.ai-stage__note{ font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.55; color:var(--ink-dim); max-width:44ch; }
.ai-stage__note--center{ margin-inline:auto; }
.ai-stage__ctas{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ---- reveal primitives ---- */
.ai-reveal{ opacity:0; transform:translateY(28px); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); will-change:opacity,transform; }
.ai-reveal.is-in{ opacity:1; transform:none; }
.ai-line{ display:block; }
.ai-line > *{ display:block; opacity:0; transform:translateY(38%); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); will-change:opacity,transform; }
.ai-line.is-in > *{ opacity:1; transform:none; }

/* ---- shared bits ---- */
.ai-pulse{ width:7px; height:7px; border-radius:50%; background:var(--ai-ok); flex:0 0 auto; box-shadow:0 0 0 0 rgba(127,184,138,.5); animation:aiPulse 2.4s ease-out infinite; }
@keyframes aiPulse{ 0%{ box-shadow:0 0 0 0 rgba(127,184,138,.45);} 70%{ box-shadow:0 0 0 8px rgba(127,184,138,0);} 100%{ box-shadow:0 0 0 0 rgba(127,184,138,0);} }
.ai-dot{ width:3px; height:3px; border-radius:50%; background:var(--ivory-dim); opacity:.5; flex:0 0 auto; }
.ai-chip{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--ui); font-size:.64rem; text-transform:uppercase; letter-spacing:.18em; padding:.5em .9em; border-radius:100px; border:1px solid var(--ai-stroke); color:var(--ivory-dim); }
.ai-chip--ok{ color:var(--ai-ok); border-color:var(--ai-ok-dim); background:var(--ai-ok-dim); }
.ai-ok{ color:var(--ai-ok); }
.ai-status{ position:absolute; bottom:clamp(2.4rem,6vh,4rem); display:flex; align-items:center; gap:.7rem; font-family:var(--ui); font-size:.72rem; letter-spacing:.06em; color:var(--ink-dim); }
.ai-status b{ color:var(--ink); font-weight:600; }

/* ---- buttons ---- */
.ai-btn{ display:inline-flex; align-items:center; gap:.9rem; font-family:var(--ui); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; padding:1.05em 1.8em; border-radius:100px; transition:transform .4s var(--ease), gap .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.ai-btn svg{ width:30px; height:7px; }
.ai-btn--primary{ background:linear-gradient(100deg,var(--gold),var(--gold-bright)); color:var(--navy-dk); box-shadow:0 14px 44px -14px rgba(230,200,127,.55); }
.ai-btn--primary:hover{ transform:translateY(-2px); gap:1.3rem; }
.ai-btn--ghost{ border:1px solid var(--stroke-2,var(--ai-stroke-2)); color:var(--ink,var(--ivory)); }
.ai-btn--ghost:hover{ border-color:var(--em,var(--gold-bright)); color:var(--em,var(--gold-bright)); transform:translateY(-1px); }
.ai-btn--lg{ font-size:.78rem; padding:1.2em 2.1em; }

/* =============================================================
   STAGE · HERO
   ============================================================= */
.ai-hero-visual{ position:relative; width:min(560px,92vw); margin-top:clamp(.5rem,2vh,2rem); }
.ai-hero-visual__glow{ position:absolute; inset:6% 4% -22%; z-index:-1; border-radius:50%; background:radial-gradient(circle, rgba(230,200,127,.28), transparent 65%); filter:blur(64px); }
.ai-console{ border:1px solid var(--ai-stroke); border-radius:var(--ai-radius); overflow:hidden; text-align:left;
  background:linear-gradient(180deg, var(--ai-panel-2), var(--ai-panel)); backdrop-filter:var(--ai-glass); -webkit-backdrop-filter:var(--ai-glass);
  box-shadow:0 50px 110px -44px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.06); animation:aiHover 7s ease-in-out infinite; }
@keyframes aiHover{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
.ai-console__bar{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1.2rem; border-bottom:1px solid var(--ai-stroke); background:rgba(255,255,255,.02); }
.ai-console__dotrow{ display:flex; gap:.35rem; }
.ai-console__dotrow i{ width:8px; height:8px; border-radius:50%; background:var(--ai-stroke-2); }
.ai-console__label{ font-family:var(--ui); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim); }
.ai-console__live{ margin-left:auto; display:inline-flex; align-items:center; gap:.45em; font-family:var(--ui); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ai-ok); }
.ai-console__body{ padding:1.4rem 1.5rem 1.6rem; }
.ai-console__row{ display:flex; justify-content:space-between; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--ai-stroke); }
.ai-console__k{ font-family:var(--ui); font-size:.8rem; color:var(--ivory-dim); }
.ai-console__v{ font-family:var(--display); font-weight:600; font-size:1.8rem; color:var(--gold-bright); }
.ai-console__spark{ color:var(--gold-bright); margin:1.2rem 0 .5rem; }
.ai-console__spark svg{ width:100%; height:56px; display:block; }
.ai-spark__line{ stroke-dasharray:520; stroke-dashoffset:520; }
.ai-console__spark.is-in .ai-spark__line{ animation:aiDraw 1.6s var(--ease-out) forwards; }
@keyframes aiDraw{ to{ stroke-dashoffset:0; } }
.ai-console--xl .ai-console__v{ font-size:2rem; }

/* =============================================================
   STAGE · PROBLEM (statement + collapsing chips)
   ============================================================= */
.ai-stage--statement{ gap:clamp(2rem,5vh,3.4rem); }
.ai-chips{ position:relative; width:min(720px,92vw); height:clamp(260px,40vh,380px); }
.ai-chip-x{ position:absolute; top:50%; left:50%;
  transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r));
  font-family:var(--ui); font-size:clamp(.7rem,1.4vw,.86rem); letter-spacing:.02em; white-space:nowrap;
  padding:.7em 1.1em; border-radius:100px; color:var(--ai-bad); border:1px solid var(--ai-bad-dim); background:var(--ai-bad-dim);
  backdrop-filter:var(--ai-glass); -webkit-backdrop-filter:var(--ai-glass);
  transition:transform 1s var(--ease-out), opacity .8s var(--ease-out); }
.ai-chips.is-collapsed .ai-chip-x{ transform:translate(-50%,-50%) scale(.55); opacity:0; }
.ai-chips__resolved{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.7); opacity:0;
  display:inline-flex; align-items:center; gap:.7em; font-family:var(--ui); font-size:clamp(.8rem,1.6vw,1rem);
  text-transform:uppercase; letter-spacing:.2em; color:var(--navy-dk); background:linear-gradient(100deg,var(--gold),var(--gold-bright));
  padding:1em 2em; border-radius:100px; box-shadow:0 20px 60px -20px rgba(230,200,127,.7);
  transition:transform .9s var(--ease-out) .2s, opacity .9s var(--ease-out) .2s; }
.ai-chips.is-collapsed .ai-chips__resolved{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* =============================================================
   STAGE · WORKFLOW (giant ring)
   ============================================================= */
.ai-stage--flow{ gap:clamp(1.4rem,3vh,2.2rem); }
.ai-flow{ position:relative; width:min(620px,90vw); --step:calc(360deg / 7); }
.ai-flow__stage{ position:relative; width:100%; aspect-ratio:1/1; }
.ai-flow__rings{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ai-flow__orbit{ fill:none; stroke:var(--ai-stroke); stroke-width:1; }
.ai-flow__orbit--inner{ stroke-dasharray:2 8; opacity:.6; }
.ai-flow__trace{ fill:none; stroke:var(--gold-bright); stroke-width:2; stroke-dasharray:100; stroke-dashoffset:100; opacity:.85; filter:drop-shadow(0 0 7px rgba(230,200,127,.55)); }
.ai-flow.is-running .ai-flow__trace{ transition:stroke-dashoffset 6.4s linear; stroke-dashoffset:0; }
.ai-flow__hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(104px,22%,140px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%, rgba(26,48,80,.95), rgba(11,30,58,.96)); border:1px solid var(--ai-stroke-2); box-shadow:0 0 70px -10px rgba(230,200,127,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.ai-flow__hub-mark{ font-family:var(--display); font-weight:600; font-size:2.4rem; color:var(--gold-bright); line-height:1; }
.ai-flow__hub-label{ font-family:var(--ui); font-size:.5rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-dim); margin-top:.3rem; }
.ai-flow__nodes{ list-style:none; position:absolute; inset:0; }
.ai-flow__node{ position:absolute; top:50%; left:50%; width:clamp(110px,30%,152px);
  transform:translate(-50%,-50%) rotate(calc(var(--i) * var(--step))) translateY(calc(-1 * clamp(150px,44%,272px))) rotate(calc(var(--i) * -1 * var(--step)));
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center; padding:.7rem .5rem;
  border:1px solid var(--ai-stroke); border-radius:14px; background:linear-gradient(180deg, var(--ai-panel-2), var(--ai-panel));
  backdrop-filter:var(--ai-glass); -webkit-backdrop-filter:var(--ai-glass);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.ai-node__icon{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--ai-gold-soft); color:var(--gold-bright); transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.ai-node__icon svg{ width:17px; height:17px; }
.ai-node__name{ font-family:var(--ui); font-size:.66rem; letter-spacing:.02em; color:var(--ivory); line-height:1.2; }
/* completed steps stay softly illuminated */
.ai-flow__node.is-done{ border-color:rgba(230,200,127,.34); background:linear-gradient(180deg, rgba(230,200,127,.10), var(--ai-panel)); }
.ai-flow__node.is-done .ai-node__icon{ background:rgba(230,200,127,.28); }
/* the active step glows brightest */
.ai-flow__node.is-lit{ border-color:rgba(230,200,127,.65); box-shadow:0 0 0 1px rgba(230,200,127,.35), 0 18px 54px -20px rgba(230,200,127,.7);
  transform:translate(-50%,-50%) rotate(calc(var(--i) * var(--step))) translateY(calc(-1 * clamp(150px,44%,272px))) rotate(calc(var(--i) * -1 * var(--step))) scale(1.08); }
.ai-flow__node.is-lit .ai-node__icon{ background:var(--gold-bright); color:var(--navy-dk); box-shadow:0 0 16px 3px rgba(230,200,127,.6); }
/* payment received — finishes in green with a tick */
.ai-flow__node.is-paid.is-lit{ border-color:rgba(127,184,138,.7); box-shadow:0 0 0 1px rgba(127,184,138,.4), 0 18px 54px -20px rgba(127,184,138,.7); }
.ai-flow__node.is-paid.is-lit .ai-node__icon{ background:var(--ai-ok); color:#0a1830; box-shadow:0 0 18px 4px rgba(127,184,138,.6); }
.ai-flow__node.is-paid .ai-node__icon::after{ content:""; }
.ai-flow__node.is-paid.is-done:not(.is-lit){ border-color:rgba(127,184,138,.4); }
.ai-flow__node.is-paid.is-done:not(.is-lit) .ai-node__icon{ background:rgba(127,184,138,.3); color:var(--ai-ok); }
.ai-flow__token{ position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 20px 5px rgba(230,200,127,.85); opacity:0; z-index:4; }
.ai-flow.is-running .ai-flow__token{ opacity:1; }
/* continuous ambient glow travelling the orbit */
.ai-flow__comet{ position:absolute; top:50%; left:50%; width:0; height:0; z-index:2; animation:aiSpin 7s linear infinite; }
.ai-flow__comet::before{ content:""; position:absolute; left:-4px; top:calc(-1 * clamp(150px,44%,272px) - 4px); width:8px; height:8px; border-radius:50%;
  background:#fff7e6; box-shadow:0 0 14px 5px rgba(230,200,127,.85), 0 0 34px 12px rgba(230,200,127,.35); }
@keyframes aiSpin{ to{ transform:rotate(360deg); } }
.ai-flow__caption{ text-align:center; margin-top:clamp(1.4rem,3.5vw,2.2rem); min-height:2.6em; font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2vw,1.55rem); color:var(--ivory-dim); }
@media (max-width:480px){ .ai-flow__node{ width:92px; } .ai-node__name{ font-size:.58rem; } }

/* =============================================================
   STAGE · OPERATING SYSTEM (large dashboard + phone)
   ============================================================= */
.ai-stage--os{ justify-content:center; }
.ai-os-visual{ position:relative; width:min(1290px,98vw); margin-top:clamp(2rem,5vh,3.5rem); perspective:2200px; text-align:left; }
.ai-os-visual__glow{ position:absolute; inset:2% 4% -24%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(230,200,127,.32), rgba(46,80,132,.22) 45%, transparent 68%); filter:blur(80px); }
/* soft reflection floor beneath the device */
.ai-os-visual::after{ content:""; position:absolute; left:8%; right:8%; bottom:-7%; height:16%; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%, rgba(8,16,30,.5), transparent 70%); filter:blur(18px); }
.ai-dash{ position:relative; border:1px solid rgba(240,235,224,.14); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:222px 1fr; min-height:520px;
  background:linear-gradient(180deg, rgba(14,30,55,.96), rgba(9,20,38,.97)); box-shadow:0 90px 180px -56px rgba(0,0,0,.95), 0 10px 40px -20px rgba(46,80,132,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform:rotateX(12deg) scale(.99); transform-origin:center top; transition:transform 1.4s var(--ease-out); will-change:transform; }
.ai-os-visual.is-in .ai-dash{ transform:rotateX(1.5deg) scale(1); }
/* glass sheen sweeping across the screen */
.ai-dash::after{ content:""; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:22px;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06) 46%, rgba(255,255,255,.01) 54%, transparent 70%); }

/* ---- OS example dashboards (image screenshots) ---- */
.ai-os-example{ width:100%; max-width:1180px; margin:clamp(2.6rem,6vh,4.6rem) auto 0; }
.ai-os-example .ai-os-visual{ width:100%; margin-top:0; transition:transform .55s var(--ease-out); }
.ai-os-example:hover .ai-os-visual{ transform:translateY(-7px); }
.ai-os-shot{ position:relative; z-index:2; display:block; width:100%; height:auto; border-radius:18px;
  border:1px solid rgba(22,40,61,.14);
  box-shadow:0 60px 130px -52px rgba(0,0,0,.5), 0 12px 44px -22px rgba(46,80,132,.28);
  transform:rotateX(8deg) scale(.985); transform-origin:center top;
  transition:transform 1.3s var(--ease-out), box-shadow .55s var(--ease-out); will-change:transform; }
.ai-os-example.is-in .ai-os-shot{ transform:rotateX(0deg) scale(1); }
.ai-os-example:hover .ai-os-shot{ box-shadow:0 80px 150px -50px rgba(0,0,0,.55), 0 16px 54px -22px rgba(46,80,132,.36); }
.ai-os-badge{ position:absolute; top:clamp(10px,1.3vw,16px); right:clamp(10px,1.3vw,16px); z-index:5; max-width:calc(100% - 32px);
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; font-family:var(--ui); font-size:clamp(.46rem,.78vw,.58rem);
  letter-spacing:.13em; text-transform:uppercase; color:var(--navy-dk); background:rgba(255,255,255,.93);
  border:1px solid rgba(22,40,61,.12); border-radius:100px; padding:.5em .95em;
  box-shadow:0 14px 32px -14px rgba(0,0,0,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@media (max-width:560px){ .ai-os-badge{ font-size:.44rem; letter-spacing:.1em; padding:.45em .7em; } }
.ai-os-cap{ text-align:center; margin-top:clamp(1.1rem,2.2vw,1.6rem); font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,1.5vw,1.3rem); color:var(--ink-dim); }
.ai-dash__side{ background:rgba(8,18,36,.7); border-right:1px solid var(--ai-stroke); padding:1.4rem 1.1rem; display:flex; flex-direction:column; }
.ai-dash__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--ui); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); }
.ai-dash__logo{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-family:var(--display); font-weight:600; color:var(--navy-dk); background:linear-gradient(135deg,var(--gold),var(--gold-bright)); }
.ai-dash__nav{ display:flex; flex-direction:column; gap:.15rem; margin-top:1.6rem; }
.ai-dash__nav span{ font-family:var(--ui); font-size:.76rem; color:var(--ivory-dim); padding:.62rem .7rem; border-radius:9px; }
.ai-dash__nav span.is-active{ background:var(--ai-gold-soft); color:var(--gold-bright); }
.ai-dash__side-foot{ margin-top:auto; display:flex; align-items:center; gap:.5rem; font-family:var(--ui); font-size:.64rem; color:var(--ai-ok); padding-top:1.2rem; }
.ai-dash__main{ padding:clamp(1.2rem,2.4vw,1.8rem); display:flex; flex-direction:column; gap:clamp(1rem,2vw,1.4rem); }
.ai-dash__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.ai-dash__hello{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ivory); }
.ai-dash__sub{ font-family:var(--serif); font-style:italic; color:var(--ivory-dim); font-size:.98rem; margin-top:.2rem; }
.ai-dash__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.ai-kpi{ border:1px solid var(--ai-stroke); border-radius:13px; padding:.95rem 1rem; background:var(--ai-panel); }
.ai-kpi__label{ display:block; font-family:var(--ui); font-size:.6rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ivory-dim); }
.ai-kpi__num{ display:block; margin-top:.4rem; font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ivory); line-height:1; }
.ai-kpi__trend{ display:inline-block; margin-top:.45rem; font-family:var(--ui); font-size:.6rem; color:var(--ai-ok); }
.ai-dash__grid{ display:grid; grid-template-columns:1fr 1.15fr .85fr; gap:.8rem; }
.ai-card{ border:1px solid var(--ai-stroke); border-radius:13px; padding:1rem 1.05rem; background:var(--ai-panel); }
.ai-card__title{ font-family:var(--ui); font-size:.6rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ivory-dim); margin-bottom:.85rem; }
.ai-card--health{ display:flex; flex-direction:column; align-items:center; }
.ai-ring{ position:relative; width:clamp(98px,13vw,124px); aspect-ratio:1; margin:.2rem auto .9rem; }
.ai-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ai-ring__track{ fill:none; stroke:var(--ai-stroke); stroke-width:9; }
.ai-ring__fill{ fill:none; stroke:var(--gold-bright); stroke-width:9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; }
.ai-ring.is-in .ai-ring__fill{ transition:stroke-dashoffset 1.6s var(--ease-out); }
.ai-ring__num{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--gold-bright); }
.ai-card__rows{ list-style:none; width:100%; }
.ai-card__rows li{ display:flex; justify-content:space-between; padding:.4rem 0; border-top:1px solid var(--ai-stroke); font-family:var(--ui); font-size:.7rem; color:var(--ivory-dim); }
.ai-feed{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.ai-feed li{ display:flex; align-items:center; gap:.55rem; font-family:var(--ui); font-size:.72rem; color:var(--ivory-dim); }
.ai-feed li i{ width:6px; height:6px; border-radius:50%; background:var(--ai-ok); flex:0 0 auto; }
.ai-feed li b{ color:var(--ivory); font-weight:500; }
.ai-feed li span{ margin-left:auto; font-size:.6rem; color:var(--ivory-dim); opacity:.6; }
.ai-feed li.ai-feed--new{ animation:aiFeedIn .6s var(--ease-out); }
@keyframes aiFeedIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none; } }
.ai-mini{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.ai-mini li{ display:flex; align-items:center; gap:.55rem; font-family:var(--ui); font-size:.72rem; color:var(--ivory); }

/* pocket phone */
.ai-phone{ position:absolute; right:clamp(-6px,-1vw,-18px); bottom:clamp(-26px,-4vh,-44px); z-index:4;
  width:clamp(124px,16vw,176px); aspect-ratio:9/19; border-radius:26px; padding:10px; border:1px solid var(--ai-stroke-2);
  background:linear-gradient(180deg, rgba(20,38,66,.96), rgba(10,22,42,.98)); box-shadow:0 40px 90px -34px rgba(0,0,0,.95); }
.ai-phone__notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:34%; height:7px; border-radius:100px; background:rgba(0,0,0,.5); }
.ai-phone__screen{ height:100%; border-radius:18px; background:rgba(8,18,36,.8); border:1px solid var(--ai-stroke); padding:1rem .8rem; display:flex; flex-direction:column; gap:.55rem; }
.ai-phone__hello{ font-family:var(--ui); font-size:.6rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ivory-dim); }
.ai-phone__kpi{ display:flex; justify-content:space-between; align-items:baseline; }
.ai-phone__kpi span{ font-family:var(--ui); font-size:.62rem; color:var(--ivory-dim); }
.ai-phone__kpi b{ font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--gold-bright); }
.ai-phone__bars{ display:flex; align-items:flex-end; gap:4px; height:42px; margin-top:.2rem; }
.ai-phone__bars i{ flex:1; height:var(--h); border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--gold-bright),rgba(230,200,127,.25)); }
.ai-phone .ai-chip{ margin-top:auto; font-size:.5rem; }

@media (max-width:960px){
  .ai-dash{ grid-template-columns:1fr; }
  .ai-dash__side{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; border-right:none; border-bottom:1px solid var(--ai-stroke); }
  .ai-dash__nav{ flex-direction:row; flex-wrap:wrap; margin-top:0; gap:.3rem; }
  .ai-dash__side-foot{ margin:0 0 0 auto; padding:0; }
  .ai-dash__grid{ grid-template-columns:1fr; }
  .ai-phone{ display:none; }
}
@media (max-width:680px){ .ai-dash__kpis{ grid-template-columns:repeat(2,1fr); } .ai-dash__nav span:not(.is-active){ display:none; } }

/* =============================================================
   STAGE · WORKFORCE (spotlight)
   ============================================================= */
.ai-stage--workforce{ gap:clamp(2.2rem,5vh,3.6rem); }
.ai-spot{ width:min(940px,94vw); }
.ai-spot__feature{ display:flex; align-items:center; justify-content:center; gap:clamp(1.8rem,4.5vw,3.8rem); text-align:left; min-height:clamp(220px,32vh,320px); }

/* large featured portrait */
.ai-spot__portrait{ position:relative; flex:0 0 auto; width:clamp(180px,24vw,300px); aspect-ratio:1; }
.ai-spot__portrait img{ position:relative; z-index:3; width:100%; height:100%; object-fit:cover; object-position:50% 14%;
  border-radius:50%; border:1px solid rgba(230,200,127,.3);
  box-shadow:0 40px 100px -36px rgba(0,0,0,.9), inset 0 0 0 6px rgba(255,255,255,.04);
  animation:aiBreathe 7s ease-in-out infinite; transition:opacity .55s var(--ease), filter .55s var(--ease); }
.ai-spot__halo{ position:absolute; inset:-16%; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(230,200,127,.4), rgba(46,80,132,.25) 45%, transparent 68%);
  filter:blur(34px); animation:aiHalo 6s ease-in-out infinite; }
.ai-spot__ring{ position:absolute; inset:-9px; z-index:2; border-radius:50%; border:1px solid rgba(230,200,127,.35);
  box-shadow:0 0 40px -6px rgba(230,200,127,.5) inset; animation:aiSpinSlow 22s linear infinite; }
.ai-spot__ring::after{ content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%;
  background:var(--gold-bright); box-shadow:0 0 12px 3px rgba(230,200,127,.8); }
@keyframes aiBreathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03);} }
@keyframes aiHalo{ 0%,100%{ opacity:.7; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
@keyframes aiSpinSlow{ to{ transform:rotate(360deg);} }

.ai-spot__status{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--ui); font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ai-ok); }
.ai-spot__detail{ max-width:38ch; }
.ai-spot__detail h3{ font-family:var(--display); font-weight:500; font-size:clamp(2.1rem,4.6vw,3.6rem); color:var(--ink); line-height:1; margin:.55rem 0 .35rem; transition:opacity .45s var(--ease); }
.ai-spot__role{ font-family:var(--ui); font-size:.76rem; text-transform:uppercase; letter-spacing:.18em; color:var(--em); transition:opacity .45s var(--ease); }
.ai-spot__desc{ font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; color:var(--ink-dim); margin:1rem 0 0; transition:opacity .45s var(--ease); }
.ai-spot__metric{ margin-top:1.2rem; display:flex; align-items:baseline; gap:.6rem; }
.ai-spot__metric b{ font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,3.6vw,3rem); color:var(--em); }
.ai-spot__metric small{ font-family:var(--ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); }
.ai-spot.is-switching .ai-spot__portrait img,
.ai-spot.is-switching .ai-spot__detail h3,
.ai-spot.is-switching .ai-spot__role,
.ai-spot.is-switching .ai-spot__desc{ opacity:0; }

/* portrait thumbnail rail */
.ai-spot__rail{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(.55rem,1.4vw,1rem); margin-top:clamp(2.2rem,4vh,3.2rem); }
.ai-spot__rail li{ width:clamp(50px,5.6vw,68px); aspect-ratio:1; border-radius:50%; overflow:hidden; cursor:pointer; padding:0;
  border:2px solid transparent; box-shadow:0 8px 22px -10px rgba(0,0,0,.7);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.ai-spot__rail li img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%;
  filter:grayscale(.35) brightness(.82); transition:filter .4s var(--ease), transform .5s var(--ease); }
.ai-spot__rail li:hover{ transform:translateY(-4px); }
.ai-spot__rail li:hover img{ filter:none; transform:scale(1.08); }
.ai-spot__rail li.is-active{ border-color:var(--gold-bright); transform:translateY(-3px);
  box-shadow:0 0 0 2px rgba(230,200,127,.3), 0 14px 34px -12px rgba(230,200,127,.55); }
.ai-spot__rail li.is-active img{ filter:none; }
@media (max-width:560px){ .ai-spot__feature{ flex-direction:column; text-align:center; } .ai-spot__detail{ text-align:center; } .ai-spot__metric{ justify-content:center; } }

/* =============================================================
   STAGE · INDUSTRIES (marquee)
   ============================================================= */
.ai-stage--industries{ gap:clamp(2.4rem,6vh,4rem); }
.ai-marquee{ width:100vw; max-width:100%; overflow:hidden; display:flex; flex-direction:column; gap:clamp(.8rem,1.6vw,1.2rem);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ai-marquee__row{ display:flex; gap:clamp(1rem,2vw,1.6rem); width:max-content; animation:mqScroll 42s linear infinite; }
.ai-marquee__row--rev{ animation-direction:reverse; animation-duration:50s; }
@keyframes mqScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ai-marquee:hover .ai-marquee__row{ animation-play-state:paused; }
.ai-mq{ display:inline-flex; align-items:center; gap:.9rem; flex:0 0 auto; padding:1.1rem 1.6rem; border-radius:100px;
  border:1px solid var(--ai-stroke); background:var(--ai-panel); font-family:var(--display); font-weight:500;
  font-size:clamp(1.1rem,2vw,1.7rem); color:var(--ivory); white-space:nowrap; transition:border-color .35s, background .35s, color .35s; }
.ai-mq:hover{ border-color:rgba(230,200,127,.45); background:var(--ai-gold-soft); }
.ai-mq i{ display:grid; place-items:center; width:clamp(26px,3vw,34px); height:clamp(26px,3vw,34px); color:var(--gold-bright); flex:0 0 auto; }
.ai-mq i svg{ width:100%; height:100%; }

/* =============================================================
   STAGE · BEFORE / AFTER (drag compare)
   ============================================================= */
.ai-stage--ba{ gap:clamp(1.6rem,4vh,2.6rem); }
.ai-compare{ position:relative; width:min(900px,94vw); aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  border:1px solid var(--ai-stroke); --pos:50%; box-shadow:0 50px 110px -44px rgba(0,0,0,.9); user-select:none; touch-action:none; }
.ai-compare__panel{ position:absolute; inset:0; padding:clamp(1.6rem,4vw,3rem); display:flex; align-items:center; }
.ai-compare__panel--after{ background:linear-gradient(135deg, rgba(16,34,60,.98), rgba(9,20,38,1)); }
.ai-compare__panel--before{ background:linear-gradient(135deg, rgba(52,34,28,.99), rgba(30,18,15,1)); clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ai-compare__tag{ position:absolute; top:1.1rem; left:1.4rem; font-family:var(--ui); font-size:.64rem; text-transform:uppercase; letter-spacing:.2em; color:var(--ai-ok); }
.ai-compare__tag--bad{ left:auto; right:1.4rem; color:var(--ai-bad); }
/* identical geometry on both panels so the wipe transforms each line in place */
.ai-scene{ display:flex; flex-direction:column; gap:clamp(.7rem,1.8vw,1.15rem); width:min(440px,76%); margin:0 auto; }
.ai-scene__line{ display:flex; align-items:center; gap:.7em; font-family:var(--display); font-weight:400; font-size:clamp(1rem,1.8vw,1.45rem); line-height:1.2; color:var(--ivory); white-space:nowrap; }
.ai-scene__line.ai-bad{ color:rgba(240,235,224,.82); }
.ai-ok-dot,.ai-bad-dot{ width:20px; height:20px; flex:0 0 auto; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:contain; }
.ai-ok-dot{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb88a' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.ai-bad-dot{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d99a6c' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.ai-scene__badge{ display:inline-flex; align-items:center; gap:.5em; align-self:flex-start; margin-top:.5rem; font-family:var(--ui); font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; padding:.55em 1.1em; border-radius:100px; }
.ai-scene__badge--ok{ color:var(--ai-ok); border:1px solid var(--ai-ok-dim); background:var(--ai-ok-dim); }
.ai-scene__badge--bad{ color:var(--ai-bad); border:1px solid var(--ai-bad-dim); background:var(--ai-bad-dim); }
.ai-compare__divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--gold-bright); transform:translateX(-1px); z-index:5; cursor:ew-resize; box-shadow:0 0 16px rgba(230,200,127,.6); }
.ai-compare__handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(100deg,var(--gold),var(--gold-bright)); color:var(--navy-dk); font-size:.8rem; letter-spacing:-.06em; box-shadow:0 8px 26px -8px rgba(230,200,127,.8); }

/* =============================================================
   STAGE · OUTCOMES
   ============================================================= */
.ai-stage--outcomes{ gap:clamp(2.4rem,6vh,4rem); }
.ai-outcomes{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,5vw,4rem); width:min(900px,92vw); }
.ai-outcomes li{ text-align:center; }
.ai-outcomes b{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,4.4vw,3.4rem); color:var(--em); line-height:1; letter-spacing:-.01em; }
.ai-outcomes span{ display:block; margin-top:.7rem; font-family:var(--serif); font-style:italic; font-size:clamp(1rem,1.5vw,1.25rem); color:var(--ink-dim); }
@media (max-width:560px){ .ai-outcomes{ grid-template-columns:1fr; gap:2.4rem; } }

/* =============================================================
   STAGE · CLOSE (full-bleed)
   ============================================================= */
.ai-stage--close{ overflow:hidden; }
.ai-close__media{ position:absolute; inset:-6% 0; z-index:-1; }
.ai-close__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ai-close__grade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,16,30,.86), rgba(8,16,30,.72) 45%, rgba(7,14,26,.96)); }
.ai-close__content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(1.4rem,3vh,2.2rem); max-width:26ch; }

/* =============================================================
   LIGHT / GREY TONE — component variants
   ============================================================= */
.ai-stage--light .ai-chip-x, .ai-stage--grey .ai-chip-x{
  color:#a85a2f; border-color:rgba(168,90,47,.28); background:rgba(255,255,255,.85);
  box-shadow:0 12px 30px -16px rgba(22,40,61,.35); -webkit-backdrop-filter:none; backdrop-filter:none; }
.ai-stage--light .ai-mq{ color:var(--ink); border-color:var(--stroke-2); background:var(--panel);
  box-shadow:0 14px 34px -22px rgba(22,40,61,.45); }
.ai-stage--light .ai-mq:hover{ border-color:rgba(184,146,58,.55); background:rgba(230,200,127,.18); }
.ai-stage--light .ai-mq i, .ai-stage--grey .ai-mq i{ color:#9a7327; }

/* =============================================================
   POLISH PASS — final refinements
   ============================================================= */
/* nav keeps a readable backdrop over the light hero and every tone */
.ai-page #nav{ background:rgba(11,30,58,.85); -webkit-backdrop-filter:blur(16px) saturate(125%); backdrop-filter:blur(16px) saturate(125%); border-bottom:1px solid var(--line); }

/* ---- HERO · luminous light "AI" tone (distinct from the rest of the site) ---- */
.ai-stage--hero{
  background:
    radial-gradient(82% 62% at 50% -6%, rgba(255,255,255,.96), transparent 60%),
    radial-gradient(60% 55% at 86% 6%, rgba(230,200,127,.24), transparent 56%),
    radial-gradient(70% 70% at 8% 98%, rgba(96,134,196,.20), transparent 56%),
    linear-gradient(180deg,#fbf9f4 0%, #edefee 100%);
}
.ai-stage--hero .kicker{ margin-bottom:clamp(1rem,2.2vw,1.6rem); }
.ai-stage--hero .ai-stage__note{ margin:clamp(1.2rem,2.4vw,1.9rem) auto 0; max-width:48ch; }
.ai-stage--hero .ai-stage__ctas{ margin-top:clamp(2rem,3.6vw,2.7rem); }
.ai-stage--hero .ai-hero-visual{ margin-top:clamp(2.4rem,4.5vh,3.6rem); }
/* dark product console floats on the light hero */
.ai-stage--hero .ai-console{ background:linear-gradient(180deg, rgba(17,35,61,.97), rgba(10,22,42,.98)); border-color:rgba(255,255,255,.12); }
.ai-stage--hero .cue{ color:var(--ink-dim); }
.ai-stage--hero .ai-dot{ background:var(--ink-dim); opacity:.6; }

/* ---- WORKFORCE · smoother switch ---- */
.ai-spot__portrait{ transition:transform .55s var(--ease-out); }
.ai-spot.is-switching .ai-spot__portrait{ transform:scale(.965); }

/* ---- BEFORE / AFTER · responsive ---- */
@media (max-width:640px){
  .ai-compare{ aspect-ratio:3/4; }
  .ai-scene{ width:88%; }
  .ai-scene__line{ white-space:normal; gap:.5em; }
}

/* ---- WORKFLOW · a touch more room on the smallest screens ---- */
@media (max-width:480px){ .ai-flow{ width:94vw; } }

/* ---- FINAL CTA · premium AI / technology backdrop ---- */
.ai-stage--close .ai-close__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.ai-close__grid{ position:absolute; inset:0;
  background-image:linear-gradient(rgba(240,235,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(240,235,224,.06) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 55%, #000 16%, transparent 76%);
  mask-image:radial-gradient(120% 90% at 50% 55%, #000 16%, transparent 76%); }
.ai-close__rings{ position:absolute; top:50%; left:50%; width:min(1040px,152vw); aspect-ratio:1; opacity:.16;
  transform:translate(-50%,-50%); animation:aiSpinC 80s linear infinite; }
.ai-close__rings circle{ fill:none; stroke:rgba(230,200,127,.6); stroke-width:1; }
.ai-close__node{ position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%;
  background:#fff7e6; box-shadow:0 0 14px 5px rgba(230,200,127,.6);
  transform:rotate(var(--a)) translateY(-33vmin); animation:aiNodePulse 4.5s ease-in-out infinite; }
.ai-close__node:nth-child(4){ animation-delay:1.2s; } .ai-close__node:nth-child(5){ animation-delay:2.4s; }
.ai-close__glow{ position:absolute; border-radius:50%; filter:blur(80px); }
.ai-close__glow--gold{ width:52vw; height:52vw; top:-16vw; right:-8vw; background:radial-gradient(circle, rgba(230,200,127,.30), transparent 62%); }
.ai-close__glow--blue{ width:56vw; height:56vw; bottom:-24vw; left:-12vw; background:radial-gradient(circle, rgba(56,96,168,.34), transparent 60%); }
.ai-stage--close .ai-close__grade{ position:absolute; inset:0; background:radial-gradient(120% 95% at 50% 50%, transparent 32%, rgba(7,14,26,.72) 100%); }
.ai-close__content{ max-width:34ch; }
@keyframes aiSpinC{ from{ transform:translate(-50%,-50%) rotate(0); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes aiNodePulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* =============================================================
   HERO REDESIGN — message + four animated "what we build" cards
   ============================================================= */
.ai-stage--hero{ gap:clamp(2.6rem,5.5vh,4rem); padding-top:clamp(8rem,14vh,11rem); padding-bottom:clamp(4rem,8vh,6rem); justify-content:center; }
.ai-hero__copy{ max-width:100%; }
.ai-hero__lead{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.4rem,2.7vw,2.1rem); color:#1a3050; letter-spacing:.03em; margin-bottom:clamp(.5rem,1.4vw,1rem); }
.ai-hero__head{ margin:clamp(.7rem,1.6vw,1.1rem) auto clamp(.9rem,1.8vw,1.3rem); max-width:18ch; }
.ai-hero__subhead{ font-family:var(--display); font-weight:400; font-style:normal; font-size:clamp(1.2rem,2.4vw,1.85rem); line-height:1.22; color:var(--ink); max-width:32ch; margin:0 auto; text-wrap:balance; }
.ai-stage--hero .ai-stage__note{ margin:clamp(1.2rem,2.4vw,1.8rem) auto 0; max-width:56ch; }
.ai-stage--hero .ai-stage__ctas{ margin-top:clamp(1.8rem,3.4vw,2.5rem); }

/* ---- four glass feature cards ---- */
.ai-hero-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.8vw,1.5rem); width:min(1200px,96vw); margin:0 auto; }
@media (max-width:920px){ .ai-hero-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ai-hero-cards{ grid-template-columns:1fr; max-width:380px; } }
.ai-fcard{ position:relative; text-align:left; border-radius:22px; padding:1.2rem 1.2rem 1.55rem;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.56));
  border:1px solid rgba(22,40,61,.10); -webkit-backdrop-filter:blur(16px) saturate(125%); backdrop-filter:blur(16px) saturate(125%);
  box-shadow:0 26px 60px -32px rgba(22,40,61,.5), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out); }
.ai-hero-cards .ai-fcard:nth-child(2){ transition-delay:.07s; } .ai-hero-cards .ai-fcard:nth-child(3){ transition-delay:.14s; } .ai-hero-cards .ai-fcard:nth-child(4){ transition-delay:.21s; }
.ai-fcard:hover{ transform:translateY(-9px); border-color:rgba(184,146,58,.42); box-shadow:0 44px 90px -36px rgba(22,40,61,.55); }
.ai-fcard__preview{ position:relative; height:clamp(150px,14.5vw,190px); border-radius:15px; overflow:hidden; margin-bottom:1.1rem;
  background:radial-gradient(120% 100% at 50% 0%, #163052, #0a1830); border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -30px 50px -30px rgba(0,0,0,.6); }
.ai-fcard__img{ width:100%; height:100%; object-fit:cover; display:block; }
.ai-fcard__title{ display:flex; align-items:flex-start; gap:.6rem; font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--ink); line-height:1.15; }
.ai-fcard__ic{ display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto; margin-top:1px; color:var(--em); }
.ai-fcard__ic svg{ width:22px; height:22px; }
.ai-fcard__desc{ font-family:var(--ui); font-weight:300; font-size:.82rem; line-height:1.45; color:var(--ink-dim); margin-top:.5rem; }

/* preview · WEBSITES (laptop scrolling) */
.ai-pv{ position:absolute; inset:0; display:grid; place-items:center; }
.ai-pv--web .ai-pv-laptop{ width:72%; }
.ai-pv--web .ai-pv-laptop{ width:78%; }
.ai-pv-laptop__screen{ position:relative; height:104px; border-radius:8px 8px 0 0; border:1px solid rgba(255,255,255,.16); border-bottom:none; overflow:hidden; background:#fff; }
.ai-pv-web__scroll{ position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; gap:5px; padding:7px; animation:pvScroll 13s linear infinite; }
@keyframes pvScroll{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-50%); } }
.ai-pv-web__nav{ display:flex; align-items:center; gap:3px; }
.ai-pv-web__nav i{ width:7px; height:3px; border-radius:2px; background:#cdd5de; }
.ai-pv-web__nav b{ margin-left:auto; width:16px; height:6px; border-radius:3px; background:var(--gold); }
.ai-pv-web__banner{ height:22px; border-radius:4px; background:linear-gradient(120deg,#16283d,#2e5084); }
.ai-pv-web__banner--2{ background:linear-gradient(120deg,#b8923a,#e6c87f); }
.ai-pv-web__h{ height:5px; width:62%; border-radius:3px; background:#d7dde4; }
.ai-pv-web__h--sm{ width:42%; }
.ai-pv-web__cards{ display:flex; gap:4px; }
.ai-pv-web__cards i{ flex:1; height:17px; border-radius:3px; background:#e7ebef; }
.ai-pv-laptop__base{ display:block; height:5px; border-radius:0 0 6px 6px; background:linear-gradient(#cfd6de,#a7b0ba); margin:0 -7%; }

/* preview · APPS (phone screens) */
.ai-pv--app .ai-pv-phone{ position:relative; width:62px; height:128px; border-radius:15px; background:#0c1c34; border:1px solid rgba(255,255,255,.18); padding:7px; box-shadow:0 12px 28px -10px #000; }
.ai-pv-phone__notch{ position:absolute; top:5px; left:50%; transform:translateX(-50%); width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.28); z-index:3; }
.ai-pv-phone__screens{ position:relative; width:100%; height:100%; border-radius:8px; overflow:hidden; }
.ai-pv-app__screen{ position:absolute; inset:0; display:flex; flex-direction:column; gap:5px; padding:9px 6px 7px; background:#0f2138; opacity:0; animation:pvApp 9s ease-in-out infinite; }
.ai-pv-app__screen--2{ animation-delay:3s; } .ai-pv-app__screen--3{ animation-delay:6s; }
@keyframes pvApp{ 0%{opacity:0; transform:translateX(14%);} 3%,30%{opacity:1; transform:translateX(0);} 34%,100%{opacity:0; transform:translateX(-14%);} }
.ai-pv-app__bar{ height:6px; width:68%; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); }
.ai-pv-app__row{ height:8px; border-radius:3px; background:rgba(255,255,255,.12); }
.ai-pv-app__btn{ margin-top:auto; height:13px; border-radius:7px; background:linear-gradient(100deg,var(--gold),var(--gold-bright)); }
.ai-pv-app__chart{ display:flex; align-items:flex-end; gap:3px; height:38px; }
.ai-pv-app__chart i{ flex:1; border-radius:2px 2px 0 0; background:var(--gold-bright); }
.ai-pv-app__chart i:nth-child(1){height:45%}.ai-pv-app__chart i:nth-child(2){height:72%}.ai-pv-app__chart i:nth-child(3){height:55%}.ai-pv-app__chart i:nth-child(4){height:90%}
.ai-pv-app__avatar{ width:22px; height:22px; border-radius:50%; background:rgba(230,200,127,.5); margin:3px auto 0; }

/* preview · AUTOMATIONS (workflow) */
.ai-pv--auto{ display:block; }
.ai-pv-auto__wire{ position:absolute; inset:14% 10%; width:80%; height:72%; color:rgba(230,200,127,.45); overflow:visible; }
.ai-pv-auto__node{ position:absolute; width:15px; height:15px; border-radius:5px; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); animation:pvNode 3.2s ease-in-out infinite; }
.ai-pv-auto__node--a{ left:18%; top:71%; } .ai-pv-auto__node--b{ left:50%; top:31%; animation-delay:.8s; } .ai-pv-auto__node--c{ left:82%; top:71%; animation-delay:1.6s; }
@keyframes pvNode{ 0%,35%{ background:rgba(255,255,255,.08); box-shadow:none; } 48%,66%{ background:var(--gold-bright); box-shadow:0 0 10px 2px rgba(230,200,127,.6); } 100%{ background:rgba(255,255,255,.08); } }
.ai-pv-auto__dot{ position:absolute; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%);
  background:#fff7e6; box-shadow:0 0 10px 3px rgba(230,200,127,.85); animation:pvDot 3.2s ease-in-out infinite; }
@keyframes pvDot{ 0%{left:18%;top:71%}25%{left:50%;top:31%}50%{left:82%;top:71%}75%{left:50%;top:31%}100%{left:18%;top:71%} }
.ai-pv-auto__done{ position:absolute; right:12px; top:12px; width:16px; height:16px; border-radius:50%; background:var(--ai-ok); color:#0a1830; font-size:10px; font-weight:700; display:grid; place-items:center; opacity:0; animation:pvDone 3.2s ease-in-out infinite; }
@keyframes pvDone{ 0%,52%{ opacity:0; transform:scale(.5); } 64%,90%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.5); } }

/* preview · BUSINESS OS (dashboard) */
.ai-pv--os{ position:absolute; inset:0; display:flex; flex-direction:column; gap:6px; padding:9px 10px; }
.ai-pv-os__head{ display:flex; align-items:center; gap:5px; }
.ai-pv-os__brand{ font-family:var(--ui); font-size:7px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim); }
.ai-pv-os__live{ margin-left:auto; }
.ai-pv-os__kpis{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ai-pv-os__kpi{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:6px; padding:5px 6px; }
.ai-pv-os__kpi b{ display:block; font-family:var(--display); font-weight:600; font-size:14px; color:var(--gold-bright); line-height:1; }
.ai-pv-os__kpi span{ display:block; margin-top:4px; width:60%; height:3px; border-radius:2px; background:rgba(255,255,255,.18); }
.ai-pv-os__chart{ display:flex; align-items:flex-end; gap:3px; height:24px; margin-top:auto; }
.ai-pv-os__chart i{ flex:1; border-radius:2px 2px 0 0; background:linear-gradient(180deg,var(--gold-bright),rgba(230,200,127,.3)); transform-origin:bottom; animation:pvBar 2.6s ease-in-out infinite; }
.ai-pv-os__chart i:nth-child(1){height:42%;animation-delay:0s}.ai-pv-os__chart i:nth-child(2){height:66%;animation-delay:.2s}.ai-pv-os__chart i:nth-child(3){height:50%;animation-delay:.4s}.ai-pv-os__chart i:nth-child(4){height:82%;animation-delay:.6s}.ai-pv-os__chart i:nth-child(5){height:60%;animation-delay:.8s}.ai-pv-os__chart i:nth-child(6){height:94%;animation-delay:1s}
@keyframes pvBar{ 0%,100%{ transform:scaleY(.82); } 50%{ transform:scaleY(1); } }
.ai-pv-os__toast{ position:absolute; left:9px; right:9px; bottom:9px; display:flex; align-items:center; gap:5px; font-family:var(--ui); font-size:7.5px; letter-spacing:.02em; color:var(--ivory); background:rgba(20,42,72,.96); border:1px solid rgba(255,255,255,.14); border-radius:7px; padding:4px 7px; box-shadow:0 8px 18px -8px #000; transform:translateY(160%); animation:pvToast 5.5s ease-in-out infinite; }
@keyframes pvToast{ 0%,8%{ transform:translateY(160%); } 18%,72%{ transform:translateY(0); } 84%,100%{ transform:translateY(160%); } }

/* =============================================================
   MOTION SAFETY
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .ai-reveal, .ai-line > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ai-field__aurora, .ai-console, .ai-pulse, .ai-marquee__row,
  .ai-spot__portrait img, .ai-spot__halo, .ai-spot__ring, .ai-flow__comet,
  .ai-close__rings, .ai-close__node,
  .ai-pv-web__scroll, .ai-pv-app__screen, .ai-pv-auto__node, .ai-pv-auto__dot, .ai-pv-auto__done, .ai-pv-os__chart i, .ai-pv-os__toast{ animation:none !important; }
  .ai-pv-app__screen--1{ opacity:1 !important; }
  .ai-flow.is-running .ai-flow__trace{ transition:none; stroke-dashoffset:0; }
  .ai-dash{ transform:rotateX(2deg) !important; }
  .ai-os-shot{ transform:none !important; transition:none !important; }
  .ai-chips.is-collapsed .ai-chip-x{ transition:none; }
}