/* ============================================================
   RAVYO CALLING AGENTS — Demo Page (hi-fi preview)
   Design system mirrored from ravyo.ai (Spectral · dark).
   White-label: zero vendor/model strings anywhere user-visible.
   ============================================================ */
:root{
  --bg:#060912; --bg-deep:#03060e; --surface:#0d1322; --surface-2:#131b30; --surface-3:#1a2440;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.14);
  --fg:#eef2ff; --muted:#9aa6c9; --dim:#69718f;
  --violet:#6366f1; --violet-deep:#4338ca; --pink:#3b82f6; --magenta:#818cf8;
  --cyan:#22d3ee; --cyan-deep:#0ea5e9; --amber:#38bdf8; --orange:#60a5fa;
  --lime:#34d399; --lime-deep:#10b981; --rose:#fb7185;
  --live:var(--lime); --soon:var(--cyan);
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --site:1280px; --narrow:920px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5;
  overflow-x:hidden;
}
body::before{ /* quiet drifting mesh — straight from globals.css */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 760px 540px at 12% 8%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(ellipse 640px 480px at 88% 22%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(ellipse 700px 520px at 92% 82%, rgba(34,211,238,.10), transparent 60%);
  animation:mesh-drift 36s ease-in-out infinite alternate;
}
@keyframes mesh-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-2%,1.5%) scale(1.04)}}
::selection{background:var(--violet); color:var(--fg)}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--site); margin:0 auto; padding:0 20px; position:relative; z-index:1}
@media(min-width:768px){.wrap{padding:0 40px}}

