/* Generated from site.src.css by tools/css.mjs. Edit site.src.css, then run npm run css. */
/* Alpha Assistant website. Source styles: edit this file, then run npm run css. */

/* ================= fonts ================= */
@font-face{font-family:Sora;src:url(/fonts/sora.woff2) format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}

/* ================= tokens ================= */
:root,[data-theme=dark]{
  color-scheme:dark;
  --bg:#050916;--bg2:#070d24;--bg3:#0a1230;
  --surface:#0c1430;--surface2:#111a3a;--glass:rgba(10,17,40,.72);
  --line:rgba(110,140,255,.13);--line2:rgba(120,160,255,.24);
  --text:#f3f6ff;--text2:#c7cfe6;--muted:#8e9abb;
  --brand:#2d7dff;--brand2:#1d5cff;--brandt:#7fb4ff;--violet:#a35cff;--cyan:#22c8f6;--red:#f04452;
  --t-call:#2ee39b;--t-msg:#7fb4ff;--t-meet:#b9a3ff;--t-brief:#ffc266;
  --lg1:#2fd8ff;--lg2:#3b8cff;--lg3:#9a5cff;--lg4:#c86bff;
  --grad:linear-gradient(92deg,#6fdcff 0%,#5b9bff 38%,#a487ff 72%,#d38bff 100%);
  --neon:linear-gradient(90deg,#2fd8ff 0%,#3b8cff 45%,#9a5cff 80%,#c86bff 100%);
  --shadow:0 30px 80px -30px rgba(0,0,0,.75);
  --card:linear-gradient(160deg,rgba(22,34,76,.62) 0%,rgba(9,15,38,.7) 100%);
  --hero-glow:rgba(40,110,255,.30);
  --grid:rgba(120,150,255,.055);
}
[data-theme=light]{
  color-scheme:light;
  --bg:#f6f8fc;--bg2:#eef2fa;--bg3:#e5ebf7;
  --surface:#ffffff;--surface2:#f3f6fc;--glass:rgba(255,255,255,.8);
  --line:#e1e7f3;--line2:#cfd8ea;
  --text:#0b1430;--text2:#2b3654;--muted:#4b5675;
  --brand:#1f5eea;--brand2:#1a4fd0;--brandt:#1f5eea;
  --t-call:#087a4c;--t-msg:#1f5eea;--t-meet:#6a45e0;--t-brief:#a35405;
  --lg1:#12a9e8;--lg2:#2d6bff;--lg3:#7b4dff;--lg4:#a84dff;
  --grad:linear-gradient(92deg,#1593e0 0%,#2d6bff 40%,#6a45e0 75%,#a43fd6 100%);
  --shadow:0 30px 70px -32px rgba(20,35,90,.28);
  --card:#ffffff;
  --hero-glow:rgba(45,125,255,.16);
  --grid:rgba(20,40,120,.05);
}
.k-call{--k:#1fcf86;--kt:var(--t-call);--kg:rgba(31,207,134,.34)}
.k-msg{--k:#2d7dff;--kt:var(--t-msg);--kg:rgba(45,125,255,.36)}
.k-meet{--k:#7b5cff;--kt:var(--t-meet);--kg:rgba(123,92,255,.38)}
.k-brief{--k:#f6a019;--kt:var(--t-brief);--kg:rgba(246,160,25,.32)}
.k-night{--k:#8b6bff;--kt:var(--t-meet);--kg:rgba(139,107,255,.35)}

/* ================= base ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;transition:background-color .4s,color .4s}
h1,h2,h3,p,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(45,125,255,.35)}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.announce{position:relative;z-index:81;padding:9px 16px;text-align:center;font-size:13.5px;font-weight:500;color:#fff;background:linear-gradient(90deg,#1d4fd8,#6a45e0)}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 28px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:16px;height:16px}
.ic.l{width:26px;height:26px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.center{text-align:center}
.mt{margin-top:28px}

/* ================= type ================= */
.h1,.h2,.h3,h1,h2{font-family:Sora,Inter,sans-serif;letter-spacing:-.035em;font-weight:600;line-height:1.04}
.h2{font-size:clamp(34px,4.6vw,58px)}
.h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;line-height:1.12}
.h1 em,.h2 em,.h3 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--text2)}
.muted{color:var(--muted)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--kd,var(--brand));box-shadow:0 0 12px var(--kd,var(--brand))}
.sec-h{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.sec-h.c{margin-inline:auto;text-align:center}
.sec-h .h2{margin-top:16px}
.sec-h p{margin-top:18px}
.split .sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .14em;margin:0 -.02em -.14em}
.split .sw>span{display:inline-block}

/* ================= buttons ================= */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--h);padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;border:1px solid var(--line2);color:var(--text);background:transparent;transition:transform .2s,box-shadow .3s,background .3s,border-color .3s,color .3s}
.btn:hover{border-color:var(--brand);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.lg{--h:56px;padding:0 28px;font-size:16px}
.btn.sm{--h:40px;padding:0 16px;font-size:14px}
.btn.pri{border:1px solid rgba(120,190,255,.55);color:#fff;background:linear-gradient(180deg,#3a82ff 0%,#2060f0 55%,#1a48c8 100%);box-shadow:0 0 0 1px rgba(60,140,255,.18),0 10px 30px -8px rgba(40,110,255,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.pri:hover{box-shadow:0 0 0 1px rgba(60,140,255,.3),0 14px 40px -8px rgba(40,110,255,.85),0 0 24px rgba(60,140,255,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.block{width:100%}
.btn .ic{transition:transform .25s}
.btn:hover .ic.arr{transform:translateX(3px)}
.play-dot{width:28px;height:28px;margin-left:-10px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 40% 35%,#c49bff,#7a45ff 70%);box-shadow:0 0 14px rgba(160,100,255,.7)}
.play-dot .ic{width:12px;height:12px;fill:currentColor;stroke:none;margin-left:2px}
.link{color:var(--brandt);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* segmented control (from the app) */
.seg{display:inline-flex;padding:4px;border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.seg button{height:38px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted);transition:background .25s,color .25s}
.seg button.on{background:linear-gradient(180deg,#2860f0,#173fb0);color:#fff;box-shadow:0 4px 14px -4px rgba(40,96,240,.7)}
/* toggle (from the app) */
.tog{position:relative;width:52px;height:31px;border-radius:16px;background:#2a3355;flex:none;transition:background .3s;display:inline-block}
[data-theme=light] .tog{background:#c7cfe3}
.tog::after{content:'';position:absolute;left:3px;top:3px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.tog.on,[aria-checked=true]>.tog{background:linear-gradient(90deg,#2d7dff,#7b5cff)}
.tog.on::after,[aria-checked=true]>.tog::after{transform:translateX(21px)}

/* ================= header ================= */
.nav{position:sticky;top:0;z-index:80;transition:background .35s,border-color .35s,backdrop-filter .35s}
.nav::before{content:'';position:absolute;inset:0;background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);opacity:0;transition:opacity .35s}
.nav.stuck::before,.nav.open::before{opacity:1}
.nav-in{position:relative;display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;flex:none;border-radius:10px}
.logo{display:flex;align-items:center;gap:10px}
.lmark{width:36px;height:36px;overflow:visible;filter:drop-shadow(0 0 10px rgba(61,123,255,.55))}
[data-theme=light] .lmark{filter:drop-shadow(0 4px 8px rgba(45,80,200,.28))}
.lmark .lwv{stroke-dasharray:200;stroke-dashoffset:0}
.brand:hover .lmark .lwv{animation:lsw 1.5s ease-in-out}
@keyframes lsw{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
.lw{display:flex;flex-direction:column;font-family:Sora,Inter,sans-serif;line-height:1;white-space:nowrap;text-transform:uppercase}
.lw b{font-size:19px;font-weight:700;letter-spacing:.3em;margin-right:-.3em}
.lw span{font-size:7.6px;font-weight:400;letter-spacing:.62em;margin-top:6px;color:var(--text2)}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{position:relative;padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--text2);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:rgba(127,150,255,.08)}
.nav-links a.on{color:var(--text)}
.nav-links a.on::after{content:'';position:absolute;left:50%;bottom:2px;width:16px;height:2px;margin-left:-8px;border-radius:2px;background:var(--brand);box-shadow:0 0 8px var(--brand)}
.nav-r{display:flex;align-items:center;gap:10px}
.theme{position:relative;width:62px;height:34px;border-radius:999px;border:1px solid var(--line2);background:var(--surface2);flex:none}
.theme .tk{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#3d8bff,#6b3dff);box-shadow:0 0 12px rgba(90,110,255,.55);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.theme .tk .ic{width:15px;height:15px}
[data-theme=light] .theme .tk{transform:translateX(28px);background:linear-gradient(145deg,#ffbf3d,#ef8a0c);box-shadow:0 0 12px rgba(246,160,25,.55)}
.theme .tt{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--muted)}
.theme .tt.m{left:9px}.theme .tt.s{right:9px}
.menu-b{display:none;width:44px;height:44px;border-radius:50%;place-items:center;border:1px solid var(--line2)}
.mnav{position:relative;display:none;padding:8px 0 22px}
.nav.open .mnav{display:block}
.mnav a{display:block;padding:13px 4px;font-size:18px;font-weight:500;border-bottom:1px solid var(--line)}
.mnav .row{margin-top:18px}
.mnav .btn{flex:1}

/* ================= footer ================= */
.foot{position:relative;margin-top:0;padding:80px 0 34px;background:var(--bg2);border-top:1px solid var(--line);overflow:hidden}
.foot::before{content:'';position:absolute;left:50%;top:-240px;width:900px;height:420px;margin-left:-450px;border-radius:50%;background:radial-gradient(closest-side,var(--hero-glow),transparent);pointer-events:none}
.ft-top{position:relative;display:grid;grid-template-columns:1.3fr 2fr;gap:48px}
.ft-brand p{margin-top:16px;max-width:340px;color:var(--muted);font-size:15px}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:28px}
.ft-h{font:600 12.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.ft-cols li+li{margin-top:10px}
.ft-cols a{font-size:15px;color:var(--text2);transition:color .2s}
.ft-cols a:hover{color:var(--text)}
.ft-mail{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;color:var(--text)}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.soc-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);transition:transform .25s,border-color .25s,box-shadow .25s}
.soc-i:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 10px 24px -10px rgba(45,125,255,.5)}
.soc-i img{width:24px;height:24px;border-radius:6px}
.soc-t{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:13px;font-weight:600}
.ft-bot{position:relative;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.ft-up{display:inline-flex;align-items:center;gap:6px;color:var(--text2)}
.ft-up .ic{transform:rotate(-90deg)}

/* ================= reveal animations ================= */
.js [data-r]{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js [data-r=fade]{transform:none}
.js [data-r=zoom]{transform:scale(.92)}
.js [data-r=left]{transform:translateX(-36px)}
.js [data-r=right]{transform:translateX(36px)}
.js [data-r].in{opacity:1;transform:none;filter:none}
.js [data-r=split]{opacity:1;transform:none;filter:none}
.js .split .sw>span{transform:translateY(112%);transition:transform 1.05s cubic-bezier(.2,.75,.12,1);transition-delay:calc(var(--i,0) * 55ms + var(--d,0s))}
.js .split.in .sw>span{transform:none}
/* stagger children */
.js [data-st]>*{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-st].in>*{opacity:1;transform:none}
.js [data-st].in>*:nth-child(2){transition-delay:.08s}.js [data-st].in>*:nth-child(3){transition-delay:.16s}.js [data-st].in>*:nth-child(4){transition-delay:.24s}
.js [data-st].in>*:nth-child(5){transition-delay:.32s}.js [data-st].in>*:nth-child(6){transition-delay:.4s}.js [data-st].in>*:nth-child(7){transition-delay:.48s}.js [data-st].in>*:nth-child(8){transition-delay:.56s}
.js [data-st].in>*:nth-child(n+9){transition-delay:.6s}

/* ================= sections ================= */
.sec{position:relative;padding:clamp(80px,10vw,136px) 0}
.sec.tight{padding:clamp(56px,7vw,96px) 0}
.sec.alt{background:var(--bg2)}
.glow-top{overflow:hidden}
.glow-top::before{content:'';position:absolute;left:50%;top:0;width:min(1100px,120vw);height:520px;transform:translate(-50%,-55%);border-radius:50%;background:radial-gradient(closest-side,var(--hero-glow),transparent);pointer-events:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px}
[data-theme=light] .card{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 40px -28px rgba(20,35,90,.25)}

/* ================= phone frame + app UI ================= */
.pf{--s:.8;position:relative;flex:none;width:calc(414px * var(--s));height:calc(896px * var(--s))}
.pf .phone{position:absolute;left:0;top:0;width:414px;height:896px;transform:scale(var(--s));transform-origin:0 0;border-radius:64px;padding:11px;
  background:linear-gradient(145deg,#4a505d 0%,#16181e 18%,#0a0b0f 50%,#1b1e25 82%,#4a505d 100%);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.75),0 20px 40px -20px rgba(0,0,0,.5),inset 0 0 0 1.5px #6b7180,inset 0 0 0 4px #121419}
[data-theme=light] .pf .phone{box-shadow:0 50px 90px -34px rgba(15,25,70,.45),0 18px 36px -18px rgba(15,25,70,.3),inset 0 0 0 1.5px #6b7180,inset 0 0 0 4px #121419}
.device{position:relative;width:100%;height:100%;border-radius:54px;overflow:hidden;background:#050916;isolation:isolate;color:#f3f6ff;font-family:Inter,system-ui,sans-serif;line-height:1.3;--muted:#8e9abb;--line:rgba(110,140,255,.13)}
.a-sbar{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 32px 0 40px;font-weight:600;font-size:15px;z-index:95;color:#fff}
.a-time{display:flex;align-items:center;gap:6px}
.a-focus{display:grid;place-items:center;width:0;opacity:0;color:#b9a3ff;transition:width .3s,opacity .3s}
.dnd .a-focus,[data-m="5"] .a-focus{width:14px;opacity:1}
.a-sbi{display:flex;gap:6px;align-items:center}
.a-island{position:absolute;left:50%;top:11px;width:124px;height:36px;background:#000;border-radius:20px;transform:translateX(-50%);z-index:96}
.a-scr{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:54px;background:radial-gradient(110% 50% at 50% 0%,#0d1c48 0%,#060c22 50%,#04081a 100%);opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s linear .5s;z-index:1}
.a-scr.on{opacity:1;visibility:visible;transform:none;z-index:2;transition-delay:0s}
.a-ct{flex:1;overflow:hidden;padding:4px 16px 16px}
.a-hdr{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 12px;flex:none}
.a-ht{font-size:18px;font-weight:600;letter-spacing:.1px}
.a-ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff}
.a-ib.ring{border:1.5px solid rgba(140,160,255,.45);width:36px;height:36px}
.a-ib.ring.purple{border-color:#8b6bff;box-shadow:0 0 12px rgba(139,107,255,.45)}
.a-foot{flex:none;padding:10px 16px 12px}
.a-nav{flex:none;display:flex;justify-content:space-around;padding:10px 6px 20px;background:linear-gradient(180deg,rgba(6,11,30,.96),rgba(3,6,18,.98));border-top:1px solid rgba(110,150,255,.12)}
.a-nav span{flex:1;color:#9aa5c4;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:500}
.a-nav b{font-weight:500}
.a-nav span::after{content:'';width:18px;height:2px;border-radius:2px;margin-top:1px}
.a-nav span.on{color:#3fa6ff;text-shadow:0 0 10px rgba(63,166,255,.8)}
.a-nav span.on svg{filter:drop-shadow(0 0 6px rgba(63,166,255,.95))}
.a-nav span.on::after{width:22px;height:2.5px;background:#4fb0ff;box-shadow:0 0 6px #3fa6ff,0 0 14px #2d7dff}
.a-tile{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff}
.a-tile.sm{width:38px;height:38px;border-radius:11px}
.g-green{background:linear-gradient(145deg,#25d690,#0b8c5a);box-shadow:0 4px 14px rgba(31,207,134,.3)}
.g-blue{background:linear-gradient(145deg,#3d9bff,#1857e8);box-shadow:0 4px 14px rgba(45,125,255,.35)}
.g-purple{background:linear-gradient(145deg,#9b7bff,#5b36e0);box-shadow:0 4px 14px rgba(123,92,255,.35)}
.g-orange{background:linear-gradient(145deg,#ffbf3d,#ef8a0c);box-shadow:0 4px 14px rgba(246,160,25,.35)}
.g-red{background:linear-gradient(145deg,#ff6170,#d6283a);box-shadow:0 4px 14px rgba(240,68,82,.35)}
.t-soft-green{background:rgba(31,207,134,.16);color:#2ee39b}
.t-soft-blue{background:rgba(45,125,255,.18);color:#5aa2ff}
.t-soft-purple{background:rgba(123,92,255,.2);color:#a48bff}
.s-green{color:#2ee39b!important}.s-blue{color:#7fb4ff!important}.s-orange{color:#ff9d3b!important}
/* orb (the app's own) */
.a-orbw{--o:168px;position:relative;display:block;width:var(--o);height:var(--o);margin:0 auto;border-radius:50%}
.a-orbw::before{content:'';position:absolute;inset:calc(var(--o) * -.24);border-radius:50%;background:radial-gradient(circle,rgba(40,130,255,1) 0%,rgba(40,110,255,.75) 34%,rgba(90,70,255,.32) 52%,transparent 70%);filter:blur(16px);animation:breathe 4s ease-in-out infinite;pointer-events:none}
.a-orb{position:absolute;inset:calc(var(--o) * .0714);border-radius:50%;will-change:transform}
.a-orb svg{position:absolute;inset:-9%;width:118%;height:118%;overflow:visible}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
/* home */
.a-htop{display:flex;justify-content:space-between;align-items:center;padding:6px 2px 0}
.a-brand{text-align:center;margin-top:-4px}
.a-alpha{font-size:33px;font-weight:600;letter-spacing:3px;line-height:1.1;text-shadow:0 0 18px rgba(150,190,255,.35)}
.a-assistant{font-size:19px;font-weight:600;letter-spacing:6.5px;color:#3fb0ff;margin-top:4px;padding-left:6px;text-shadow:0 0 10px rgba(50,160,255,.75),0 0 24px rgba(50,140,255,.4)}
.a-tag{font-size:13.5px;color:#d3dbf2;margin-top:10px}
.a-home .a-orbw{margin:12px auto 4px}
.a-ready{text-align:center;font-size:19px;font-weight:600;margin-top:6px;text-shadow:0 0 14px rgba(140,180,255,.3)}
.a-ready-sub{text-align:center;font-size:13.5px;color:#c2cae2;margin-top:6px}
.a-grid4{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.a-fcard{display:block;text-align:center;border-radius:18px;padding:15px 8px 14px;background:linear-gradient(160deg,rgba(26,40,86,.72) 0%,rgba(10,17,40,.82) 100%);border:1px solid rgba(120,160,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,20,.35)}
.a-fi{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;border:1px solid rgba(255,255,255,.08)}
.a-fi svg{filter:drop-shadow(0 0 4px currentColor)}
.a-fi.c-green{background:radial-gradient(circle at 50% 35%,rgba(40,230,150,.75),rgba(8,110,72,.95));color:#b6ffdf;box-shadow:0 0 18px rgba(31,207,134,.5),inset 0 0 12px rgba(90,255,190,.22)}
.a-fi.c-blue{--dot:#1452d8;background:radial-gradient(circle at 50% 35%,rgba(70,160,255,.85),rgba(16,70,200,.95));color:#d6ecff;box-shadow:0 0 18px rgba(45,140,255,.6),inset 0 0 12px rgba(120,190,255,.25)}
.a-fi.c-purple{background:radial-gradient(circle at 50% 35%,rgba(180,120,255,.85),rgba(90,40,200,.95));color:#f1e6ff;box-shadow:0 0 18px rgba(150,90,255,.6),inset 0 0 12px rgba(200,160,255,.25)}
.a-fi.c-orange{background:radial-gradient(circle at 50% 35%,rgba(255,180,70,.85),rgba(190,90,10,.95));color:#fff1c2;box-shadow:0 0 18px rgba(246,150,25,.55),inset 0 0 12px rgba(255,210,120,.25)}
.a-ft{display:block;font-size:14.5px;font-weight:600}
.a-fs{display:block;font-size:11.5px;color:#aab3cd;margin-top:4px}
.a-askbar,.a-composer,.a-bplay{border:1.6px solid transparent;background:linear-gradient(90deg,rgba(12,24,64,.92),rgba(16,18,58,.92)) padding-box,linear-gradient(90deg,#2fd8ff 0%,#3b8cff 45%,#9a5cff 80%,#c86bff 100%) border-box;box-shadow:0 0 10px rgba(47,200,255,.45),0 0 26px rgba(70,120,255,.35),0 0 40px rgba(150,90,255,.2),inset 0 0 14px rgba(70,150,255,.18)}
.a-askbar{display:flex;align-items:center;gap:10px;height:54px;border-radius:30px;padding:0 6px 0 16px;margin-top:16px}
.a-mic{color:#4fd0ff;filter:drop-shadow(0 0 6px rgba(79,208,255,.8));display:grid;place-items:center}
.a-ph{flex:1;min-width:0;font-size:14px;color:#b7c0da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-sendb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;background:radial-gradient(circle at 40% 35%,#c49bff,#7a45ff 70%);box-shadow:0 0 0 1px rgba(220,190,255,.4),0 0 16px rgba(160,100,255,.85),0 0 30px rgba(130,80,255,.45)}
.a-sendb.sm{width:36px;height:36px;background:radial-gradient(circle at 40% 35%,#3a5bb8,#1a2a66);box-shadow:0 0 10px rgba(80,120,255,.4)}
/* rows (calls, briefing) */
.a-row{display:flex;align-items:center;gap:13px;background:linear-gradient(160deg,#0f1834 0%,#0b1229 100%);border:1px solid rgba(110,140,255,.13);border-radius:16px;padding:12px;margin-bottom:10px}
.a-mid{flex:1;min-width:0}
.a-t{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-t.sm{font-size:14px}
.a-s{font-size:12px;color:#8e9abb;margin-top:4px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-time2{font-size:11.5px;color:#aab4d0;align-self:flex-start;margin-top:3px;white-space:nowrap}
.a-play{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#38a6ff,#1868ff);box-shadow:0 0 14px rgba(45,125,255,.55)}
.a-chev{color:#c9d2ea;flex:none;display:grid}
.a-tabs{display:flex;gap:6px;margin:4px 0 14px;border-bottom:1px solid rgba(110,140,255,.08)}
.a-tabs span{flex:1;text-align:center;color:#aab3cd;font-size:13.5px;font-weight:500;padding:9px 0 10px;border-radius:12px 12px 0 0;position:relative}
.a-tabs span.on{color:#fff;background:linear-gradient(180deg,#14306f,#0f2152);font-weight:600}
.a-tabs span.on::after{content:'';position:absolute;left:12%;right:12%;bottom:-1px;height:2.5px;border-radius:2px;background:#2d7dff;box-shadow:0 0 8px #2d7dff}
.a-cta{width:100%;height:54px;border-radius:30px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;color:#fff;border:1.5px solid rgba(120,200,255,.85);background:linear-gradient(180deg,#2f74ff 0%,#1f4fe6 45%,#1638b0 100%);box-shadow:0 0 0 1px rgba(60,140,255,.25),0 0 16px rgba(40,130,255,.75),0 0 40px rgba(50,90,255,.4),inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 18px rgba(140,200,255,.28);text-shadow:0 0 8px rgba(180,220,255,.5)}
.a-cico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#b38cff,#6a3df0);box-shadow:0 0 12px rgba(160,110,255,.8)}
/* message */
.a-tobar{display:flex;align-items:center;gap:10px;background:#0d1530;border:1px solid rgba(110,140,255,.13);border-radius:14px;padding:9px 12px;margin:2px 0 14px}
.a-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none}
.a-av.xl{width:96px;height:96px;font-size:34px}
.a-to{flex:1;font-size:13.5px}
.a-chip{display:flex;align-items:center;gap:4px;font-size:12px;color:#cfd6ea;font-weight:500}
.a-chat{display:flex;flex-direction:column;gap:12px}
.a-b{max-width:80%;padding:11px 14px 8px;font-size:15px;line-height:1.38}
.a-bt{display:flex;justify-content:flex-end;gap:4px;align-items:center;font-size:10px;color:rgba(255,255,255,.55);margin-top:4px}
.a-b.me{align-self:flex-end;background:linear-gradient(160deg,#2f7dff,#1655e6);border-radius:18px 18px 5px 18px;box-shadow:0 6px 20px rgba(30,90,255,.3)}
.a-b.me .a-bt{color:rgba(220,235,255,.75)}
.a-b.them{align-self:flex-start;background:#121b38;border:1px solid rgba(110,140,255,.13);border-radius:18px 18px 18px 5px}
.a-apcard{align-self:flex-start;width:84%;background:linear-gradient(160deg,#111b3a,#0c1430);border:1px solid rgba(110,140,255,.13);border-radius:18px;padding:14px}
.a-top{display:flex;gap:12px;align-items:center;font-size:15px}
.a-apd{display:block;font-size:12.5px;color:#c4cce4;margin-top:9px;line-height:1.5}
.a-vd{display:grid;place-items:center;margin-top:12px;height:36px;border-radius:10px;background:rgba(45,125,255,.1);color:#7fb4ff;font-weight:500;font-size:13px}
.a-typing{align-self:flex-start;background:#121b38;border:1px solid rgba(110,140,255,.13);border-radius:18px;padding:12px 16px;display:flex;gap:4px}
.a-typing i{width:6px;height:6px;border-radius:50%;background:#8e9abb;animation:blink 1.2s infinite}
.a-typing i:nth-child(2){animation-delay:.2s}.a-typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.a-composer{display:flex;align-items:center;gap:10px;height:50px;border-radius:28px;padding:0 6px 0 14px}
/* calendar */
.a-calcard{border-radius:18px;padding:12px 10px 10px;background:linear-gradient(160deg,rgba(22,34,76,.75),rgba(9,15,38,.85));border:1px solid rgba(120,160,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.a-calhead{display:flex;align-items:center;justify-content:space-between;padding:0 8px 8px;color:#cfd6ea}
.a-calhead b{font-size:16px;font-weight:600;color:#fff}
.a-calgrid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;text-align:center}
.a-calgrid .wd{font-size:11px;color:#aab3cd;padding:4px 0 6px}
.a-calgrid .d{position:relative;display:grid;place-items:center;height:32px;width:32px;margin:0 auto;border-radius:50%;font-size:13.5px;color:#e6ebfa;font-weight:500}
.a-calgrid .d.out{color:#5b6688}
.a-calgrid .d.dot::after{content:'';position:absolute;bottom:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#5aa2ff}
.a-calgrid .d.sel{background:radial-gradient(circle at 50% 38%,#ffffff 0%,#d4efff 45%,#8fd0ff 100%);color:#05153d;font-weight:700;box-shadow:0 0 0 2.5px #2f86ff,0 0 0 5px rgba(47,134,255,.25),0 0 18px 4px rgba(40,130,255,.85)}
.a-sched{margin-top:12px}
.a-srow{display:flex;align-items:stretch;border-top:1px solid rgba(110,140,255,.08)}
.a-st{width:66px;flex:none;font-size:12px;color:#d0d7ec;padding-top:20px;padding-left:4px}
.a-sc{flex:1;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;background:linear-gradient(90deg,rgba(18,28,60,.85),rgba(12,19,42,.5));margin:4px 0;border-radius:0 14px 14px 0;min-height:52px;border-left:2px solid var(--bar,#5aa2ff)}
.bar-cyan{--bar:#22c8f6}.bar-green{--bar:#1fcf86}.bar-purple{--bar:#8b6bff}
.a-sc .a-t{font-size:14px}
.a-vid{color:#22c8f6;display:grid}
/* briefing */
.a-bhero{position:relative;border-radius:20px;padding:20px 18px;background:linear-gradient(135deg,#1a3270 0%,#12245a 45%,#0c1736 100%);border:1px solid rgba(110,150,255,.18);overflow:hidden}
.a-bh{display:block;font-size:23px;font-weight:600;line-height:1.25}
.a-bd{display:block;font-size:13.5px;color:#c4cde6;margin-top:10px}
.a-sun{position:absolute;right:22px;top:24px;width:44px;height:44px}
.a-sun i{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff3b0,#ffc533 55%,#ff9a1a);box-shadow:0 0 22px 6px rgba(255,190,50,.55)}
.a-sun svg{position:absolute;inset:0;width:44px;height:44px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.a-sec{font-size:15px;font-weight:600;margin:16px 2px 11px}
.a-brief .a-row{padding:10px 12px;margin-bottom:9px}
.a-bplay{position:relative;width:100%;height:62px;border-radius:32px;display:flex;align-items:center;justify-content:center;gap:16px;overflow:hidden}
.a-pi{color:#3aa8ff;filter:drop-shadow(0 0 8px rgba(58,168,255,.9));display:grid}
.a-bl b{display:block;font-size:15px;font-weight:600}
.a-bl span{font-size:12.5px;color:#c4cde6}
.a-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#2d7dff,#c05cff)}
.a-scr.on .a-prog{animation:bprog 9s linear infinite}
@keyframes bprog{from{width:0}to{width:100%}}
/* call screen */
.a-callscr{align-items:center;padding:80px 20px 34px;background:radial-gradient(90% 60% at 50% 25%,#13306a 0%,#08112e 50%,#050916 100%)}
.a-cav-wrap{position:relative;display:grid;place-items:center;min-height:100px}
.a-cav{position:relative;display:block}
.a-cav::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(45,125,255,.4);animation:ripple 2s ease-out infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.55);opacity:0}}
.a-call-orb{--o:150px}
.a-cname{font-size:24px;font-weight:600;margin-top:16px;text-align:center}
.a-cstat{font-size:13.5px;color:#9fb3ea;margin-top:6px;text-align:center}
.a-alpha-tag{margin-top:14px;font-size:12px;padding:6px 12px;border-radius:20px;background:rgba(123,92,255,.18);color:#c3b4ff;border:1px solid rgba(123,92,255,.35);display:flex;gap:6px;align-items:center}
.a-clog{flex:1;width:100%;overflow:hidden;margin:20px 0 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px}
.a-ln{font-size:13.5px;line-height:1.45;padding:10px 12px;border-radius:14px;background:rgba(15,24,55,.85);border:1px solid rgba(110,140,255,.13)}
.a-ln b{display:block;font-size:11px;letter-spacing:.5px;color:#8fb4ff;margin-bottom:3px;font-weight:600}
.a-ln.alpha b{color:#b9a3ff}
.a-cctrl{display:flex;gap:22px;justify-content:center;width:100%}
.a-cbtn{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:#b8c2de}
.a-cbtn i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#fff}
.a-cbtn.end i{background:linear-gradient(145deg,#ff5868,#cc2436);border:0;box-shadow:0 0 20px rgba(240,68,82,.5)}
.a-cbtn.end svg{transform:rotate(135deg)}
/* incoming call (phone's own screen) */
.a-ring{align-items:center;justify-content:space-between;padding:110px 30px 70px;background:radial-gradient(90% 70% at 50% 20%,#1c3c7a 0%,#0c1636 55%,#050916 100%)}
.a-ring-top{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.a-ring-top b{font-size:30px;font-weight:600;margin-top:16px}
.a-ring-top span:last-child{font-size:16px;color:#a7b3d3}
.a-ring-mid{display:flex;gap:70px;font-size:13px;color:#c8d0e8}
.a-ring-mid span{display:flex;flex-direction:column;align-items:center;gap:8px}
.a-ring-btns{display:flex;gap:120px}
.a-ring-btns span{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;color:#dfe5f5}
.a-ring-btns i{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff}
.a-ring-btns .dec i{background:#f04452}.a-ring-btns .dec svg{transform:rotate(135deg)}
.a-ring-btns .acc i{background:#1fcf86;animation:accp 1.4s ease-in-out infinite}
@keyframes accp{0%,100%{box-shadow:0 0 0 0 rgba(31,207,134,.55)}60%{box-shadow:0 0 0 16px rgba(31,207,134,0)}}
/* toast */
.a-toast{position:absolute;left:16px;right:16px;top:62px;z-index:99;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(18,28,62,.96);border:1px solid rgba(110,150,255,.3);box-shadow:0 12px 30px rgba(0,0,0,.4);font-size:13.5px;line-height:1.35;transform:translateY(-150%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .4s}
.a-toast.show{transform:none;opacity:1}
.a-tico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff}
/* sheet */
.a-sheet{position:absolute;left:0;right:0;bottom:0;z-index:71;max-height:72%;display:flex;flex-direction:column;background:linear-gradient(180deg,#101a3a,#0a1129);border-radius:26px 26px 0 0;border-top:1px solid rgba(110,150,255,.25);box-shadow:0 -20px 40px rgba(0,0,0,.45);transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.9,.25,1)}
.a-sheet.show{transform:none}
.a-grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin:9px auto 4px;flex:none}
.a-shd{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 4px 20px}
.a-shh{font-size:17px;font-weight:600}
.a-pill{font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 9px;border-radius:10px;background:rgba(240,68,82,.18);color:#ff8a95}
.a-pill.low{background:rgba(110,140,255,.15);color:#a9b8e6}.a-pill.med{background:rgba(246,160,25,.18);color:#ffc266}
.a-sbody{padding:4px 18px 22px}
.a-kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(110,140,255,.1);font-size:13px}
.a-kv span:first-child{color:#8e9abb;flex:none}
.a-kv span:last-child{text-align:right}
.a-btnrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.a-sbtn{height:44px;border-radius:14px;border:1px solid rgba(110,140,255,.13);background:rgba(255,255,255,.05);color:#fff;font-size:13.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,background .2s,border-color .2s}
button.a-sbtn:hover{border-color:rgba(110,150,255,.45);background:rgba(255,255,255,.08)}
button.a-sbtn:active{transform:scale(.97)}
.a-sbtn.pri{background:linear-gradient(180deg,#2860f0,#173fb0);border-color:rgba(90,150,255,.6)}
.a-sbtn.dng{color:#ff7884}
.a-sbtn.on{box-shadow:0 0 0 2px #7fb4ff}
.a-reply{font-size:13px;line-height:1.5;color:#d7def3;margin-top:10px;min-height:0}
.a-reply:not(:empty){padding:11px 12px;border-radius:12px;background:rgba(45,125,255,.1);border:1px solid rgba(110,150,255,.2)}
.a-reply .link{color:#9cc4ff}
/* settings rows */
.a-group{background:linear-gradient(160deg,#0f1834,#0b1229);border:1px solid rgba(110,140,255,.13);border-radius:16px;padding:2px 14px}
.a-setrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(110,140,255,.09);color:#f3f6ff}
.a-setrow:last-child{border-bottom:0}
.a-setrow .a-mid b{display:block;font-size:14.5px;font-weight:500}
.a-setrow .a-mid span{display:block;font-size:12px;color:#8e9abb;margin-top:3px}
.a-seg{display:flex;background:#0b1430;border:1px solid rgba(110,140,255,.13);border-radius:12px;padding:3px;margin:0 0 13px}
.a-seg button{flex:1;height:34px;border-radius:9px;color:#aab3cd;font-size:13px;font-weight:500;transition:background .25s,color .25s}
.a-seg button.on{background:linear-gradient(180deg,#2860f0,#173fb0);color:#fff}
/* sequenced reveals inside a screen */
.a-scr [data-q]{opacity:0}
.a-scr.on [data-q]{animation:apop .5s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--qd,.55s) * var(--q,0) + .25s)}
.a-scr [data-q="0"]{--q:0}.a-scr [data-q="1"]{--q:1}.a-scr [data-q="2"]{--q:2}.a-scr [data-q="3"]{--q:3}.a-scr [data-q="4"]{--q:4}.a-scr [data-q="5"]{--q:5}
.a-msg .a-scr.on .a-typing,.a-scr.on .a-typing[data-q]{animation:apop .4s both,tgone .3s 1.6s forwards}
@keyframes apop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tgone{to{opacity:0;height:0;padding:0;margin:-6px 0;border-width:0}}
.a-row.new,.a-srow.new .a-sc{position:relative}
.a-scr.on .a-row.new{animation:rowin .7s cubic-bezier(.2,.9,.25,1) .35s both,rowglow 2.4s ease-out 1s both}
.a-scr.on .a-srow.new .a-sc{animation:rowglow 2.4s ease-out .8s both}
@keyframes rowin{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rowglow{0%{box-shadow:0 0 0 1px rgba(46,227,155,.0)}25%{box-shadow:0 0 0 1.5px rgba(46,227,155,.8),0 0 26px rgba(31,207,134,.5)}100%{box-shadow:0 0 0 1px rgba(46,227,155,.25)}}

/* ================= hero + silent switch ================= */
.hero{position:relative;min-height:calc(100svh - 72px);display:flex;align-items:center;padding:24px 0 72px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 80%)}
.hero-bg .hg{position:absolute;border-radius:50%;filter:blur(20px);transition:background 1.2s,opacity 1.2s,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.hero-bg .hg1{right:-8%;top:-18%;width:900px;height:900px;background:radial-gradient(closest-side,var(--hero-glow),transparent)}
.hero-bg .hg2{left:-12%;bottom:-30%;width:700px;height:700px;background:radial-gradient(closest-side,rgba(123,92,255,.16),transparent)}
.hero-bg .night{position:absolute;inset:0;background:radial-gradient(80% 60% at 70% 30%,rgba(80,60,200,.25),transparent 70%),linear-gradient(180deg,rgba(2,4,14,.55),rgba(2,4,14,.2));opacity:0;transition:opacity 1.4s}
[data-theme=light] .hero-bg .night{background:radial-gradient(80% 60% at 70% 30%,rgba(123,92,255,.18),transparent 70%),linear-gradient(180deg,rgba(235,232,255,.85),rgba(243,240,255,.3))}
.hero-bg .stars{position:absolute;inset:0;opacity:0;transition:opacity 1.6s;background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 64%,#cfe0ff,transparent),radial-gradient(1px 1px at 43% 18%,#fff,transparent),radial-gradient(1.6px 1.6px at 63% 12%,#e6eeff,transparent),radial-gradient(1px 1px at 78% 30%,#fff,transparent),radial-gradient(1.3px 1.3px at 88% 70%,#dbe6ff,transparent),radial-gradient(1px 1px at 52% 80%,#fff,transparent),radial-gradient(1.2px 1.2px at 8% 86%,#cfe0ff,transparent),radial-gradient(1px 1px at 35% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 94% 44%,#fff,transparent)}
[data-theme=light] .hero-bg .stars{display:none}
.hero[data-dnd=on] .night,.hero[data-dnd=on] .stars{opacity:1}
.hero[data-dnd=on] .stars{animation:twinkle 7s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.7}50%{opacity:1}}
.hero-bg .alarm{position:absolute;left:calc(74% - 400px);top:calc(50% - 400px);width:800px;height:800px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,60,90,.44),rgba(255,110,60,.14) 55%,transparent 72%);opacity:0;transition:opacity .9s}
[data-theme=light] .hero-bg .alarm{background:radial-gradient(closest-side,rgba(255,60,90,.2),rgba(255,140,60,.07) 55%,transparent 72%)}
.hero[data-dnd=off] .alarm{animation:alarm 2.2s ease-out infinite}
@keyframes alarm{0%{opacity:.3}6%{opacity:.95}16%{opacity:.5}26%{opacity:.9}44%,100%{opacity:.25}}
.hero-bg .aur{position:absolute;left:-10%;right:-10%;top:-25%;height:80%;background:radial-gradient(38% 55% at 32% 50%,rgba(123,92,255,.26),transparent 70%),radial-gradient(32% 48% at 72% 42%,rgba(45,125,255,.2),transparent 70%);filter:blur(30px);opacity:0;transition:opacity 1.8s}
[data-theme=light] .hero-bg .aur{background:radial-gradient(38% 55% at 32% 50%,rgba(123,92,255,.14),transparent 70%),radial-gradient(32% 48% at 72% 42%,rgba(45,125,255,.12),transparent 70%)}
.hero[data-dnd=on] .aur{opacity:1;animation:aur 20s ease-in-out infinite alternate}
@keyframes aur{from{translate:-5% 0}to{translate:5% 4%}}
.hero[data-dnd=on] .hg1{transform:translate(-6%,4%) scale(.9);background:radial-gradient(closest-side,rgba(123,92,255,.28),transparent)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;width:100%}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 8px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--text2);background:var(--glass);border:1px solid var(--line2)}
.hero .eyebrow .ed{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#6fb6ff,#2d6bff 70%);box-shadow:0 0 12px rgba(45,125,255,.7)}
.hero .eyebrow .ed i{width:6px;height:6px;border-radius:50%;background:#fff}
.hero h1{font-size:clamp(44px,4.8vw,70px);line-height:1.02;margin-top:26px}
.hero h1 .l2{display:block}
.hero .lead{margin-top:26px;max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-size:14px;color:var(--muted)}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks .ic{width:16px;height:16px;color:var(--t-call)}
/* the switch */
.silent{display:flex;align-items:center;gap:16px;width:100%;max-width:430px;margin-top:34px;padding:14px 16px 14px 14px;border-radius:22px;text-align:left;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);transition:border-color .4s,box-shadow .4s,transform .2s}
.silent:hover{transform:translateY(-1px)}
.silent .sm{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(145deg,#4b5570,#2a3150);transition:background .5s,box-shadow .5s}
.silent .sm .ic{width:22px;height:22px}
.silent .st{flex:1;min-width:0}
.silent .st b{display:block;font-size:16px;font-weight:600}
.silent .st span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.silent .tog{width:60px;height:35px;border-radius:18px}
.silent .tog::after{width:29px;height:29px}
.silent[aria-checked=true] .tog::after{transform:translateX(25px)}
.silent[aria-checked=true]{border-color:rgba(139,107,255,.6);box-shadow:0 0 0 1px rgba(139,107,255,.25),0 20px 50px -20px rgba(123,92,255,.6)}
.silent[aria-checked=true] .sm{background:linear-gradient(145deg,#9b7bff,#5b36e0);box-shadow:0 0 18px rgba(139,107,255,.6)}
.silent .hint{position:absolute;right:-10px;top:-12px;font-size:12px;font-weight:600;color:#fff;padding:5px 10px;border-radius:999px;background:linear-gradient(145deg,#9b7bff,#5b36e0);box-shadow:0 6px 16px -6px rgba(123,92,255,.8);animation:hintb 1.8s ease-in-out infinite}
.silent{position:relative}
.silent[aria-checked=true] .hint,.silent.touched .hint{display:none}
@keyframes hintb{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* phone stage */
.hstage{position:relative;display:grid;place-items:center;min-height:640px}
.hero .pf{--s:.74;z-index:2}
.hero[data-dnd=off] .pf.ringing{animation:buzz 2.2s linear infinite}
@keyframes buzz{0%,38%,100%{translate:0 0;rotate:0deg}2%{translate:-8px 1px;rotate:-2.2deg}4%{translate:8px -1px;rotate:2.2deg}6%{translate:-8px 1px;rotate:-2deg}8%{translate:8px 0;rotate:2deg}10%{translate:-7px 1px;rotate:-1.6deg}12%{translate:6px 0;rotate:1.4deg}14%{translate:0 0;rotate:0deg}20%{translate:0 0;rotate:0deg}22%{translate:-8px 1px;rotate:-2.2deg}24%{translate:8px -1px;rotate:2.2deg}26%{translate:-8px 1px;rotate:-2deg}28%{translate:8px 0;rotate:2deg}30%{translate:-7px 1px;rotate:-1.6deg}32%{translate:6px 0;rotate:1.4deg}34%{translate:0 0;rotate:0deg}}
/* the whole stage shakes with each burst, and the headline trembles a little */
.hero[data-dnd=off] .hstage{animation:quake 2.2s linear infinite}
@keyframes quake{0%,36%,100%{translate:0 0}3%{translate:-4px 1px}6%{translate:4px -1px}9%{translate:-4px 1px}12%{translate:3px 0}15%{translate:0 0}21%{translate:-4px 1px}24%{translate:4px -1px}27%{translate:-4px 1px}30%{translate:3px 0}33%{translate:0 0}}
.hero[data-dnd=off] .hero-copy>h1,.hero[data-dnd=off] .hero-copy>.lead{animation:tremor 2.2s linear infinite}
@keyframes tremor{0%,36%,100%{translate:0 0}4%{translate:-1.5px 0}8%{translate:1.5px 0}12%{translate:-1px 0}16%{translate:0 0}22%{translate:-1.5px 0}26%{translate:1.5px 0}30%{translate:-1px 0}34%{translate:0 0}}
.hero[data-dnd=off] .silent{animation:swat 2.2s ease-out infinite}
@keyframes swat{0%{box-shadow:var(--shadow),0 0 0 0 rgba(139,107,255,.6)}60%,100%{box-shadow:var(--shadow),0 0 0 16px rgba(139,107,255,0)}}
/* DND on: everything slows down and breathes */
.hero[data-dnd=on] .pf{animation:breath 8s ease-in-out infinite}
@keyframes breath{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero.away *,.hero.away *::before,.hero.away *::after{animation-play-state:paused!important}
/* a missed-call badge on the phone that keeps climbing */
.hcount{position:absolute;right:-16px;top:-14px;z-index:5;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px 0 12px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;white-space:nowrap;background:linear-gradient(180deg,#ff5a6a,#d8253a);box-shadow:0 0 0 3px var(--bg),0 10px 24px -8px rgba(240,68,82,.9);transition:opacity .5s,transform .6s cubic-bezier(.3,1.4,.5,1)}
.hcount b{font-family:Sora,Inter,sans-serif;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.hcount.pop{animation:cpop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes cpop{0%{scale:1}40%{scale:1.28}100%{scale:1}}
.hero[data-dnd=on] .hcount{opacity:0;transform:scale(.4)}
/* notifications stacking on the phone screen */
.hpile{position:absolute;left:14px;right:14px;top:60px;z-index:98;height:120px;pointer-events:none;transition:opacity .5s}
.hpile .a-toast{left:0;right:0;top:0;transform-origin:50% 0;transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .5s}
.hpile .a-toast[data-k="0"]{transform:none;opacity:1;z-index:4}
.hpile .a-toast[data-k="1"]{transform:translateY(12px) scale(.94);opacity:.82;z-index:3}
.hpile .a-toast[data-k="2"]{transform:translateY(22px) scale(.88);opacity:.5;z-index:2}
.hpile .a-toast[data-k="3"]{transform:translateY(28px) scale(.82);opacity:0;z-index:1}
.hpile .a-toast.drop[data-k="0"]{animation:dropin .55s cubic-bezier(.2,.9,.25,1)}
@keyframes dropin{from{transform:translateY(-130%);opacity:0}}
.hpile .a-tico i{display:none;place-items:center}
.hpile .a-tico[data-ico=phoneX] [data-i=phoneX],.hpile .a-tico[data-ico=chatDots] [data-i=chatDots],.hpile .a-tico[data-ico=bell] [data-i=bell],.hpile .a-tico[data-ico=phoneF] [data-i=phoneF]{display:grid}
.hero[data-dnd=on] .hpile{opacity:0}
/* the calm wave that rolls out when you switch it on */
.hstage .calmwave{position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;border:2px solid rgba(170,140,255,.7);box-shadow:0 0 40px rgba(140,110,255,.5),inset 0 0 40px rgba(140,110,255,.35);opacity:0;pointer-events:none;z-index:1}
.hero.calming .calmwave{animation:cwave 1.7s cubic-bezier(.2,.7,.2,1)}
@keyframes cwave{0%{transform:scale(.35);opacity:.95}100%{transform:scale(2.8);opacity:0}}
.hstage .ring3{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;border:1px solid var(--line2);opacity:.6;pointer-events:none}
.hstage .ring3:nth-child(2){width:680px;height:680px;margin:-340px 0 0 -340px;opacity:.35}
.hero[data-dnd=off] .ring3{border-color:rgba(255,95,115,.5);animation:rpulse 1.1s ease-out infinite}
.hero[data-dnd=off] .ring3:nth-child(2){animation-delay:.55s}
@keyframes rpulse{0%{transform:scale(.8);opacity:.85}100%{transform:scale(1.12);opacity:0}}
.hero[data-dnd=on] .ring3{border-color:rgba(165,140,255,.35);animation:calmring 8s ease-in-out infinite}
.hero[data-dnd=on] .ring3:nth-child(2){animation-delay:-4s}
@keyframes calmring{0%,100%{transform:scale(.95);opacity:.2}50%{transform:scale(1.04);opacity:.6}}
/* floating cards */
.hc{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;width:max-content;max-width:280px;padding:12px 16px 12px 12px;border-radius:18px;font-size:13.5px;line-height:1.35;color:#f3f6ff;background:rgba(14,22,52,.86);border:1px solid rgba(120,160,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -18px rgba(0,0,0,.6);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-theme=light] .hc{background:rgba(255,255,255,.92);color:#0b1430;border-color:#dfe5f1;box-shadow:0 20px 40px -20px rgba(20,35,90,.35)}
.hc b{display:block;font-weight:600}
.hc small{display:block;font-size:12.5px;color:#a9b5d6;margin-top:1px}
[data-theme=light] .hc small{color:#4b5675}
.hc .a-tile{width:38px;height:38px;border-radius:12px}
.hc.n1{left:-4%;top:12%}.hc.n2{right:-6%;top:22%}.hc.n3{left:-8%;bottom:20%}.hc.n4{right:-2%;bottom:9%}.hc.n5{left:-14%;top:40%}.hc.n6{right:-12%;top:50%}
.hc.c1{left:-12%;top:5%}.hc.c2{right:-10%;top:30%}.hc.c3{left:-10%;bottom:18%}.hc.c4{right:-6%;bottom:6%}
.hc.noisy{opacity:0;transform:translateY(14px) scale(.92)}
.hero[data-dnd=off] .hc.noisy.show{opacity:1;transform:none;animation:jit 1.1s linear infinite}
.hero[data-dnd=off] .hc.noisy.show:nth-of-type(2n){animation-delay:-.55s}
.hero[data-dnd=off] .hc.noisy .a-tile{animation:tbl 1.1s ease-in-out infinite}
@keyframes jit{0%,52%,100%{translate:0 0;rotate:0deg}56%{translate:-5px 1px;rotate:-1.5deg}60%{translate:5px -1px;rotate:1.5deg}64%{translate:-4px 0;rotate:-1deg}68%{translate:4px 1px;rotate:1deg}72%{translate:-2px 0;rotate:0deg}76%{translate:0 0}}
@keyframes tbl{0%,100%{box-shadow:0 0 0 0 rgba(255,90,110,.0)}50%{box-shadow:0 0 0 6px rgba(255,90,110,.28)}}
.hc.calm{opacity:0;transform:translateY(18px) scale(.94);pointer-events:none}
.hero[data-dnd=on] .hc.calm.show{opacity:1;transform:none;animation:fl 9s ease-in-out infinite}
.hero[data-dnd=on] .hc.calm.show.c2{animation-delay:-2s}.hero[data-dnd=on] .hc.calm.show.c3{animation-delay:-4s}.hero[data-dnd=on] .hc.calm.show.c4{animation-delay:-5.5s}
.hero[data-dnd=on] .hc.noisy{opacity:0;transform:scale(.6) translate(var(--fx,0),var(--fy,0));transition:opacity .5s,transform .7s cubic-bezier(.6,0,.4,1)}
@keyframes fl{0%,100%{translate:0 0}50%{translate:3px -12px}}
.hc .eqb{display:flex;align-items:flex-end;gap:2px;height:16px;margin-left:4px}
.hc .eqb i{width:3px;border-radius:2px;background:#ffc266;animation:eqb 1s ease-in-out infinite}
.hc .eqb i:nth-child(1){height:40%}.hc .eqb i:nth-child(2){height:90%;animation-delay:-.3s}.hc .eqb i:nth-child(3){height:60%;animation-delay:-.6s}.hc .eqb i:nth-child(4){height:80%;animation-delay:-.15s}
@keyframes eqb{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}

/* ================= talk to the orb ================= */
.orbsec{position:relative;overflow:hidden}
.orb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"copy stage" "ctrl stage";grid-template-rows:auto 1fr;column-gap:56px;align-items:center}
.orb-copy{grid-area:copy;align-self:end}
.orb-ctrl{grid-area:ctrl;align-self:start}
.orb-stage{grid-area:stage}
.orb-stage{position:relative;aspect-ratio:1;max-width:560px;width:100%;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 45%,#16246a 0%,#0a1236 55%,#050916 100%);box-shadow:0 0 0 1px rgba(110,150,255,.16),0 40px 120px -40px rgba(40,90,255,.6),inset 0 0 80px rgba(40,90,255,.2)}
.orb-stage .rings{position:absolute;inset:0;pointer-events:none}
.orb-stage .rings span{position:absolute;inset:27%;border-radius:50%;border:1.5px solid rgba(110,170,255,.55);opacity:0}
.orb-stage.speaking .rings span{animation:ripple 1.6s ease-out infinite;border-color:rgba(190,120,255,.6)}
.orb-stage.speaking .rings span:nth-child(2){animation-delay:.53s}.orb-stage.speaking .rings span:nth-child(3){animation-delay:1.06s}
.orb-stage .halo{position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(120,160,255,.12)}
.orb-stage .halo.h2{inset:17%;border-color:rgba(120,160,255,.08)}
.orb-btn{position:relative;z-index:2;border-radius:50%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.orb-btn:active{transform:scale(.96)}
.orb-btn .a-orbw{--o:min(260px,46vw)}
.orb-btn:focus-visible{outline-offset:10px;border-radius:50%}
.orb-hint{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13.5px;font-weight:600;color:#dfe6ff;padding:8px 14px;border-radius:999px;background:rgba(20,32,80,.7);border:1px solid rgba(110,150,255,.3);transition:opacity .4s}
.orb-hint i{width:8px;height:8px;border-radius:50%;background:#2ee39b;box-shadow:0 0 10px #2ee39b}
.orb-stage.speaking .orb-hint i{background:#c08bff;box-shadow:0 0 10px #c08bff;animation:blink 1s infinite}
.orb-cap{min-height:124px;margin-top:30px;font-family:Sora,Inter,sans-serif;font-size:clamp(20px,2.1vw,27px);line-height:1.4;letter-spacing:-.02em;font-weight:500;color:var(--text)}
.orb-cap .ln{display:block;animation:apop .4s cubic-bezier(.2,.9,.25,1)}
.orb-cap .w{opacity:.2;transition:opacity .25s,color .25s}
.orb-cap .w.on{opacity:1}
.orb-cap.idle{color:var(--muted);font-size:17px;font-family:Inter,sans-serif;letter-spacing:0;font-weight:400}
.vpick{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.vpick .lbl{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-right:4px}

/* ================= a day with Alpha ================= */
.day{position:relative;--dt:var(--text);--dm:var(--text2)}
.day-skyw{position:absolute;inset:0;pointer-events:none;z-index:0}
.day-sky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.day-sky .sk{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.day[data-m="0"] .sk0,.day[data-m="1"] .sk1,.day[data-m="2"] .sk2,.day[data-m="3"] .sk3,.day[data-m="4"] .sk4,.day[data-m="5"] .sk5{opacity:1}
.sk0{background:radial-gradient(90% 70% at 10% 100%,rgba(246,160,25,.34),transparent 62%),radial-gradient(60% 50% at 90% 0%,rgba(255,120,110,.16),transparent 60%),#0a0c1e}
.sk1{background:radial-gradient(80% 60% at 85% 10%,rgba(31,207,134,.24),transparent 60%),radial-gradient(70% 60% at 10% 90%,rgba(45,125,255,.16),transparent 60%),#06121f}
.sk2{background:radial-gradient(90% 70% at 50% -10%,rgba(45,125,255,.38),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(34,200,246,.14),transparent 60%),#071131}
.sk3{background:radial-gradient(80% 70% at 80% 20%,rgba(123,92,255,.34),transparent 60%),radial-gradient(60% 50% at 10% 100%,rgba(246,160,25,.12),transparent 60%),#0c0b2b}
.sk4{background:radial-gradient(90% 70% at 20% 100%,rgba(214,80,170,.3),transparent 62%),radial-gradient(70% 60% at 90% 10%,rgba(123,92,255,.26),transparent 60%),#120a26}
.sk5{background:radial-gradient(50% 40% at 82% 14%,rgba(150,180,255,.14),transparent 60%),#03050e}
[data-theme=light] .sk0{background:radial-gradient(90% 70% at 10% 100%,rgba(255,170,90,.42),transparent 62%),radial-gradient(60% 50% at 90% 0%,rgba(255,140,130,.2),transparent 60%),#fff6ea}
[data-theme=light] .sk1{background:radial-gradient(80% 60% at 85% 10%,rgba(31,207,134,.24),transparent 60%),radial-gradient(70% 60% at 10% 90%,rgba(45,125,255,.12),transparent 60%),#effbf5}
[data-theme=light] .sk2{background:radial-gradient(90% 70% at 50% -10%,rgba(45,125,255,.26),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(34,200,246,.16),transparent 60%),#eef5ff}
[data-theme=light] .sk3{background:radial-gradient(80% 70% at 80% 20%,rgba(123,92,255,.24),transparent 60%),radial-gradient(60% 50% at 10% 100%,rgba(246,160,25,.12),transparent 60%),#f3efff}
[data-theme=light] .sk4{background:radial-gradient(90% 70% at 20% 100%,rgba(214,80,170,.24),transparent 62%),radial-gradient(70% 60% at 90% 10%,rgba(123,92,255,.2),transparent 60%),#fbedf5}
[data-theme=light] .sk5{background:radial-gradient(50% 40% at 82% 14%,rgba(150,180,255,.2),transparent 60%),#0a1026}
.day-sky .dstars{position:absolute;inset:0;opacity:0;transition:opacity 1.4s;background-image:radial-gradient(1.4px 1.4px at 14% 20%,#fff,transparent),radial-gradient(1.2px 1.2px at 30% 60%,#cfe0ff,transparent),radial-gradient(1px 1px at 46% 16%,#fff,transparent),radial-gradient(1.6px 1.6px at 66% 10%,#e6eeff,transparent),radial-gradient(1px 1px at 76% 34%,#fff,transparent),radial-gradient(1.3px 1.3px at 90% 64%,#dbe6ff,transparent),radial-gradient(1px 1px at 56% 84%,#fff,transparent),radial-gradient(1.2px 1.2px at 6% 80%,#cfe0ff,transparent)}
.day[data-m="5"] .dstars{opacity:1}
[data-theme=light] .day[data-m="5"]{--dt:#f3f6ff;--dm:#c7cfe6}
.day-in{position:relative;z-index:1}
.day-h{padding-top:clamp(80px,10vw,136px)}
.day-h .h2,.day-h p{color:var(--dt);transition:color .8s}
.day-h p{color:var(--dm)}
.day-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.day-step{min-height:82vh;display:flex;flex-direction:column;justify-content:center;max-width:470px;color:var(--dt);transition:color .8s,opacity .6s;opacity:.6}
[data-theme=light] .day-step{opacity:.72}
.day-step.on,[data-theme=light] .day-step.on{opacity:1}
.day-time{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dm);transition:color .8s}
.day-time i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff}
.day-time i .ic{width:15px;height:15px}
.day-step h3{margin-top:18px;font-family:Sora,Inter,sans-serif;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:600}
.day-step p{margin-top:16px;font-size:18px;line-height:1.6;color:var(--dm);transition:color .8s}
.day-stick{position:sticky;top:max(84px,calc(50vh - 330px));display:flex;flex-direction:column;align-items:center;gap:18px;padding-bottom:8vh}
.day .pf{--s:.7}
.day-clock{display:flex;align-items:center;gap:14px;color:var(--dt);transition:color .8s}
.day-clock b{font-family:Sora,Inter,sans-serif;font-size:22px;font-weight:600;letter-spacing:-.02em;min-width:110px;font-variant-numeric:tabular-nums}
.dial{position:relative;width:170px;height:6px;border-radius:3px;background:rgba(127,150,255,.18)}
.dial i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--dp,0) * 100%);border-radius:3px;background:linear-gradient(90deg,#f6a019,#1fcf86,#2d7dff,#7b5cff,#d650aa,#6b7cff);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.dial u{position:absolute;top:50%;left:calc(var(--dp,0) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(127,150,255,.35),0 0 14px rgba(255,255,255,.6);transition:left .6s cubic-bezier(.2,.7,.2,1)}
.day-tail{height:12vh}
.day .a-night{position:absolute;inset:0;z-index:50;pointer-events:none;background:rgba(3,5,18,.35);opacity:0;transition:opacity 1s}
.day[data-m="5"] .a-night{opacity:1}

/* ================= live call demo ================= */
#demo{padding:clamp(56px,6vw,80px) 0;overflow:hidden}
.dm{--sc:#a48bff;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head ph" "ctrl ph";grid-template-rows:auto 1fr;column-gap:64px;row-gap:26px;align-items:start}
.dm-head{grid-area:head}
.dm-head p{margin-top:16px;max-width:560px;color:var(--text2);font-size:17px}
.dm-ph{grid-area:ph;align-self:center;position:relative}
.dm-panel{grid-area:ctrl;display:flex;flex-direction:column;gap:22px}
.dm .pf{--s:.8}
.dm .a-ln{font-size:15px}
.dm .a-kv{font-size:14.5px;padding:10px 0}
.dm .a-shh{font-size:19px}
.dm .a-sbtn{font-size:15px;height:48px}
.dm .a-reply{font-size:14.5px}
/* the selected call tints the glow behind the phone */
.dm-glow{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sc) 34%,transparent),transparent 72%);pointer-events:none;transition:background .7s}
[data-theme=light] .dm-glow{background:radial-gradient(closest-side,color-mix(in srgb,var(--sc) 26%,transparent),transparent 72%)}
.dm.playing .dm-glow{animation:glowp 3.2s ease-in-out infinite}
@keyframes glowp{0%,100%{opacity:.75;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
.dm-lbl{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
/* call picker: a radio group of cards */
.dm-scen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dm-c{position:relative;display:flex;align-items:flex-start;gap:13px;text-align:left;padding:14px 14px 13px;border-radius:18px;background:var(--card);border:1.5px solid var(--line);transition:border-color .3s,background .35s,box-shadow .35s,transform .2s}
.dm-c:hover{border-color:color-mix(in srgb,var(--sc) 55%,transparent);transform:translateY(-1px)}
.dm-c:focus-visible{outline:2px solid var(--sc);outline-offset:3px;border-radius:18px}
.dm-c .a-tile{width:40px;height:40px;border-radius:12px;filter:saturate(.55) brightness(.9);opacity:.8;transition:filter .35s,opacity .35s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.dm-c .a-tile svg{width:19px;height:19px}
.dm-ct{flex:1;min-width:0}
.dm-ct b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.dm-ct>span{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.dm-ct small{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dm-ct em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:7px;background:rgba(127,150,255,.12);color:var(--text2);transition:background .3s,color .3s}
.dm-radio{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);color:transparent;transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.dm-radio svg{transform:scale(.4);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.dm-c.on{border-color:var(--sc);background:linear-gradient(140deg,color-mix(in srgb,var(--sc) 17%,var(--surface)) 0%,var(--surface) 75%);box-shadow:0 0 0 4px color-mix(in srgb,var(--sc) 13%,transparent),0 18px 40px -22px color-mix(in srgb,var(--sc) 85%,transparent)}
[data-theme=light] .dm-c.on{border-color:color-mix(in srgb,var(--sc) 80%,#000);background:linear-gradient(140deg,color-mix(in srgb,var(--sc) 13%,#fff) 0%,#fff 75%)}
.dm-c.on .a-tile{filter:none;opacity:1;transform:scale(1.06)}
.dm-c.on .dm-radio{background:var(--sc);border-color:var(--sc);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--sc) 65%,transparent)}
.dm-c.on .dm-radio svg{transform:none}
.dm-c.on em{background:color-mix(in srgb,var(--sc) 24%,transparent);color:var(--text)}
.dm-live{display:none;align-items:center;gap:2px;color:var(--sc)}
[data-theme=light] .dm-live{color:color-mix(in srgb,var(--sc) 70%,#000)}
.dm-live i{width:2.5px;height:11px;border-radius:2px;background:currentColor;animation:eqb .9s ease-in-out infinite}
.dm-live i:nth-child(2){animation-delay:-.3s}.dm-live i:nth-child(3){animation-delay:-.6s;margin-right:5px}
.dm.playing .dm-c.on .dm-live{display:inline-flex}
.dm.playing .dm-c.on .dm-cd{display:none}
/* voices */
.dm-voice{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vchip{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14px;transition:border-color .25s,box-shadow .25s}
.vchip:hover{border-color:var(--line2)}
.vchip .vav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#3d9bff,#1857e8)}
.vchip[data-gender=Female] .vav{background:linear-gradient(145deg,#b07bff,#6d3dff)}
.vchip .vav .ic{width:15px;height:15px}
.vchip b{font-weight:600}
.vchip span{color:var(--muted);font-size:13px}
.vchip.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 10px 24px -14px rgba(45,125,255,.9)}
/* player */
.dm-player{position:relative;display:flex;align-items:center;gap:16px;padding:12px 14px 12px 12px;border-radius:24px;background:var(--card);border:1px solid var(--line)}
.dplay{flex:none;display:inline-flex;align-items:center;gap:11px;height:54px;padding:0 22px 0 7px;border-radius:999px;color:#fff;font-weight:600;font-size:15px;background:linear-gradient(135deg,#3d8bff 0%,#5b5bff 50%,#8b3dff 100%);box-shadow:0 10px 28px -10px rgba(90,110,255,.85),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .2s,box-shadow .3s,background .3s}
.dplay:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(90,110,255,1),0 0 24px rgba(110,110,255,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.dplay:active{transform:scale(.97)}
.dplay.on{background:linear-gradient(135deg,#ff5d8f,#c03cff);box-shadow:0 10px 28px -10px rgba(230,80,200,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.dpi{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.dpi .ic{width:17px;height:17px;fill:currentColor;stroke:none}
.dpi .ic.st{fill:none;stroke:currentColor;stroke-width:2.4}
.dplay:not(.on) .dpi{animation:ppulse 2.4s ease-out infinite}
@keyframes ppulse{0%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 0 0 rgba(255,255,255,.5)}70%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 0 12px rgba(255,255,255,0)}}
.dpt{min-width:62px;text-align:left}
.dbar{flex:1;min-width:0;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.scrub{position:relative;flex:1;height:26px;cursor:pointer;touch-action:none}
.scrub .trk{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:rgba(127,150,255,.16)}
.scrub .marks i{position:absolute;top:0;bottom:0;border-radius:3px;opacity:.55}
.scrub .marks i.a{background:#9a7bff}.scrub .marks i.c{background:#3d8bff}
.scrub .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--neon)}
.scrub .thumb{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(45,125,255,.45),0 2px 6px rgba(0,0,0,.3)}
.scrub:focus-visible{outline:none}
.scrub:focus-visible .thumb{box-shadow:0 0 0 4px var(--brand),0 2px 6px rgba(0,0,0,.3)}
/* speed: chip + popover with a slider and quick picks */
.dspd{position:relative;flex:none}
.dspd-b{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line2);background:var(--surface2);font-size:13.5px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums;transition:border-color .25s,color .25s,background .25s,box-shadow .25s}
.dspd-b:hover,.dspd.open .dspd-b{border-color:var(--brand);color:var(--text)}
.dspd-b.mod{color:#fff;border-color:transparent;background:linear-gradient(135deg,#2d7dff,#7b5cff);box-shadow:0 6px 18px -8px rgba(90,110,255,.9)}
.dspd-p{position:absolute;right:-4px;bottom:calc(100% + 14px);z-index:30;width:316px;padding:16px 16px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--line2);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(110,140,255,.06);transform-origin:90% 100%;animation:popin .22s cubic-bezier(.2,.9,.25,1)}
[data-theme=light] .dspd-p{box-shadow:0 30px 60px -24px rgba(20,35,90,.35)}
.dspd-p::after{content:'';position:absolute;right:26px;bottom:-7px;width:12px;height:12px;background:var(--surface);border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}
@keyframes popin{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.dspd-h{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--muted)}
.dspd-h b{font-family:Sora,Inter,sans-serif;font-size:26px;font-weight:600;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dspd-r{position:relative;margin:12px 0 0;padding-bottom:20px}
.dspd-r input{--p:20%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.dspd-r input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#3b8cff 0,#9a5cff var(--p),rgba(127,150,255,.2) var(--p))}
.dspd-r input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(110,110,255,.45),0 2px 8px rgba(0,0,0,.35)}
.dspd-r input::-moz-range-track{height:6px;border-radius:3px;background:rgba(127,150,255,.2)}
.dspd-r input::-moz-range-progress{height:6px;border-radius:3px;background:linear-gradient(90deg,#3b8cff,#9a5cff)}
.dspd-r input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(110,110,255,.45),0 2px 8px rgba(0,0,0,.35)}
.dspd-r input:focus-visible{outline:none}
.dspd-r input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--brand),0 0 0 7px rgba(45,125,255,.3)}
.dspd-r input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--brand),0 0 0 7px rgba(45,125,255,.3)}
.dspd-tk{position:absolute;left:11px;right:11px;bottom:0;height:15px}
.dspd-tk span{position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.dspd-ps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:12px}
.dspd-ps button{height:34px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--text2);background:var(--surface2);border:1px solid var(--line);font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s,background .2s}
.dspd-ps button:hover{border-color:var(--line2);color:var(--text)}
.dspd-ps button.on{color:#fff;border-color:transparent;background:linear-gradient(180deg,#2860f0,#173fb0);box-shadow:0 4px 14px -4px rgba(40,96,240,.7)}
.dnote{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text2);padding:12px 14px;border-radius:14px;background:rgba(246,160,25,.12);border:1px solid rgba(246,160,25,.3)}
.dnote .ic{color:#f6a019}
/* the phone */
.dm .a-callscr{padding-bottom:30px}
.dm .a-clog{justify-content:flex-start;overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20px);mask-image:linear-gradient(180deg,transparent 0,#000 20px)}
.dm .a-clog::-webkit-scrollbar{display:none}
.dm .a-ln{animation:apop .35s ease both}
.dm .a-ln.talk{border-color:rgba(160,130,255,.45);box-shadow:0 0 16px rgba(123,92,255,.25)}
.dm .a-ln.c.talk{border-color:rgba(90,162,255,.45);box-shadow:0 0 16px rgba(45,125,255,.25)}
.dm-empty{margin:auto;text-align:center;color:#9fb3ea;font-size:13.5px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 20px}
.dm-empty .ic{width:28px;height:28px;color:#7fb4ff}
.dm.sc .a-cav::before{animation-duration:1s;border-color:rgba(90,162,255,.7)}
.dm .a-sheet{max-height:78%}
.dm-who{display:flex;align-items:center;gap:10px;margin-top:18px}
.dm-who .a-av{width:36px;height:36px;font-size:13px;position:relative}
.dm-who .a-av::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(90,162,255,.6);opacity:0}
.dm.sc .dm-who .a-av::before{animation:ripple 1.1s ease-out infinite}
.dm-who b{display:block;font-size:19px;font-weight:600}
.dm-who span span{display:block;font-size:12px;color:#9fb3ea;margin-top:2px}
.dm .a-cstat{margin-top:10px;transition:color .3s}
.a-cstat.end{color:#ff7884;font-weight:600}
.a-cstat.ok{color:#2ee39b;font-weight:600}
.dm.is-muted [data-stat]::after{content:' · Muted';color:#ff9aa4}
.dm .a-call-orb{--o:132px;transition:opacity .5s,filter .5s}
.dm.hung .a-call-orb{opacity:.35;filter:grayscale(.7)}
.dm .a-sbody{overflow-y:auto;scrollbar-width:none}
/* before the call: one big answer button */
.dm-ans{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding-bottom:6px}
.dm-answer{display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 28px 0 8px;border-radius:999px;font-size:16.5px;font-weight:600;color:#fff;background:linear-gradient(180deg,#2fe39d,#119c60);box-shadow:0 0 0 1px rgba(80,255,180,.3),0 14px 30px -10px rgba(31,207,134,.75),inset 0 1px 0 rgba(255,255,255,.35);animation:ansp 1.9s ease-out infinite;transition:transform .2s}
.dm-answer:hover{transform:translateY(-1px) scale(1.02)}
.dm-answer:active{transform:scale(.97)}
.dm-answer:focus-visible{outline:2px solid #b6ffdf;outline-offset:4px;border-radius:999px}
.dm-answer i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22)}
.dm-answer i svg{animation:wig 1.9s ease-in-out infinite}
@keyframes ansp{0%{box-shadow:0 0 0 0 rgba(31,207,134,.6),0 14px 30px -10px rgba(31,207,134,.75)}70%,100%{box-shadow:0 0 0 20px rgba(31,207,134,0),0 14px 30px -10px rgba(31,207,134,.75)}}
@keyframes wig{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(-14deg)}70%{transform:rotate(12deg)}78%{transform:rotate(-8deg)}86%{transform:rotate(5deg)}}
.dm-ans-h{font-size:12.5px;color:#9fb3ea}
/* during the call: working phone buttons */
.dm-ctrl{animation:apop .35s ease both}
.dm-ctrl .a-cbtn{cursor:pointer;transition:transform .15s}
.dm-ctrl .a-cbtn:active{transform:scale(.93)}
.dm-ctrl .a-cbtn i{transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.dm-ctrl .a-cbtn:hover i{background:rgba(255,255,255,.15)}
.dm-ctrl .a-cbtn.on i{background:#fff;color:#0b1430;border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.35)}
.dm-ctrl .a-cbtn.end i{background:linear-gradient(145deg,#ff5868,#cc2436)}
.dm-ctrl .a-cbtn.end:hover i{box-shadow:0 0 30px rgba(240,68,82,.8)}
.dm-ctrl .a-cbtn:focus-visible{outline:2px solid #7fb4ff;outline-offset:4px;border-radius:16px}
.dm-ctrl .a-cbtn span{font-size:12px}
/* keypad, takes the transcript's place while open */
.dm.kp .a-clog{display:none}
.dm-kp{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:14px 0 10px;animation:apop .3s ease both}
.dm-kpd{height:30px;font-size:25px;font-weight:500;letter-spacing:.14em;color:#fff;font-variant-numeric:tabular-nums}
.dm-kpg{display:grid;grid-template-columns:repeat(3,62px);gap:10px 22px}
.dm-key{width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);color:#fff;transition:background .15s}
.dm-key b{font-size:25px;font-weight:500;line-height:1}
.dm-key small{font-size:8.5px;font-weight:600;letter-spacing:.16em;color:#c2cae2;margin-top:3px;min-height:10px}
.dm-key:hover{background:rgba(255,255,255,.17)}
.dm-key:focus-visible{outline:2px solid #7fb4ff;outline-offset:2px;border-radius:50%}
.dm-key.hit{animation:khit .35s ease}
@keyframes khit{0%{background:rgba(255,255,255,.5)}100%{background:rgba(255,255,255,.1)}}
.dm-kph{font-size:13.5px;font-weight:600;color:#9fc0ff;padding:6px 12px;border-radius:10px}
.dm-kph:hover{color:#fff}

/* ================= features ================= */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fx{position:relative;overflow:hidden;padding:30px 30px 0;min-height:420px;display:flex;flex-direction:column;border-radius:28px;background:var(--card);border:1px solid var(--line);transition:border-color .4s,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.fx::before{content:'';position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,var(--kg),transparent);opacity:.55;transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.fx:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--k) 55%,transparent);box-shadow:0 30px 60px -34px var(--kg)}
.fx:hover::before{opacity:1;transform:scale(1.1)}
.fx-h{position:relative;display:flex;align-items:center;gap:16px}
.fxg{--g1:#4ff0b0;--g2:#0b9a5f;position:relative;flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;isolation:isolate;
  background:linear-gradient(150deg,var(--g1) 0%,var(--g2) 100%);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 16px -6px rgba(0,0,0,.25),0 12px 26px -10px color-mix(in srgb,var(--g2) 85%,transparent),0 0 0 6px color-mix(in srgb,var(--g1) 10%,transparent);
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .5s}
.fxg::before{content:'';position:absolute;inset:1px 1px 50% 1px;border-radius:17px 17px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0));z-index:-1}
.fxg::after{content:'';position:absolute;inset:-7px;border-radius:24px;border:1px solid color-mix(in srgb,var(--g1) 40%,transparent);opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s cubic-bezier(.3,1.4,.5,1)}
.fxg svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))}
.fxg-msg{--g1:#62b8ff;--g2:#1c4fe6}
.fxg-meet{--g1:#b89aff;--g2:#5b34e2}
.fxg-brief{--g1:#ffc861;--g2:#e5790b}
.fx:hover .fxg{transform:translateY(-2px) rotate(-6deg) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 16px -6px rgba(0,0,0,.25),0 18px 34px -10px color-mix(in srgb,var(--g2) 95%,transparent),0 0 0 8px color-mix(in srgb,var(--g1) 14%,transparent)}
.fx:hover .fxg::after{opacity:1;transform:none}
.fx-tt{min-width:0}
.fx-tt h3{font-size:20px;font-weight:600;font-family:Sora,Inter,sans-serif;letter-spacing:-.02em;line-height:1.2}
.fx-sub{display:block;font-size:13.5px;color:var(--kt);font-weight:600;margin-top:3px;line-height:1.3}
.fx>p{position:relative;margin-top:18px;color:var(--text2);max-width:440px}
.fx-ui{position:relative;margin-top:auto;padding:26px 0 30px;color:#f3f6ff}
.mini{display:flex;flex-direction:column;justify-content:flex-end;border-radius:22px;padding:14px;background:#070d24;border:1px solid rgba(110,140,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.fx[data-fx=call] .mini,.fx[data-fx=msg] .mini{min-height:328px}
.fx[data-fx=meet] .mini,.fx[data-fx=brief] .mini{min-height:268px}
.mini .a-row{margin-bottom:8px}
.mini .a-row:last-child{margin-bottom:0}
.js .fx .anim{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s cubic-bezier(.2,.9,.25,1)}
.js .fx.in .anim{opacity:1;transform:none}
.js .fx.in .anim:nth-child(2){transition-delay:.25s}.js .fx.in .anim:nth-child(3){transition-delay:.5s}.js .fx.in .anim:nth-child(4){transition-delay:.75s}
/* mini headers (chat, meeting) */
.mhead{display:flex;align-items:center;gap:11px;padding:0 2px 12px;margin-bottom:auto;border-bottom:1px solid rgba(110,140,255,.12)}
.mhead .a-av{width:34px;height:34px;font-size:13px}
.mh-t{flex:1;min-width:0}
.mh-t b{display:block;font-size:14.5px;font-weight:600}
.mh-t small{display:block;font-size:12px;color:#8e9abb;margin-top:1px}
.mh-i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;color:#9fc0ff;background:rgba(127,150,255,.12)}
/* make a call: rows play the real recordings */
.mcalls{gap:8px}
.mcalls .a-row{margin:0}
.mrow{position:relative;width:100%;text-align:left;cursor:pointer;transition:border-color .3s,box-shadow .35s,background .35s,transform .2s,opacity .6s}
.mrow:hover{border-color:color-mix(in srgb,var(--mc) 45%,transparent)}
.mrow:active{transform:scale(.985)}
.mrow:focus-visible{outline:2px solid #7fb4ff;outline-offset:2px;border-radius:16px}
.mrow .a-tile{position:relative}
.mrow .a-tile>svg{transition:opacity .25s,transform .25s}
.meq{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;opacity:0;transition:opacity .25s}
.meq i{width:3px;height:16px;border-radius:2px;background:#fff;transform-origin:50% 50%;animation:eqb .9s ease-in-out infinite;animation-play-state:paused}
.meq i:nth-child(2){animation-delay:-.3s}.meq i:nth-child(3){animation-delay:-.55s}.meq i:nth-child(4){animation-delay:-.15s}
.mrow .a-play{position:relative;width:34px;height:34px;transition:transform .2s,box-shadow .3s,background .3s}
.mrow:hover .a-play{transform:scale(1.08);box-shadow:0 0 20px rgba(45,125,255,.75)}
.mrow .a-play svg{display:block}
.mpa{display:none}
.mpi svg{margin-left:2px}
.mring{position:absolute;inset:-5px;width:44px;height:44px;transform:rotate(-90deg);pointer-events:none}
.mring circle{fill:none;stroke:var(--mc);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;opacity:0;transition:opacity .3s}
.mrow.on{border-color:color-mix(in srgb,var(--mc) 60%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--mc) 14%,#0f1834) 0%,#0b1229 100%);box-shadow:0 0 0 1px color-mix(in srgb,var(--mc) 25%,transparent),0 10px 30px -12px color-mix(in srgb,var(--mc) 55%,transparent)}
.mrow.on .a-tile>svg{opacity:0;transform:scale(.6)}
.mrow.on .meq{opacity:1}
.mrow.on .meq i{animation-play-state:running}
.mrow.on.paused .meq i{animation-play-state:paused}
.mrow.on .mring circle{opacity:1}
.mrow.on .a-play{background:#fff;color:#0b1430;box-shadow:0 0 18px color-mix(in srgb,var(--mc) 70%,transparent)}
.mrow.on:not(.paused) .mpi{display:none}
.mrow.on:not(.paused) .mpa{display:block}
.mcalls.busy .mrow:not(.on){opacity:.55}
.mnow{display:flex;align-items:flex-start;gap:11px;margin-top:4px;padding:11px 12px;min-height:66px;border-radius:15px;background:rgba(255,255,255,.03);border:1px dashed rgba(110,140,255,.24);transition:background .35s,border-color .35s}
.mnow-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;color:#9fc0ff;background:rgba(127,150,255,.14);transition:background .3s,color .3s}
.mnow-t{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:#c4cde6}
.mnow-t b{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8fb4ff;font-weight:700;margin-bottom:2px}
.mnow-t>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mnow-sp{flex:none;align-self:center;font-size:11px;font-weight:700;padding:3px 7px;border-radius:8px;color:#cfe0ff;background:rgba(127,150,255,.16);font-variant-numeric:tabular-nums}
.mnow.live{border-style:solid;border-color:rgba(110,150,255,.3);background:rgba(45,125,255,.08)}
.mnow.live .mnow-ic{color:#fff;background:linear-gradient(145deg,#3d9bff,#1857e8);animation:mpulse 1.6s ease-out infinite}
.mnow.live.a b{color:#c3b4ff}
.mnow.live.a .mnow-ic{background:linear-gradient(145deg,#9b7bff,#5b36e0)}
.mnow.done .mnow-ic{color:#fff;background:linear-gradient(145deg,#25d690,#0b8c5a)}
.mnow.done b{color:#2ee39b}
@keyframes mpulse{0%{box-shadow:0 0 0 0 rgba(90,150,255,.55)}100%{box-shadow:0 0 0 10px rgba(90,150,255,0)}}
.mchat{justify-content:flex-start}
.mthread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding-top:12px}
.mchat .a-b{font-size:14px;max-width:86%}
.mchat .a-typing{display:none}
.mhead+.mweek{margin-top:12px}
.mweek{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mweek span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(110,140,255,.12);font-size:12px;color:#aab3cd;transition:background .4s,border-color .4s,box-shadow .4s,color .4s}
.mweek b{font-size:18px;color:#f3f6ff;font-weight:600}
.mweek span.pick{background:linear-gradient(160deg,rgba(123,92,255,.45),rgba(70,40,190,.4));border-color:rgba(164,139,255,.7);box-shadow:0 0 20px rgba(123,92,255,.45);color:#e8e0ff}
.mslots{display:flex;gap:8px;margin-top:10px}
.mslots span{flex:1;text-align:center;padding:9px 0;border-radius:12px;font-size:13px;font-weight:500;background:rgba(255,255,255,.04);border:1px solid rgba(110,140,255,.12);color:#cfd6ea;transition:all .4s}
.mslots span.pick{background:linear-gradient(180deg,#2860f0,#173fb0);border-color:rgba(90,150,255,.6);color:#fff}
.mbooked{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;font-size:13.5px;background:rgba(31,207,134,.12);border:1px solid rgba(46,227,155,.35);color:#c6f7e2;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.mbooked.show{opacity:1;transform:none}
.mbooked .a-tile{width:28px;height:28px;border-radius:9px}
.mbrief .a-bplay{height:64px;justify-content:flex-start;padding:0 18px;gap:14px}
.mbrief .eqv{flex:1;display:flex;align-items:center;gap:3px;height:28px}
.mbrief .eqv i{flex:1;max-width:5px;border-radius:2px;background:linear-gradient(180deg,#6fdcff,#9a5cff);height:30%;animation:eqb 1.1s ease-in-out infinite}
.mbrief .eqv i:nth-child(3n){animation-delay:-.35s;height:70%}.mbrief .eqv i:nth-child(3n+1){animation-delay:-.7s;height:50%}.mbrief .eqv i:nth-child(4n){animation-delay:-.2s;height:90%}
.mbrief .a-prog{animation:bprog 8s linear infinite}
.mbrief .cap{margin-top:12px;font-size:14px;line-height:1.5;color:#d7def3;padding:0 4px}
.mbrief .cap b{color:#ffc266;font-weight:600}
.mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.mstats>span{display:flex;flex-direction:column;align-items:flex-start;padding:11px 12px 10px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid rgba(110,140,255,.12)}
.mstats .a-tile{width:28px;height:28px;border-radius:9px;margin-bottom:9px}
.mstats b{font-family:Sora,Inter,sans-serif;font-size:23px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.mstats small{font-size:11.5px;color:#aab3cd;margin-top:3px}
/* ask bar */
.ask{margin-top:18px;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:0;gap:28px;align-items:center;padding:28px 30px;border-radius:28px;background:var(--card);border:1px solid var(--line)}
.ask h3{font-family:Sora,Inter,sans-serif;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em;font-weight:600;max-width:300px;line-height:1.15}
.ask .a-askbar{min-width:0;margin:0;height:64px;border-radius:34px;padding:0 8px 0 22px;color:#f3f6ff}
.ask .a-ph{font-size:16px;color:#e6ebfa}
.ask .a-ph::after{content:'';display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:#7fd8ff;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ask .a-sendb{width:48px;height:48px}

/* ================= how it works ================= */
.steps3{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.steps3::before{content:'';position:absolute;left:8%;right:8%;top:39px;height:2px;background:linear-gradient(90deg,transparent,var(--line2) 10%,var(--line2) 90%,transparent)}
.steps3 .line{position:absolute;left:8%;right:8%;top:39px;height:2px;background:var(--neon);transform-origin:left;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .2s;box-shadow:0 0 12px rgba(90,140,255,.6)}
.steps3.in .line{transform:scaleX(1)}
.st3{position:relative;padding:0 6px}
.st3 .n{position:relative;z-index:1;width:78px;height:78px;border-radius:24px;display:grid;place-items:center;font-family:Sora,Inter,sans-serif;font-size:22px;font-weight:600;color:#fff;background:linear-gradient(145deg,#1c2b5e,#0c1433);border:1px solid rgba(120,160,255,.3);box-shadow:0 0 0 6px var(--bg),0 14px 30px -14px rgba(45,125,255,.8)}
.sec.alt .st3 .n{box-shadow:0 0 0 6px var(--bg2),0 14px 30px -14px rgba(45,125,255,.8)}
.st3 h3{margin-top:24px;font-size:21px;font-weight:600;letter-spacing:-.02em;font-family:Sora,Inter,sans-serif}
.st3 p{margin-top:10px;color:var(--text2)}
.st3 .when{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13px;font-weight:600;color:var(--brandt)}
.setmini{margin-top:18px;max-width:340px;color:#f3f6ff}
.setmini .a-group{padding:2px 14px}
.setmini .a-seg{margin:2px 0 12px}
.setmini .lab{font-size:12px;color:#8e9abb;margin:2px 0 6px}

/* ================= control ================= */
.ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ctl .ticks2{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.ticks2 li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text2);line-height:1.45}
.ticks2 .ic{width:18px;height:18px;margin-top:2px;color:var(--t-call)}
.ctl-ui{position:relative;max-width:430px;margin:0 auto;width:100%;color:#f3f6ff}
.ctl-ui .a-sheet{position:relative;transform:none;max-height:none;border-radius:26px;border:1px solid rgba(110,150,255,.25);box-shadow:var(--shadow)}
.ctl-ui .notif{position:relative;margin:0 18px -14px;z-index:2}
.ctl-ui .a-toast{position:relative;left:auto;right:auto;top:auto;transform:none;opacity:1}

/* ================= use cases ================= */
.uct-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin-bottom:26px;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.uct-tabs::-webkit-scrollbar{display:none}
.uct-tabs button{display:inline-flex;align-items:center;gap:8px;flex:none;height:44px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--text2);background:var(--card);border:1px solid var(--line);transition:all .25s}
.uct-tabs button:hover{border-color:var(--line2);color:var(--text)}
.uct-tabs button.on{color:#fff;border-color:transparent;background:linear-gradient(180deg,#2f74ff,#1a48c8);box-shadow:0 10px 24px -12px rgba(45,125,255,.9)}
.uct-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center;animation:apop .55s cubic-bezier(.2,.9,.25,1)}
.uct-p .h3{margin-bottom:14px}
.uct-p p{color:var(--text2);font-size:17px}
.ucui{max-width:420px;width:100%;margin:0 auto;color:#f3f6ff}
.ucui .a-toast{position:relative;left:auto;right:auto;top:auto;transform:none;opacity:1;margin-bottom:12px}
.ucui .a-sheet{position:relative;transform:none;max-height:none;border-radius:24px;border:1px solid rgba(110,150,255,.22)}

/* ================= pricing ================= */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.bill{display:flex;justify-content:center;margin-bottom:52px}
/* billing switch with a sliding thumb */
.seg.slide{position:relative;isolation:isolate}
.seg.slide::before{content:'';position:absolute;z-index:-1;top:4px;bottom:4px;left:0;width:var(--tw,0);transform:translateX(var(--tx,0));border-radius:10px;background:linear-gradient(180deg,#2860f0,#173fb0);box-shadow:0 4px 14px -4px rgba(40,96,240,.7);transition:transform .45s cubic-bezier(.3,1.25,.5,1),width .45s cubic-bezier(.3,1.25,.5,1);opacity:0}
.seg.slide.ready::before{opacity:1}
.seg.slide.ready button.on{background:none;box-shadow:none}
.seg.slide button.on{color:#fff}
.plans{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.13fr) minmax(0,1fr);gap:20px;align-items:stretch;isolation:isolate}
.plan{position:relative;display:flex;flex-direction:column;gap:22px;padding:30px 28px;border-radius:28px;background:var(--card);border:1px solid var(--line);transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.plan:hover{translate:0 -4px;border-color:var(--line2);box-shadow:0 30px 60px -40px rgba(60,90,220,.55)}
.ph{display:flex;align-items:center;gap:14px}
.ph .a-tile{width:42px;height:42px;border-radius:13px}
.plan h3{font-family:Sora,Inter,sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.plan .tg{margin-top:3px;color:var(--muted);font-size:14px;line-height:1.4}
.pr{position:relative;display:flex;align-items:flex-start;line-height:1}
.pr .cur{font-family:Sora,Inter,sans-serif;font-size:26px;font-weight:600;margin:5px 3px 0 0;color:var(--text2)}
.pnum{display:inline-flex;font-family:Sora,Inter,sans-serif;font-size:58px;font-weight:600;letter-spacing:-.045em;line-height:1;height:1em;font-variant-numeric:tabular-nums}
.od{display:block;height:1em;overflow:hidden}
.od>span{display:block;transform:translateY(calc(var(--d) * -1em));transition:transform .85s cubic-bezier(.2,.85,.2,1);transition-delay:calc(var(--i) * 80ms)}
.od i{display:block;height:1em;font-style:normal}
.pr small{align-self:flex-end;margin:0 0 5px 8px;color:var(--muted);font-size:15px}
.per{font-size:13px;color:var(--muted);margin-top:10px;min-height:20px}
.per .save{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;color:var(--t-call);background:color-mix(in srgb,var(--t-call) 14%,transparent)}
.py,[data-plans].yr .pm{display:none}
[data-plans].yr .py{display:inline;animation:apop .45s ease both}
.q{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q div{padding:12px 14px;border-radius:16px;background:var(--surface2);border:1px solid var(--line)}
.q b{display:block;font-family:Sora,Inter,sans-serif;font-size:22px;font-weight:600}
.q span{font-size:12.5px;color:var(--muted)}
.pf2{flex:1}
.plus{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.plan ul{display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text2);line-height:1.45}
.plan li .ic{width:18px;height:18px;margin-top:1px;color:var(--t-call)}
/* Pro: the plan most people pick. A midnight card in both themes, with a living aurora edge */
.plan.hot{--text:#f3f6ff;--text2:#cdd5ec;--muted:#9ba8cc;--line:rgba(130,160,255,.16);--line2:rgba(130,160,255,.3);--surface2:rgba(255,255,255,.055);--t-call:#2ee39b;color:var(--text);gap:24px;padding:46px 34px 34px;margin-block:-26px;border:0;
  background:radial-gradient(110% 50% at 50% 0%,rgba(84,112,255,.34) 0%,rgba(84,112,255,0) 62%),radial-gradient(70% 40% at 100% 100%,rgba(154,92,255,.16) 0%,transparent 70%),linear-gradient(180deg,#0f1a45 0%,#0a1232 55%,#070e28 100%);
  box-shadow:0 50px 100px -44px rgba(70,100,255,.95),0 0 60px -20px rgba(47,180,255,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.plan.hot::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:conic-gradient(from var(--ang),#2fd8ff,#3b8cff 22%,#9a5cff 46%,#d07bff 58%,#3b8cff 78%,#2fd8ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinb 8s linear infinite;pointer-events:none}
.plan.hot::after{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);pointer-events:none}
@keyframes spinb{to{--ang:360deg}}
.plan.hot:hover{translate:0 -6px;box-shadow:0 60px 110px -44px rgba(70,100,255,1),0 0 80px -20px rgba(47,180,255,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.plan.hot h3{font-size:28px}
.plan.hot .pnum{font-size:68px}
.plan.hot .od>span{background:linear-gradient(92deg,#8fe6ff 0%,#6aa8ff 40%,#b39bff 75%,#e19bff 100%);background-size:calc(var(--n,3) * 100%) 100%;background-position:calc(var(--i) / max(1, var(--n,3) - 1) * 100%) 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.plan.hot .cur{color:#8fe6ff}
.plan.hot .q div{background:rgba(255,255,255,.05);border-color:rgba(130,160,255,.18)}
.plan.hot li{color:#dfe5f7}
.plan.hot li .ic{width:20px;height:20px;margin-top:0;padding:4px;border-radius:50%;color:#fff;stroke-width:3;background:linear-gradient(135deg,#3b8cff,#9a5cff);box-shadow:0 0 12px rgba(110,110,255,.55)}
.plan.hot .btn.pri{position:relative;overflow:hidden;--h:58px;font-size:16.5px}
.plan.hot .btn.pri::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,62%{left:-40%}100%{left:130%}}
.plan .fl{position:absolute;top:-16px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 15px 0 12px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap;color:#fff;background:linear-gradient(90deg,#2d7dff,#8a4dff);box-shadow:0 0 0 5px var(--bg),0 10px 26px -6px rgba(110,90,255,.95)}
.plan .fl svg{filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
/* the stage: a soft beam from above and a pool of light under Pro */
.plans-beam{position:absolute;z-index:-1;left:0;right:0;margin:0 auto;top:-190px;width:min(760px,64%);height:calc(100% + 230px);pointer-events:none;background:conic-gradient(from 0deg at 50% 0%,transparent 0deg 152deg,rgba(90,130,255,.34) 170deg 190deg,transparent 208deg 360deg);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 52%,transparent 92%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 52%,transparent 92%)}
.plans-floor{position:absolute;z-index:-1;left:0;right:0;margin:0 auto;bottom:-70px;width:min(560px,46%);height:90px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(80,110,255,.55),transparent);filter:blur(18px)}
[data-theme=light] .plans-beam{background:conic-gradient(from 0deg at 50% 0%,transparent 0deg 152deg,rgba(60,110,255,.2) 170deg 190deg,transparent 208deg 360deg)}
[data-theme=light] .plans-floor{background:radial-gradient(closest-side,rgba(60,90,230,.35),transparent)}
[data-theme=light] .plan.hot{box-shadow:0 50px 100px -44px rgba(30,50,160,.75),0 0 60px -24px rgba(47,140,255,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.price-note{text-align:center;margin-top:52px;color:var(--muted);font-size:14.5px}
.portal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;margin-top:44px;padding:30px;border-radius:28px;background:var(--card);border:1px solid var(--line)}
.portal h3{font-family:Sora,Inter,sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em}
.portal p{margin-top:10px;color:var(--text2)}
.usage{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:20px;background:var(--surface2);border:1px solid var(--line)}
.usage .u{display:flex;justify-content:space-between;font-size:14px;color:var(--text2)}
.usage .u b{color:var(--text);font-variant-numeric:tabular-nums}
.usage .bar{height:8px;border-radius:4px;background:rgba(127,150,255,.16);overflow:hidden;margin-top:8px}
.usage .bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--neon);transition:width 1.6s cubic-bezier(.2,.7,.2,1) .3s}
.usage .bar.m i{background:linear-gradient(90deg,#1fcf86,#22c8f6)}
.portal.in .usage .bar i{width:var(--w)}
/* compare table */
.tbl{overflow-x:auto;border-radius:24px;border:1px solid var(--line);background:var(--card)}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp th,.cmp td{padding:15px 20px;text-align:center;border-bottom:1px solid var(--line);font-size:14.5px}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--text2)}
.cmp thead th{font-family:Sora,Inter,sans-serif;font-size:17px;font-weight:600;position:sticky;top:0;background:var(--surface)}
.cmp .us{background:rgba(45,125,255,.06)}
.cmp .y .ic{margin:0 auto;color:var(--t-call)}
.cmp .n{color:var(--muted)}
.cmp tr:last-child td{border-bottom:0}

/* ================= FAQ ================= */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:20px;background:var(--card);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--line2);box-shadow:0 20px 40px -30px rgba(45,125,255,.6)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:28px;height:28px;border-radius:50%;flex:none;border:1px solid var(--line2);transition:transform .35s,background .3s}
.faq summary .pm::before,.faq summary .pm::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;border-radius:1px;background:currentColor;transition:transform .35s}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm{transform:rotate(180deg);background:var(--brand);border-color:var(--brand);color:#fff}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq details p{padding:0 22px 22px;color:var(--text2);max-width:760px}
.faq details[open] p{animation:apop .4s ease}
.faq-cat{font-family:Sora,Inter,sans-serif;font-size:22px;font-weight:600;letter-spacing:-.02em;margin:40px 0 16px}
.faq-cat:first-child{margin-top:0}

/* ================= CTA band ================= */
.band{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center;padding:clamp(34px,5vw,60px);border-radius:36px;background:radial-gradient(70% 120% at 0% 50%,#16246a 0%,#0a1236 55%,#060b22 100%);border:1px solid rgba(110,150,255,.2);color:#f3f6ff;box-shadow:0 50px 100px -50px rgba(40,90,255,.6)}
.band::after{content:'';position:absolute;right:-10%;bottom:-60%;width:600px;height:600px;border-radius:50%;background:radial-gradient(closest-side,rgba(123,92,255,.3),transparent)}
.band .a-orbw{--o:170px}
.band h2{position:relative;font-size:clamp(30px,3.6vw,46px);color:#fff}
.band p{position:relative;margin-top:14px;color:#c7cfe6;font-size:17px;max-width:620px}
.band .row{position:relative;margin-top:28px}
.band .btn:not(.pri){color:#fff;border-color:rgba(150,180,255,.4);background:rgba(255,255,255,.06)}

/* philosophy */
.philo{text-align:center}
.philo h2{font-size:clamp(36px,5.2vw,72px)}
.philo p{max-width:640px;margin:22px auto 0;color:var(--text2);font-size:18px}

/* ================= inner pages ================= */
.phead{position:relative;overflow:hidden;padding:clamp(70px,9vw,120px) 0 clamp(50px,6vw,80px)}
.phead .hero-bg .hg1{right:-20%;top:-60%}
.phead .wrap{position:relative}
.phead h1{font-size:clamp(40px,5.4vw,72px);margin-top:18px;max-width:900px}
.phead h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.phead p{margin-top:20px;max-width:640px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fcard{position:relative;padding:26px;border-radius:24px;background:var(--card);border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.fcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--k,#2d7dff) 50%,transparent)}
.fcard .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--kt,var(--brandt));background:color-mix(in srgb,var(--k,#2d7dff) 16%,transparent);border:1px solid color-mix(in srgb,var(--k,#2d7dff) 30%,transparent)}
.fcard h3{margin-top:18px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.fcard p{margin-top:8px;color:var(--text2);font-size:15px}
a.fcard:hover h3{color:var(--brandt)}
.ghead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.trust{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.story{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:start}
.story .h3{margin-bottom:18px}
.story p+p{margin-top:16px}
.founder{padding:30px;border-radius:28px;background:var(--card);border:1px solid var(--line)}
.founder .fav{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;font-family:Sora,Inter,sans-serif;font-size:26px;font-weight:600;color:#fff;background:linear-gradient(145deg,#3d8bff,#6b3dff);box-shadow:0 14px 30px -12px rgba(90,110,255,.8)}
.founder .fph{display:block;width:96px;height:96px;padding:0;object-fit:cover;object-position:50% 30%;background:var(--surface2);border:2px solid rgba(255,255,255,.12)}
.founder b{display:block;margin-top:18px;font-size:19px}
.founder span{color:var(--muted);font-size:14px}
.founder p{margin-top:14px;color:var(--text2)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14.5px;color:var(--text2)}
.chips .ic{color:var(--t-call)}
.uclinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.uclinks a{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line);font-weight:500;transition:border-color .25s,transform .25s}
.uclinks a:hover{border-color:var(--line2);transform:translateY(-2px)}
.uclinks a span{flex:1}
.ucgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.legal{max-width:780px}
.legal h2{font-size:26px;margin:44px 0 14px;letter-spacing:-.02em}
.legal p,.legal li{color:var(--text2);font-size:16.5px;line-height:1.75}
.legal p+p{margin-top:14px}
.legal ul,.legal ol{margin:14px 0;padding-left:22px;list-style:disc}
.legal ol{list-style:decimal}
.legal li+li{margin-top:8px}
.legal a{color:var(--brandt);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--text);font-weight:600}
.legal h3{font-size:19px;margin:28px 0 8px;letter-spacing:-.01em}
.legal h2{scroll-margin-top:96px}
.legal table{width:100%;margin:20px 0;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15px}
.legal th,.legal td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:var(--text2)}
.legal th{background:var(--surface2);color:var(--text);font-weight:600}
.legal tr:last-child td{border-bottom:0}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;padding:2px 7px;border-radius:7px;background:var(--surface2);border:1px solid var(--line);color:var(--text)}
.post-wrap .post-rel,.post-wrap>p{max-width:980px}
.post-by{font-size:14px;color:var(--muted);margin-bottom:22px}
.post-toc{display:flex;flex-direction:column;gap:2px;margin:0 0 30px;padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.post-toc b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.legal .post-toc a{text-decoration:none;color:var(--text2);font-size:15px;padding:4px 0}
.legal .post-toc a:hover{color:var(--brandt)}
.post-rel{margin-top:56px}
.post-rel h2{font-size:24px;margin-bottom:16px}
.post-rel .posts{grid-template-columns:repeat(3,minmax(0,1fr))}
.post-rel .post-card{padding:22px}
.post-rel h3{font-size:17px;line-height:1.3}
@media (max-width:760px){.post-rel .posts{grid-template-columns:1fr}.legal table{display:block;overflow-x:auto}}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.post-card{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:26px;background:var(--card);border:1px solid var(--line);transition:transform .35s,border-color .35s}
.post-card:hover{transform:translateY(-3px);border-color:var(--line2)}
.post-card h2{font-size:24px;letter-spacing:-.02em;line-height:1.2}
.post-card p{color:var(--text2)}
.post-date{font-size:13px;color:var(--muted);font-weight:600}
.post-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--brandt);font-weight:600}

/* ================= get started form ================= */
.start{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding:56px 0 110px}
.start-h h1{font-size:clamp(34px,4vw,52px);margin-top:14px}
.start-h p{margin-top:14px;color:var(--text2);font-size:17px}
.stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:30px 0 18px}
.stp{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);transition:border-color .3s}
.stp .o{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13.5px;font-weight:700;background:var(--surface2);border:1px solid var(--line2);transition:all .3s}
.stp b{display:block;font-size:14px}
.stp span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp.on{border-color:var(--brand)}
.stp.on .o{background:linear-gradient(145deg,#3d8bff,#1d5cff);border-color:transparent;color:#fff;box-shadow:0 0 14px rgba(45,125,255,.6)}
.stp.done .o{background:linear-gradient(145deg,#25d690,#0b8c5a);border-color:transparent;color:#fff}
.form-card{padding:30px;border-radius:28px;background:var(--card);border:1px solid var(--line)}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.lbl{font-size:14px;font-weight:600;color:var(--text)}
.lbl em{font-style:normal;color:#ff7884}
.input,.select,.textarea{width:100%;min-height:50px;padding:12px 15px;border-radius:14px;background:var(--surface2);border:1px solid var(--line2);color:var(--text);font-size:15.5px;transition:border-color .2s,box-shadow .2s}
.textarea{min-height:96px;resize:vertical;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(45,125,255,.18)}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.85}
.select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e9abb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.help{font-size:12.5px;color:var(--muted)}
.radio-cards{display:flex;flex-direction:column;gap:10px}
.radio-cards.two{display:grid;grid-template-columns:1fr 1fr}
.rc{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;border:1px solid var(--line2);background:var(--surface2);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.rc input{margin-top:4px;accent-color:#2d7dff}
.rc b{display:block;font-size:15px}
.rc span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.rc.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.rc .grow{flex:1}
.num{font-variant-numeric:tabular-nums}
.chk-grid{display:grid;grid-template-columns:1fr;gap:8px}
.chk{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);font-size:14.5px;cursor:pointer}
.ck{width:18px;height:18px;accent-color:#2d7dff;flex:none}
.cons{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--text2);line-height:1.5}
.cons a{color:var(--brandt);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{margin-top:18px;padding:12px 14px;border-radius:14px;background:rgba(240,68,82,.12);border:1px solid rgba(240,68,82,.35);color:#ff8a95;font-size:14.5px}
[data-theme=light] .err{color:#b4202f}
.df{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.aside .card{padding:24px}
.aside .ah{font-family:Inter,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;line-height:1.4;margin-bottom:14px}
.aside p{font-size:14px;color:var(--text2);margin-top:8px}
.aside a{color:var(--brandt)}
.tl{display:flex;flex-direction:column}
.tl-i{position:relative;display:flex;gap:14px;padding-bottom:18px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:'';position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:var(--line2)}
.tl-i:last-child::before{display:none}
.tl-i .o{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--line2);background:var(--bg)}
.tl-i.now .o{border-color:var(--brand);box-shadow:0 0 0 4px rgba(45,125,255,.18)}
.tl-i.done .o{background:linear-gradient(145deg,#25d690,#0b8c5a);border-color:transparent;color:#fff}
.tl-i .o .ic{width:13px;height:13px}
.tl-i b{display:block;font-size:14.5px}
.tl-i span{display:block;font-size:13px;color:var(--muted)}
.thanks{max-width:620px;margin:0 auto;padding:90px 0 120px;text-align:center}
.thanks h1{font-size:clamp(34px,4.4vw,52px);margin-top:26px}
.thanks .tl{text-align:left;margin:36px auto 0;max-width:420px}
.big-ok{width:96px;height:96px;margin:0 auto;border-radius:30px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#25d690,#0b8c5a);box-shadow:0 0 0 10px rgba(31,207,134,.12),0 20px 50px -14px rgba(31,207,134,.7);animation:apop .6s cubic-bezier(.2,.9,.25,1)}
.big-ok .ic{width:44px;height:44px;stroke-width:2.6}

/* ================= responsive ================= */
@media (max-width:1180px){
  .nav-links a{padding:9px 10px;font-size:14px}
  .hero .pf{--s:.68}
  .hc{max-width:240px}
}
@media (max-width:1040px){
  .nav-links{display:none}
  .menu-b{display:grid}
  .nav-r{margin-left:auto}
  .hide-m{display:none!important}
  .hero{min-height:0;padding:30px 0 70px}
  .hero-in{grid-template-columns:1fr;gap:20px}
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero .lead{margin-inline:auto}
  .hero-cta,.ticks{justify-content:center}
  .hstage{min-height:600px}
  .hero-bg .alarm{left:calc(50% - 330px);top:auto;bottom:-80px;width:660px;height:660px}
  .hc.n5{left:-6%;top:42%}.hc.n6{right:-6%;top:56%}
  .orb-grid{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "ctrl";row-gap:30px;text-align:center}
  .orb-grid .vpick{justify-content:center}
  .orb-copy .lead{margin-inline:auto}
  .day-grid{grid-template-columns:minmax(0,1fr) auto;gap:28px}
  .day .pf{--s:.58}
  .dm{grid-template-columns:1fr;grid-template-areas:"head" "ph" "ctrl";row-gap:30px}
  .dm-ph{justify-self:center}
  .dm .pf{--s:.66}
  .dm-panel{width:100%;max-width:640px;justify-self:center}
  .bento{grid-template-columns:1fr}
  .ask{grid-template-columns:minmax(0,1fr);gap:16px}
  .steps3{grid-template-columns:1fr;gap:34px}
  .steps3::before,.steps3 .line{display:none}
  .ctl,.uct-p,.portal,.trust,.story{grid-template-columns:1fr;gap:32px}
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan.hot{margin-block:14px}
  .plans-beam,.plans-floor{display:none}
  .fgrid,.ucgrid,.uclinks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .start{grid-template-columns:1fr}
  .aside{position:static}
  .ft-top{grid-template-columns:1fr}
  .band{grid-template-columns:1fr;text-align:center;justify-items:center}
  .band p{margin-inline:auto}
  .band .row{justify-content:center}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .nav-in{height:62px}
  .lw b{font-size:17px}
  .lw span{font-size:6.8px;margin-top:5px}
  .lmark{width:32px;height:32px}
  .hero h1{font-size:clamp(40px,11vw,58px)}
  .hstage{min-height:0;padding:20px 0 10px;width:100%}
  .hero .pf{--s:.6}
  .hstage .ring3{width:380px;height:380px;margin:-190px 0 0 -190px}
  .hstage .ring3:nth-child(2){width:500px;height:500px;margin:-250px 0 0 -250px}
  .hc{max-width:184px;padding:8px 11px 8px 8px;font-size:11.5px;border-radius:14px;gap:8px;text-align:left}
  .hc.n3,.hc.c3,.hc.n5,.hc.n6{display:none}
  .hcount{height:28px;padding:0 10px 0 9px;font-size:11.5px;right:-8px;top:-10px;gap:4px}
  .hcount b{font-size:14px}
  .hero-bg .alarm{left:calc(50% - 260px);bottom:-20px;width:520px;height:520px}
  .hc small{font-size:11px}
  .hc .a-tile{width:30px;height:30px;border-radius:10px}
  .hc .a-tile svg{width:16px;height:16px}
  .hc.n1,.hc.c1{left:0;top:6%}.hc.n2,.hc.c2{right:0;top:30%}.hc.n3,.hc.c3{left:0;bottom:26%}.hc.n4,.hc.c4{right:0;bottom:6%}
  .silent{margin-inline:auto}
  .hero-copy{display:contents}
  .hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
  .hero-copy>.eyebrow{order:1}.hero-copy>h1{order:2}.hero-copy>.lead{order:3}.hero-copy>.hero-cta{order:4}.hstage{order:5;margin-top:26px}.hero-copy>.silent{order:6;margin-top:6px;position:relative;z-index:4}.hero-copy>[data-sw-live]{order:7}.hero-copy>div:has(>.ticks){order:8}
  .silent .hint{right:12px}
  .orb-stage{max-width:380px}
  .day-grid{display:flex;flex-direction:column;align-items:stretch}
  .day-stick{order:-1}
  .day-stick{top:62px;z-index:3;margin:0 -18px;padding:12px 18px 14px;flex-direction:row;justify-content:center;gap:16px;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line)}
  [data-theme=light] .day[data-m="5"] .day-stick{background:rgba(10,16,38,.6)}
  .day .pf{--s:.42}
  .day-clock{flex-direction:column;align-items:flex-start;gap:10px}
  .day-clock b{font-size:20px}
  .dial{width:110px}
  .day-step{min-height:62vh;max-width:none;padding-top:10px}
  .day-step p{font-size:16.5px}
  .day-tail{height:20vh}
  .dm .pf{--s:.6}
  .dm-scen{grid-template-columns:1fr}
  .dm-c{padding:12px 12px 11px}
  .dm-player{flex-wrap:wrap;gap:12px 10px;padding:12px}
  .dplay{flex:1}
  .dbar{order:3;flex-basis:100%;padding:0 4px}
  .dspd-p{width:min(316px,calc(100vw - 52px))}
  .dm-glow{width:420px;height:420px;margin:-210px 0 0 -210px}
  .fx{padding:24px 20px 0;min-height:0}
  .fx[data-fx] .mini{min-height:0}
  .fx[data-fx=msg] .mini{min-height:300px}
  .fx-h{gap:14px}
  .fxg{width:50px;height:50px;border-radius:16px}
  .fxg svg{width:26px;height:26px}
  .fx-tt h3{font-size:18.5px}
  .fx-ui .a-time2{display:none}
  .fx-ui .a-row{gap:10px;padding:10px}
  .mini{padding:10px;border-radius:18px}
  .mchat .a-b{font-size:13.5px}
  .fx-ui{padding:22px 0 22px}
  .ask{padding:22px 18px}
  .ask .a-ph{font-size:14px}
  .ctl .ticks2{grid-template-columns:1fr}
  .fgrid,.ucgrid,.uclinks,.posts{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr}
  .radio-cards.two{grid-template-columns:1fr}
  .stepper{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .stp{padding:10px;gap:8px}
  .stp span{display:none}
  .form-card{padding:20px 18px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:28px 18px}
  .plan{padding:26px 22px}
  .plan.hot{padding:40px 22px 26px}
  .pnum{font-size:50px}
  .plan.hot .pnum{font-size:58px}
  .cmp th,.cmp td{padding:12px 14px}
  .band .a-orbw{--o:130px}
}
@media (max-height:900px) and (min-width:1041px){
  .dm .pf{--s:.74}
}
@media (max-height:820px) and (min-width:1041px){
  .dm .pf{--s:.66}
}
@media (max-height:800px) and (min-width:1041px){
  #demo{padding:44px 0}
  .dm{row-gap:18px}
  .dm .h2{font-size:clamp(34px,3.4vw,46px)}
  .dm-head p{margin-top:12px;font-size:16px}
  .dm-panel{gap:16px}
  .dm-lbl{margin-bottom:9px}
  .dm-c{padding:11px 12px 10px}
  .dm-ct small{margin-top:6px}
  .dm-player{padding:10px 12px 10px 10px}
  .dplay{height:50px}
}
@media (max-height:760px) and (min-width:1041px){
  .hero .pf{--s:.62}
  .hstage{min-height:560px}
  .dm .pf{--s:.6}
  .day .pf{--s:.6}
}
@media (max-height:700px) and (max-width:760px){
  .day .pf{--s:.34}
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-r],.js [data-st]>*,.js .split .sw>span,.js .fx .anim{opacity:1!important;transform:none!important;filter:none!important}
  .a-scr [data-q]{opacity:1}
}
.solo-pf{--s:.7}
@media (max-width:760px){.solo-pf{--s:.56}}

/* ================= click ripple and card spotlight ================= */
.ripple{--rc:#5a8cff;position:fixed;z-index:9999;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;border:2px solid color-mix(in srgb,var(--rc) 85%,transparent);background:color-mix(in srgb,var(--rc) 18%,transparent);animation:clickrip .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes clickrip{to{transform:scale(7);opacity:0;border-width:.5px}}
.fx::after,.plan:not(.hot)::after,.dm-c::after,.post-card::after,.fcard::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--sc,var(--k,#5a8cff)) 14%,transparent),transparent 65%)}
.lit::after{opacity:1}
.post-card,.fcard{position:relative}
.fx>*,.dm-c>*,.post-card>*,.fcard>*{position:relative;z-index:1}