/* =========================================================
   Sia AI — the AI workforce for Speedo One
   Builds on landing.css (tokens, navbar, buttons, footer).
   Light premium enterprise theme.
   ========================================================= */

:root{
  --ai:#6D5AE6; --ai-tint:#F3F1FE; --ai-line:#DCD6FB;
  --page-2:#F8FAFC;
  --slate:#64748B;
}

/* ---------- rhythm ---------- */
.s{padding:clamp(56px,7vw,112px) 0}
.s.alt{background:var(--page-2);border-block:1px solid var(--border)}
.s.tight{padding-top:clamp(30px,3vw,44px)}
.hd{max-width:820px;margin:0 auto clamp(34px,4.5vw,60px);text-align:center}
.hd.left{margin-inline:0;text-align:left}
.hd h2{font-size:clamp(1.75rem,3.6vw,3.25rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.hd p{margin-top:16px;font-size:clamp(1.02rem,1.25vw,1.19rem);color:var(--slate);line-height:1.7}
.eyebrow-ai{
  display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ai);background:var(--ai-tint);border:1px solid var(--ai-line);
  padding:7px 14px;border-radius:var(--r-full);
}
.eyebrow-ai .ico{width:14px;height:14px}
.center-cta{text-align:center;margin-top:clamp(30px,4vw,46px)}

/* ---------- 01 HERO ---------- */
.hero-ai{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(46px,6vw,92px) 0 clamp(20px,3vw,40px);
  background:
    radial-gradient(780px 380px at 50% -8%, rgba(109,90,230,.10), transparent 68%),
    linear-gradient(180deg,#FBFCFE,#fff 55%);
}
.hero-ai h1{
  margin:22px auto 0;max-width:16ch;
  font-size:clamp(2.15rem,5.4vw,4.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;
}
.hero-ai h1 span{color:var(--brand)}
.hero-ai .sub{margin:18px auto 0;max-width:40ch;font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.hero-ai .lead{margin:16px auto 0;max-width:62ch;font-size:clamp(1.02rem,1.2vw,1.16rem);color:var(--slate);line-height:1.7}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* hero workforce visual */
.stage{margin-top:clamp(28px,4vw,52px)}
.stage svg{width:100%;height:auto;overflow:visible}
.float-a{animation:floatY 8s ease-in-out infinite}
.float-b{animation:floatY 9.5s ease-in-out infinite reverse}
.float-c{animation:floatY 11s ease-in-out infinite}
.wire{stroke-dasharray:5 7;animation:wire 5s linear infinite}
.wire-b{stroke-dasharray:5 7;animation:wire 7s linear infinite}
.glow{animation:glow 3.6s ease-in-out infinite}
.blip{animation:blip 2.6s ease-in-out infinite}
.blip-2{animation:blip 2.6s ease-in-out .8s infinite}
.blip-3{animation:blip 2.6s ease-in-out 1.6s infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wire{to{stroke-dashoffset:-48}}
@keyframes blip{0%,100%{opacity:.32}50%{opacity:1}}
@keyframes glow{0%,100%{opacity:.25}50%{opacity:.6}}
@keyframes ripple{0%{transform:scale(.9);opacity:.5}75%{transform:scale(1.32);opacity:0}100%{opacity:0}}
.ripple{transform-box:fill-box;transform-origin:center;animation:ripple 3.6s ease-out infinite}

.stage-mini{display:none;margin-top:26px}
.stage-mini .eco-hub{margin-bottom:14px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-agent{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;text-align:left;
}
.mini-agent .m-ico{width:34px;height:34px;border-radius:10px;margin-bottom:9px}
.mini-agent b{display:block;font-size:.88rem;font-weight:700}
.mini-agent span{display:block;font-size:.76rem;color:var(--slate);margin-top:2px}
.mini-agent em{
  display:inline-block;margin-top:8px;font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-dark);background:var(--brand-tint);border:1px solid #DCE9F6;
  padding:3px 8px;border-radius:var(--r-full);
}

/* ---------- 02 QUICK QUESTIONS ---------- */
.qs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.qs a{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--r-full);
  border:1px solid var(--border-2);background:#fff;font-size:.92rem;font-weight:600;color:var(--ink-2);
  transition:border-color .16s,color .16s,background .16s,transform .16s var(--ease);
}
.qs a:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-tint);transform:translateY(-1px)}
.qs .ico{width:15px;height:15px;color:var(--ai)}

/* ---------- 03 DIGITAL WORKFORCE CONSOLE ---------- */
.console{
  background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--sh-lg);
}
.console-bar{
  display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:#FBFCFE;
}
.console-bar .dots{display:flex;gap:6px}
.console-bar .dots i{width:9px;height:9px;border-radius:50%;background:#D8DEE7}
.console-bar b{font-size:.85rem;font-weight:700;color:var(--ink-2)}
.console-bar .pill{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ok);background:#E9F8EE;border:1px solid #CBEBD6;
  padding:5px 11px;border-radius:var(--r-full);
}
.console-bar .pill i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blip 1.7s ease-in-out infinite}
.console-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.crew{padding:10px 0;border-right:1px solid var(--border)}
.crew-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:15px 22px;border-bottom:1px solid var(--border);
  opacity:0;transform:translateY(10px);
}
.crew-row:last-child{border-bottom:0}
.crew-row.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.crew-row .m-ico{width:40px;height:40px;border-radius:11px}
.crew-row b{display:block;font-size:.98rem;font-weight:700}
.crew-row p{margin-top:3px;font-size:.89rem;color:var(--slate)}
.crew-row .bar{grid-column:2;height:4px;border-radius:2px;background:#EEF2F7;overflow:hidden;margin-top:9px}
.crew-row .bar i{display:block;height:100%;border-radius:2px;background:var(--brand);width:20%;animation:fill 3.6s var(--ease) infinite}
.crew-row:nth-child(2) .bar i{animation-delay:.5s}
.crew-row:nth-child(3) .bar i{animation-delay:1s;background:var(--teal)}
.crew-row:nth-child(4) .bar i{animation-delay:1.5s;background:var(--amber)}
.crew-row:nth-child(5) .bar i{animation-delay:2s;background:var(--ai)}
@keyframes fill{0%{width:14%}55%{width:88%}100%{width:14%}}
.status{
  display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand);white-space:nowrap;
}
.status i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blip 1.8s ease-in-out infinite}
.crew-side{padding:22px;background:#FBFCFE;display:grid;gap:14px;align-content:start}
.mini{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
.mini h4{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.mini b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.035em;color:var(--brand-deep);margin-top:6px;font-variant-numeric:tabular-nums}
.mini span{font-size:.8rem;color:var(--slate)}
.spark{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:12px}
.spark i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--brand-soft),var(--brand))}

