:root{--pop:#1d1d1f;--menu:#2c2c2f;--edge:rgba(255,255,255,.12);--t1:rgba(255,255,255,.94);--t2:rgba(255,255,255,.62);--t3:rgba(255,255,255,.55);--line:rgba(255,255,255,.1);--fill:rgba(255,255,255,.08);--fill2:rgba(255,255,255,.16);--acc:#8f9cf0;--acc-soft:rgba(143,156,240,.16);--on-acc:#15161f;--hl:#5563d8;--page:#0e0e10;--sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace}
html,body{margin:0;background:var(--page);color:var(--t1);font-family:var(--sys);-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h1,h2,h3,p,figure{margin:0}
a{color:var(--acc);text-decoration:none}
a:hover{color:#aab4ff}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:center}
button:disabled{cursor:default}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* app pieces */
.pop{position:relative;width:320px;height:440px;flex:none;box-sizing:border-box;border-radius:12px;background:var(--pop);border:1px solid var(--edge);box-shadow:0 26px 64px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column;font:12px/1.3 var(--sys);color:var(--t1);text-align:left}
.hr{height:1px;flex:none;background:var(--line)}
.bar{flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;box-sizing:border-box}
.grow{flex:1;min-width:0}
.col{display:flex;flex-direction:column;gap:2px;min-width:0}
.ttl{font-size:12.5px;font-weight:600;line-height:1.25}
.sub{font-size:11px;line-height:1.35;color:var(--t2);font-variant-numeric:tabular-nums}
.tiny{font-size:10.5px;line-height:1.3;color:var(--t3);font-variant-numeric:tabular-nums}
.accent{color:var(--acc)}
.ib{position:relative;width:24px;height:24px;flex:none;box-sizing:border-box;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t2)}
.ib.on{color:var(--acc)}
.play{width:28px;height:28px;flex:none;border-radius:50%;background:var(--acc);color:var(--on-acc);display:flex;align-items:center;justify-content:center}
.ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ic.fat{stroke-width:2.2}
.ic.sm{width:11px;height:11px}
.ic.fill{fill:currentColor}
.gl{flex:none;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--acc)}
.dot.live{animation:u-pulse 1.6s ease-in-out infinite}
@keyframes u-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dot.live{animation:none}}
.sld{flex:1;display:flex;align-items:center;gap:7px;min-width:0}
.trk{position:relative;flex:1;height:3px;margin:0 6px;border-radius:999px;background:var(--fill2)}
.fillb{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--acc);transition:width .2s}
.thumb{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.45);transition:left .2s}
.z3{position:absolute;top:-9px;bottom:-9px;width:33.4%}
.lbl{font-size:10.5px;color:var(--t3);flex:none}
.tabs{display:flex;height:22px;padding:2px;box-sizing:border-box;border-radius:999px;background:var(--fill);gap:2px}
.tab{flex:1;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--t2)}
.tab.on{background:var(--menu);color:var(--t1);font-weight:500;box-shadow:0 1px 1px rgba(0,0,0,.3)}
.sw{position:relative;width:26px;height:15px;flex:none;border-radius:999px;background:var(--fill2)}
.sw.on{background:var(--acc)}
.knob{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:left .15s}
.knob.on{left:13px}
.board{position:relative;flex:1;min-height:0;overflow:hidden;padding:0 10px;box-sizing:border-box}
.fam{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t2);padding:12px 4px 6px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.tile{display:flex;flex-direction:column;align-items:center;gap:5px;height:70px;padding-top:4px;box-sizing:border-box;border-radius:8px}
.tile.hit:hover{background:var(--fill)}
.tile.off{opacity:.4}
.orb{position:relative;width:36px;height:36px;flex:none;box-sizing:border-box;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--t2)}
.orb.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.orb.sm{width:30px;height:30px}
.orb.xs{width:24px;height:24px}
.tn{font-size:10.5px;line-height:1.2;color:var(--t2);text-align:center}
.tn.on{color:var(--t1);font-weight:600}
.fade{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(rgba(29,29,31,0),var(--pop));pointer-events:none}
.list{position:relative;flex:1;min-height:0;overflow:hidden;padding:4px 6px;box-sizing:border-box;display:flex;flex-direction:column;gap:1px}
.li{flex:none;display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:7px;font-size:12.5px;text-align:left}
.li.hit:hover{background:var(--fill)}
.ck{width:16px;height:16px;flex:none;box-sizing:border-box;border-radius:4px;border:1px solid var(--fill2);display:flex;align-items:center;justify-content:center;color:transparent}
.ck.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.btn{height:26px;flex:none;padding:0 10px;box-sizing:border-box;border-radius:7px;background:var(--fill);display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--t1);white-space:nowrap}
.btn.acc{background:var(--acc);color:var(--on-acc)}
.btn.lg{height:30px;font-size:12.5px;border-radius:8px}
.prog{position:relative;height:3px;border-radius:999px;background:var(--fill);overflow:hidden}
.pfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--acc)}
.kv{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px}

