/* Scene stage: 1080x1920 (shorts) or 1920x1080 (long form). All sizes are in stage pixels. */
.stage{
  --bg:#F1F1EF;--ink:#111113;--mute:#A6A6A1;--soft:#E7E7E3;--line:#DADAD5;--card:#FFFFFF;
  --ok:#12A67A;--bad:#E5484D;--warn:#E8950C;
  --sh:0 50px 90px -30px rgba(17,17,19,.34),0 16px 30px -12px rgba(17,17,19,.16);
  --sh2:0 24px 44px -18px rgba(17,17,19,.30),0 6px 14px -6px rgba(17,17,19,.12);
  position:relative;width:1080px;height:1920px;background:var(--bg);overflow:hidden;
  font-family:'Inter Tight','Inter',system-ui,sans-serif;color:var(--ink);transform-origin:0 0;
  -webkit-font-smoothing:antialiased;
}
.stage.land{width:1920px;height:1080px}
.stage.dk{--bg:#0E0F12;--ink:#F4F4F2;--mute:#5E5F66;--soft:#1C1D22;--line:#2A2B31;--card:#17181C}
.stage .dots{position:absolute;inset:0;background-image:radial-gradient(var(--line) 2.4px,transparent 3px);background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 80%);opacity:.9}
.stage .wm{position:absolute;left:0;right:0;bottom:86px;text-align:center;font:600 34px/1 'Inter Tight',sans-serif;color:var(--mute);opacity:.55;letter-spacing:.01em;z-index:40}
.stage.land .wm{bottom:44px;font-size:28px}
.stage .ct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:54px;padding:200px 70px 220px;z-index:10}
.stage.land .ct{padding:90px 130px 120px;gap:48px}
.stage.land .ct.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:center;justify-items:center}
.stage .col{display:flex;flex-direction:column;align-items:center;gap:48px;width:100%}
.stage .ov{position:absolute;inset:0;z-index:20;pointer-events:none}
.stage .abs{position:absolute;transform:translate(-50%,-50%)}
.stage .deco{position:absolute;inset:0;z-index:5;pointer-events:none}