/* animation lib */
@keyframes reveal-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal-blur{from{opacity:0;filter:blur(10px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pulse-soft{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes shimmer-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes gradient-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.reveal{opacity:0}
.reveal.in{animation:reveal-up .9s cubic-bezier(.2,.6,.2,1) both}

/* gradient text helper */
.grad{background:linear-gradient(110deg,var(--violet) 0%,var(--pink) 30%,var(--amber) 62%,var(--cyan) 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradient-flow 7s linear infinite}
.grad-lc{background:linear-gradient(110deg,var(--lime),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.grad-cv{background:linear-gradient(110deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* eyebrow / mono label */
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--cyan)}
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid; border-radius:999px;
  padding:6px 13px; font-size:11.5px; font-weight:500; backdrop-filter:blur(10px)}
.dot{width:6px; height:6px; border-radius:50%; flex:0 0 auto}
.dot.live{background:var(--lime); box-shadow:0 0 8px var(--lime); animation:pulse-soft 1.6s ease-in-out infinite}
.dot.soon{background:var(--cyan); box-shadow:0 0 8px var(--cyan)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px;
  font-family:var(--sans); font-size:14.5px; font-weight:500; cursor:pointer; border:0; position:relative;
  overflow:hidden; padding:14px 26px; color:#fff; transition:transform .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(110deg,var(--violet),var(--pink));
  box-shadow:0 12px 28px -10px rgba(99,102,241,.65), inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary .sweep{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  animation:shimmer-sweep 3.5s ease-in-out infinite}
.btn-ghost{background:rgba(255,255,255,.025); border:1px solid var(--border-strong); color:var(--fg); backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-soon{background:rgba(34,211,238,.06); border:1px solid rgba(34,211,238,.28); color:var(--cyan); cursor:not-allowed}
.btn-soon:hover{transform:none}
.btn-lg{padding:16px 32px; font-size:15.5px}
.btn-arrow{transition:transform .2s} .btn:hover .btn-arrow{transform:translateX(3px)}

.kicker{display:inline-flex; align-items:center; gap:8px; margin-bottom:18px}

/* ===================== STICKY NAV ===================== */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(16px);
  background:rgba(6,9,18,.72); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; gap:18px; height:62px}
.logo{font-weight:700; font-size:17px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px}
.logo .mark{width:24px; height:24px; border-radius:7px; position:relative; overflow:hidden;
  background:conic-gradient(from 0deg,var(--violet),var(--pink),var(--amber),var(--cyan),var(--violet));
  animation:orbit-spin 8s linear infinite}
.logo .mark::after{content:""; position:absolute; inset:5px; border-radius:4px; background:var(--bg)}
.logo small{font-weight:500; font-size:12.5px; color:var(--muted); letter-spacing:0}
.nav .links{display:none; gap:26px; margin-left:14px}
.nav .links a{font-size:13.5px; color:var(--muted); transition:color .2s}
.nav .links a:hover{color:var(--fg)}
.nav .spacer{flex:1}
.nav .btn{padding:9px 18px; font-size:13px}
@media(min-width:900px){.nav .links{display:flex}}

/* ===================== HERO ===================== */
.hero{padding:54px 0 40px}
@media(min-width:768px){.hero{padding:72px 0 80px}}
.hero-grid{display:grid; gap:40px; align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr; gap:48px}}
.h1{font-size:clamp(38px,8vw,82px); line-height:.98; font-weight:600; letter-spacing:-.035em}
@media(min-width:768px){.h1{line-height:.95; letter-spacing:-.045em}}
.lede{margin-top:22px; max-width:30em; font-size:clamp(15px,1.5vw,18px); line-height:1.6; color:var(--muted)}
.lede b{color:var(--fg); font-weight:500}
.trust-micro{margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--muted)}
.trust-micro span{display:flex; align-items:center; gap:8px; border:1px solid var(--border-strong);
  background:rgba(255,255,255,.03); border-radius:11px; padding:9px 13px; backdrop-filter:blur(8px); transition:border-color .2s, transform .2s}
.trust-micro span:hover{border-color:rgba(99,102,241,.4); transform:translateY(-1px)}
.trust-micro .ck{color:var(--lime); font-weight:700}
.hero-cta{margin-top:28px; display:flex; flex-direction:column; gap:12px}
@media(min-width:560px){.hero-cta{flex-direction:row; flex-wrap:wrap; align-items:center}}

/* hero orb stage */
.orb-stage{position:relative; aspect-ratio:1; width:100%; max-width:440px; margin:0 auto;
  display:grid; place-items:center}
.orb-card{position:absolute; backdrop-filter:blur(14px); background:rgba(6,9,18,.55);
  border:1px solid var(--border-strong); border-radius:14px; padding:9px 13px; font-size:11px;
  display:flex; align-items:center; gap:8px; box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.orb-card.tl{top:6%; left:0} .orb-card.br{bottom:8%; right:0; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-size:9.5px}

/* THE ORB (CSS iridescent — evokes the three.js distort orb) */
.orb{position:relative; width:62%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, #fff6 0 8%, transparent 40%),
    conic-gradient(from 0deg, var(--violet),var(--magenta),var(--pink),var(--amber),var(--cyan),var(--violet));
  filter:saturate(1.2);
  box-shadow:0 0 60px -6px rgba(99,102,241,.6), 0 0 120px -20px rgba(59,130,246,.45), inset 0 0 60px rgba(255,255,255,.12);
  animation:orb-spin 14s linear infinite, orb-morph 8s ease-in-out infinite;
}
@keyframes orb-spin{to{transform:rotate(360deg)}}
@keyframes orb-morph{
  0%,100%{border-radius:48% 52% 53% 47%/49% 51% 49% 51%}
  33%{border-radius:55% 45% 47% 53%/52% 46% 54% 48%}
  66%{border-radius:46% 54% 52% 48%/53% 49% 51% 47%}
}
.orb::after{ /* glossy core */
  content:""; position:absolute; inset:14%; border-radius:inherit;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.55), rgba(255,255,255,.05) 46%, transparent 60%);
  mix-blend-mode:screen;
}
.orb-rings{position:absolute; inset:0; border-radius:50%; pointer-events:none}
.orb-rings::before,.orb-rings::after{content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(99,102,241,.5); animation:orb-ring 3s ease-out infinite}
.orb-rings::after{animation-delay:1.5s; border-color:rgba(34,211,238,.5)}
@keyframes orb-ring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.4);opacity:0}}
/* orb behavior per state */
.orb-wrap[data-orb="idle"] .orb{animation-duration:26s, 12s; filter:saturate(.8) brightness(.9)}
.orb-wrap[data-orb="idle"] .orb-rings{opacity:.3}
.orb-wrap[data-orb="speaking"] .orb{animation-duration:9s, 4s; box-shadow:0 0 80px -4px rgba(59,130,246,.75),0 0 150px -16px rgba(99,102,241,.6), inset 0 0 70px rgba(255,255,255,.16)}
.orb-wrap[data-orb="listening"] .orb{
  background:radial-gradient(circle at 34% 30%, #fff6 0 8%, transparent 40%),conic-gradient(from 0deg,var(--lime),var(--cyan),var(--lime-deep),var(--cyan-deep),var(--lime));
  box-shadow:0 0 70px -6px rgba(52,211,153,.6),0 0 130px -18px rgba(34,211,238,.45), inset 0 0 60px rgba(255,255,255,.12)}
.orb-wrap[data-orb="listening"] .orb-rings::before{border-color:rgba(52,211,153,.6)}
.orb-wrap[data-orb="connecting"] .orb{filter:saturate(.9) brightness(.95); animation-duration:5s, 6s}
.orb-wrap{position:relative; width:62%; aspect-ratio:1; display:grid; place-items:center}
.orb-wrap .orb{width:100%}

/* ===================== STATS STRIP ===================== */
.stats{border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative}
.stats::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 50% 80% at 0% 50%, rgba(99,102,241,.10), transparent 70%),
            radial-gradient(ellipse 50% 80% at 100% 50%, rgba(34,211,238,.10), transparent 70%)}
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 16px; padding:36px 0}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr); padding:46px 0}}
.stat{display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--border); padding-top:16px; position:relative}
.stat .bar{position:absolute; top:-1px; left:0; width:44px; height:2px}
.stat .num{font-size:clamp(30px,4vw,52px); font-weight:600; line-height:1; letter-spacing:-.04em}
.stat .lab{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg)}
.stat .sub{font-size:12px; color:var(--dim)}