/* page */
.page{min-height:100vh;color:var(--t1);font:16px/1.6 var(--sys);overflow-x:hidden}
.wrap{width:min(1120px,100% - 48px);margin:0 auto}
.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(rgba(14,14,16,.92),rgba(14,14,16,.7));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.navin{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font:600 15px/1 var(--sys);letter-spacing:-.01em;color:var(--t1)}
a.brand:hover{color:var(--t1)}
.navl{font-size:13.5px;color:var(--t2)}
.navgap{flex:1}
.cta{height:46px;padding:0 22px;box-sizing:border-box;border-radius:10px;background:var(--acc);color:var(--on-acc);display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sys);box-shadow:0 12px 26px rgba(143,156,240,.22);white-space:nowrap}
.cta:hover{color:var(--on-acc);background:#a3aef5}
.cta.sm{height:34px;padding:0 14px;font-size:13px;border-radius:8px;box-shadow:none}
.meta{font:500 12.5px/1.6 var(--mono);color:var(--t3)}
.over{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.lead{font-size:18px;line-height:1.6;color:var(--t2);max-width:52ch;text-wrap:pretty}
.p{font-size:16px;line-height:1.65;color:var(--t2);max-width:50ch;text-wrap:pretty}
.p b{color:var(--t1);font-weight:600}
.h1{font:600 clamp(40px,5.4vw,64px)/1.02 var(--sys);letter-spacing:-.035em;text-wrap:balance}
.h2{font:600 clamp(30px,3.6vw,44px)/1.08 var(--sys);letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
.h3{font:600 18px/1.3 var(--sys);letter-spacing:-.01em}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stackc{display:flex;flex-direction:column;gap:20px}
.sec{padding:clamp(72px,9vw,120px) 0;border-top:1px solid rgba(255,255,255,.06)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:center}
.split.flip .vis{order:-1}
.vis{position:relative;display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.shot{box-shadow:0 40px 100px rgba(0,0,0,.5)}
.popshot{display:block;width:320px;max-width:100%;height:auto;border-radius:12px;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.studioshot{display:block;width:100%;max-width:690px;height:auto;border-radius:12px;box-shadow:0 40px 100px rgba(0,0,0,.5)}

.hero{padding:clamp(48px,7vw,88px) 0 0;background:radial-gradient(700px 440px at 80% 10%,rgba(143,156,240,.13),rgba(143,156,240,0) 70%)}
.heroin{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:48px;align-items:start}
.herocopy{display:flex;flex-direction:column;gap:24px;padding-top:64px}
.desk{position:relative;height:600px;border-radius:14px 14px 0 0;overflow:hidden;background:linear-gradient(160deg,#2a2b3a,#141419 70%);border:1px solid rgba(255,255,255,.08);border-bottom:0}
.mbar{display:flex;align-items:center;justify-content:flex-end;gap:16px;height:26px;padding:0 14px;background:rgba(20,20,24,.72);font:500 12px/1 var(--sys);color:var(--t1)}
.mbi{display:flex;align-items:center;justify-content:center;width:24px;height:20px;border-radius:5px;background:rgba(255,255,255,.18);color:#fff}
.popwrap{position:absolute;right:28px;top:36px;width:384px;height:528px}
.popwrap .pop{transform:scale(1.2);transform-origin:top left}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.step{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:12px;background:rgba(30,30,34,.85);border:1px solid rgba(255,255,255,.08)}
.snum{font:600 11px/1 var(--mono);color:var(--acc);letter-spacing:.1em}
.sdemo{height:86px;display:flex;align-items:center;border-radius:10px;background:var(--pop);border:1px solid var(--edge);padding:0 14px;box-sizing:border-box}
.sdemo .tile{height:auto;width:62px;padding:0}

.fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px}
.famc{padding:8px 10px 14px;border-radius:12px;background:var(--pop);border:1px solid var(--edge)}
.famc .grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
.dimnote{margin-top:14px;font-size:13px;color:var(--t3)}

.feel{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;box-sizing:border-box;border-radius:12px;background:var(--pop);border:1px solid var(--edge)}
.feel .trk{margin:6px 0;flex:none}
.ends{display:flex;justify-content:space-between;font-size:12px;color:var(--t3)}
.lights{display:flex;gap:6px;flex:none}
.light{width:11px;height:11px;border-radius:50%;background:var(--fill2)}
.light.x{background:#ff5f57}
.mcard{padding:10px;border-radius:8px;background:var(--fill);display:flex;flex-direction:column;gap:3px}
.mmake{padding:9px 10px;border-radius:8px;border:1px dashed var(--acc);display:flex;flex-direction:column;gap:3px}

.radio{width:320px;max-width:100%;box-sizing:border-box;border-radius:12px;background:var(--pop);border:1px solid var(--edge);overflow:hidden}
.radio .list{padding:6px}
.lib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin-top:8px}
.libi{display:flex;flex-direction:column;gap:6px}
.tag3{font:600 11px/1 var(--mono);color:var(--acc);letter-spacing:.08em}
.libt{font:600 15.5px/1.35 var(--sys)}
.libd{font:14.5px/1.55 var(--sys);color:var(--t2);text-wrap:pretty}

.priv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid rgba(255,255,255,.1)}
.privc{display:flex;flex-direction:column;gap:8px;padding:24px 28px 0 0}

.agent{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.setcard{border-radius:12px;background:var(--pop);border:1px solid var(--edge);padding:6px 16px}
.srow{display:flex;align-items:center;gap:12px;min-height:52px;font-size:13px}
.ask{align-self:flex-end;max-width:300px;padding:12px 14px;border-radius:14px 14px 4px 14px;background:var(--hl);color:#fff;font-size:14px;line-height:1.45}
.reply{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--pop);border:1px solid var(--edge)}
.apps{display:flex;gap:8px;flex-wrap:wrap}
.pill{height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;font-size:13px;color:var(--t1)}

.dl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:clamp(72px,9vw,120px) 0;border-top:1px solid rgba(255,255,255,.06);background:radial-gradient(600px 300px at 50% 100%,rgba(143,156,240,.12),rgba(143,156,240,0) 70%)}
.reqnote{max-width:52ch;font:14px/1.55 var(--sys);color:var(--t2);text-wrap:pretty}
.brew{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;max-width:100%;font:14px/1.6 var(--sys);color:var(--t2)}
.brew code{min-width:0;overflow-wrap:anywhere;font:12px/1.6 var(--mono);color:var(--t1)}
.foot{border-top:1px solid rgba(255,255,255,.06);padding:28px 0 40px}
.footin{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;font-size:13px;color:var(--t3)}

@media (max-width:980px){
  .heroin{grid-template-columns:minmax(0,1fr)}
  .herocopy{padding-top:0}
  .desk{max-width:520px;width:100%;justify-self:center}
}
@media (max-width:760px){
  .navl{display:none}
  .split{grid-template-columns:minmax(0,1fr)}
  .split.flip .vis{order:0}
  .steps,.fams,.priv,.lib{grid-template-columns:minmax(0,1fr)}
  .fams{margin-top:48px}
  .desk{height:auto;padding-bottom:20px;border-radius:14px}
  .popwrap{position:relative;right:auto;top:auto;width:320px;height:440px;margin:14px auto 0}
  .popwrap .pop{transform:none}
  .privc{padding-right:0}
}