/* ════════════════════════════════════════════════════════════════
   Turnkey AI — zoom-forward redesign
   Light-first. Plus Jakarta Sans. Brand blue #0037C9 / cyan #5FB1FF.

   The scroll mechanic: 7 panels are stacked in z-space inside a fixed
   perspective stage; scroll flies a virtual camera forward through
   them (see app.js). Each panel is a fixed-size "card" — app.js runs
   a fit-to-viewport pass so content never overflows the frame.
   ════════════════════════════════════════════════════════════════ */

:root{
  --bg:#eef2f9;
  --fg:#08111f;
  --fg-dim:#3a4660;
  --fg-faint:#6b7990;
  --hair:rgba(10,18,36,.12);
  --hair-strong:rgba(10,18,36,.22);
  --brand:#0037C9;
  --brand-cyan:#5FB1FF;
  --brand-soft:rgba(0,55,201,.10);
  --halo:rgba(238,242,249,.92);
  --jakarta:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:linear-gradient(180deg,#eef2f9 0%,#e6ebf5 100%);
  color:var(--fg);
  font-family:var(--jakarta);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:rgba(0,55,201,.22);color:var(--fg);}

/* ─── Background layers ─────────────────────────────────────────── */
/* #aurora carries a soft light-nebula gradient as its background; the
   WebGL aurora paints over it on success, and it IS the look if WebGL
   is unavailable. Either way the page stays light-first. */
#aurora{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 52% at 18% 22%,rgba(95,177,255,.34),transparent 62%),
    radial-gradient(ellipse 52% 50% at 86% 28%,rgba(140,124,255,.26),transparent 64%),
    radial-gradient(ellipse 62% 56% at 74% 82%,rgba(0,85,255,.20),transparent 66%),
    radial-gradient(ellipse 50% 48% at 30% 88%,rgba(95,177,255,.18),transparent 64%),
    linear-gradient(180deg,#eef2f9,#e6ebf5);
}
#bg-scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 58% at 50% 46%,
      rgba(244,247,251,.66) 0%,
      rgba(244,247,251,.32) 52%,
      rgba(244,247,251,0) 80%);
}
#grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(10,18,36,.05) .5px,transparent .5px);
  background-size:3px 3px;
}

/* ─── Top chrome ────────────────────────────────────────────────── */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;pointer-events:none;
  font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-dim);
}
.chrome>*{pointer-events:auto;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-logo{height:34px;width:auto;display:block;
  filter:drop-shadow(0 4px 12px rgba(0,55,201,.18));}
.chrome-nav{display:flex;gap:24px;}
.chrome-nav a{transition:color .25s;}
.chrome-nav a:hover{color:var(--brand);}
.chrome-status{display:flex;align-items:center;gap:9px;color:var(--fg-faint);}
.chrome-status .dot{width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 9px rgba(0,55,201,.6);
  animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ─── Chapter rail ──────────────────────────────────────────────── */
.rail{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:14px;
}
.rail-step{
  display:flex;align-items:center;gap:11px;border:0;background:none;
  font-family:var(--jakarta);font-weight:600;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-faint);transition:color .35s;
}
.rail-step .tick{width:16px;height:1.5px;background:currentColor;
  opacity:.55;border-radius:2px;transition:width .35s var(--ease),opacity .35s,background .35s;}
.rail-step:hover{color:var(--fg-dim);}
.rail-step.is-active{color:var(--fg);}
.rail-step.is-active .tick{width:32px;opacity:1;background:var(--brand);
  box-shadow:0 0 10px rgba(0,55,201,.5);}

/* ─── Scroll hint ───────────────────────────────────────────────── */
.scroll-hint{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint);transition:opacity .5s;
}
.scroll-hint-bar{width:1.5px;height:32px;background:var(--hair-strong);
  border-radius:2px;overflow:hidden;position:relative;}
.scroll-hint-bar i{position:absolute;left:0;right:0;top:0;height:40%;
  background:var(--brand);border-radius:2px;
  animation:hintrun 1.9s var(--ease) infinite;}
@keyframes hintrun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}
.scroll-hint.gone{opacity:0;}

/* ─── The stage — fixed camera viewport ─────────────────────────── */
#stage{
  position:fixed;inset:0;z-index:10;
  perspective:1500px;perspective-origin:50% 48%;
  pointer-events:none;
}
.panel{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:84px 5vw 64px;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  opacity:0;
}
.panel-inner{
  width:100%;max-width:1120px;
  transform-origin:center center;   /* JS fit-to-viewport scales here */
}
/* depth-layer hooks — kept as harmless no-ops; the zoom-forward
   effect lives on the panel as a whole (see app.js) */
.layer-fore,.layer-mid,.layer-back{transform:none;}