/* ===================== SECTIONS ===================== */
section{position:relative; z-index:1}
.sec{padding:72px 0}
@media(min-width:768px){.sec{padding:104px 0}}
.sec-head{max-width:760px; margin-bottom:48px}
.sec-head h2{font-size:clamp(30px,4.6vw,58px); font-weight:600; line-height:1.04; letter-spacing:-.035em; margin-top:14px}
.sec-head p{margin-top:18px; font-size:clamp(15px,1.4vw,17px); color:var(--muted); line-height:1.6; max-width:54ch}
.center{text-align:center; margin-left:auto; margin-right:auto}

/* problem cards */
.cards{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:720px){.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c2{grid-template-columns:repeat(2,1fr)}}
.card{border:1px solid var(--border); border-radius:18px; padding:26px; background:rgba(255,255,255,.02);
  position:relative; overflow:hidden; transition:border-color .3s, transform .3s}
.card:hover{border-color:var(--border-strong); transform:translateY(-3px)}
.card .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:20px; margin-bottom:16px;
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25)}
.card h3{font-size:18px; font-weight:600; letter-spacing:-.01em; margin-bottom:9px}
.card p{font-size:14px; color:var(--muted); line-height:1.55}
.card .stat-line{margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--rose)}

/* live demo band */
.demoband{border:1px solid var(--border-strong); border-radius:28px; overflow:hidden; position:relative;
  background:radial-gradient(ellipse at top right, rgba(59,130,246,.20), transparent 60%),
            radial-gradient(ellipse at bottom left, rgba(34,211,238,.14), transparent 60%),
            linear-gradient(135deg,#0c1330,var(--bg)); }
.demoband-inner{display:grid; gap:34px; align-items:center; padding:38px 26px}
@media(min-width:860px){.demoband-inner{grid-template-columns:1fr 1fr; padding:56px 54px}}
.demoband h2{font-size:clamp(28px,4vw,48px); font-weight:600; letter-spacing:-.03em; line-height:1.05}
.demoband p{margin-top:16px; color:var(--muted); font-size:15.5px; line-height:1.6; max-width:34ch}
.demoband .mini-orb{width:200px; margin:0 auto}

/* steps */
.steps{counter-reset:s; display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.step-c{border:1px solid var(--border); border-radius:18px; padding:28px; background:rgba(255,255,255,.02); position:relative}
.step-c .n{font-family:var(--mono); font-size:12px; color:var(--violet); letter-spacing:.2em}
.step-c h3{font-size:20px; font-weight:600; margin:14px 0 8px; letter-spacing:-.01em}
.step-c p{font-size:14px; color:var(--muted); line-height:1.55}
.step-c .line{position:absolute; top:42px; right:-10px; width:20px; height:1px; background:var(--border-strong)}

/* benefits grid */
.bgrid{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:20px; overflow:hidden}
@media(min-width:640px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.bgrid{grid-template-columns:repeat(3,1fr)}}
.bcell{background:var(--bg); padding:28px 24px; transition:background .3s}
.bcell:hover{background:var(--surface)}
.bcell .ic{font-size:22px; margin-bottom:14px}
.bcell h3{font-size:16.5px; font-weight:600; margin-bottom:8px; letter-spacing:-.01em}
.bcell p{font-size:13.5px; color:var(--muted); line-height:1.55}

/* use cases */
.uc-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.uc-tab{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; padding:9px 16px; border-radius:999px;
  border:1px solid var(--border); color:var(--muted); cursor:pointer; transition:all .2s; text-transform:uppercase; background:rgba(255,255,255,.02)}
.uc-tab.on{border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.12); color:var(--fg)}
.uc-panel{border:1px solid var(--border-strong); border-radius:22px; padding:34px 30px; display:none;
  background:linear-gradient(135deg,rgba(99,102,241,.07),transparent)}
.uc-panel.on{display:grid; gap:26px}
@media(min-width:780px){.uc-panel.on{grid-template-columns:1fr 1fr; align-items:center}}
.uc-panel h3{font-size:clamp(22px,3vw,34px); font-weight:600; letter-spacing:-.02em; line-height:1.1}
.uc-panel .scr{font-family:var(--mono); font-size:11px; color:var(--cyan); letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
.uc-panel ul{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:11px}
.uc-panel li{font-size:14.5px; color:var(--muted); display:flex; gap:11px; align-items:flex-start}
.uc-panel li::before{content:"→"; color:var(--lime); flex:0 0 auto}
.uc-chat{border:1px solid var(--border); border-radius:16px; padding:20px; background:rgba(3,6,14,.6); display:flex; flex-direction:column; gap:12px}
.uc-bub{font-size:13.5px; line-height:1.5; padding:11px 14px; border-radius:13px; max-width:88%}
.uc-bub.a{background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.22); align-self:flex-start; border-bottom-left-radius:4px}
.uc-bub.u{background:rgba(255,255,255,.04); border:1px solid var(--border); align-self:flex-end; border-bottom-right-radius:4px}
.uc-bub .who{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:5px}

/* comparison table */
.cmp{border:1px solid var(--border-strong); border-radius:20px; overflow:hidden; font-size:14px}
.cmp .row{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; align-items:center}
.cmp .row + .row{border-top:1px solid var(--border)}
.cmp .row > div{padding:15px 14px}
.cmp .head{background:rgba(255,255,255,.03); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.cmp .head .ravyo{color:var(--violet)}
.cmp .feat{color:var(--muted)}
.cmp .ravyo-col{background:rgba(99,102,241,.07); font-weight:500; color:var(--fg)}
.cmp .y{color:var(--lime)} .cmp .n{color:var(--rose)} .cmp .mid{color:var(--amber)}
@media(max-width:680px){
  .cmp .row{grid-template-columns:1.4fr 1fr 1fr 1fr; font-size:11.5px}
  .cmp .row > div{padding:12px 8px}
  .cmp .hide-m{display:none}
  .cmp .row{grid-template-columns:1.5fr 1fr 1fr}
}

/* testimonials */
.tgrid{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:780px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tcard{border:1px solid var(--border); border-radius:18px; padding:26px; background:rgba(255,255,255,.02)}
.tcard .q{font-size:15px; line-height:1.55; color:var(--fg)}
.tcard .who{margin-top:18px; display:flex; align-items:center; gap:12px}
.tcard .av{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--pink)); flex:0 0 auto}
.tcard .who b{font-size:13.5px; font-weight:600; display:block} .tcard .who span{font-size:12px; color:var(--dim)}
.placeholder-tag{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber);
  border:1px dashed rgba(56,189,248,.4); border-radius:5px; padding:2px 7px; display:inline-block; margin-bottom:14px}

/* FAQ */
.faq{max-width:var(--narrow); margin:0 auto}
.q-item{border-top:1px solid var(--border)}
.q-item:last-child{border-bottom:1px solid var(--border)}
.q-item button{width:100%; display:flex; align-items:center; gap:16px; padding:22px 4px; background:none; border:0;
  color:var(--fg); font-family:var(--sans); font-size:clamp(15px,1.8vw,18px); font-weight:500; text-align:left; cursor:pointer}
.q-item .qmark{margin-left:auto; color:var(--violet); font-size:22px; transition:transform .3s; flex:0 0 auto}
.q-item.open .qmark{transform:rotate(45deg)}
.q-item .ans{max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; color:var(--muted); font-size:14.5px; line-height:1.6}
.q-item.open .ans{max-height:240px; padding:0 4px 24px}

/* final CTA */
.finalcta{border:1px solid var(--border-strong); border-radius:28px; padding:48px 26px; text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at top right, rgba(59,130,246,.30), transparent 60%),
            radial-gradient(ellipse at bottom left, rgba(34,211,238,.18), transparent 60%),
            linear-gradient(135deg,#0c1330,var(--bg))}
@media(min-width:768px){.finalcta{padding:80px 40px}}
.finalcta h2{font-size:clamp(30px,5vw,60px); font-weight:600; letter-spacing:-.035em; line-height:1.04}
.finalcta p{margin:18px auto 0; max-width:46ch; color:var(--muted); font-size:16px}
.finalcta .row{margin-top:30px; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center}
@media(min-width:560px){.finalcta .row{flex-direction:row}}
.finalcta .rr{margin-top:18px; font-size:12.5px; color:var(--dim)}

/* footer */
footer{border-top:1px solid var(--border); padding:44px 0 36px; margin-top:20px}
.foot{display:grid; gap:28px}
@media(min-width:768px){.foot{grid-template-columns:1.4fr 1fr 1fr; gap:40px}}
.foot p{font-size:13px; color:var(--dim); line-height:1.6; margin-top:14px; max-width:34ch}
.foot h4{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:14px}
.foot a{display:block; font-size:13.5px; color:var(--muted); padding:5px 0; transition:color .2s}
.foot a:hover{color:var(--fg)}
.foot-base{margin-top:36px; padding-top:22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:12px;
  justify-content:space-between; font-size:12px; color:var(--dim)}

/* sticky CTA bar (CRO) — both buttons, phone + desktop */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:45; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(6,9,18,.93); backdrop-filter:blur(18px); border-top:1px solid var(--border-strong);
  display:flex; gap:10px; align-items:center; box-shadow:0 -12px 44px rgba(0,0,0,.45);
  transform:translateY(112%); transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .label{display:none; flex:1; font-weight:600; font-size:14.5px; letter-spacing:-.01em}
.sticky-cta .label small{display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:2px}
.sticky-cta .btn{flex:1; padding:13px 16px; font-size:13.5px}
@media(min-width:900px){
  .sticky-cta{padding:13px 24px; gap:14px}
  .sticky-cta .label{display:block; flex:2}
  .sticky-cta .btn{flex:0 0 auto; padding:13px 24px; font-size:14px}
}

/* ===================== CALL OVERLAY ===================== */
.overlay{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(8,5,16,.82); backdrop-filter:blur(8px)}
.overlay.show{display:flex; animation:fade-in .3s ease both}
.modal{width:min(440px,100%); border:1px solid var(--border-strong); border-radius:24px; padding:32px 28px;
  background:linear-gradient(160deg,var(--surface),var(--bg)); box-shadow:0 40px 90px rgba(0,0,0,.6); position:relative}
.modal .step-tag{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.modal h3{font-size:24px; font-weight:600; letter-spacing:-.02em; margin:12px 0 8px}
.modal .desc{font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:22px}
.input{display:flex; align-items:center; gap:12px; border:1px solid var(--border-strong); border-radius:13px; padding:14px 16px;
  background:rgba(0,0,0,.25)}
.input .cc{font-weight:600; padding-right:12px; border-right:1px solid var(--border); color:var(--fg)}
.input input{flex:1; background:none; border:0; outline:0; color:var(--fg); font-family:var(--sans); font-size:16px}
.input input::placeholder{color:var(--dim)}
.otp-row{display:flex; gap:9px; justify-content:space-between}
.otp-row input{width:100%; aspect-ratio:.82; text-align:center; font-size:22px; font-weight:600; font-family:var(--mono);
  border:1px solid var(--border-strong); border-radius:12px; background:rgba(0,0,0,.25); color:var(--fg); outline:0; transition:border-color .2s}
.otp-row input:focus{border-color:var(--violet); box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.modal .btn{width:100%; margin-top:20px}
.modal .meta{margin-top:14px; text-align:center; font-size:12.5px; color:var(--dim)}
.modal .meta a{color:var(--violet)}
.modal .close{position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; font-size:16px}

/* live call screen */
.callscreen{position:fixed; inset:0; z-index:110; display:none; flex-direction:column;
  background:radial-gradient(ellipse 120% 90% at 50% 12%, #0c1330, var(--bg-deep) 72%)}
.callscreen.show{display:flex; animation:fade-in .35s ease both}
.call-top{display:flex; align-items:center; gap:14px; padding:18px 22px}
.call-top .logo{font-size:15px}
.call-top .spacer{flex:1}
.timer{font-family:var(--mono); font-weight:500; font-size:17px; padding:8px 16px; border-radius:12px;
  border:1px solid var(--border-strong); background:rgba(0,0,0,.3); display:flex; align-items:center; gap:9px}
.timer .dot{width:8px; height:8px} .timer .dot{background:var(--lime); box-shadow:0 0 8px var(--lime)}
.timer.warn{border-color:rgba(96,165,250,.5); color:var(--orange); background:rgba(96,165,250,.1)}
.timer.warn .dot{background:var(--orange); box-shadow:0 0 8px var(--orange)}
.call-stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:20px}
.statepill{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; padding:8px 16px; border-radius:999px;
  border:1px solid; transition:all .3s}
.statepill[data-s="connecting"]{color:var(--cyan); border-color:rgba(34,211,238,.4); background:rgba(34,211,238,.08)}
.statepill[data-s="speaking"]{color:var(--violet); border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.12)}
.statepill[data-s="listening"]{color:var(--lime); border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.1)}
.statepill[data-s="interrupted"]{color:var(--orange); border-color:rgba(96,165,250,.5); background:rgba(96,165,250,.12)}
.statepill[data-s="warn"]{color:var(--orange); border-color:rgba(96,165,250,.5); background:rgba(96,165,250,.12)}
.call-orb{width:min(56vw,300px); aspect-ratio:1}
.call-hint{font-size:14.5px; color:var(--muted); min-height:1.4em; text-align:center; max-width:24ch}
.call-controls{display:flex; align-items:center; gap:20px; padding:26px 20px 40px}
.cc-btn{width:58px; height:58px; border-radius:50%; border:1px solid var(--border-strong); background:rgba(255,255,255,.04);
  color:var(--fg); cursor:pointer; font-size:20px; display:grid; place-items:center; transition:all .2s}
.cc-btn:hover{background:rgba(255,255,255,.09)}
.cc-btn.end{width:70px; height:70px; background:linear-gradient(135deg,#f43f5e,#be123c); border:0; font-size:24px;
  box-shadow:0 12px 28px -8px rgba(244,63,94,.6)}
.cc-btn.active{background:rgba(99,102,241,.2); border-color:var(--violet)}

/* ended */
.ended{position:fixed; inset:0; z-index:115; display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px; background:radial-gradient(ellipse 120% 90% at 50% 26%, #0c1330, var(--bg-deep) 74%)}
.ended.show{display:flex; animation:fade-in .4s ease both}
.ended .eyebrow{margin-bottom:18px}
.ended h2{font-size:clamp(28px,5vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1.06; max-width:16ch}
.ended p{margin-top:16px; max-width:42ch; color:var(--muted); font-size:15.5px; line-height:1.6}
.ended .sumrow{margin:26px 0 6px; display:flex; gap:28px; flex-wrap:wrap; justify-content:center}
.ended .sumrow div{font-size:11px; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.ended .sumrow b{display:block; font-family:var(--sans); font-size:28px; letter-spacing:-.02em; color:var(--fg); margin-bottom:4px; font-weight:600}
.ended .row{margin-top:24px; display:flex; flex-direction:column; gap:12px; align-items:center}
@media(min-width:560px){.ended .row{flex-direction:row}}
.ended .again{margin-top:18px; font-size:13px; color:var(--muted); text-decoration:underline; cursor:pointer; background:none; border:0; font-family:var(--sans)}

/* dev state inspector (preview only) */
.devbar{position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:200; display:flex; gap:6px; align-items:center;
  background:rgba(3,6,14,.92); border:1px solid var(--border-strong); border-radius:12px; padding:8px 10px; backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.5); flex-wrap:wrap; max-width:94vw; justify-content:center}
.devbar b{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-right:4px}
.devbar button{font-family:var(--mono); font-size:10.5px; padding:5px 9px; border-radius:7px; border:1px solid var(--border);
  background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer}
.devbar button:hover{color:var(--fg); border-color:var(--border-strong)}
.devbar .x{color:var(--dim); cursor:pointer; padding-left:4px}

/* pain hook (CRO pre-headline) */
.pain-hook{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--orange); margin-bottom:16px;
  border:1px solid rgba(96,165,250,.32); background:rgba(96,165,250,.07); border-radius:999px; padding:7px 14px}
.pain-hook::before{content:"⚠"; font-size:13px}

/* AI employee personas */
.persona-grid{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:780px){.persona-grid{grid-template-columns:repeat(2,1fr)}}
.persona{position:relative; border:1px solid var(--border-strong); border-radius:22px; padding:32px 28px; overflow:hidden;
  background:linear-gradient(150deg,rgba(99,102,241,.12),transparent 62%); transition:transform .3s}
.persona:hover{transform:translateY(-3px)}
.persona.lime{background:linear-gradient(150deg,rgba(52,211,153,.10),transparent 62%)}
.persona .badge{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet);
  border:1px solid rgba(99,102,241,.32); border-radius:999px; padding:6px 13px; display:inline-flex; align-items:center; gap:7px}
.persona.lime .badge{color:var(--lime); border-color:rgba(52,211,153,.34)}
.persona .p-ic{font-size:42px; margin:22px 0 14px; line-height:1}
.persona h3{font-size:clamp(20px,2.4vw,27px); font-weight:600; letter-spacing:-.02em; line-height:1.12; margin-bottom:12px}
.persona p{font-size:14.5px; color:var(--muted); line-height:1.6}
.never-grid{margin-top:18px; display:grid; gap:10px; grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.never-grid{grid-template-columns:repeat(4,1fr)}}
.never-grid span{font-size:13px; color:var(--muted); display:flex; gap:9px; align-items:center; border:1px solid var(--border);
  border-radius:11px; padding:12px 13px; background:rgba(255,255,255,.02)}
.never-grid span::before{content:"✓"; color:var(--lime); font-weight:700; flex:0 0 auto}

/* results strip (outcome proof) */
.results{display:grid; gap:18px; grid-template-columns:repeat(2,1fr); margin-top:8px}
@media(min-width:820px){.results{grid-template-columns:repeat(4,1fr)}}
.result{text-align:center; padding:24px 16px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.02)}
.result .n{font-size:clamp(28px,3.4vw,42px); font-weight:600; letter-spacing:-.03em; line-height:1}
.result .l{margin-top:8px; font-size:12.5px; color:var(--muted)}

/* train promise line (hero) */
.train-promise{margin-top:18px; display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--lime);
  border:1px solid rgba(52,211,153,.28); background:rgba(52,211,153,.07); border-radius:12px; padding:10px 14px; line-height:1.4; max-width:fit-content}

/* segmented control + train modes */
.seg-control{display:flex; gap:4px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:13px; padding:4px; margin-bottom:18px}
.seg-control button{flex:1; font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--muted); background:none; border:0;
  padding:10px 6px; border-radius:9px; cursor:pointer; transition:all .2s; white-space:nowrap}
.seg-control button.on{background:linear-gradient(110deg,var(--violet),var(--pink)); color:#fff; box-shadow:0 6px 16px -8px rgba(99,102,241,.7)}
.seg-control button:not(.on):hover{color:var(--fg)}
.train-pane{display:none; flex-direction:column; gap:10px}
.train-pane.on{display:flex}
.t-area{width:100%; min-height:118px; resize:vertical; border:1px solid var(--border-strong); border-radius:13px; padding:13px 15px;
  background:rgba(0,0,0,.25); color:var(--fg); font-family:var(--sans); font-size:14.5px; line-height:1.5; outline:0}
.t-area::placeholder{color:var(--dim)}
.t-field{display:flex; flex-direction:column; gap:6px}
.t-field label{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.t-field input{border:1px solid var(--border-strong); border-radius:11px; padding:12px 14px; background:rgba(0,0,0,.25);
  color:var(--fg); font-family:var(--sans); font-size:14.5px; outline:0}
.t-field input:focus, .t-area:focus, .input input:focus{border-color:var(--violet); box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.q-grid{display:grid; gap:11px; grid-template-columns:1fr 1fr}
.q-grid .full{grid-column:1/-1}
.train-err{display:none; font-size:12.5px; color:var(--rose); margin-top:11px; align-items:center; gap:8px}
.train-err.show{display:flex}
.skip-link{display:block; width:100%; text-align:center; margin-top:13px; background:none; border:0; color:var(--dim);
  font-family:var(--sans); font-size:13px; cursor:pointer; text-decoration:underline; padding:4px}
.skip-link:hover{color:var(--muted)}

/* training screen */
.training{position:fixed; inset:0; z-index:108; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; padding:30px; text-align:center; background:radial-gradient(ellipse 120% 90% at 50% 18%, #0c1330, var(--bg-deep) 72%)}
.training.show{display:flex; animation:fade-in .35s ease both}
.training .t-orb{width:min(40vw,170px); aspect-ratio:1}
.training h3{font-size:clamp(22px,3vw,32px); font-weight:600; letter-spacing:-.02em}
.training .sub{color:var(--muted); font-size:14.5px; margin-top:10px}
.tstages{display:flex; flex-direction:column; gap:12px; width:min(370px,100%); text-align:left}
.tstage{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border); border-radius:13px;
  background:rgba(255,255,255,.02); color:var(--dim); transition:all .3s; font-size:14.5px}
.tstage .ic{width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong); flex:0 0 auto; display:grid; place-items:center; font-size:12px; color:#03060e}
.tstage.active{border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.08); color:var(--fg)}
.tstage.active .ic{border-color:var(--violet); border-right-color:transparent; animation:orbit-spin .8s linear infinite}
.tstage.done{color:var(--muted)}
.tstage.done .ic{border-color:var(--lime); background:var(--lime); animation:none}
.tstage.done .ic::after{content:"✓"}
.training-err{display:none; flex-direction:column; align-items:center; gap:14px; max-width:30em}
.training-err.show{display:flex}
.training-err .row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px}

/* business label on call screen */
#bizLabel{display:none; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:6px 12px; background:rgba(255,255,255,.02)}

/* =====================================================================
   PREMIUM PASS — depth, motion & polish (aivideopro-grade)
   ===================================================================== */
/* film grain overlay */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* floating blurred colour blobs behind everything */
.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-fx .blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; animation:blob-float 20s ease-in-out infinite}
.bg-fx .b1{width:540px;height:540px; top:-140px; left:-120px; background:radial-gradient(circle,rgba(99,102,241,.55),transparent 70%)}
.bg-fx .b2{width:480px;height:480px; top:34%; right:-160px; background:radial-gradient(circle,rgba(59,130,246,.42),transparent 70%); animation-delay:-7s}
.bg-fx .b3{width:420px;height:420px; bottom:-160px; left:32%; background:radial-gradient(circle,rgba(34,211,238,.34),transparent 70%); animation-delay:-13s}
@keyframes blob-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(46px,-34px) scale(1.12)}66%{transform:translate(-34px,22px) scale(.94)}}

/* hero entrance cascade */
@keyframes fadeUp{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:translateY(0)}}
.fu{opacity:0; animation:fadeUp .9s cubic-bezier(.2,.6,.2,1) both}
.fu-1{animation-delay:.05s}.fu-2{animation-delay:.16s}.fu-3{animation-delay:.28s}.fu-4{animation-delay:.4s}.fu-5{animation-delay:.52s}.fu-6{animation-delay:.64s}

