@font-face{font-family:"PJS";src:url(fonts/pjs.woff2) format("woff2");font-weight:200 800;font-display:block}
@font-face{font-family:"JBM";src:url(fonts/jb0.woff2) format("woff2");font-weight:100 800;font-display:block}
:root{--ink:#020617;--teal:#2DD4BF;--teal2:#14B8A6;--deep:#0D9488;--t3:#5EEAD4;--mint:#CCFBF1;--tx:#F8FAFC;--tx2:#CBD5E1;--mut:#94A3B8;--line:rgba(255,255,255,.10);--J:"PJS",system-ui,sans-serif;--M:"JBM",ui-monospace,monospace}
/* accents (3 Nov 2026, Justin: more color for pills and graphics). Teal stays the brand; amber, violet and sky vary
   the step numbers, chips, rings and stat pills. No red. */
:root,#s{--a:#2DD4BF;--a2:#5EEAD4;--ad:#0D9488}
.k-amber{--a:#F5B544;--a2:#FCD34D;--ad:#B7791F}
.k-violet{--a:#A78BFA;--a2:#C4B5FD;--ad:#7C3AED}
.k-sky{--a:#38BDF8;--a2:#7DD3FC;--ad:#0284C7}
.k-teal{--a:#2DD4BF;--a2:#5EEAD4;--ad:#0D9488}
html,body{margin:0;background:#020617;overflow:hidden}
#s{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--ink);color:var(--tx);font-family:var(--J);transform-origin:0 0;-webkit-font-smoothing:antialiased}
.L{position:absolute;inset:0;transform-origin:50% 50%}
.ab{position:absolute}
#dots{position:absolute;inset:-40px;opacity:.35;background-image:radial-gradient(rgba(148,163,184,.25) 1.4px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 30%,transparent 78%)}
#aura{position:absolute;left:50%;top:-330px;width:1300px;height:900px;margin-left:-650px;border-radius:50%;background:radial-gradient(closest-side,rgba(45,212,191,.27),rgba(45,212,191,0));filter:blur(30px)}
.pool{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(20,184,166,.22),rgba(20,184,166,0));filter:blur(40px)}
.eyebrow{font:700 22px/1 var(--M);letter-spacing:.16em;text-transform:uppercase;color:var(--a);display:flex;align-items:center;gap:14px}
.eyebrow .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--a) 14%,transparent);border:1px solid color-mix(in srgb,var(--a) 42%,transparent);color:var(--a2);font-size:19px;letter-spacing:0}
.h{font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0}
.h .w{display:inline-block;white-space:pre;will-change:transform,opacity}
.hl{background:linear-gradient(100deg,#2DD4BF 0%,#CCFBF1 42%,#2DD4BF 84%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sub{font-weight:500;font-size:31px;line-height:1.38;color:var(--tx2);letter-spacing:-.005em}
.pill{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 22px 0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font:600 21px/1 var(--J);color:var(--tx2)}
.pill b{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--a) 16%,transparent);color:var(--a2);font:700 16px/1 var(--M);letter-spacing:.12em}
/* browser frame */
.bf{position:absolute;border-radius:20px;overflow:hidden;background:#050B1C;border:1px solid rgba(255,255,255,.20);box-shadow:0 0 90px -20px rgba(45,212,191,.5),0 50px 100px -30px rgba(0,0,0,.8);transform-origin:50% 100%}
.bf .bar{height:46px;display:flex;align-items:center;gap:9px;padding:0 18px;background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.08)}
.bf .bar i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.16)}
.bf .url{margin-left:18px;height:28px;padding:0 16px;border-radius:8px;background:rgba(255,255,255,.05);display:flex;align-items:center;gap:8px;font:500 15px/1 var(--M);color:var(--mut)}
.bf .url:before{content:"";width:9px;height:11px;border:2px solid #64748B;border-radius:3px;box-sizing:border-box}
.bf .vp{position:relative;overflow:hidden}
.bf .vp img{position:absolute;left:0;top:0;width:100%;display:block}
.glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.09) 45%,rgba(255,255,255,0) 60%);background-size:250% 100%}
.cursor{position:absolute;left:0;top:0;width:44px;height:44px;z-index:50;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.ring{position:absolute;border-radius:18px;border:3px solid var(--a);box-shadow:0 0 0 6px color-mix(in srgb,var(--a) 16%,transparent),0 0 50px color-mix(in srgb,var(--a) 45%,transparent)}
.chip{position:absolute;display:flex;align-items:center;gap:14px;height:66px;padding:0 24px 0 14px;border-radius:16px;background:#0D1324;border:1px solid color-mix(in srgb,var(--a) 40%,transparent);box-shadow:0 20px 50px -20px rgba(0,0,0,.9),0 0 40px -16px color-mix(in srgb,var(--a) 60%,transparent);font:700 24px/1 var(--J);white-space:nowrap}
.chip .ck{width:38px;height:38px;border-radius:10px;background:var(--ad);display:flex;align-items:center;justify-content:center}
.chip .ck svg{width:22px;height:22px}
.chip small{font:600 20px/1 var(--M);color:var(--tx2);letter-spacing:0}
.sw{display:inline-block;width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.3)}
.btn{display:inline-flex;align-items:center;gap:14px;height:84px;padding:0 44px;border-radius:14px;background:var(--deep);color:#fff;font:700 32px/1 var(--J);box-shadow:0 14px 40px -12px rgba(13,148,136,.9);position:relative;overflow:hidden}
.btn .sh{position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.mono{font-family:var(--M)}
.tile{position:absolute;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}
.tile.rec{border-color:rgba(45,212,191,.32);box-shadow:0 24px 60px -30px rgba(45,212,191,.6)}
.lbl{font:700 17px/1 var(--M);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.big{font:700 96px/1 var(--M);letter-spacing:-.04em;color:var(--tx)}
.foot{position:absolute;left:0;right:0;bottom:44px;text-align:center;font:600 17px/1 var(--M);letter-spacing:.14em;text-transform:uppercase;color:#64748B}