/* ─── Shared type ───────────────────────────────────────────────── */
h1,h2,h3{letter-spacing:-.025em;line-height:1.04;font-weight:700;}
h1{font-size:clamp(42px,6.6vw,98px);}
h2{font-size:clamp(29px,3.7vw,50px);font-weight:600;}
h3{font-size:clamp(19px,1.7vw,23px);font-weight:600;}
/* Shimmer: dark text on light bg with a moving blue gradient swept
   through it. The gradient stops use opaque colors so the dark phase
   reads as a solid dark glyph; the text-shadow halo from h1/h2 is
   neutralised here so it doesn't fringe the glyph edges to gray. */
.em{font-style:normal;font-weight:700;
  background:linear-gradient(108deg,
    #08111f 0%, #08111f 40%,
    #1B6BFF 48%, #5FB1FF 50%, #1B6BFF 52%,
    #08111f 60%, #08111f 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
  animation:shimmer 5s linear infinite;}
/* Animated brand-blue gradient glyph - used for "Practical AI". A colorful
   blue gradient that pans continuously (distinct from .em's dark shimmer). */
.grad{font-style:normal;font-weight:700;
  background:linear-gradient(120deg,
    #0037C9 0%,#1B6BFF 25%,#5FB1FF 50%,#1B6BFF 75%,#0037C9 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
  animation:gradpan 6s linear infinite;}
@keyframes gradpan{
  0%   {background-position:0% 50%;}
  100% {background-position:200% 50%;}
}
@keyframes shimmer{
  0%   {background-position:-30% 50%;}
  100% {background-position:130% 50%;}
}
p{font-size:17px;line-height:1.58;color:var(--fg-dim);max-width:56ch;}
p.lg{font-size:19px;max-width:52ch;}

.label{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);margin-bottom:18px;
}
.label::before{content:"";width:22px;height:1.5px;background:var(--brand);border-radius:2px;}

/* a soft readability lift behind copy */
h1,h2,h3,.hero-sub,.stat .num,.metric{
  text-shadow:0 1px 16px var(--halo);
}

/* ─── CTA buttons ───────────────────────────────────────────────── */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background .3s;
}
.hero-cta{
  margin-top:32px;padding:13px 22px 13px 15px;border-radius:999px;
  border:1px solid var(--hair-strong);background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--fg);
}
.hero-cta:hover{transform:translateY(-3px);border-color:var(--brand);
  background:rgba(255,255,255,.86);box-shadow:0 16px 40px -14px rgba(0,55,201,.4);}
.cta-arrow{
  width:23px;height:23px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#5FB1FF,#0037C9);color:#fff;font-weight:700;font-size:13px;
}
.book-cta{
  margin-top:24px;padding:16px 22px 16px 28px;border-radius:999px;
  background:linear-gradient(135deg,#5FB1FF,#0037C9);color:#fff;
  font-size:13px;box-shadow:0 18px 50px -16px rgba(0,55,201,.6);
}
.book-cta:hover{transform:translateY(-3px);box-shadow:0 22px 56px -14px rgba(0,55,201,.7);}
.book-cta .cta-arrow{background:rgba(255,255,255,.22);}

/* ─── 01 · Hero ─────────────────────────────────────────────────── */
.hero{text-align:center;}
.hero .label{justify-content:center;}
.hero .label::after{content:"";width:22px;height:1.5px;background:var(--brand);border-radius:2px;}
.hero-sub{margin:26px auto 0;font-size:18px;max-width:52ch;color:var(--fg-dim);}

/* ─── 02 · The Gap ──────────────────────────────────────────────── */
.gap-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;}
.gap-grid h2{margin-bottom:16px;}
.stat-pile{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.stat{border-top:1.5px solid var(--hair);padding-top:13px;}
.stat .num{font-weight:300;font-size:clamp(34px,3vw,46px);
  letter-spacing:-.04em;color:var(--fg);line-height:1;}
.stat .num .hl{color:var(--brand);font-weight:500;}
.stat .lbl{margin-top:9px;font-weight:700;font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--fg-faint);line-height:1.4;}

/* ─── 03 · Method ───────────────────────────────────────────────── */
.method-lead{margin:13px 0 22px;}
.services-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;
}
.service{
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:19px 21px 17px;position:relative;transition:background .35s;
}
.service:hover{background:rgba(0,55,201,.06);}
.service .num{font-weight:700;font-size:10px;letter-spacing:.15em;color:var(--fg-faint);}
.service h3{margin:7px 0 6px;color:var(--fg);}
.service p{font-size:13px;line-height:1.5;color:var(--fg-dim);max-width:none;}
.service .ignite{position:absolute;top:19px;right:21px;
  width:9px;height:9px;border-radius:50%;background:var(--hair-strong);
  transition:background .5s,box-shadow .5s;}