/* hero orb — conic glow + floating callouts + waveform */
.orb-glow{position:absolute; inset:2%; border-radius:50%; z-index:0; filter:blur(30px); opacity:.65;
  background:conic-gradient(from 0deg, rgba(99,102,241,0), rgba(59,130,246,.65) 90deg, rgba(34,211,238,.5) 200deg, rgba(99,102,241,0) 330deg);
  animation:orbit-spin 13s linear infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
/* floating activity callouts around the orb (desktop) ; reflow below orb on mobile */
.callouts{display:contents}
.callout{position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; z-index:4;
  background:rgba(13,19,34,.78); border:1px solid var(--border-strong); backdrop-filter:blur(14px); white-space:nowrap;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.75); animation:floaty 6s ease-in-out infinite}
.callout .ic{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex:0 0 auto}
.callout .tx b{font-size:12.5px; font-weight:600; display:block; line-height:1.1}
.callout .tx small{color:var(--dim); font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase}
.callout.c1{top:0%;  left:-6%;  animation-delay:0s}
.callout.c2{top:3%;  right:-7%; animation-delay:-1.3s}
.callout.c3{top:41%; left:-13%; animation-delay:-2.4s}
.callout.c4{top:43%; right:-12%; animation-delay:-3.3s}
.callout.c5{bottom:2%; left:-3%; animation-delay:-4.2s}
.callout.c6{bottom:0%; right:-1%; animation-delay:-5.1s}
.hero-wave{position:absolute; bottom:-3%; left:50%; transform:translateX(-50%); display:flex; gap:4px; align-items:center; height:36px; z-index:4}
.hero-wave i{width:4px; border-radius:3px; background:linear-gradient(var(--cyan),var(--violet)); height:10px; animation:wv 1.1s ease-in-out infinite}
@keyframes wv{0%,100%{height:8px}50%{height:32px}}
/* mobile: orb stacks, the 3 activity cards reflow into a tidy row right below it */
@media(max-width:900px){
  .orb-stage{display:flex; flex-direction:column; align-items:center; aspect-ratio:auto; max-width:380px}
  .callouts{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; width:100%}
  .callout{position:static; inset:auto; animation:none; padding:9px 12px; backdrop-filter:none}
  .hero-wave{display:none}
  .hero-caps{display:none}   /* keep mobile hero tidy — capabilities live in the Features section */
}