/* ---------- 04 AGENT RAIL ---------- */
.rail-wrap{position:relative}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scroll-behavior:smooth;
  scrollbar-width:thin;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:#D8E0EA;border-radius:4px}
.rail::-webkit-scrollbar-track{background:transparent}
.acard{
  scroll-snap-align:start;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s;
}
.acard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--border-2)}
.acard .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acard .m-ico{width:44px;height:44px;border-radius:12px}
.acard:hover .m-ico{transform:translateY(-2px) scale(1.06)}
.aitag{
  font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ai);
  background:var(--ai-tint);border:1px solid var(--ai-line);padding:4px 9px;border-radius:var(--r-full);
}
.acard h3{margin-top:16px;font-size:1.05rem;font-weight:700}
.acard p{margin-top:8px;font-size:.92rem;color:var(--slate);line-height:1.6}
.acard .card-link{margin-top:18px}
.rail-nav{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px}
.rail-nav button{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border-2);background:#fff;color:var(--ink-2);
  display:grid;place-items:center;transition:border-color .15s,color .15s,background .15s;
}
.rail-nav button:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-tint)}
.rail-nav .ico{width:17px;height:17px}
.rail-nav .prev .ico{transform:rotate(180deg)}

/* ---------- 05 WORKFLOW DEMO ---------- */
.flowbox{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--sh-md)}
.flowbox .console-bar b{letter-spacing:.02em}
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.flow-left{padding:clamp(22px,3vw,32px);border-right:1px solid var(--border)}
.flow-right{padding:clamp(22px,3vw,32px);background:#FBFCFE}
.cmd{
  display:flex;gap:13px;align-items:flex-start;padding:18px;border:1px solid var(--border-2);border-radius:14px;background:#fff;
}
.cmd .m-ico{width:36px;height:36px;border-radius:10px;flex:0 0 auto}
.cmd .lbl{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cmd p{margin-top:5px;font-size:1rem;color:var(--ink);line-height:1.55}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--brand);vertical-align:-2px;margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.cmd-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cmd-note{margin-top:18px;font-size:.9rem;color:var(--slate);line-height:1.65}
.cmd-note b{color:var(--ink-2)}

.chain{display:grid;gap:4px}
.link{
  display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;
  font-size:.93rem;color:var(--ink-3);opacity:.42;
  transition:opacity .3s var(--ease),background .3s var(--ease),color .3s;
}
.link .dot{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--border-2);flex:0 0 auto;
  display:grid;place-items:center;color:#fff;transition:border-color .3s,background .3s;
}
.link .dot .ico{width:12px;height:12px;stroke-width:3;opacity:0;transition:opacity .2s}
.link span{font-weight:600;color:inherit}
.link em{font-style:normal;color:var(--ink-3);font-weight:400}
.link.active{opacity:1;background:var(--brand-tint);color:var(--ink)}
.link.active .dot{border-color:var(--brand);border-style:dashed;animation:spin 1.4s linear infinite}
.link.done{opacity:1;color:var(--ink-2)}
.link.done .dot{background:var(--ok);border-color:var(--ok);animation:none}
.link.done .dot .ico{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.done-card{
  margin-top:18px;border:1px solid #BFE3CB;background:#F4FBF6;border-radius:14px;padding:20px;
  opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.done-card.show{opacity:1;transform:none}
.done-card .head{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:800;color:#12703A}
.done-card .head .ico{width:20px;height:20px;color:var(--ok)}
.done-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.done-grid div{background:#fff;border:1px solid #D8EEDF;border-radius:11px;padding:13px}
.done-grid b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.035em;color:var(--brand-deep)}
.done-grid span{display:block;font-size:.78rem;color:var(--slate);margin-top:2px}
.done-card .btn{margin-top:16px}

/* ---------- 06 PLATFORM ---------- */
.block{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(34px,4.5vw,58px) 0;border-top:1px solid var(--border);
}
.block:first-of-type{border-top:0}
.block.flip .b-copy{order:2}
.b-num{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:var(--brand-light);color:var(--brand-dark);font-weight:800;font-size:.95rem;letter-spacing:-.02em;
}
.b-copy h3{margin-top:18px;font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.03em}
.b-copy p{margin-top:12px;font-size:1.05rem;color:var(--slate);line-height:1.7}
.b-copy .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.b-visual{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--sh-sm);
}
.alt .b-visual{background:#fff}

/* store grid inside block */
.store{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.store a{
  display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--border);border-radius:12px;
  background:#fff;transition:border-color .16s,background .16s,transform .16s var(--ease);
}
.store a:hover{border-color:var(--brand);background:var(--brand-tint);transform:translateY(-2px)}
.store .m-ico{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.store b{display:block;font-size:.9rem;font-weight:700}
.store span{display:block;font-size:.76rem;color:var(--ink-3)}

/* studio mini UI */
.studio{display:grid;gap:10px}
.studio .fld{border:1px solid var(--border);border-radius:11px;padding:11px 13px;background:#fff}
.studio .fld label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.studio .fld p{margin-top:4px;font-size:.9rem;color:var(--ink)}
.studio .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tokens{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tok{font-size:.76rem;font-weight:600;color:var(--brand-dark);background:var(--brand-tint);border:1px solid #DCE9F6;padding:4px 9px;border-radius:var(--r-full)}
.tok.ai{color:var(--ai);background:var(--ai-tint);border-color:var(--ai-line)}
.studio .switch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.studio .switch i{width:34px;height:20px;border-radius:10px;background:var(--brand);position:relative;flex:0 0 auto}
.studio .switch i::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#fff}

/* intelligence viz */
.iq{display:grid;gap:12px}
.iq-row{display:flex;align-items:center;gap:12px}
.iq-row .k{width:118px;flex:0 0 auto;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.iq-bar{flex:1;height:9px;border-radius:5px;background:#EEF2F7;overflow:hidden}
.iq-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--brand-soft),var(--ai));width:0;transition:width 1.2s var(--ease)}
.iq-row .v{font-size:.82rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;width:44px;text-align:right}
.iq-foot{margin-top:6px;font-size:.82rem;color:var(--ink-3)}

/* connect chips */
.conn{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-full);
  border:1px solid var(--border);background:#fff;font-size:.86rem;font-weight:600;color:var(--ink-2);
  transition:border-color .15s,background .15s,color .15s,transform .15s var(--ease);
}
.chip:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark);transform:translateY(-1px)}
.chip .ico{width:15px;height:15px}

/* ---------- 07 BUILD STEPS ---------- */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.steps4::before{
  content:"";position:absolute;left:7%;right:7%;top:32px;height:2px;
  background:repeating-linear-gradient(90deg,var(--border-2) 0 7px,transparent 7px 15px);
}
.st{position:relative;text-align:center;padding:0 8px}
.st b{
  position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;
  border-radius:50%;background:#fff;border:2px solid var(--brand);color:var(--brand-dark);
  font-size:1.1rem;font-weight:800;box-shadow:0 0 0 8px var(--page-2);
}
.s:not(.alt) .st b{box-shadow:0 0 0 8px #fff}
.st h3{font-size:1.08rem;font-weight:700}
.st p{margin-top:9px;font-size:.95rem;color:var(--slate);line-height:1.6}

/* ---------- 08 AGENT TYPES ---------- */
.types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.type{
  background:#fff;border:1px solid var(--border);border-top:3px solid var(--brand);border-radius:14px;padding:24px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.type:nth-child(2){border-top-color:var(--teal)}
.type:nth-child(3){border-top-color:var(--amber)}
.type:nth-child(4){border-top-color:var(--ai)}
.type:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.type .m-ico{width:40px;height:40px;border-radius:11px}
.type h3{margin-top:14px;font-size:1.04rem;font-weight:700}
.type p{margin-top:8px;font-size:.93rem;color:var(--slate);line-height:1.6}
.equation{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:clamp(28px,3.5vw,44px);
}
.eq{
  display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:14px;
  border:1px solid var(--border);background:#fff;font-weight:700;font-size:1rem;
}
.eq .ico{width:18px;height:18px;color:var(--brand)}
.eq.total{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.eq.total .ico{color:#9DCAF0}
.eq-op{font-size:1.3rem;font-weight:800;color:var(--ink-3)}

/* ---------- 09 MULTI-AGENT ---------- */
.multi{max-width:820px;margin:0 auto;display:grid;gap:10px}
.ask,.final{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;display:flex;gap:14px;align-items:center;
}
.final{border-color:#BFE3CB;background:#F4FBF6;display:block}
.ask .m-ico,.final .m-ico{width:38px;height:38px;border-radius:10px;flex:0 0 auto}
.ask .lbl,.final .lbl{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ask p{margin-top:4px;font-size:1.02rem;font-weight:600}
.tie{justify-self:center;width:2px;height:16px;background:var(--border-2)}
.mstep{
  display:flex;align-items:center;gap:14px;padding:15px 18px;background:#fff;border:1px solid var(--border);border-radius:14px;
  opacity:0;transform:translateY(10px);
}
.mstep.in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mstep .m-ico{width:36px;height:36px;border-radius:10px;flex:0 0 auto}
.mstep b{font-size:.97rem;font-weight:700}
.mstep span{display:block;font-size:.88rem;color:var(--slate);margin-top:2px}
.mstep .tick{margin-left:auto;color:var(--ok);opacity:0;transition:opacity .3s .35s}
.mstep.in .tick{opacity:1}
.final .head{display:flex;align-items:center;gap:12px}
.final .head b{font-size:1.05rem;font-weight:800;color:#12703A}
.report{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
.report div{background:#fff;border:1px solid #D8EEDF;border-radius:11px;padding:12px;text-align:center}
.report b{display:block;font-size:1.05rem;font-weight:800;color:var(--brand-deep)}
.report span{display:block;font-size:.75rem;color:var(--slate);margin-top:2px}

/* ---------- 10 ECOSYSTEM ---------- */
.eco svg{width:100%;height:auto;overflow:visible}
.eco-list{display:none;gap:24px}
.eco-col h4{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;text-align:center}
.eco-col .conn{justify-content:center}
.eco-hub{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 6px;padding:14px 22px;
  width:max-content;border-radius:var(--r-full);background:var(--brand);color:#fff;font-weight:800;
}
.eco-hub .ico{width:20px;height:20px}

/* ---------- 11 SECURITY ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sec{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.sec:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.sec .m-ico{width:42px;height:42px;border-radius:11px;background:var(--ai-tint);color:var(--ai)}
.sec h3{margin-top:15px;font-size:1.03rem;font-weight:700}
.sec p{margin-top:8px;font-size:.93rem;color:var(--slate);line-height:1.6}

/* ---------- 12 AI ACTIVITY ---------- */
.act-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.act{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px}
.act h4{font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.act b{display:block;margin-top:8px;font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.035em;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.act span{font-size:.82rem;color:var(--slate)}
.feed{margin-top:20px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.feed-hd{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);background:#FBFCFE}
.feed-hd b{font-size:.92rem;font-weight:700}
.feed-hd .pill{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.73rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ok);
}
.feed-hd .pill i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blip 1.7s ease-in-out infinite}
.feed-row{
  display:grid;grid-template-columns:64px auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--border);
}
.feed-row:last-child{border-bottom:0}
.feed-row .t{font-size:.84rem;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.feed-row .m-ico{width:32px;height:32px;border-radius:9px}
.feed-row b{font-size:.92rem;font-weight:700}
.feed-row span{display:block;font-size:.87rem;color:var(--slate)}
.feed-row .ok{color:var(--ok);display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700}
.feed-row .ok .ico{width:15px;height:15px}
.feed-row.fresh{animation:slideIn .5s var(--ease)}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.feed-foot{padding:16px 20px;background:#FBFCFE;border-top:1px solid var(--border);display:flex;justify-content:flex-end}

/* ---------- 13 STORIES ---------- */
.stories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.story{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px;display:flex;flex-direction:column;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.story:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.story .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.92rem;color:var(--ink-2);letter-spacing:-.01em}
.story .logo .m-ico{width:30px;height:30px;border-radius:8px}
.story p{margin-top:16px;font-size:.95rem;color:var(--ink);line-height:1.65}
.story .who{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:11px}
.story .who .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand-light);color:var(--brand-dark);font-weight:800;font-size:.78rem}
.story .who b{display:block;font-size:.89rem}
.story .who span{display:block;font-size:.8rem;color:var(--ink-3)}

/* ---------- 14 CTA + 15 CLOSING ---------- */
.cta-ai{
  border-radius:20px;padding:clamp(34px,5vw,64px);color:#fff;text-align:center;
  background:linear-gradient(120deg,#27568E,#1E72B8 58%,#5A48D0 130%);
}
.cta-ai h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.033em}
.cta-ai p{margin:14px auto 0;max-width:52ch;color:#D9E6F5;font-size:1.06rem}
.cta-ai .hero-btns{margin-top:28px}
.cta-ai .btn-primary{background:#fff;color:var(--brand-deep)}
.cta-ai .btn-primary:hover{background:#EAF3FB}
.cta-ai .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.cta-ai .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:#fff;color:#fff}

.closing{text-align:center}
.closing h2{font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;max-width:18ch;margin:0 auto}
.closing p{margin:18px auto 0;max-width:56ch;font-size:clamp(1.02rem,1.25vw,1.19rem);color:var(--slate);line-height:1.7}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .stories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .console-body{grid-template-columns:1fr}
  .crew{border-right:0;border-bottom:1px solid var(--border)}
  .crew-side{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .block{grid-template-columns:1fr;gap:28px}
  .block.flip .b-copy{order:0}
  .act-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .flow-grid{grid-template-columns:1fr}
  .flow-left{border-right:0;border-bottom:1px solid var(--border)}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .steps4::before{display:none}
  .types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eco svg{display:none}
  .eco-list{display:grid}
  .rail{grid-auto-columns:minmax(262px,1fr)}
}
@media (max-width:768px){
  .hero-btns .btn{min-width:210px}
  .feed-row{grid-template-columns:56px auto minmax(0,1fr);row-gap:6px}
  .feed-row .ok{grid-column:2 / -1}
  .report{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .stage{display:none}
  .stage-mini{display:block}
  .crew-side{grid-template-columns:1fr}
  .types,.sec-grid,.stories,.act-grid{grid-template-columns:1fr}
  .store{grid-template-columns:1fr}
  .done-grid{grid-template-columns:1fr}
  .rail-nav{display:none}
  .rail{grid-auto-columns:88%}
  .equation{flex-direction:column}
}
@media (max-width:480px){
  .hero-ai h1{font-size:clamp(2.05rem,9vw,2.5rem)}
  .hd h2{font-size:clamp(1.7rem,7.4vw,2.1rem)}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%}
  .qs a{width:100%;justify-content:flex-start}
  .steps4{grid-template-columns:1fr;gap:24px}
  .report{grid-template-columns:1fr}
  .crew-row{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .crew-row .status{grid-column:2}
  .feed-row{grid-template-columns:52px minmax(0,1fr)}
  .feed-row .m-ico{display:none}
  .feed-row .ok{grid-column:1 / -1}
}
@media (max-width:380px){
  .acard,.sec,.type,.story,.act{padding:20px}
  .console-bar b{font-size:.78rem}
  .rail{grid-auto-columns:92%}
}

@media (prefers-reduced-motion:reduce){
  .float-a,.float-b,.float-c,.wire,.wire-b,.glow,.blip,.blip-2,.blip-3,.ripple,
  .status i,.crew-row .bar i,.caret,.link.active .dot,.feed-hd .pill i,.console-bar .pill i{animation:none!important}
  .crew-row,.mstep,.rv{opacity:1!important;transform:none!important}
  .crew-row .bar i{width:66%}
  .feed-row.fresh{animation:none}
}

/* =========================================================
   HERO — announcement strip, product sub-nav, dark stage
   ========================================================= */
.promo{
  background:linear-gradient(90deg,#F6E7FB,#E6ECFD 45%,#E4F3FB);
  border-bottom:1px solid #E2E4F0;
  text-align:center;padding:11px 16px;font-size:.9rem;color:#2C2A4A;
}
.promo .ico{width:15px;height:15px;color:var(--ai);display:inline-block;vertical-align:-3px;margin-right:7px}
.promo a{font-weight:700;color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
.promo a:hover{color:var(--brand)}

.subnav{
  position:sticky;top:var(--nav-h);z-index:100;background:#fff;border-bottom:1px solid var(--border);
}
.subnav-in{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.sub-brand{display:inline-flex;align-items:center;gap:11px}
.sub-brand .mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2E9BE0,#1E72B8 55%,#6D5AE6);color:#fff;
}
.sub-brand .mark .ico{width:19px;height:19px}
.sub-brand b{font-size:1.06rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.sub-brand b span{color:var(--brand)}
.sub-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.sub-links a{
  padding:9px 13px;border-radius:var(--r-sm);font-size:.92rem;font-weight:500;color:var(--ink-2);
  transition:background .15s,color .15s;
}
.sub-links a:hover{background:var(--brand-tint);color:var(--brand-dark)}
.sub-links .btn{margin-left:10px;padding:9px 18px;font-size:.9rem;color:#fff}
.sub-links .btn:hover{color:#fff}
.sub-more{display:none}

/* ---------- dark hero ---------- */
.hero-dark{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  background:radial-gradient(1100px 560px at 50% -10%,#2B2266 0%,#1A1743 42%,#141033 100%);
  padding:clamp(56px,7vw,104px) 0 clamp(52px,6vw,88px);
}
.hero-dark::before,.hero-dark::after{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;pointer-events:none;filter:blur(10px);
}
.hero-dark::before{
  left:-320px;bottom:-380px;
  background:radial-gradient(circle at 60% 40%,rgba(224,81,122,.55),rgba(109,90,230,.22) 45%,transparent 68%);
}
.hero-dark::after{
  right:-320px;bottom:-400px;
  background:radial-gradient(circle at 40% 40%,rgba(46,155,224,.5),rgba(109,90,230,.24) 45%,transparent 68%);
}
.hero-dark .wrap{position:relative;z-index:1}
.spark-dot{position:absolute;color:#fff;opacity:.85;pointer-events:none;animation:twinkle 3.4s ease-in-out infinite}
.spark-dot .ico{width:100%;height:100%;fill:currentColor;stroke:none}
.spark-dot.s1{width:22px;height:22px;top:8%;right:12%}
.spark-dot.s2{width:15px;height:15px;top:36%;left:9%;animation-delay:1.1s}
.spark-dot.s3{width:13px;height:13px;top:62%;right:16%;animation-delay:2.2s}
.spark-dot.s4{width:11px;height:11px;top:20%;left:22%;animation-delay:1.7s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.95;transform:scale(1)}}

.hero-dark h1{
  margin:0 auto;max-width:15ch;color:#fff;
  font-size:clamp(2.3rem,5.6vw,4.5rem);font-weight:800;letter-spacing:-.042em;line-height:1.04;
}
.hero-dark h1 span{background:linear-gradient(96deg,#7FC4F5,#B9AAFB);-webkit-background-clip:text;background-clip:text;color:transparent}
.swap{margin:22px auto 0;font-size:clamp(1.05rem,1.7vw,1.4rem);color:#CFD3EE;position:relative;display:inline-block}
.swap .old{position:relative;color:#9FA4CE}
.swap .old::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#E0517A;
  transform:scaleX(0);transform-origin:left;animation:strike .5s var(--ease) 1.1s forwards;
}
.swap .new{
  display:inline-flex;align-items:center;margin-left:8px;padding:4px 13px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(159,164,206,.45);color:#fff;font-weight:700;
  opacity:0;transform:translateY(6px);animation:swapIn .45s var(--ease) 1.5s forwards;
}
@keyframes strike{to{transform:scaleX(1)}}
@keyframes swapIn{to{opacity:1;transform:none}}

/* prompt box */
.askbox{
  position:relative;max-width:830px;margin:clamp(28px,4vw,44px) auto 0;text-align:left;
  border-radius:16px;padding:1px;
  background:linear-gradient(120deg,rgba(127,196,245,.75),rgba(185,170,251,.75) 55%,rgba(224,81,122,.6));
}
.askbox-in{
  display:flex;gap:14px;align-items:flex-end;
  background:#181439;border-radius:15px;padding:20px 20px 16px;
}
.askbox textarea{
  flex:1;min-width:0;min-height:104px;resize:none;border:0;background:none;color:#fff;font:inherit;font-size:1.02rem;line-height:1.6;
}
.askbox textarea::placeholder{color:#8E93BE}
.askbox textarea:focus{outline:none}
.askbox .send{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;transition:background .16s,transform .16s var(--ease);
}
.askbox .send:hover{background:#2E9BE0;transform:translateY(-1px)}
.askbox .send .ico{width:18px;height:18px}
.askbox-hint{margin-top:12px;font-size:.83rem;color:#8E93BE}

/* suggestion pills */
.suggest{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.suggest button,.suggest a{
  padding:10px 16px;border-radius:10px;font-size:.87rem;font-weight:600;color:#D5D8F0;
  background:rgba(255,255,255,.07);border:1px solid rgba(159,164,206,.28);
  transition:background .16s,border-color .16s,color .16s,transform .16s var(--ease);
}
.suggest button:hover,.suggest a:hover{background:rgba(255,255,255,.13);border-color:rgba(200,205,245,.55);color:#fff;transform:translateY(-1px)}

/* light band holding the workforce diagram */
.stage-band{background:#fff;padding:clamp(40px,5vw,72px) 0 clamp(26px,3vw,44px);text-align:center}
.stage-band .cap{font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stage-band .stage{margin-top:20px}

@media (max-width:1080px){
  .sub-links a{padding:9px 9px;font-size:.87rem}
}
@media (max-width:900px){
  .subnav-in{height:58px}
  .sub-more{display:inline-flex}
  .sub-links a:not(.btn):not(.sub-more){display:none}
}
@media (max-width:640px){
  .sub-more{display:none}
  .sub-links .btn{margin-left:0;padding:8px 13px;font-size:.83rem}
  .sub-brand b{font-size:.98rem}
  .sub-brand .mark{width:30px;height:30px}
  .promo{font-size:.82rem;padding:9px 14px}
  .hero-dark{padding-top:44px}
  .askbox-in{padding:16px}
  .askbox textarea{min-height:88px;font-size:.96rem}
  .suggest button,.suggest a{width:100%;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .spark-dot{animation:none}
  .swap .old::after{animation:none;transform:scaleX(1)}
  .swap .new{animation:none;opacity:1;transform:none}
}

/* =========================================================
   HERO QUESTION STRIP — underline navigation
   ========================================================= */
.qnav-wrap{
  max-width:1280px;margin:clamp(30px,4vw,52px) auto 0;
  border-top:1px solid var(--border);
}
.qnav{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  scrollbar-width:none;
}
.qnav::-webkit-scrollbar{display:none}
.qnav a{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:22px 14px 21px;text-align:left;
  font-size:.94rem;font-weight:500;line-height:1.4;color:var(--ink-3);
  transition:color .22s var(--ease);
}
/* resting hairline */
.qnav a::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border-2);
}
/* brand line that grows */
.qnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.qnav a .lbl{transition:transform .22s var(--ease)}
.qnav a:hover{color:var(--ink)}
.qnav a:hover .lbl{transform:translateY(-2px)}
.qnav a:hover::after{transform:scaleX(1)}
.qnav a:focus-visible{outline:none;color:var(--ink)}
.qnav a:focus-visible::after{transform:scaleX(1)}
.qnav a.on{color:var(--ink);font-weight:600}
.qnav a.on::after{transform:scaleX(1);transform-origin:left}
.qnav .dot{
  width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto;
  opacity:0;transform:scale(.3);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.qnav a.on .dot{opacity:1;transform:none}

@media (max-width:1080px){
  .qnav a{padding:18px 10px 17px;font-size:.87rem;gap:7px}
}
@media (max-width:900px){
  .qnav{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(230px,auto);
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .qnav a{scroll-snap-align:start;white-space:normal}
}
@media (max-width:767px){
  .qnav-wrap{margin-top:26px}
  .qnav{grid-auto-columns:minmax(210px,auto)}
  .qnav a{padding:15px 12px 14px;font-size:.85rem}
  .qnav .dot{width:5px;height:5px}
}
@media (prefers-reduced-motion:reduce){
  .qnav a::after,.qnav a .lbl,.qnav .dot{transition:none}
}

/* =========================================================
   DARK THEME — scoped to the Sia AI page (body.ai-dark)
   Deep indigo surfaces, magenta / violet / cyan accents.
   ========================================================= */
.ai-dark{
  --ink:#EDEFFA; --ink-2:#BFC3E4; --ink-3:#9095BE; --slate:#9095BE;
  --bg:#171139; --page-2:#171139;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
  --brand-tint:rgba(124,93,250,.14); --brand-light:rgba(124,93,250,.20);
  --ai:#B9AAFB; --ai-tint:rgba(124,93,250,.16); --ai-line:rgba(185,170,251,.34);
  --magenta:#E0417A; --violet:#7B4DFF; --cyan:#00C2CB;
  --surface-1:#120E2A; --surface-2:#171139; --card:rgba(255,255,255,.045);
  --sh-sm:0 1px 3px rgba(0,0,0,.4); --sh-md:0 10px 26px rgba(0,0,0,.42);
  --sh-lg:0 20px 48px rgba(0,0,0,.5);
  background:var(--surface-1);color:var(--ink);
}
.ai-dark ::selection{background:rgba(124,93,250,.4);color:#fff}

/* ---- navbar + drawer ---- */
.ai-dark .navbar{background:rgba(18,14,42,.92);backdrop-filter:blur(10px);border-bottom-color:var(--border)}
.ai-dark .navbar.is-stuck{box-shadow:0 8px 26px rgba(0,0,0,.45)}
.ai-dark .brand b{color:#fff}
.ai-dark .brand b span{color:#9DB8FF}
.ai-dark .nav-btn,.ai-dark .signin{color:var(--ink)}
.ai-dark .lang-btn{color:var(--ink-2)}
.ai-dark .nav-btn:hover,.ai-dark .nav-btn[aria-expanded="true"],
.ai-dark .signin:hover,.ai-dark .lang-btn:hover,.ai-dark .lang-btn[aria-expanded="true"]{
  background:rgba(255,255,255,.08);color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.08);
}
.ai-dark .burger{color:var(--ink)}
.ai-dark .burger:hover{background:rgba(255,255,255,.08)}
.ai-dark .panel{background:#1C1547;border-color:var(--border);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ai-dark .panel-hd{border-bottom-color:var(--border)}
.ai-dark .panel-hd h3{color:var(--ink-3)}
.ai-dark .panel-hd a{color:#9DB8FF}
.ai-dark .m-link:hover,.ai-dark .list-link:hover,.ai-dark .plan:hover,.ai-dark .lang-opt:hover{background:rgba(255,255,255,.07)}
.ai-dark .m-txt strong,.ai-dark .list-link,.ai-dark .plan-txt strong,.ai-dark .lang-opt{color:var(--ink)}
.ai-dark .m-txt span,.ai-dark .list-link small,.ai-dark .plan-txt span,.ai-dark .lang-opt em{color:var(--ink-3)}
.ai-dark .plan-price{color:#B9AAFB}
.ai-dark .panel-note{background:rgba(255,255,255,.05);color:var(--ink-2)}
.ai-dark .lang-opt[aria-selected="true"]{background:rgba(124,93,250,.22);color:#fff}
.ai-dark .mnav{background:var(--surface-1)}
.ai-dark .macc{border-bottom-color:var(--border)}
.ai-dark .macc-btn{color:var(--ink)}
.ai-dark .macc-inner > a{color:var(--ink-2)}
.ai-dark .macc-inner > a:hover{background:rgba(255,255,255,.07);color:#fff}
.ai-dark .msel{background:rgba(255,255,255,.05);border-color:var(--border-2);color:var(--ink)}

/* ---- buttons ---- */
.ai-dark .btn-primary{
  background:linear-gradient(100deg,var(--violet),#4E7BF2 60%,#2E9BE0);color:#fff;box-shadow:0 6px 20px rgba(124,93,250,.35);
}
.ai-dark .btn-primary:hover{background:linear-gradient(100deg,#8B60FF,#5A87F5 60%,#3FA8E8);box-shadow:0 10px 28px rgba(124,93,250,.45)}
.ai-dark .btn-ghost{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--border-2)}
.ai-dark .btn-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.4);color:#fff}

/* ---- promo + sub-nav ---- */
.ai-dark .promo{
  background:linear-gradient(90deg,rgba(224,65,122,.28),rgba(124,93,250,.28) 50%,rgba(0,194,203,.24));
  border-bottom-color:var(--border);color:#E7E9FA;
}
.ai-dark .promo a{color:#fff}
.ai-dark .subnav{background:rgba(18,14,42,.94);border-bottom-color:var(--border)}
.ai-dark .sub-brand b{color:#fff}
.ai-dark .sub-brand b span{background:linear-gradient(96deg,#B9AAFB,#7FC4F5);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-dark .sub-brand .mark{background:linear-gradient(135deg,var(--magenta),var(--violet) 55%,var(--cyan))}
.ai-dark .sub-links a{color:var(--ink-2)}
.ai-dark .sub-links a:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---- hero + question strip ---- */
.ai-dark .hero-dark{
  background:radial-gradient(1100px 560px at 50% -10%,#2C1E5E 0%,#1B1444 42%,#120E2A 100%);
}
.ai-dark .stage-band{background:var(--surface-1)}
.ai-dark .stage-band .cap{color:var(--ink-3)}
.ai-dark .qnav-wrap{border-top-color:var(--border)}
.ai-dark .qnav a{color:var(--ink-3)}
.ai-dark .qnav a::before{background:rgba(255,255,255,.14)}
.ai-dark .qnav a::after{background:linear-gradient(90deg,var(--magenta),var(--violet) 60%,var(--cyan))}
.ai-dark .qnav a:hover,.ai-dark .qnav a.on{color:#fff}
.ai-dark .qnav .dot{background:var(--magenta)}

/* ---- section surfaces ---- */
.ai-dark .s{background:var(--surface-1)}
.ai-dark .s.alt{background:var(--surface-2);border-block-color:var(--border)}
.ai-dark .hd h2,.ai-dark .closing h2{color:#fff}
.ai-dark .hd p,.ai-dark .closing p{color:var(--ink-2)}
.ai-dark .eyebrow-ai{background:var(--ai-tint);border-color:var(--ai-line);color:#C9BFFC}

/* ---- panels, cards, surfaces ---- */
.ai-dark .console,.ai-dark .flowbox,.ai-dark .feed,.ai-dark .b-visual,
.ai-dark .acard,.ai-dark .sec,.ai-dark .type,.ai-dark .story,.ai-dark .act,
.ai-dark .mini,.ai-dark .ask,.ai-dark .mstep,.ai-dark .eq{
  background:var(--card);border-color:var(--border);box-shadow:none;
}
.ai-dark .console-bar,.ai-dark .crew-side,.ai-dark .flow-right,.ai-dark .feed-hd,.ai-dark .feed-foot{
  background:rgba(255,255,255,.03);border-color:var(--border);
}
.ai-dark .console-bar .dots i{background:rgba(255,255,255,.22)}
.ai-dark .console-bar b,.ai-dark .feed-hd b{color:var(--ink)}
.ai-dark .console-bar .pill{background:rgba(0,194,203,.14);border-color:rgba(0,194,203,.36);color:#68E3E8}
.ai-dark .console-bar .pill i,.ai-dark .feed-hd .pill i{background:#68E3E8}
.ai-dark .feed-hd .pill{color:#68E3E8}
.ai-dark .crew,.ai-dark .crew-row,.ai-dark .feed-row,.ai-dark .block{border-color:var(--border)}
.ai-dark .crew-row b,.ai-dark .acard h3,.ai-dark .sec h3,.ai-dark .type h3,.ai-dark .st h3,
.ai-dark .b-copy h3,.ai-dark .mstep b,.ai-dark .feed-row b,.ai-dark .story .logo{color:#fff}
.ai-dark .crew-row p,.ai-dark .acard p,.ai-dark .sec p,.ai-dark .type p,.ai-dark .st p,
.ai-dark .b-copy p,.ai-dark .mstep span,.ai-dark .feed-row span,.ai-dark .story p,
.ai-dark .cmd-note,.ai-dark .iq-foot,.ai-dark .mini span,.ai-dark .act span{color:var(--ink-2)}
.ai-dark .crew-row .bar,.ai-dark .iq-bar{background:rgba(255,255,255,.10)}
.ai-dark .iq-bar i{background:linear-gradient(90deg,var(--violet),var(--cyan))}
.ai-dark .mini b,.ai-dark .act b,.ai-dark .report b,.ai-dark .done-grid b{color:#fff}
.ai-dark .mini h4,.ai-dark .act h4{color:var(--ink-3)}
.ai-dark .spark i{background:linear-gradient(180deg,var(--cyan),var(--violet))}
.ai-dark .status{color:#8FB6FF}
.ai-dark .aitag{background:rgba(224,65,122,.16);border-color:rgba(224,65,122,.38);color:#F58BAE}
.ai-dark .card-link{color:#9DB8FF}
.ai-dark .m-ico{background:rgba(255,255,255,.08);color:#C9D6F5}
.ai-dark .m-ico.c-violet{background:rgba(124,93,250,.20);color:#C4B4FF}
.ai-dark .m-ico.c-teal{background:rgba(0,194,203,.16);color:#6FE0E6}
.ai-dark .m-ico.c-amber{background:rgba(245,158,11,.16);color:#F7C46C}
.ai-dark .m-ico.c-rose{background:rgba(224,65,122,.18);color:#F58BAE}
.ai-dark .m-ico.c-green{background:rgba(34,197,94,.16);color:#77E3A2}
.ai-dark .sec .m-ico{background:rgba(124,93,250,.20);color:#C4B4FF}

/* rail + chips + studio */
.ai-dark .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.ai-dark .rail-nav button{background:rgba(255,255,255,.05);border-color:var(--border-2);color:var(--ink)}
.ai-dark .rail-nav button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.ai-dark .chip,.ai-dark .store a,.ai-dark .studio .fld{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--ink-2)}
.ai-dark .chip:hover,.ai-dark .store a:hover{background:rgba(124,93,250,.18);border-color:rgba(185,170,251,.45);color:#fff}
.ai-dark .store b,.ai-dark .studio .fld p{color:#fff}
.ai-dark .store span,.ai-dark .studio .fld label{color:var(--ink-3)}
.ai-dark .tok{background:rgba(124,93,250,.18);border-color:rgba(185,170,251,.4);color:#CFC4FF}
.ai-dark .tok.ai{background:rgba(0,194,203,.16);border-color:rgba(0,194,203,.4);color:#7FE6EB}
.ai-dark .studio .switch i{background:var(--violet)}
.ai-dark .b-num{background:linear-gradient(135deg,rgba(224,65,122,.25),rgba(124,93,250,.3));color:#DCD2FF}

/* command demo */
.ai-dark .cmd{background:rgba(255,255,255,.04);border-color:var(--border-2)}
.ai-dark .cmd p{color:#fff}
.ai-dark .cmd .lbl{color:var(--ink-3)}
.ai-dark .caret{background:#B9AAFB}
.ai-dark .link{color:var(--ink-3)}
.ai-dark .link .dot{border-color:rgba(255,255,255,.28)}
.ai-dark .link.active{background:rgba(124,93,250,.16);color:#fff}
.ai-dark .link.active .dot{border-color:#B9AAFB}
.ai-dark .link.done{color:var(--ink-2)}
.ai-dark .link.done .dot{background:#22C55E;border-color:#22C55E}
.ai-dark .done-card,.ai-dark .final{background:rgba(34,197,94,.09);border-color:rgba(34,197,94,.3)}
.ai-dark .done-card .head,.ai-dark .final .head b{color:#7BE3A6}
.ai-dark .done-grid div,.ai-dark .report div{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.ai-dark .done-grid span,.ai-dark .report span{color:var(--ink-2)}

/* steps, types, equation, multi */
.ai-dark .steps4::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 7px,transparent 7px 15px)}
.ai-dark .st b{background:var(--surface-1);border-color:#B9AAFB;color:#DCD2FF;box-shadow:0 0 0 8px var(--surface-2)}
.ai-dark .s:not(.alt) .st b{box-shadow:0 0 0 8px var(--surface-1)}
.ai-dark .type{border-top-color:var(--violet)}
.ai-dark .type:nth-child(2){border-top-color:var(--cyan)}
.ai-dark .type:nth-child(3){border-top-color:#F59E0B}
.ai-dark .type:nth-child(4){border-top-color:var(--magenta)}
.ai-dark .eq{color:#fff}
.ai-dark .eq .ico{color:#B9AAFB}
.ai-dark .eq.total{background:linear-gradient(100deg,var(--magenta),var(--violet) 60%,var(--cyan));border-color:transparent;color:#fff}
.ai-dark .eq-op{color:var(--ink-3)}
.ai-dark .ask .lbl,.ai-dark .final .lbl{color:var(--ink-3)}
.ai-dark .ask p{color:#fff}
.ai-dark .tie{background:rgba(255,255,255,.22)}

/* stories, activity */
.ai-dark .story .who .av{background:rgba(124,93,250,.22);color:#CFC4FF}
.ai-dark .story .who b{color:#fff}
.ai-dark .story .who span,.ai-dark .feed-row .t{color:var(--ink-3)}
.ai-dark .feed-row .ok{color:#77E3A2}

/* ecosystem + hero diagrams: recolour the inline SVGs */
.ai-dark .stage svg rect[fill="#fff"],.ai-dark .eco svg rect[fill="#fff"]{fill:#1E1747}
.ai-dark .stage svg rect[fill="#F8FAFC"]{fill:rgba(255,255,255,.06)}
.ai-dark .stage svg [stroke="#E5E7EB"],.ai-dark .eco svg [stroke="#E5E7EB"]{stroke:rgba(255,255,255,.14)}
.ai-dark .stage svg text[fill="#111827"],.ai-dark .eco svg text[fill="#111827"]{fill:#EDEFFA}
.ai-dark .stage svg text[fill="#64748B"],.ai-dark .eco svg text[fill="#64748B"]{fill:#9095BE}
.ai-dark .eco svg g[stroke="#C9D8EA"]{stroke:rgba(159,164,206,.4)}
.ai-dark .stage svg g[stroke="#C3D6EC"]{stroke:rgba(159,164,206,.42)}
.ai-dark .stage svg g[stroke="#D9E2EE"]{stroke:rgba(159,164,206,.28)}
.ai-dark .eco svg rect[fill="#F3F1FE"]{fill:rgba(124,93,250,.18);stroke:rgba(185,170,251,.4)}
.ai-dark .eco svg text[fill="#6D5AE6"]{fill:#C4B4FF}
/* labels inherit fill from their group, so target the groups too */
.ai-dark .eco svg g[fill="#111827"] text,.ai-dark .stage svg g[fill="#111827"] text{fill:#EDEFFA}
.ai-dark .eco svg g[fill="#6D5AE6"] text{fill:#C4B4FF}
.ai-dark .eco svg g[fill="#64748B"] text,.ai-dark .stage svg g[fill="#64748B"] text{fill:#9BA0C8}
.ai-dark .eco svg circle[fill="#1E72B8"]{fill:#5A47D6}
.ai-dark .eco svg circle[stroke="#9DCAF0"],.ai-dark .stage svg ellipse[stroke="#9DCAF0"]{stroke:rgba(185,170,251,.5)}
.ai-dark .eco-hub{background:linear-gradient(100deg,var(--magenta),var(--violet) 60%,var(--cyan))}
.ai-dark .eco-col h4{color:var(--ink-3)}
.ai-dark .mini-agent{background:var(--card);border-color:var(--border)}
.ai-dark .mini-agent b{color:#fff}
.ai-dark .mini-agent span{color:var(--ink-2)}
.ai-dark .mini-agent em{background:rgba(124,93,250,.18);border-color:rgba(185,170,251,.4);color:#CFC4FF}

/* final CTA + footer */
.ai-dark .cta-ai{background:linear-gradient(120deg,#8B1E5A 0%,#5C33D6 48%,#0E7C93 120%)}
.ai-dark .cta-ai p{color:#E4DDF7}
.ai-dark .cta-ai .btn-primary{background:#fff;color:#2B1A63}
.ai-dark .cta-ai .btn-primary:hover{background:#F1ECFF;box-shadow:none}
.ai-dark .ftr{background:var(--surface-1);border-top-color:var(--border)}
.ai-dark .ftr h4{color:var(--ink-3)}
.ai-dark .ftr li a{color:var(--ink-2)}
.ai-dark .ftr li a:hover,.ai-dark .ftr-legal a:hover{color:#fff}
.ai-dark .ftr-brand p{color:var(--ink-3)}
.ai-dark .ftr-bot{border-top-color:var(--border);color:var(--ink-3)}