.service.is-lit .ignite{background:var(--brand);box-shadow:0 0 16px rgba(0,55,201,.6);}
.service.is-lit{background:rgba(0,55,201,.07);}

/* ─── 04 · Live showcase ────────────────────────────────────────── */
.live-lead{margin:13px auto 18px;}
.ai-shell{
  border:1px solid var(--hair-strong);border-radius:12px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:20px;max-width:740px;margin:0 auto;
  box-shadow:0 24px 56px -30px rgba(0,55,201,.34);
}
.ai-head{display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-faint);}
.ai-live{display:flex;align-items:center;gap:7px;color:var(--brand);}
.ai-live::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 8px rgba(0,55,201,.6);
  animation:pulse 1.7s infinite;}
.ai-input{margin-top:14px;display:flex;gap:8px;
  border:1px solid var(--hair-strong);border-radius:8px;
  background:#fff;padding:4px 4px 4px 15px;}
.ai-input input{flex:1;border:0;outline:0;background:transparent;
  color:var(--fg);font:500 15px var(--jakarta);padding:10px 0;}
.ai-input input::placeholder{color:var(--fg-faint);}
.ai-input button{border:0;border-radius:6px;padding:0 21px;
  background:linear-gradient(135deg,#5FB1FF,#0037C9);color:#fff;
  font:700 12px var(--jakarta);letter-spacing:.13em;text-transform:uppercase;
  transition:filter .25s;}
.ai-input button:hover{filter:brightness(1.08);}
.ai-input button:disabled{opacity:.45;cursor:not-allowed;}
.ai-output{margin-top:15px;border-top:1px dashed var(--hair-strong);
  padding-top:15px;min-height:172px;}
.chip-hint{font-weight:700;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-faint);margin-bottom:11px;}
.chip-row{display:flex;flex-wrap:wrap;gap:7px;}
.chip{border:1px solid var(--hair-strong);background:transparent;
  border-radius:6px;padding:8px 12px;color:var(--fg-dim);
  font:600 11.5px var(--jakarta);text-align:left;
  transition:border-color .22s,color .22s,background .22s;}
.chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
.strat-block{margin-bottom:11px;}
.strat-block:last-child{margin-bottom:0;}
.strat-block .sh{font-weight:700;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand);margin-bottom:3px;}
.strat-block .sb{font-size:14px;line-height:1.55;color:var(--fg-dim);}
.caret{display:inline-block;width:7px;height:14px;vertical-align:-2px;
  margin-left:1px;background:var(--brand);animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}
.strat-cta{margin-top:13px;}
/* ─── Thinker — fun "Sonnet is sketching your wedge" loader ──────── */
.thinker{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 12px 22px;text-align:center;
  animation:thinker-fade .35s ease-out both;}
@keyframes thinker-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.thinker-orb{position:relative;width:96px;height:96px;margin-bottom:18px;}
.thinker-orb .ring{position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(0,55,201,.18);}
.thinker-orb .ring.r1{animation:ring-pulse 2.4s ease-in-out infinite;}
.thinker-orb .ring.r2{inset:14px;border-color:rgba(0,55,201,.28);
  animation:ring-pulse 2.4s ease-in-out infinite .6s;}
@keyframes ring-pulse{
  0%,100%{transform:scale(.92);opacity:.45;}
  50%   {transform:scale(1.06);opacity:1;}
}
.thinker-orb .core{position:absolute;left:50%;top:50%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #5FB1FF 0%, #0037C9 70%, #001B66 100%);
  box-shadow:0 0 22px rgba(0,55,201,.55), 0 0 8px rgba(95,177,255,.7);
  animation:core-breathe 1.6s ease-in-out infinite;}
@keyframes core-breathe{
  0%,100%{transform:scale(.85);opacity:.85;}
  50%   {transform:scale(1.15);opacity:1;}
}
.thinker-orb .dot{position:absolute;left:50%;top:50%;width:8px;height:8px;
  margin:-4px 0 0 -4px;border-radius:50%;background:#0037C9;
  box-shadow:0 0 10px rgba(0,55,201,.65);
  transform-origin:0 0;}
.thinker-orb .dot.d1{animation:orbit-a 2.1s linear infinite;}
.thinker-orb .dot.d2{background:#5FB1FF;box-shadow:0 0 10px rgba(95,177,255,.7);
  animation:orbit-b 2.1s linear infinite;}
.thinker-orb .dot.d3{background:#1B6BFF;box-shadow:0 0 10px rgba(27,107,255,.65);
  animation:orbit-c 2.1s linear infinite;}