/* rotating glow halo for feature cards */
.glow-wrap{position:relative}
.glow-wrap::before{content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:0; filter:blur(20px); opacity:.45;
  background:conic-gradient(from 0deg, var(--violet),var(--pink),var(--cyan),var(--violet)); animation:orbit-spin 11s linear infinite}
.glow-wrap > *{position:relative; z-index:1}

/* card hover glow */
.card:hover,.step-c:hover,.tcard:hover,.result:hover{box-shadow:0 22px 56px -26px rgba(99,102,241,.55)}
.bcell{position:relative}
.bcell:hover{box-shadow:inset 0 0 0 1px rgba(99,102,241,.25)}

/* language marquee */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex; gap:12px; width:max-content; animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee + .marquee .marquee-track{animation-direction:reverse; animation-duration:48s}
@keyframes marq{to{transform:translateX(-50%)}}
.lang-chip{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.025); font-size:14px; color:var(--muted); white-space:nowrap}
.lang-chip b{color:var(--fg); font-weight:500}
.lang-chip .fl{font-size:17px}

/* product dashboard mockup (platform "monitor") */
.dash{border:1px solid var(--border-strong); border-radius:20px; overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--bg));
  box-shadow:0 34px 90px -34px rgba(0,0,0,.85)}
.dash-top{display:flex; align-items:center; gap:9px; padding:13px 18px; border-bottom:1px solid var(--border);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.dash-top .tdot{width:9px;height:9px;border-radius:50%}
.dash-top .live{margin-left:auto; color:var(--lime); display:flex; gap:7px; align-items:center; font-size:10px}
.dash-body{padding:20px; display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
.dash-tile{border:1px solid var(--border); border-radius:13px; padding:15px 16px; background:rgba(255,255,255,.02)}
.dash-tile .v{font-size:clamp(20px,2.4vw,28px); font-weight:600; letter-spacing:-.02em}
.dash-tile .k{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-top:5px}
.dash-bars{grid-column:1/-1; display:flex; gap:7px; align-items:flex-end; height:96px; padding-top:14px; border-top:1px solid var(--border)}
.dash-bars i{flex:1; border-radius:5px 5px 0 0; background:linear-gradient(var(--violet),rgba(99,102,241,.12)); transition:height 1.2s cubic-bezier(.2,.7,.2,1)}
.dash-grid{display:grid; gap:30px; align-items:center}
@media(min-width:900px){.dash-grid{grid-template-columns:1fr 1.05fr}}


/* sticky CTA: always visible on phone, reveal-on-scroll on desktop */
@media(max-width:899px){.sticky-cta{transform:translateY(0)!important} body{padding-bottom:82px}}

/* subtle emerald accent in Quantum blue (+ keep gradient clipped to text) */
.grad{background:linear-gradient(110deg,#6366f1 0%,#3b82f6 34%,#38bdf8 68%,#22d3ee 100%)!important;
  background-size:200% 100%; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important;
  animation:gradient-flow 7s linear infinite!important}
/* a bright highlight that sweeps across the headline (like the button's shine) */
.grad.shine{background:linear-gradient(110deg,#6366f1 0%,#3b82f6 26%,#bfe0ff 44%,#ffffff 50%,#bfe0ff 56%,#22d3ee 76%,#2dd4bf 100%)!important;
  background-size:240% 100%!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important;
  animation:grad-shine 4.5s ease-in-out infinite!important}
@keyframes grad-shine{0%{background-position:140% 0}100%{background-position:-40% 0}}
.orb{background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.4) 0 8%, transparent 40%),conic-gradient(from 0deg,#6366f1,#3b82f6,#22d3ee,#2dd4bf,#818cf8,#6366f1)!important}
.orb-glow{background:conic-gradient(from 0deg, rgba(99,102,241,0), rgba(59,130,246,.6) 90deg, rgba(45,212,191,.38) 215deg, rgba(99,102,241,0) 330deg)!important}
.bg-fx .b3{background:radial-gradient(circle,rgba(45,212,191,.24),transparent 70%)!important}

/* hero capability chips */
.hero-caps{margin-top:22px}
.caps-label{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:11px}
.caps-chips{display:flex; flex-wrap:wrap; gap:8px}
.caps-chips span{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted);
  border:1px solid var(--border-strong); background:rgba(255,255,255,.03); border-radius:999px; padding:8px 13px; transition:all .2s}
.caps-chips span:hover{color:var(--fg); border-color:rgba(99,102,241,.45); transform:translateY(-1px)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}}