/* ---------- Kinetic text ---------- */
.tx{text-align:center;width:100%;max-width:980px}
.land .tx{max-width:860px}
.tx.l{text-align:left}.tx.r{text-align:right}
.ln{line-height:1.1;letter-spacing:-.02em;font-weight:500}
.ln+.ln{margin-top:.12em}
.s-xs{font-size:44px}.s-s{font-size:56px}.s-m{font-size:74px}.s-l{font-size:100px}.s-xl{font-size:140px;letter-spacing:-.035em}.s-xxl{font-size:200px;letter-spacing:-.045em;line-height:.98}
.land .s-m{font-size:66px}.land .s-l{font-size:88px}.land .s-xl{font-size:120px}.land .s-xxl{font-size:170px}
.w{display:inline-block;opacity:0;--c:var(--ink);animation:wIn .75s cubic-bezier(.2,.75,.2,1) var(--d,0s) forwards;white-space:pre}
@keyframes wIn{0%{opacity:0;filter:blur(12px);transform:translateY(26px);color:var(--mute)}45%{opacity:1;filter:blur(0);transform:none;color:var(--mute)}100%{opacity:1;filter:none;transform:none;color:var(--c)}}
.w.b{font-weight:800}.w.i{font-style:italic;font-weight:700}.w.mu{--c:var(--mute);font-weight:400}.w.ac{--c:var(--ac);font-weight:800}
.w.big{font-size:1.4em;font-weight:800;letter-spacing:-.04em}
.w.hl{--c:#fff;background:var(--ink);padding:.02em .22em .08em;border-radius:.12em;font-weight:800;margin:0 .05em}
.dk .w.hl{--c:#111113}
.w.hla{--c:#fff;background:var(--ac);padding:.02em .22em .08em;border-radius:.12em;font-weight:800;margin:0 .05em}
.w.ul{position:relative;font-weight:700}
.w.ul::after{content:'';position:absolute;left:0;right:0;bottom:-.02em;height:.1em;border-radius:.05em;background:var(--ac);transform:scaleX(0);transform-origin:0 50%;animation:grow .5s cubic-bezier(.2,.75,.2,1) calc(var(--d,0s) + .45s) forwards}
.w.st{position:relative;--c:var(--mute)}
.w.st::after{content:'';position:absolute;left:-.05em;right:-.05em;top:52%;height:.09em;background:var(--bad);transform:scaleX(0);transform-origin:0 50%;animation:grow .4s ease-out calc(var(--d,0s) + .5s) forwards}
@keyframes grow{to{transform:scaleX(1)}}

/* ---------- Entrances ---------- */
.v{opacity:0;animation-duration:.9s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:forwards;max-width:100%}
.an-rise{animation-name:aRise}.an-pop{animation-name:aPop}.an-drop{animation-name:aDrop}.an-left{animation-name:aLeft}.an-right{animation-name:aRight}.an-flip{animation-name:aFlip}.an-fade{animation-name:aFade}.an-zoom{animation-name:aZoom}
@keyframes aRise{0%{opacity:0;transform:translateY(140px);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
@keyframes aPop{0%{opacity:0;transform:scale(.6);filter:blur(8px)}60%{opacity:1;transform:scale(1.04);filter:none}100%{opacity:1;transform:none}}
@keyframes aDrop{0%{opacity:0;transform:translateY(-160px) rotate(-6deg)}70%{opacity:1;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes aLeft{0%{opacity:0;transform:translateX(-260px);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes aRight{0%{opacity:0;transform:translateX(260px);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes aFlip{0%{opacity:0;transform:perspective(1600px) rotateX(55deg) translateY(120px)}100%{opacity:1;transform:none}}
@keyframes aFade{0%{opacity:0}100%{opacity:1}}
@keyframes aZoom{0%{opacity:0;transform:scale(1.6);filter:blur(16px)}100%{opacity:1;transform:none;filter:none}}
.fl{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.tl{transform-style:preserve-3d}
.it{opacity:0;animation:aItem .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes aItem{0%{opacity:0;transform:translateY(30px);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
.itx{opacity:0;animation:aItemX .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes aItemX{0%{opacity:0;transform:translateX(-40px)}100%{opacity:1;transform:none}}
.ipop{opacity:0;animation:aPop .6s cubic-bezier(.2,.8,.2,1) forwards}
.ifade{opacity:0;animation:aFade .5s ease forwards}
.static *,.static *::before,.static *::after{animation-delay:-60s!important}
.stage.out .ct,.stage.out .ov{transition:filter .45s,opacity .45s;filter:blur(18px);opacity:0}

/* ---------- Frames ---------- */
.fr-card{background:var(--card);border-radius:30px;box-shadow:var(--sh);overflow:hidden;width:100%;color:#111113}
.fr-card.dark,.fr-br.dark{background:#141519;color:#ECECEA}
.fr-br{background:#fff;border-radius:26px;box-shadow:var(--sh);overflow:hidden;width:100%;color:#111113}
.br-bar{display:flex;align-items:center;gap:12px;padding:20px 26px;border-bottom:2px solid #EEEEEA;background:#FAFAF8}
.dark .br-bar{background:#1B1C21;border-color:#26272D}
.br-bar>i{width:18px;height:18px;border-radius:50%;background:#DADAD5;display:block}
.br-url{margin-left:18px;flex:1;display:flex;align-items:center;gap:10px;background:#EFEFEB;border-radius:12px;padding:10px 18px;font-size:22px;color:#6B6B66}
.dark .br-url{background:#24252B;color:#8A8B92}
.br-url svg{width:20px;height:20px}
.fr-ph{width:100%;background:#111113;border-radius:78px;padding:18px;box-shadow:var(--sh);position:relative}
.ph-isl{position:absolute;top:36px;left:50%;width:130px;height:38px;margin-left:-65px;background:#111113;border-radius:20px;z-index:2}
.ph-scr{background:#F7F7F5;border-radius:62px;overflow:hidden;min-height:820px;padding-top:80px;color:#111113}
.fr-app{width:100%}

/* ---------- Shared UI atoms ---------- */
.ui{padding:40px;font-size:28px;line-height:1.3}
.ui svg{width:1em;height:1em;stroke-width:2.2}
.row{display:flex;align-items:center;gap:18px}
.sp{flex:1}
.mut{color:#8B8B86}.dark .mut{color:#80818A}
.h{font-weight:750;letter-spacing:-.02em}
.sk{height:16px;border-radius:8px;background:#ECECE8;display:block}
.dark .sk{background:#26272D}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;font-size:21px;font-weight:650;background:#EFEFEB;color:#3A3A37;white-space:nowrap}
.tag.ok{background:#DDF3EA;color:#0B7A58}.tag.bad{background:#FBE3E4;color:#B4262B}.tag.warn{background:#FCEFD6;color:#9A6206}.tag.ac{background:var(--ac);color:#fff}
.dark .tag{background:#26272D;color:#C9C9CF}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#111113;color:#fff;border-radius:16px;padding:22px 30px;font-weight:700;font-size:28px}
.btn.ac{background:var(--ac)}
.dark .btn{background:#F4F4F2;color:#111113}
.av{width:58px;height:58px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:750;font-size:22px;flex:none}
.sq{width:64px;height:64px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none}
.sq svg{width:34px;height:34px}
.chk{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--ac);color:#fff;flex:none}
.chk svg{width:26px;height:26px;stroke-width:3}
.caret{display:inline-block;width:3px;height:1em;background:currentColor;vertical-align:-.12em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* pricing */
.pricing .pr-price{font-size:104px;font-weight:800;letter-spacing:-.05em;line-height:1;margin:18px 0 6px}
.pricing .pr-price small{font-size:30px;font-weight:500;color:#8B8B86;letter-spacing:0;margin-left:8px}
.pricing ul{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.pricing li{display:flex;gap:16px;align-items:center}
.pricing li svg{color:var(--ac);width:30px;height:30px;stroke-width:3}
.pricing .btn{width:100%;margin-top:28px}
/* dashboard */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0}
.kpi{background:#F6F6F3;border-radius:20px;padding:22px}
.dark .kpi{background:#1D1E23}
.kpi .kv{font-size:46px;font-weight:800;letter-spacing:-.03em;margin:6px 0}
.kpi .kl{font-size:21px;color:#8B8B86}
.up{color:#0B8A63;font-weight:700;font-size:21px}.dn{color:#C62F35;font-weight:700;font-size:21px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .ln-path{fill:none;stroke:var(--ac);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.8s cubic-bezier(.4,.1,.2,1) forwards}
.chart .area{fill:var(--ac);opacity:0;animation:aFade .8s ease forwards}
.chart .gl{stroke:#EDEDEA;stroke-width:2}.dark .chart .gl{stroke:#24252B}
.chart .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);animation:barUp .9s cubic-bezier(.2,.8,.2,1) forwards;fill:var(--ac)}
.chart .bar.mu{fill:#D9D9D4}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes barUp{to{transform:scaleY(1)}}
.dotend{fill:var(--ac);opacity:0;animation:aPop .5s forwards}
/* kanban */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.kb-col{background:#F4F4F1;border-radius:20px;padding:18px;min-height:420px}
.kb-col h5{margin:0 0 14px;font-size:22px;font-weight:700;color:#6B6B66;display:flex;justify-content:space-between}
.kb-card{background:#fff;border-radius:14px;padding:16px;margin-bottom:14px;font-size:21px;font-weight:600;box-shadow:0 2px 0 #E6E6E2}
.kb-card .sk{margin-top:10px;width:70%;height:10px}
.kb-card .bar-c{height:8px;width:48px;border-radius:4px;margin-bottom:10px}
.kb-move{position:absolute;z-index:3;animation:kbMove 1.4s cubic-bezier(.6,0,.2,1) forwards;box-shadow:var(--sh2)}
@keyframes kbMove{0%{transform:none}20%{transform:rotate(-4deg) scale(1.05)}80%{transform:translateX(var(--dx)) rotate(3deg) scale(1.05)}100%{transform:translateX(var(--dx))}}
/* chat */
.chat{display:flex;flex-direction:column;gap:20px}
.msg{max-width:78%;padding:20px 26px;border-radius:26px;font-size:27px;line-height:1.35}
.msg.u{align-self:flex-end;background:#111113;color:#fff;border-bottom-right-radius:8px}
.msg.a{align-self:flex-start;background:#F1F1EE;border-bottom-left-radius:8px}
.dark .msg.a{background:#23242A}.dark .msg.u{background:var(--ac)}
.msg.a .who{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--ac);margin-bottom:6px}
.typing{display:inline-flex;gap:8px;padding:22px 26px;background:#F1F1EE;border-radius:26px;align-self:flex-start}
.typing i{width:12px;height:12px;border-radius:50%;background:#A6A6A1;animation:bob 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-8px)}}
/* list rows */
.rows{display:flex;flex-direction:column}
.rw{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:2px solid #F0F0EC}
.dark .rw{border-color:#222329}
.rw:last-child{border-bottom:0}
.rw .t1{font-weight:700}.rw .t2{font-size:22px;color:#8B8B86;margin-top:2px}
.rw.sel{background:#F4F6FF;margin:0 -40px;padding:20px 40px;box-shadow:inset 6px 0 0 var(--ac)}
/* table */
.tbl{width:100%;border-collapse:collapse;font-size:24px}
.tbl th{text-align:left;font-weight:600;color:#8B8B86;font-size:20px;text-transform:uppercase;letter-spacing:.06em;padding:0 0 16px}
.tbl td{padding:18px 0;border-top:2px solid #F0F0EC;font-weight:600}
.dark .tbl td{border-color:#222329}
/* terminal / code */
.term{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:25px;line-height:1.6;padding:34px 38px;min-height:300px}
.term .p{color:#7CE3B5}.term .o{color:#8E8F98}.term .k{color:#C9A7FF}.term .s{color:#FFC978}.term .c{color:#5E5F66}.term .ok{color:#7CE3B5}.term .n{color:#7FB2FF}
.term .tl2{white-space:pre-wrap}
/* prompt */
.prompt{border:3px solid #111113;border-radius:26px;padding:26px 28px;display:flex;gap:18px;align-items:flex-start;background:#fff}
.prompt .ptx{flex:1;font-size:30px;min-height:84px}
.prompt .send{width:62px;height:62px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.prompt .spk{color:var(--ac);margin-top:6px}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.res-grid>div{aspect-ratio:1;border-radius:18px}
/* flow */
.flow{display:flex;flex-direction:column;align-items:center;gap:0}
.flow.h{flex-direction:row}
.fnode{display:flex;align-items:center;gap:20px;background:#fff;border-radius:22px;padding:22px 30px;box-shadow:var(--sh2);font-weight:700;font-size:30px;min-width:430px;color:#111113}
.flow.h .fnode{flex-direction:column;min-width:0;padding:26px;font-size:24px;text-align:center}
.fnode small{display:block;font-size:21px;color:#8B8B86;font-weight:500}
.fcon{width:4px;height:70px;background:repeating-linear-gradient(#C8C8C2 0 10px,transparent 10px 20px);position:relative;opacity:0;animation:aFade .3s forwards}
.flow.h .fcon{height:4px;width:70px;background:repeating-linear-gradient(90deg,#C8C8C2 0 10px,transparent 10px 20px)}
.fcon::after{content:'';position:absolute;left:50%;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--ac);animation:fdot 1.2s linear infinite}
.flow.h .fcon::after{top:50%;left:0;margin:-8px 0 0 -8px;animation-name:fdoth}
@keyframes fdot{to{top:100%}}@keyframes fdoth{to{left:100%}}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:20px}
.cal .dh{font-size:18px;color:#8B8B86;text-align:center;font-weight:700}
.cal .dd{aspect-ratio:1;border-radius:14px;background:#F6F6F3;font-size:21px;font-weight:600;padding:8px 10px;position:relative}
.cal .dd.on{background:var(--ac);color:#fff}
.cal .ev{position:absolute;left:8px;right:8px;bottom:8px;height:10px;border-radius:5px}
/* form */
.fld{margin-bottom:22px}
.fld label{display:block;font-size:21px;font-weight:650;color:#6B6B66;margin-bottom:8px}
.fld .in{border:2px solid #E3E3DE;border-radius:16px;padding:18px 22px;font-size:28px;min-height:36px;background:#fff}
.fld .in.foc{border-color:var(--ac);box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 18%,transparent)}
/* progress */
.pbar{height:18px;border-radius:9px;background:#EDEDEA;overflow:hidden}
.dark .pbar{background:#26272D}
.pbar>i{display:block;height:100%;width:var(--p);background:var(--ac);border-radius:9px;transform-origin:0 50%;transform:scaleX(0);animation:grow 1.6s cubic-bezier(.4,.1,.2,1) forwards}
.pbar.bad>i{background:var(--bad)}
/* toggles */
.sw{width:88px;height:50px;border-radius:25px;background:#DADAD5;position:relative;flex:none;animation:swBg .3s forwards;animation-play-state:paused}
.sw::after{content:'';position:absolute;top:5px;left:5px;width:40px;height:40px;border-radius:50%;background:#fff;transition:none}
.sw.go{animation:swBg .35s ease forwards}
.sw.go::after{animation:swKnob .35s ease forwards;animation-delay:inherit}
@keyframes swBg{to{background:var(--ac)}}@keyframes swKnob{to{transform:translateX(38px)}}
/* notifications */
.toasts{display:flex;flex-direction:column;gap:18px;width:100%}
.toast{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.96);border-radius:28px;padding:22px 26px;box-shadow:var(--sh2);color:#111113;opacity:0;animation:aDrop .7s cubic-bezier(.2,.8,.2,1) forwards}
.toast .t1{font-weight:750;font-size:27px}.toast .t2{font-size:23px;color:#6B6B66}.toast time{font-size:20px;color:#A6A6A1;align-self:flex-start}
/* orbit */
.orbit{position:relative;width:760px;height:760px;margin:0 auto}
.orb-ring{position:absolute;inset:0;border:3px dashed var(--line);border-radius:50%;animation:spin 30s linear infinite}
.orb-ring.r2{inset:150px;animation-direction:reverse;animation-duration:22s}
.orb-c{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:52px;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.orb-c svg{width:100px;height:100px}
.orb-i{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:32px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh2)}
.orb-i svg{width:58px;height:58px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinr{to{transform:rotate(-360deg)}}
/* chips / pills */
.pill{display:inline-flex;align-items:center;gap:20px;background:#fff;border-radius:22px;padding:14px 34px 14px 14px;box-shadow:var(--sh2);font-weight:800;font-size:38px;letter-spacing:-.01em;text-transform:uppercase;color:#111113;white-space:nowrap}
.pill .sq{width:78px;height:78px;border-radius:18px}
.pill .sq svg{width:44px;height:44px}
.chips{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;background:#fff;box-shadow:var(--sh2);font-size:30px;font-weight:650;color:#111113}
.chip.on{background:var(--ac);color:#fff}
.chip svg{width:30px;height:30px}
/* icon list */
.ilist{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.ilist .li{display:flex;align-items:center;gap:26px;font-size:50px;font-weight:600;letter-spacing:-.02em}
.ilist .li svg{width:50px;height:50px;stroke-width:2.4;flex:none}
.ilist .li.mu{color:var(--mute)}
.ilist.sm .li{font-size:40px}.ilist.sm .li svg{width:40px;height:40px}
/* chain */
.chain{display:flex;align-items:flex-start;justify-content:center}
.ch-n{display:flex;flex-direction:column;align-items:center;gap:18px;font-size:30px;font-weight:600;width:170px}
.ch-c{width:120px;height:120px;border-radius:50%;background:#fff;box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;color:#111113}
.ch-c svg{width:56px;height:56px}
.ch-l{height:3px;width:120px;background:var(--ink);margin-top:58px;transform:scaleX(0);transform-origin:0 50%;animation:grow .5s ease forwards}
/* bubbles */
.bub{position:relative;background:#111113;color:#fff;font-weight:700;font-size:36px;padding:22px 34px;border-radius:30px;display:inline-block;max-width:760px;line-height:1.25}
.bub::after{content:'';position:absolute;bottom:-14px;left:44px;border:16px solid transparent;border-top-color:#111113;border-bottom:0}
.bub.r::after{left:auto;right:44px}
.bub.lt{background:#fff;color:#111113;box-shadow:var(--sh2)}.bub.lt::after{border-top-color:#fff}
.dk .bub{background:#F4F4F2;color:#111113}.dk .bub::after{border-top-color:#F4F4F2}
.bubs{display:flex;flex-direction:column;gap:40px;width:100%}
.bubs .it:nth-child(odd){align-self:flex-start}.bubs .it:nth-child(even){align-self:flex-end}
/* stat */
.stat{text-align:center}
.stat .sv{font-size:210px;font-weight:800;letter-spacing:-.06em;line-height:.95}
.stat .sl{font-size:46px;font-weight:500;color:var(--mute);margin-top:10px}
.stat.ac .sv{color:var(--ac)}
/* bars (horizontal) */
.hbars{display:flex;flex-direction:column;gap:30px;width:100%}
.hb .hl2{display:flex;justify-content:space-between;font-size:32px;font-weight:650;margin-bottom:12px}
.hb .tr{height:54px;border-radius:14px;background:var(--soft);overflow:hidden}
.hb .tr i{display:block;height:100%;width:var(--p);background:#C9C9C4;border-radius:14px;transform:scaleX(0);transform-origin:0 50%;animation:grow 1.2s cubic-bezier(.3,.1,.2,1) forwards}
.hb.win .tr i{background:var(--ac)}
/* ring */
.ring{position:relative;width:420px;height:420px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .bg{fill:none;stroke:var(--soft);stroke-width:34}
.ring .fg{fill:none;stroke:var(--ac);stroke-width:34;stroke-linecap:round;stroke-dasharray:1100;stroke-dashoffset:1100;animation:ringD 1.8s cubic-bezier(.4,.1,.2,1) forwards}
.ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rv{font-size:110px;font-weight:800;letter-spacing:-.05em}
.ring .rl{font-size:30px;color:var(--mute);font-weight:600}
/* logos / app grid */
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.lgrid .lg{width:150px;height:150px;border-radius:40px;background:#fff;box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center}
.lgrid .lg svg{width:70px;height:70px}
/* quote */
.quote .stars{display:flex;gap:8px;color:#F2A20C}.quote .stars svg{width:38px;height:38px;fill:#F2A20C;stroke:#F2A20C}
.quote p{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:24px 0 30px}
/* mascot */
.pip{display:flex;flex-direction:column;align-items:center;gap:22px}
.pip svg{display:block;filter:drop-shadow(0 30px 30px rgba(17,17,19,.22))}
.pip .pl{font-size:44px;font-weight:750;letter-spacing:-.02em}
.pip .ps{font-size:34px;color:var(--mute)}
.pipbob{animation:bob2 2.4s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:none}50%{transform:translateY(-14px) rotate(-3deg)}}
.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}
.cmp .cc{border-radius:28px;padding:34px;background:#fff;box-shadow:var(--sh2);color:#111113}
.cmp .cc.win{background:#111113;color:#fff}
.cmp h4{margin:0 0 22px;font-size:34px;letter-spacing:-.02em}
.cmp .ci{display:flex;gap:14px;align-items:center;font-size:27px;font-weight:600;padding:12px 0}
.cmp .ci svg{width:32px;height:32px;stroke-width:3;flex:none}
.cmp .cc .ci svg{color:var(--bad)}.cmp .cc.win .ci svg{color:#7CE3B5}
/* steps */
.steps{display:flex;flex-direction:column;gap:0;width:100%;max-width:820px}
.stp{display:flex;gap:30px;align-items:flex-start}
.stp .num{width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;flex:none;color:#111113}
.stp.on .num{background:var(--ac);color:#fff}
.stp .sb{padding-top:10px}.stp .st1{font-size:44px;font-weight:750;letter-spacing:-.02em}.stp .st2{font-size:30px;color:var(--mute);margin-top:4px}
.stp-l{width:4px;height:60px;background:var(--line);margin-left:46px;transform:scaleY(0);transform-origin:50% 0;animation:grow2 .4s forwards}
@keyframes grow2{to{transform:scaleY(1)}}
/* strike price */
.strike{display:flex;flex-direction:column;align-items:center;gap:10px}
.strike .old{font-size:120px;font-weight:700;color:var(--mute);position:relative;letter-spacing:-.04em}
.strike .old::after{content:'';position:absolute;left:-10px;right:-10px;top:52%;height:12px;border-radius:6px;background:var(--bad);transform:scaleX(0);transform-origin:0 50%;animation:grow .5s ease forwards;animation-delay:inherit}
.strike .new{font-size:220px;font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--ac)}
/* cursor */
.cur{width:66px;height:66px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.cur-wrap{position:absolute;z-index:30;opacity:0;animation:curMove 1.2s cubic-bezier(.5,0,.2,1) forwards}
@keyframes curMove{0%{opacity:0;transform:translate(var(--fx),var(--fy))}15%{opacity:1}85%{transform:translate(0,0)}90%{transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
.ripple{position:absolute;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:5px solid var(--ac);opacity:0;animation:rip .7s ease-out forwards}
@keyframes rip{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.4)}}
.press{animation:press .3s ease forwards}
@keyframes press{50%{transform:scale(.93)}100%{transform:none}}
/* big button */
.bigbtn{display:inline-flex;align-items:center;gap:22px;background:var(--ink);color:var(--bg);font-weight:800;font-size:54px;padding:40px 64px;border-radius:32px;letter-spacing:-.02em}
.bigbtn svg{width:54px;height:54px}
.bigbtn.ac{background:var(--ac);color:#fff}
/* guide cover */
.cover{width:560px;aspect-ratio:3/4;background:#fff;border-radius:18px 30px 30px 18px;box-shadow:var(--sh);padding:56px 50px;position:relative;overflow:hidden;color:#111113;transform:perspective(1800px) rotateY(-16deg) rotateX(6deg)}
.cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:22px;background:var(--ac)}
.cover .ck{font-size:22px;font-weight:800;letter-spacing:.18em;color:var(--ac);text-transform:uppercase}
.cover .cn{font-size:66px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:26px}
.cover .cg{position:absolute;left:50px;right:50px;bottom:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cover .cg i{aspect-ratio:1;border-radius:10px;background:#F0F0EC}
.cover .cg i:nth-child(3n){background:var(--ac);opacity:.9}
/* sheet */
.sheet{display:grid;grid-template-columns:60px repeat(5,1fr);font-size:20px;border-top:2px solid #E6E6E2;border-left:2px solid #E6E6E2}
.sheet>div{border-right:2px solid #E6E6E2;border-bottom:2px solid #E6E6E2;padding:10px 12px;height:52px;white-space:nowrap;overflow:hidden;font-family:'JetBrains Mono',monospace}
.sheet .hd{background:#F6F6F3;color:#8B8B86;font-weight:700;text-align:center}
.sheet .er{background:#FBE3E4;color:#B4262B;font-weight:700}
/* tabs chaos */
.tabs{display:flex;gap:4px;padding:14px 14px 0;background:#E9E9E5;flex-wrap:nowrap;overflow:hidden}
.tabs .tb{flex:1;min-width:0;background:#F5F5F2;border-radius:12px 12px 0 0;padding:12px 10px;display:flex;align-items:center;gap:6px;font-size:16px;white-space:nowrap;overflow:hidden}
.tabs .tb i{width:18px;height:18px;border-radius:5px;flex:none;display:block}
/* clock */
.clock{width:380px;height:380px;border-radius:50%;background:#fff;box-shadow:var(--sh);position:relative}
.clock .hand{position:absolute;left:50%;bottom:50%;width:12px;margin-left:-6px;border-radius:6px;background:#111113;transform-origin:50% 100%}
.clock .hm{height:140px;animation:spin 1.2s linear infinite}.clock .hh{height:95px;animation:spin 14s linear infinite;background:var(--ac)}
.clock .cd{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%;background:#111113}
.clock .tk{position:absolute;left:50%;top:18px;width:6px;height:26px;margin-left:-3px;background:#D0D0CA;border-radius:3px;transform-origin:50% 172px}
/* app icon + badge */
.appi{position:relative;width:220px;height:220px;border-radius:56px;background:var(--ac);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--sh)}
.appi svg{width:110px;height:110px}
.appi .bdg{position:absolute;top:-26px;right:-26px;min-width:92px;height:92px;padding:0 20px;border-radius:46px;background:var(--bad);color:#fff;font-size:44px;font-weight:800;display:flex;align-items:center;justify-content:center;border:8px solid var(--bg)}
/* uptime */
.upt{display:grid;grid-template-columns:repeat(30,1fr);gap:6px;margin:22px 0}
.upt i{height:70px;border-radius:5px;background:var(--ok);display:block;transform:scaleY(0);transform-origin:50% 100%;animation:grow2 .4s forwards}
.upt i.b{background:var(--warn)}
/* icon big */
.bigic{width:260px;height:260px;border-radius:70px;background:#fff;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;color:var(--ac)}
.bigic svg{width:130px;height:130px;stroke-width:2}
.bigic.plain{background:none;box-shadow:none;color:var(--ink)}
.bigic.fill{background:var(--ac);color:#fff}
/* decor */
.spark{color:var(--ac)}
.spark svg{display:block;width:100%;height:100%}
.spin-slow{animation:spin 18s linear infinite}
.rings{position:absolute;border-radius:50%;border:3px solid var(--line)}
/* palette */
.pal-in{display:flex;align-items:center;gap:16px;font-size:32px;padding:6px 0 26px;border-bottom:2px solid #EFEFEB}
.dark .pal-in{border-color:#26272D}
.kbd{font-family:'JetBrains Mono',monospace;font-size:20px;padding:4px 12px;border-radius:8px;background:#EFEFEB;color:#6B6B66}
.dark .kbd{background:#26272D;color:#9A9BA3}
/* avatars */
.avs{display:flex}
.avs .av{width:110px;height:110px;font-size:38px;border:7px solid var(--bg);margin-left:-26px}
.avs .av:first-child{margin-left:0}
/* map dots */
.world{display:grid;grid-template-columns:repeat(24,1fr);gap:10px;width:100%}
.world i{aspect-ratio:1;border-radius:50%;background:var(--soft);display:block}
.world i.on{background:var(--ac);animation:aPop .5s forwards;opacity:0}
/* email */
.mail .mf{display:flex;gap:16px;padding:16px 0;border-bottom:2px solid #F0F0EC;font-size:26px}
.mail .mf b{color:#8B8B86;font-weight:600;width:100px}
.mail .body{padding:24px 0;display:flex;flex-direction:column;gap:14px}
/* meter */
.meter .mv{font-size:64px;font-weight:800;letter-spacing:-.03em}
@keyframes ringD{to{stroke-dashoffset:var(--o)}}