@keyframes orbit-a{
  0%  {transform:rotate(0deg)   translateX(40px) rotate(0deg);}
  100%{transform:rotate(360deg) translateX(40px) rotate(-360deg);}
}
@keyframes orbit-b{
  0%  {transform:rotate(120deg) translateX(40px) rotate(-120deg);}
  100%{transform:rotate(480deg) translateX(40px) rotate(-480deg);}
}
@keyframes orbit-c{
  0%  {transform:rotate(240deg) translateX(40px) rotate(-240deg);}
  100%{transform:rotate(600deg) translateX(40px) rotate(-600deg);}
}
.thinker-phase{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:var(--fg);min-height:22px;
  transition:opacity .22s ease, transform .22s ease;}
.thinker-phase.swap{opacity:0;transform:translateY(-3px);}
.thinker-sub{margin-top:6px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-faint);font-weight:500;}
@media (prefers-reduced-motion: reduce){
  .thinker-orb .ring,.thinker-orb .core,.thinker-orb .dot{animation:none !important;}
  .thinker-orb .core{opacity:1;}
}

.contact-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair);
  transition:color .2s, border-color .2s;}
.contact-link:hover{color:var(--brand);border-color:var(--brand);}

/* ─── 05 · Proof ────────────────────────────────────────────────── */
.proof-lead{margin:13px 0 26px;}
.case-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.case-card{border-top:1.5px solid var(--hair-strong);padding-top:16px;}
.metric{font-weight:300;font-size:clamp(34px,3vw,50px);
  letter-spacing:-.04em;color:var(--fg);line-height:1;}
.metric .unit{color:var(--brand);font-size:.42em;font-weight:500;}
.who{margin-top:11px;font-weight:700;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-faint);}
.what{margin-top:7px;font-size:13.5px;line-height:1.52;color:var(--fg-dim);}

/* ─── 06 · Answers ──────────────────────────────────────────────── */
.faq-list{border-top:1px solid var(--hair);margin-top:8px;}
.faq-row{
  border-bottom:1px solid var(--hair);padding:13px 4px;
  display:grid;grid-template-columns:32px 1fr 28px;gap:14px;
  align-items:start;transition:background .22s;cursor:pointer;
}
.faq-row:hover{background:rgba(0,55,201,.04);}
.faq-row .n{font-weight:700;font-size:10.5px;letter-spacing:.1em;
  color:var(--fg-faint);margin-top:3px;}
.faq-row .q{font-size:16.5px;font-weight:600;color:var(--fg);letter-spacing:-.01em;}
.faq-row .a{max-height:0;overflow:hidden;font-size:14px;line-height:1.58;
  color:var(--fg-dim);max-width:64ch;opacity:0;
  transition:max-height .42s var(--ease),margin-top .42s var(--ease),opacity .3s;}
.faq-row.is-open .a{max-height:160px;margin-top:7px;opacity:1;}
.faq-row .plus{
  width:26px;height:26px;border:1px solid var(--hair-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--fg-dim);
  transition:transform .35s var(--ease),border-color .3s,color .3s;
}
.faq-row.is-open .plus{transform:rotate(45deg);border-color:var(--brand);color:var(--brand);}

/* ─── 07 · Begin ────────────────────────────────────────────────── */
.contact-wrap{text-align:center;}
.contact-wrap .label{justify-content:center;}
.contact-wrap .label::after{content:"";width:22px;height:1.5px;background:var(--brand);border-radius:2px;}
.contact-wrap h2{max-width:16ch;margin:0 auto;}
.contact-lead{margin:18px auto 0;}
.contact-grid{
  margin:30px auto 0;max-width:880px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;
}
.contact-cell{background:rgba(255,255,255,.86);padding:19px 18px;text-align:left;}
.contact-cell .k{font-weight:700;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-faint);}
.contact-cell .v{margin-top:8px;font-size:15.5px;font-weight:600;color:var(--fg);}
.contact-foot{margin-top:22px;font-weight:600;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);}

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width:820px){
  .rail{display:none;}
  .chrome{padding:12px 15px;}
  .chrome-nav{display:none;}
  .chrome-status{font-size:9px;letter-spacing:.1em;}
  .panel{padding:74px 20px 56px;}
  #stage{perspective:1100px;}
  .gap-grid{grid-template-columns:1fr;gap:22px;}
  .stat-pile{gap:12px;}
  .services-grid{grid-template-columns:1fr;}
  .case-list{grid-template-columns:1fr;gap:12px;}
  .contact-grid{grid-template-columns:1fr;}
  .ai-shell{padding:15px;}
  .ai-output{min-height:140px;}
  .chip{font-size:11px;padding:7px 10px;}
  p{font-size:15.5px;}
  p.lg{font-size:16.5px;}
  .hero-sub{font-size:15.5px;}
  .faq-row{grid-template-columns:24px 1fr 24px;gap:9px;}
  .faq-row .q{font-size:15px;}
  .scroll-hint{bottom:14px;}
}

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .em,.scroll-hint-bar i,.chrome-status .dot,.ai-live::before,.caret{animation:none;}
  .scroll-hint{display:none;}
}