:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#f5f5f7;--surface:#fff;--surface2:#ececf0;--text:#16161a;--muted:#62626d;--line:#dcdce2;--accent:#3aa5f5;--on-accent:#04131f;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a0a0c;--surface:#111116;--surface2:#1a1b22;--text:#f5f7fa;--muted:#9299a8;--line:#252832;--accent:#79c8ff;--on-accent:#04131f;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a0a0c;--surface:#111116;--surface2:#1a1b22;--text:#f5f7fa;--muted:#9299a8;--line:#252832;--accent:#79c8ff;--on-accent:#04131f;color-scheme:dark}
*{box-sizing:border-box}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,.logo,.btn,.amt,.ptitle{font-family:"Inter","Segoe UI",system-ui,sans-serif}
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:.95rem;font-weight:800}
.top nav{display:flex;gap:4px;font-size:.9rem;font-weight:500}
.top nav a{padding:8px 14px;border-radius:8px;color:var(--muted);transition:color .15s,background .15s}
.top nav a:hover{color:var(--text);background:var(--surface2)}
.hr{display:flex;gap:8px}
@media (max-width:760px){.hr .ghost{display:none}}
.btn{display:inline-block;border:1px solid transparent;border-radius:10px;padding:11px 20px;font:inherit;font-weight:700;font-size:.95rem;background:var(--accent);color:var(--on-accent);cursor:pointer}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn.sm{padding:8px 14px;font-size:.88rem}
.hero{text-align:center;padding:84px 0 56px}
.hero h1{font-size:clamp(2.2rem,6.2vw,4.1rem);line-height:1.02;letter-spacing:-.04em;margin:0 auto 18px;max-width:16ch}
.hero p{color:var(--muted);font-size:1.1rem;max-width:46ch;margin:0 auto 28px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:36px;color:var(--muted);font-size:.92rem}
.stats span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px}
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:12px 0;white-space:nowrap}
.ticker div{display:inline-block;padding-left:100%;animation:tick 26s linear infinite;font-weight:700;color:var(--accent)}
@keyframes tick{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none;padding-left:20px}}
h2.t{font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.03em;margin:0 0 8px}
.sec{padding:72px 0 0}
.sec>p{color:var(--muted);margin:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.art{position:relative;height:170px;background:linear-gradient(135deg,var(--accent) 0%,var(--surface2) 100%);display:flex;align-items:flex-start;padding:14px;overflow:hidden}
.art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 22px)}
.art::after{content:"Z";position:absolute;right:-4px;bottom:-36px;font-size:9.5rem;font-weight:800;line-height:1;color:rgba(255,255,255,.15);transition:transform .3s}
.card:hover .art::after{transform:scale(1.08) translateY(-4px)}
.pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;background:var(--surface);color:var(--text);border-radius:99px;padding:4px 12px;font-size:.8rem;font-weight:600}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fbf8a}
.card .body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{margin:0;font-size:1.2rem;letter-spacing:-.02em}
.card .sub{margin:-8px 0 0;color:var(--muted);font-size:.9rem}
.chips2{display:flex;gap:6px;flex-wrap:wrap}
.chips2 span{background:var(--surface2);border-radius:6px;padding:3px 10px;font-size:.8rem;font-weight:600;color:var(--muted)}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.card .from{color:var(--muted);font-size:.78rem;display:block;line-height:1.2}
.card .amt{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.card .btn{padding:10px 16px}
.card .btn::after{content:"";position:absolute;inset:0}
.card .btn i{font-style:normal;display:inline-block;transition:transform .2s;margin-left:6px}
.card:hover .btn i{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.card,.art::after,.card .btn i{transition:none}.card:hover,.card:hover .art::after,.card:hover .btn i{transform:none}}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.tile.wide{grid-column:1/-1}
.tile h3{margin:0 0 6px;font-size:1.15rem}
.tile p{margin:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips span{background:var(--surface2);border-radius:8px;padding:6px 12px;font-size:.88rem;font-weight:600}
.band{margin-top:72px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:44px 24px;text-align:center}
.band p{color:var(--muted);max-width:50ch;margin:0 auto 22px}
.faq{max-width:760px}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;gap:14px}
summary::-webkit-details-marker{display:none}
summary i{font-style:normal;color:var(--accent);font-weight:700}
details p{margin:10px 0 0 34px;color:var(--muted)}
footer{margin-top:80px;border-top:1px solid var(--line);padding:40px 0 32px;color:var(--muted);font-size:.9rem}
.cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.cols h4{margin:0 0 10px;color:var(--text);font-size:.95rem}
.cols a{display:block;margin-bottom:6px}
.cols a:hover{color:var(--text)}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:24px;width:min(420px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h3{margin:0 0 14px;font-size:1.25rem}
select{width:100%;padding:11px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;margin-bottom:14px}
.row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.row strong{font-size:1.7rem}
.msg{min-height:1.4em;color:var(--muted);font-size:.9rem;margin:10px 0 0}
@media (max-width:760px){.top nav{display:none}.bento{grid-template-columns:1fr}.cols{grid-template-columns:1fr 1fr}.hero{padding:52px 0 40px}}
.back{display:inline-block;margin:28px 0 20px;color:var(--muted);font-size:.95rem}
.back:hover{color:var(--text)}
.pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;padding-bottom:20px}
.pimg{height:400px;border-radius:20px;background:linear-gradient(135deg,var(--accent),var(--surface2));display:flex;align-items:flex-end;padding:18px}
.ptitle{font-size:clamp(2rem,5vw,2.8rem);letter-spacing:-.035em;line-height:1.05;margin:0 0 10px}
.pdesc{color:var(--muted);margin:0 0 24px}
.lbl{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.incl{list-style:none;padding:18px 0 0;margin:20px 0 0;border-top:1px solid var(--line);color:var(--muted);display:grid;gap:8px}
.incl li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px}
@media (max-width:760px){.pgrid{grid-template-columns:1fr;gap:24px}.pimg{height:220px}}
.feat{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.feat h2{font-size:1.8rem;letter-spacing:-.03em;margin:0 0 6px}
.feat>p{color:var(--muted);margin:0 0 24px}
.fgrid{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start}
.ftabs{display:flex;flex-direction:column;gap:2px}
.ftabs button{text-align:left;background:none;border:0;border-radius:8px;padding:9px 12px;color:var(--muted);font:inherit;font-size:.93rem;font-weight:500;cursor:pointer}
.ftabs button:hover{background:var(--surface2);color:var(--text)}
.ftabs button[aria-selected="true"]{background:var(--surface2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.fpanel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;min-height:320px}
.fpanel h3{margin:0 0 12px;font-size:1.25rem;letter-spacing:-.02em}
.fpanel ul{list-style:none;margin:0;padding:0}
.fpanel li{padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.fpanel li:last-child{border-bottom:0}
.fpanel li::before{content:"";flex:none;width:6px;height:6px;margin-top:.6em;border-radius:50%;background:var(--accent)}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}.ftabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.ftabs button{white-space:nowrap;flex:none}.ftabs button[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--accent)}.fpanel{padding:18px}}
.plansec{text-align:center;margin-top:72px;padding-top:56px;border-top:1px solid var(--line)}
.plansec h2{font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 10px;background:linear-gradient(180deg,var(--text) 35%,var(--muted));-webkit-background-clip:text;background-clip:text;color:transparent}
.plansec>p{color:var(--muted);margin:0 0 44px}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;text-align:left}
.pc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:18px;transition:transform .2s,border-color .2s}
.pc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.pc.best{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),var(--surface);box-shadow:0 18px 50px -12px color-mix(in srgb,var(--accent) 35%,transparent)}
.pl{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;min-height:24px}
.pc.best .pl{color:var(--accent)}
.bv{border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-radius:99px;padding:2px 9px;font-size:.62rem}
.pp{font-family:"Inter","Segoe UI",sans-serif;font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;display:flex;align-items:baseline}
.pp .cur{font-size:1.4rem;font-weight:600;color:var(--muted);margin-right:2px;letter-spacing:0}
.pp .cts{font-size:1.2rem;font-weight:600;color:var(--muted);letter-spacing:-.02em}
.po{display:flex;gap:8px;align-items:center;min-height:22px;margin-top:10px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.82rem;color:var(--muted)}
.po .dc{background:rgba(85,182,245,.14);color:var(--accent);border:1px solid rgba(85,182,245,.4);border-radius:6px;padding:0 6px;font-size:.7rem}
.pd{border-top:1px dashed var(--line);padding-top:16px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.82rem;color:var(--muted)}
.pa{display:flex;gap:8px;margin-top:auto}
.pa .btn:first-child{flex:1;height:44px;padding:0 10px;white-space:nowrap;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pa .ar{transition:transform .2s}
.pa .btn:first-child:hover .ar{transform:translateX(3px)}
.pc.best .pa .btn:first-child{box-shadow:0 8px 24px -6px var(--accent)}
.pa .ic{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:12px;flex:none}
.trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:32px;color:var(--muted);font-size:.88rem}
.trust svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:8px;vertical-align:-3px}
@media (prefers-reduced-motion:reduce){.pc,.pa .ar{transition:none}.pc:hover,.pa .btn:first-child:hover .ar{transform:none}}
.btn{transition:filter .2s,box-shadow .2s,background .2s,border-color .2s}
.btn:not(.ghost):hover{filter:brightness(1.08);box-shadow:0 0 22px rgba(85,182,245,.28)}
.btn:not(.ghost):active{filter:brightness(.95)}
.btn.ghost:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.pc:hover{box-shadow:0 10px 36px -14px rgba(85,182,245,.35)}
.pc.best:hover{box-shadow:0 18px 50px -10px rgba(85,182,245,.45)}
#top{position:relative;isolation:isolate}
#top::before,#top::after{content:"";position:absolute;left:0;right:0;top:0;height:680px;z-index:-1;pointer-events:none}
#top::before{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;background-position:center top;opacity:.55;-webkit-mask-image:radial-gradient(60% 75% at 50% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(60% 75% at 50% 0%,#000 25%,transparent 78%)}
#top::after{background:radial-gradient(55% 60% at 50% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 72%)}
:root{--hbg:var(--surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hbg:#090a0e}}
:root[data-theme="dark"]{--hbg:#090a0e}
.hd{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;padding:10px 16px;z-index:30}
.bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:1180px;margin:0 auto;height:56px;padding:0 9px 0 16px;background:var(--hbg);border:1px solid var(--line);border-radius:14px}
.hl{display:flex;align-items:center;gap:10px}
.hn{display:flex;align-items:center;gap:2px}
.hr{display:flex;align-items:center;gap:8px;justify-self:end}
.dd{position:relative}
.hb{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 12px;border-radius:8px;color:var(--text);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:color .15s,background .15s}
.hb:hover,.dd.open>.hb{background:var(--surface2);color:var(--accent)}
.hb.cv::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:3px;transition:transform .2s}
.dd.open>.hb.cv::after{transform:rotate(225deg) translateY(-2px)}
.hb.lg{color:var(--muted);padding:7px 10px;border:1px solid var(--line)}
.hb svg,.ib svg,.btn svg{width:15px;height:15px;flex:none}
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;background:var(--hbg);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:40}
.dd.open>.menu{opacity:1;visibility:visible;transform:none}
.menu a,.menu .mi{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 12px;border-radius:8px;font-size:.9rem;color:var(--text)}
.menu .mi{color:var(--muted)}
.menu a:hover{background:var(--surface2);color:var(--accent)}
.menu small{color:var(--muted);font-size:.8rem}
.dd.right>.menu{left:auto;right:0;width:300px}
.ib{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.ib:hover,.dd.open>.ib{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--surface2)}
.cb{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-size:.68rem;font-weight:800;display:grid;place-items:center}
.cb[hidden]{display:none}
.hr .btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:10px}
.ci{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:.9rem}
.ci small{display:block;color:var(--muted)}
.rm{border:0;background:none;color:var(--muted);font-size:1.2rem;cursor:pointer;line-height:1}
.rm:hover{color:var(--accent)}
.ct{display:flex;justify-content:space-between;padding:12px;font-size:.95rem}
#cartList .btn{width:calc(100% - 12px);margin:0 6px 6px}
.cm{margin:0 12px 8px;min-height:1.2em;color:var(--muted);font-size:.82rem}
.tog{display:none}
@media (max-width:900px){.bar{grid-template-columns:1fr auto}.tog{display:grid}.hn{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--hbg);border:1px solid var(--line);border-radius:14px;padding:8px}.hn.open{display:flex}.hn .menu{position:static;opacity:1;visibility:visible;transform:none;display:none;border:0;box-shadow:none;padding:0 0 0 12px}.hn .dd.open>.menu{display:block}.hn .hb{width:100%;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.menu,.hb,.ib,.hb.cv::after{transition:none}}
.hd{padding:6px 12px}
.bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:48px;padding:0 7px 0 14px;border-radius:14px}
.hl{gap:20px;justify-self:start}
.hd .logo{font-family:"Inter","Segoe UI",sans-serif;font-size:.9rem;font-weight:700;gap:9px;letter-spacing:-.01em}
.mark{width:22px;height:22px;border-radius:6px;font-size:.75rem}
.hn{gap:24px}
.hb{color:var(--muted);padding:6px 0;font-size:.8125rem;gap:5px}
.hb:hover,.dd.open>.hb{background:none;color:var(--text)}
.hb.lg{border:0;padding:6px 0;gap:6px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.72rem;letter-spacing:.04em}
.hb svg{width:14px;height:14px}
.hb.cv::after{width:5px;height:5px;margin-left:2px}
.hr{gap:6px}
.ib{border:0;width:32px;height:32px;color:var(--muted)}
.ib svg{width:15px;height:15px}
.ib:hover,.dd.open>.ib{background:var(--surface2);color:var(--text);border-color:transparent}
.hr .btn{height:34px;padding:0 13px;font-family:"Inter","Segoe UI",sans-serif;font-size:.8125rem;font-weight:600;border-radius:9px;gap:6px}
.hr .btn svg{width:14px;height:14px}
.hr .btn.ghost{background:var(--surface2);border-color:var(--line);color:var(--text)}
.hr .btn.ghost:hover{background:color-mix(in srgb,var(--surface2) 78%,var(--text))}
.menu{top:calc(100% + 8px)}
.menu a:hover{color:var(--text)}
@media (max-width:900px){.bar{grid-template-columns:minmax(0,1fr) auto}.hn{gap:0}.hn .hb{padding:10px 8px}}
.lg-img{height:22px;width:auto;display:block}
.pay{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted)}
.pay span{display:grid;place-items:center;width:46px;height:28px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.pay svg{width:34px;height:16px}
.ckgrid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start;margin-top:24px}
.cks{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:16px}
.cks h2{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:1.05rem}
.cks h2 i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.8rem;font-weight:800}
.cks input:not([type=checkbox]){width:100%;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.cks input:focus{outline:0;border-color:var(--accent)}
.pms{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pm{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.pm small{display:block;color:var(--muted);font-size:.8rem;font-weight:400}
.pm:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.pm[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
.chk{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.9rem;cursor:pointer}
.chk input{margin-top:3px;accent-color:var(--accent)}
.err{color:#ef6b70;font-size:.85rem;margin:8px 0 0;min-height:1.2em}
.sum{position:sticky;top:84px}
.sr{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.92rem}
.sr small{display:block;color:var(--muted)}
.sr.t{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-weight:700;font-size:1.1rem}
.cprow{display:flex;gap:8px;margin-top:14px}
.cprow .btn{height:44px;flex:none}
.pay2{width:100%;height:48px;margin-top:14px;border-radius:12px}
.fine{color:var(--muted);font-size:.8rem;text-align:center;margin:10px 0 0}
.ckdone{max-width:540px;margin:28px auto;text-align:center}
.tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);margin:0 auto 18px}
.rec{text-align:left}
.keybox{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;background:var(--surface2);border-radius:8px;padding:10px 12px;margin-top:10px}
.ckempty{text-align:center;padding:60px 0}
@media (max-width:860px){.ckgrid{grid-template-columns:1fr}.sum{position:static}}
[hidden]{display:none!important}
.dsc{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-top:96px}
.eyebrow{margin:0 0 12px;color:var(--accent);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.dch{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.04em;line-height:1.02;margin:0 0 16px}
.dcp{color:var(--muted);max-width:44ch;margin:0 0 28px}
.dca{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)}
.dbtn{display:inline-flex;align-items:center;gap:9px;background:#5865f2;color:#fff;box-shadow:0 8px 28px -8px rgba(88,101,242,.65)}
.dbtn svg{width:20px;height:20px}
.dbtn.sm{box-shadow:none;margin-top:6px}
.onl{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid rgba(47,191,138,.35);background:rgba(47,191,138,.08);color:#2fbf8a;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem}
.onl i,.gd{width:8px;height:8px;border-radius:50%;background:#2fbf8a;display:inline-block;box-shadow:0 0 0 3px rgba(47,191,138,.2)}
.gy{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}
.dcm{display:flex;align-items:center;gap:14px;margin-top:20px;color:var(--muted);font-size:.9rem}
.dcm b{color:var(--text)}
.avs{display:flex}
.avs img{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;background:var(--surface2)}
.avs img:first-child{margin-left:0}
.dw{display:grid;grid-template-columns:210px 1fr;height:440px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;position:relative}
.dw::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 70% 30%,rgba(85,182,245,.08),transparent 70%)}
.dws{border-right:1px solid var(--line);overflow-y:auto;padding-bottom:12px}
.dwm{display:flex;flex-direction:column;min-width:0}
.dwt{display:flex;align-items:center;gap:9px;height:48px;padding:0 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:.9rem;flex:none}
.hash{color:var(--muted);font-weight:500;font-size:1.1rem}
.dwl{display:flex;justify-content:space-between;padding:16px 16px 6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dwe{color:var(--muted);font-size:.85rem;padding:0 16px;margin:6px 0}
.mb{display:flex;align-items:center;gap:10px;padding:6px 10px;margin:0 6px;border-radius:8px;font-size:.86rem;color:var(--muted)}
.mb:hover{background:var(--surface2);color:var(--text)}
.mb .av{position:relative;flex:none}
.mb img{width:28px;height:28px;border-radius:50%;display:block;background:var(--surface2)}
.mb .av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface);background:#2fbf8a}
.mb .av i.idle{background:#f0b232}.mb .av i.dnd{background:#f23f43}
.mb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:8px;overflow:hidden}
.dwb h3{margin:6px 0 0;font-size:1.3rem}
.dwb .dwe{max-width:36ch;padding:0}
.dci{width:72px;height:72px;border-radius:22px;object-fit:contain;background:var(--surface2);padding:10px}
.dci.real{padding:0;object-fit:cover}
.dcb{width:100%;max-width:340px;height:110px;border-radius:12px;background-size:cover;background-position:center;margin-bottom:4px}
.dst{display:flex;gap:16px;font-size:.85rem;color:var(--muted);margin:4px 0}
.dst span{display:inline-flex;align-items:center;gap:7px}.dst b{color:var(--text)}
.dw iframe{grid-column:1/-1;width:100%;height:100%;border:0}
@media (max-width:860px){.dsc{grid-template-columns:1fr;gap:36px;margin-top:72px}.dw{grid-template-columns:1fr;height:400px}.dws{display:none}}
.ann{background:color-mix(in srgb,var(--accent) 14%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--text);text-align:center;font-size:.88rem;padding:8px 16px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:10px;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;max-width:min(520px,calc(100vw - 32px));text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#ef6b70;color:#fff}
.art.has-img,.pimg.has-img{background-size:cover;background-position:center}
.art.has-img::before,.art.has-img::after{display:none}
.pill.out::before{background:#ef6b70}
.btn[disabled],.btn.busy{opacity:.55;pointer-events:none}
.acct{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.acct b{display:block}
.acct small{color:var(--muted)}
.odst{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;font-size:.85rem;font-weight:600;background:var(--surface2);margin-bottom:14px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:sp 1s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}.toast{transition:none}}
.skel{background:linear-gradient(90deg,var(--surface) 0,var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:sk 1.4s ease infinite;border-radius:16px;min-height:300px}
@keyframes sk{to{background-position:-200% 0}}

/* ---- Product card v2 ---- */
.card{border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 55%,var(--surface)) 0,var(--surface) 140px)}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 22px 50px -24px color-mix(in srgb,var(--accent) 55%,transparent)}
.card .art{height:184px;margin:8px 8px 0;border-radius:12px;align-items:flex-start;justify-content:space-between;padding:12px;
 background:radial-gradient(70% 90% at 75% 0%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%),radial-gradient(60% 70% at 10% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--accent) 18%,var(--surface2)),#0b0d13)}
.card .art::before{background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 80%)}
.card .art::after{content:none}
.art-logo{position:absolute;left:50%;top:52%;width:44%;max-width:150px;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 28px color-mix(in srgb,var(--accent) 65%,transparent));transition:transform .35s ease;pointer-events:none}
.card:hover .art-logo{transform:translate(-50%,-52%) scale(1.06)}
.art.has-img .art-logo{display:none}
.card .pill{background:rgba(9,10,14,.62);color:#f5f7fa;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.76rem;padding:4px 11px}
.card .cat{position:relative;z-index:1;background:rgba(9,10,14,.62);color:#c9d3e0;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:99px;padding:4px 10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.card .body{padding:18px 18px 18px;gap:10px}
.card h3{font-size:1.25rem;letter-spacing:-.025em}
.card .sub{margin:-6px 0 2px;font-size:.88rem}
.card .feats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.card .feats li{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 8px}
.card .feats li::before{content:"";width:12px;height:12px;flex:none;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.card .feats li.more{border-style:dashed;padding-left:10px}
.card .feats li.more::before{content:none}
.card .foot{padding-top:16px;margin-top:6px;align-items:flex-end}
.card .from{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;font-family:"JetBrains Mono",ui-monospace,monospace}
.card .amt{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-top:2px}
.card .per{display:block;color:var(--muted);font-size:.76rem;margin-top:3px}
.card .btn{padding:11px 16px;border-radius:11px;font-size:.9rem;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.art-logo{transition:none}.card:hover .art-logo{transform:translate(-50%,-50%)}}

/* ---- Status list ---- */
.stl{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.str{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s}
.str:last-child{border-bottom:0}
a.str:hover{background:color-mix(in srgb,var(--surface2) 60%,var(--surface))}
.stn{display:flex;align-items:center;gap:14px;min-width:0}
.stn img{width:40px;height:40px;border-radius:10px;object-fit:contain;background:var(--surface2);padding:7px;flex:none}
.stn img.cover{object-fit:cover;padding:0}
.stn b{display:block;font-size:1rem;letter-spacing:-.01em}
.stn small{display:block;color:var(--muted);font-size:.8rem;font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em}
.stv{display:flex;align-items:center;gap:16px;justify-self:end}
.stv time{color:var(--muted);font-size:.8rem;white-space:nowrap}
.stp{--c:#2fbf8a;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;font-size:.82rem;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);white-space:nowrap}
.stp i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--c)}
.stp.undetected i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c);opacity:0;animation:stpulse 2s ease-out infinite}
@keyframes stpulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.stp.updating{--c:#e0a94a}.stp.testing{--c:var(--accent)}.stp.detected{--c:#ef6b70}.stp.offline{--c:var(--muted)}
.stleg{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;color:var(--muted);font-size:.82rem}
.stleg span{display:inline-flex;align-items:center;gap:7px}
.stleg i{width:8px;height:8px;border-radius:50%;background:var(--c)}
@media (max-width:560px){.str{grid-template-columns:1fr;gap:10px;padding:14px 16px}.stv{justify-self:start}}
@media (prefers-reduced-motion:reduce){.stp.undetected i::after{animation:none}}

/* ---- Reviews marquee ---- */
.revsec{padding:88px 0 0;overflow:hidden}
.revhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.revhead p{color:var(--muted);margin:0}
.revcount{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}
.revcount b{color:var(--text)}
.marq{position:relative;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq+.marq{margin-top:14px}
.mtrack{display:flex;gap:14px;width:max-content;animation:marq var(--dur,70s) linear infinite}
.marq.rev .mtrack{animation-direction:reverse}
.marq:hover .mtrack,.marq:focus-within .mtrack{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 7px))}}
.rv{width:330px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s}
.rv:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.rvt{display:flex;align-items:center;gap:11px}
.rva{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff;flex:none}
.rvimg{overflow:hidden}
.rvimg img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.rvn{min-width:0;flex:1}
.rvn b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvn time{color:var(--muted);font-size:.76rem}
.rvd{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(88,101,242,.14);color:#5865f2;flex:none}
.rvd svg{width:17px;height:17px}
.rvx{margin:0;color:color-mix(in srgb,var(--text) 88%,var(--muted));font-size:.92rem;line-height:1.5}
.rvx .mn{color:#a5b0ff;background:rgba(88,101,242,.18);border-radius:4px;padding:0 3px;font-weight:600}
.rvf{margin-top:auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.74rem;font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;border-top:1px solid var(--line);padding-top:10px}
.rvf i{width:6px;height:6px;border-radius:50%;background:#5865f2}
@media (max-width:600px){.rv{width:280px}}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none}.marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
/* ---- Category tabs ---- */
.ctabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.ctabs button{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:8px 8px 8px 16px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.ctabs button:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.ctabs button[aria-selected="true"]{color:var(--text);border-color:color-mix(in srgb,var(--accent) 70%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.ctabs .n,.ctabs .soon-b{min-width:24px;height:24px;padding:0 8px;border-radius:99px;display:inline-grid;place-items:center;font-size:.74rem;font-family:"JetBrains Mono",ui-monospace,monospace;background:var(--surface2);color:var(--muted)}
.ctabs button[aria-selected="true"] .n{background:var(--accent);color:var(--on-accent)}
.ctabs .soon-b{text-transform:uppercase;letter-spacing:.06em;font-size:.64rem}
.soon{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px;padding:26px}
.soon>div{flex:1;min-width:220px}
.soon b{display:block;font-size:1.1rem;font-family:"Inter",sans-serif;letter-spacing:-.02em;margin-bottom:4px}
.soon p{margin:0;color:var(--muted)}
.soon-ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 30%,transparent),var(--surface2));flex:none}
.soon-ic img{width:34px;opacity:.9}

.card .art.has-img,.pimg.has-img{background-color:#0b0d13}
.card .art.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.card .art.has-img::before{display:none}

/* ---- Footer socials ---- */
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.socials a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font-size:.84rem;font-weight:600;transition:color .15s,border-color .15s,background .15s,transform .15s}
.socials a:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface));transform:translateY(-1px)}
.socials svg{width:17px;height:17px;flex:none;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.socials a{transition:none}.socials a:hover{transform:none}}
.socials{gap:6px;flex-wrap:nowrap}
.socials a{height:34px;padding:0 10px 0 9px;gap:6px;font-size:.8rem}
.socials svg{width:15px;height:15px}
@media (max-width:360px){.socials{flex-wrap:wrap}}
.socials{gap:8px;flex-wrap:wrap}
.socials a{width:34px;height:34px;padding:0;justify-content:center;border-radius:9px;background:color-mix(in srgb,var(--surface2) 70%,var(--surface));border-color:color-mix(in srgb,var(--line) 80%,transparent);color:var(--muted)}
.socials a:hover{color:var(--text);background:var(--surface2);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.socials svg{width:16px;height:16px;color:currentColor}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.socials img{width:16px;height:16px;display:block;filter:invert(62%) sepia(8%) saturate(400%) hue-rotate(185deg);transition:filter .15s}
.socials a:hover img{filter:invert(96%)}



/* ---- Product page v2 ---- */
.pdh{position:relative;isolation:isolate;padding:22px 0 64px}
.pdh-bg{position:absolute;left:0;right:0;top:-70px;bottom:0;z-index:-1;pointer-events:none;overflow:hidden;
 background:radial-gradient(38% 55% at 74% 52%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 70%),radial-gradient(30% 40% at 20% 10%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
.pdh-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.pdh .back{margin:0 0 26px}
.pdh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:60px;align-items:center}
.pdh-tags{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.pdh-tags .stp{padding:4px 11px;font-size:.76rem}
.pdh-stock{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);font-weight:600}
.pdh-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fbf8a}
.pdh-stock.out::before{background:#ef6b70}
.pdh-title{font-family:"Inter","Segoe UI",sans-serif;font-weight:700;font-size:clamp(2.5rem,5.2vw,3.6rem);letter-spacing:-.045em;line-height:1;margin:0 0 20px;background:linear-gradient(180deg,var(--text) 55%,color-mix(in srgb,var(--text) 72%,var(--muted)));-webkit-background-clip:text;background-clip:text;color:transparent}
.pdh-desc{color:var(--muted);font-size:1rem;line-height:1.65;max-width:47ch;margin:0 0 26px}
.pdh-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.pdh-cta .btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:11px;font-family:"Inter","Segoe UI",sans-serif;font-weight:700;font-size:.92rem}
.pdh-cta .btn svg{width:15px;height:15px}
.pdh-cta .btn:not(.ghost){box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.req-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.req-h a{display:inline-flex;align-items:center;gap:5px;letter-spacing:.04em;text-transform:none;font-size:.74rem;transition:color .15s}
.req-h a:hover{color:var(--accent)}
.req-h svg{width:12px;height:12px}
.req-g{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin:0;border-bottom:1px solid var(--line)}
.req-g>div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line);font-size:.88rem;min-width:0}
.req-g>div:last-child:nth-child(odd){grid-column:1/-1}
.req-g dt{color:var(--muted)}
.req-g dd{margin:0;font-weight:700;text-align:right}
.pdh-media{position:relative}
.pdh-media::after{content:"";position:absolute;left:12%;right:12%;bottom:-46px;height:90px;border-radius:50%;background:color-mix(in srgb,var(--accent) 32%,transparent);filter:blur(42px);z-index:-1}
.gal{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:#0b0d13;box-shadow:0 30px 70px -36px rgba(0,0,0,.8)}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease}
.gal img.fade{opacity:0}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(9,10,14,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f5f7fa;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.gal-nav:hover{background:rgba(9,10,14,.8);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.gal-nav svg{width:16px;height:16px}
.gal-nav.prev{left:14px}.gal-nav.next{right:14px}
.gal-count{position:absolute;right:14px;bottom:14px;padding:3px 10px;border-radius:99px;background:rgba(9,10,14,.62);border:1px solid rgba(255,255,255,.12);color:#f5f7fa;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.74rem;font-weight:600}
.gal-empty{position:absolute;inset:0;display:grid;place-items:center}
.gal-empty img{width:34%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--accent) 60%,transparent))}
#pp .plansec{margin-top:24px}
/* Features: numbered 3-column grid */
.fx{padding:84px 0 24px;text-align:center}
.fx-eye{margin:0 0 10px;color:var(--accent);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.fx-h{font-family:"Inter","Segoe UI",sans-serif;font-weight:700;font-size:clamp(2rem,4.6vw,2.9rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 48px}
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 52px;text-align:left}
.fx-g h3{display:flex;gap:12px;align-items:baseline;margin:0;padding-bottom:13px;border-bottom:1px solid var(--line);font-family:"Inter","Segoe UI",sans-serif;font-size:.95rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.fx-g h3 span{flex:none;color:var(--accent);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;font-weight:500}
.fx-g ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.fx-g li{display:flex;gap:10px;color:var(--muted);font-size:.86rem;line-height:1.5}
.fx-g li::before{content:"–";flex:none;color:color-mix(in srgb,var(--muted) 60%,transparent)}
@media (max-width:900px){.pdh-grid{grid-template-columns:1fr;gap:34px}.pdh-media{order:-1}.fx-grid{grid-template-columns:1fr 1fr;gap:38px 32px}}
@media (max-width:560px){.req-g{grid-template-columns:1fr}.req-g>div:last-child:nth-child(odd){grid-column:auto}.fx-grid{grid-template-columns:1fr}.pdh-cta .btn{flex:1;justify-content:center}}
@media (prefers-reduced-motion:reduce){.gal img{transition:none}}
@media (max-width:480px){.hl .dd{display:none}}
/* ---- Guide center ---- */
.gc-head{text-align:center;padding:52px 0 40px}
.gc-h{font-family:"Inter","Segoe UI",sans-serif;font-weight:700;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 10px}
.gc-sub{color:var(--muted);margin:0 auto;max-width:48ch}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding-bottom:70px}
.gc-card{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;transition:transform .2s,border-color .2s,box-shadow .2s}
.gc-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.gc-card .gc-img{width:84px;height:84px;flex:none;border-radius:12px;background:#0b0d13 center/cover;display:grid;place-items:center}
.gc-card .gc-img img{width:60%;height:auto}
.gc-card .gc-b{min-width:0;flex:1}
.gc-card .gc-cat{color:var(--accent);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:3px}
.gc-card h3{margin:0 0 3px;font-size:1.08rem;letter-spacing:-.01em}
.gc-card p{margin:0;color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-card .gc-go{margin-top:8px;display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-weight:600;font-size:.85rem}
.gc-card .gc-go i{font-style:normal;transition:transform .2s}
.gc-card:hover .gc-go i{transform:translateX(3px)}
/* detail */
#gdView{padding-top:22px}
#gdView .back{margin:0 0 24px}
.gd-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:70px}
.gd-side{position:sticky;top:84px;display:grid;gap:18px}
.gd-prod{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gd-thumb{width:46px;height:46px;flex:none;border-radius:10px;background:#0b0d13 center/cover}
.gd-prod b{display:block;font-size:.98rem}
.gd-prod small{color:var(--muted);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.gd-toc{display:grid;gap:2px}
.gd-toc a{padding:7px 12px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:.88rem;border-left:2px solid transparent;transition:color .15s,background .15s}
.gd-toc a:hover{color:var(--text);background:var(--surface2)}
.gd-toc a.on{color:var(--text);border-left-color:var(--accent);background:var(--surface2)}
.gd-help{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.gd-help b{display:block;margin-bottom:4px;font-size:.92rem}
.gd-help p{margin:0 0 12px;color:var(--muted);font-size:.84rem}
.gd-help .btn{margin-right:4px}
.gd-title{font-family:"Inter","Segoe UI",sans-serif;font-weight:700;font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-.03em;margin:0 0 10px}
.gd-lead{color:var(--muted);margin:0 0 30px;font-size:1rem}
.gd-sec{scroll-margin-top:84px;padding:22px 0;border-top:1px solid var(--line)}
.gd-sec:first-of-type{border-top:0;padding-top:0}
.g-h{display:flex;align-items:baseline;gap:10px;font-family:"Inter","Segoe UI",sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin:0 0 16px}
.g-h .g-n{flex:none;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.95rem;font-weight:700;color:var(--accent)}
.g-h .g-hd{flex:none;color:var(--muted);font-weight:400}
.g-h .g-t{min-width:0}
.g-body{display:grid;gap:2px}
.g-sub{font-family:"Inter","Segoe UI",sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin:14px 0 8px;color:var(--text)}
.g-body>*:first-child{margin-top:0}
.g-ol,.g-ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.g-ol{counter-reset:gstep}
.g-ol li{position:relative;padding-left:40px;counter-increment:gstep;color:var(--text);line-height:1.6}
.g-ol li::before{content:counter(gstep);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.g-ul li{position:relative;padding-left:22px;color:var(--muted);line-height:1.6}
.g-ul li::before{content:"";position:absolute;left:4px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.gd-body p{color:var(--muted);line-height:1.65;margin:0 0 12px}
.g-note{position:relative;background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:11px;padding:12px 14px 12px 42px;color:var(--text)!important;font-size:.9rem;margin:4px 0 8px!important}
.g-note::before{content:"!";position:absolute;left:14px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:.72rem;font-weight:800}
.gd-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
@media (max-width:860px){.gd-grid{grid-template-columns:1fr;gap:24px}.gd-side{position:static}.gd-toc{display:none}}
@media (max-width:760px){.gd-btn{display:none}}
@media (prefers-reduced-motion:reduce){.gc-card,.gc-card .gc-go i{transition:none}.gc-card:hover{transform:none}}
.card .pill,.card .cat,.card .sub,.card .feats{display:none!important}
/* =====================================================================
   Typography & button system (single source of truth for the storefront)
   One family (Inter) carries the whole UI; JetBrains Mono only for small labels.
   ===================================================================== */
:root{
 --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
 --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
 --track-display:-.04em;--track-heading:-.025em;--track-ui:-.006em;--track-label:.12em;
 --btn-h:40px;--btn-h-sm:34px;--btn-h-lg:44px;--btn-px:16px;--btn-radius:10px;--btn-fs:.875rem;
 --ease:cubic-bezier(.2,.7,.3,1);--dur:.15s;
 --accent-hover:#72bdf5;
 --bg:#f8fbff;--surface:#ffffff;--surface2:#eef4fa;--text:#182433;--muted:#758397;--line:#e7edf4;--accent:#72bdf5;--on-accent:#0b2135;--accent-hover:#5fb1ee;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent:#91cfff;--accent-hover:#72bdf5;--on-accent:#06131f;--bg:#0a0a0c;--surface:#111116;--surface2:#1a1b22;--text:#f5f7fa;--muted:#9299a8;--line:#252832}}
:root[data-theme="dark"]{--accent:#91cfff;--accent-hover:#72bdf5;--on-accent:#06131f;--bg:#0a0a0c;--surface:#111116;--surface2:#1a1b22;--text:#f5f7fa;--muted:#9299a8;--line:#252832}

/* Base text */
body{font-family:var(--font-sans);font-size:15px;line-height:1.6;font-weight:var(--fw-regular);letter-spacing:var(--track-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.logo,.btn,.amt,.ptitle,.pp,.soon b,.hd .logo,.pdh-title,.fx-h,.gc-h,.gd-title,.dch{font-family:var(--font-sans)}
h1,h2,h3,h4{font-weight:var(--fw-semibold);letter-spacing:var(--track-heading)}

/* Display headings: semibold, tight tracking, never heavy */
.hero h1{font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:1.04}
h2.t,.plansec h2,.fx-h,.gc-h,.dch,.pdh-title{font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:1.05}
.pdh-title{font-size:clamp(2.4rem,5vw,3.4rem)}
.gd-title,.ptitle{font-weight:var(--fw-semibold);letter-spacing:-.03em}
.hero p,.pdh-desc,.gc-sub,.dcp,.sec>p,.plansec>p,.revhead p{font-weight:var(--fw-regular);letter-spacing:-.003em}

/* Product titles & prices */
.card h3{font-size:1.125rem;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.3}
.card .amt{font-weight:var(--fw-bold);letter-spacing:-.03em}
.pp{font-weight:var(--fw-bold);letter-spacing:-.045em}
.pp .cur,.pp .cts{font-weight:var(--fw-semibold)}
.fx-g h3,.g-h,.rvn b,.stn b,.tile h3,.gc-card h3{font-weight:var(--fw-semibold)}

/* Small labels: mono, subtle */
.pl,.from,.fx-eye,.eyebrow,.req-h,.gc-cat,.cat,.stn small,.rvf,.gd-prod small,.po,.pd,.bv,.ctabs .n,.ctabs .soon-b{font-family:var(--font-mono);font-weight:var(--fw-medium)}
.pl,.fx-eye,.eyebrow,.req-h{letter-spacing:var(--track-label)}

/* Navigation */
.hb{font-family:var(--font-sans);font-size:.8125rem;font-weight:var(--fw-medium);letter-spacing:-.005em}
.hd .logo{font-weight:var(--fw-semibold);letter-spacing:-.02em}
.menu a,.menu .mi{font-size:.875rem;font-weight:var(--fw-medium)}
footer .cols h4{font-weight:var(--fw-semibold);letter-spacing:-.01em}
footer .cols a{font-weight:var(--fw-regular)}
details summary{font-weight:var(--fw-medium);letter-spacing:-.01em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 var(--btn-px);border-radius:var(--btn-radius);
 font-family:var(--font-sans);font-size:var(--btn-fs);font-weight:var(--fw-semibold);letter-spacing:-.01em;line-height:1;white-space:nowrap;text-decoration:none;
 border:1px solid transparent;background:var(--accent);color:var(--on-accent);cursor:pointer;box-shadow:none;filter:none;
 transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:not(.ghost):hover{background:var(--accent-hover);filter:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.btn:not(.ghost):active,.btn.ghost:active{transform:translateY(1px);filter:none}
.btn.ghost{background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface2);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--text)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn svg{width:15px;height:15px;flex:none}
.btn i{font-style:normal}
.btn.sm{height:var(--btn-h-sm);padding:0 12px;font-size:.8125rem;border-radius:9px}
.btn[disabled],.btn.busy{opacity:.5;pointer-events:none}
/* Sizes per context, all from the same system */
.hr .btn{height:var(--btn-h-sm);padding:0 13px;font-size:.8125rem;border-radius:9px}
.hr .btn.ghost{background:var(--surface2);border-color:var(--line)}
.cta .btn,.pdh-cta .btn{height:var(--btn-h-lg);padding:0 20px;font-size:.9rem;border-radius:var(--btn-radius);box-shadow:none}
.pdh-cta .btn:not(.ghost){box-shadow:0 8px 24px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.card .btn{height:var(--btn-h);padding:0 15px;border-radius:var(--btn-radius);font-size:.875rem}
.pa .btn:first-child{height:var(--btn-h);border-radius:var(--btn-radius);font-size:.875rem}
.pa .ic{width:var(--btn-h);height:var(--btn-h);border-radius:var(--btn-radius)}
.pc.best .pa .btn:first-child{box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent) 75%,transparent)}
.pay2{height:var(--btn-h-lg);border-radius:var(--btn-radius);font-size:.9rem}
.cprow .btn{height:44px}
#cartList .btn{height:var(--btn-h)}
.dbtn{background:#5865f2;color:#fff}
.dbtn:not(.ghost):hover{background:#4752c4;box-shadow:0 0 0 4px rgba(88,101,242,.18)}
.ctabs button{font-family:var(--font-sans);font-weight:var(--fw-medium);letter-spacing:-.005em}
.ib{border-radius:9px}
/* Inputs share the button height */
.cks input:not([type=checkbox]),.cprow input{font-family:var(--font-sans);font-size:.9rem}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

.gal-vid{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.gal.vid .gal-nav{top:auto;bottom:62px;transform:none}
.gal.vid .gal-count{top:14px;bottom:auto}

.yt-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.yt-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease),filter .2s}
.yt-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35))}
.yt-play{position:absolute;left:50%;top:50%;z-index:1;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent),0 14px 34px -10px rgba(0,0,0,.6);transition:transform .2s var(--ease),background-color .15s}
.yt-play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.yt-poster:hover .yt-play{transform:scale(1.07);background:var(--accent-hover)}
.yt-poster:hover img{transform:scale(1.02)}
.yt-poster:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.yt-poster img,.yt-play{transition:none}}

/* Plan cards keep the same width whether a product has 3 or 5 plans */
.pcards{grid-template-columns:repeat(auto-fit,minmax(176px,199px));justify-content:center}
@media (max-width:600px){.pcards{grid-template-columns:1fr}}
/* Feature groups: optional description and "Name. Detail" items */
.fx-d{margin:14px 0 0;color:var(--muted);font-size:.86rem;line-height:1.55}
.fx-g ul{margin-top:14px}
.fx-g li span{display:block;color:color-mix(in srgb,var(--text) 85%,var(--muted))}
.fx-g li small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.pl{white-space:nowrap;flex-wrap:wrap;row-gap:6px}
.pc .bv{position:absolute;top:20px;right:18px}
.pcards{grid-template-columns:repeat(auto-fit,minmax(170px,196px))}@media (max-width:600px){.pcards{grid-template-columns:1fr}}

/* =====================================================================
   Ambient background (homepage)
   Static grid · slow drifting light · canvas particles falling downward
   Only transform/opacity animate. Nothing intercepts pointer events.
   ===================================================================== */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#08090c}}
:root[data-theme="dark"]{--bg:#08090c}
:root{--amb-deep:#15334b;--amb-glow:#55b9f5;--amb-hi:#91cfff;--grid-line:rgba(120,150,180,.07);--pt-rgb:150,190,225}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grid-line:rgba(130,165,200,.055);--pt-rgb:225,240,255}}
:root[data-theme="dark"]{--grid-line:rgba(130,165,200,.055);--pt-rgb:225,240,255}

#top{position:relative;isolation:isolate}
.page-bg,.hero-bg{position:absolute;left:0;right:0;pointer-events:none;z-index:-1}
.page-bg{top:-70px;bottom:0;overflow:hidden}

/* 1 — Static grid across the homepage. Never animated. */
.page-bg .grid{position:absolute;inset:0;
 background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
 background-size:64px 64px;background-position:center top;
 -webkit-mask-image:linear-gradient(#000 0,#000 560px,rgba(0,0,0,.35) 1050px,rgba(0,0,0,.18) 1800px,transparent 100%),radial-gradient(120% 100% at 50% 0,#000 45%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(#000 0,#000 560px,rgba(0,0,0,.35) 1050px,rgba(0,0,0,.18) 1800px,transparent 100%),radial-gradient(120% 100% at 50% 0,#000 45%,transparent 100%);
 mask-composite:intersect}
/* Very faint, slow light in the lower (product) part of the page */
.page-bg .low{position:absolute;left:50%;top:900px;width:1100px;height:900px;margin-left:-550px;border-radius:50%;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--amb-deep) 55%,transparent),transparent);opacity:.45;
 animation:amb-low 46s ease-in-out infinite alternate;will-change:transform}
@keyframes amb-low{to{transform:translate3d(140px,120px,0) scale(1.08)}}

/* 2 — Hero: ambient light + static floor + particles */
.hero-bg{top:-70px;height:760px;overflow:hidden;
 -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.hero-bg .light{position:absolute;border-radius:50%;will-change:transform,opacity}
.hero-bg .l1{left:50%;top:-180px;width:1040px;height:700px;margin-left:-520px;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--amb-deep) 90%,transparent),transparent);opacity:.9;
 animation:amb-1 34s ease-in-out infinite alternate}
.hero-bg .l2{left:50%;top:-70px;width:640px;height:440px;margin-left:-420px;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--amb-glow) 26%,transparent),transparent);opacity:.75;
 animation:amb-2 27s ease-in-out infinite alternate}
.hero-bg .l3{left:50%;top:10px;width:420px;height:300px;margin-left:40px;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--amb-hi) 16%,transparent),transparent);opacity:.7;
 animation:amb-3 31s ease-in-out infinite alternate}
@keyframes amb-1{0%{transform:translate3d(-30px,0,0) scale(1)}100%{transform:translate3d(40px,24px,0) scale(1.06)}}
@keyframes amb-2{0%{transform:translate3d(0,0,0) scale(1);opacity:.6}100%{transform:translate3d(170px,40px,0) scale(1.12);opacity:.8}}
@keyframes amb-3{0%{transform:translate3d(0,0,0) scale(1.05);opacity:.75}100%{transform:translate3d(-190px,30px,0) scale(.95);opacity:.5}}

/* Static perspective floor near the bottom of the hero */
.hero-bg .floor{position:absolute;left:-40%;right:-40%;top:74%;height:420px;transform:perspective(560px) rotateX(66deg);transform-origin:top center;
 background-image:linear-gradient(color-mix(in srgb,var(--amb-glow) 30%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--amb-glow) 30%,transparent) 1px,transparent 1px);
 background-size:64px 64px;background-position:center top;opacity:.22;
 -webkit-mask-image:radial-gradient(50% 90% at 50% 0,#000 10%,transparent 75%);mask-image:radial-gradient(50% 90% at 50% 0,#000 10%,transparent 75%)}
.hero-bg .horizon{position:absolute;left:18%;right:18%;top:74%;height:1px;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--amb-hi) 55%,transparent),transparent);opacity:.45}

/* Particle canvas (drawn by bg.js) */
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
 -webkit-mask-image:linear-gradient(transparent 0,#000 12%,#000 62%,transparent 92%);mask-image:linear-gradient(transparent 0,#000 12%,#000 62%,transparent 92%)}

@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hero-bg .l1{opacity:.25}:root:not([data-theme="dark"]) .hero-bg .l2,:root:not([data-theme="dark"]) .hero-bg .l3{opacity:.45}:root:not([data-theme="dark"]) .page-bg .low{opacity:.15}}
@media (max-width:760px){
 .hero-bg{height:640px}
 .hero-bg .l1{width:720px;height:520px;margin-left:-360px}
 .hero-bg .l2{width:420px;height:320px;margin-left:-260px}
 .hero-bg .l3{width:300px;height:220px;margin-left:0}
 .hero-bg .floor,.hero-bg .horizon{top:80%}
 .page-bg .low{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-bg .light,.page-bg .low{animation:none}}

/* Hero background ends exactly at the bottom of the hero (height set by bg.js) */
.hero-bg{height:var(--hero-bg-h,620px)}
.hero-bg .floor,.hero-bg .horizon{top:auto;bottom:50px}
.hero-bg .floor{bottom:auto;top:calc(var(--hero-bg-h,620px) - 50px)}
@media (max-width:760px){.hero-bg{height:var(--hero-bg-h,640px)}.hero-bg .floor{top:calc(var(--hero-bg-h,640px) - 44px)}.hero-bg .horizon{bottom:44px}}
.hn .only-m{display:none}
@media (max-width:900px){.hn .only-m{display:inline-flex}}
@media (max-width:760px){.hr .gd-btn{display:none}}
/* No grids anywhere */
.page-bg .grid,.pdh-bg::before,.card .art::before,#top::before,.hero-bg .floor{display:none!important}
/* Header: no solid bar — floats transparent over the hero, turns into glass once the page scrolls */
.hd .bar{background:transparent;border-color:transparent}
.hd.sc .bar,.hd:has(.hn.open) .bar{background:color-mix(in srgb,var(--hbg) 64%,transparent);border-color:color-mix(in srgb,var(--line) 75%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}

/* Expanding header: spread edge-to-edge at the very top, contract into the centered pill on scroll */
.hd{transition:padding-left .5s cubic-bezier(.33,.1,.2,1),padding-right .5s cubic-bezier(.33,.1,.2,1)}
.hd .bar{transition:max-width .55s cubic-bezier(.33,.1,.2,1),padding .5s cubic-bezier(.33,.1,.2,1),height .45s cubic-bezier(.33,.1,.2,1),border-radius .45s ease,background-color .3s ease,border-color .3s ease}
.hd:not(.sc){padding-left:0;padding-right:0}
.hd:not(.sc) .bar{max-width:100%;height:66px;padding:0 clamp(18px,4.5vw,68px);border-radius:0;background:transparent;border-color:transparent}
.hd:not(.sc) .logo{font-size:1rem}
.hd:not(.sc) .lg-img{height:26px}
.hd.sc .bar{max-width:1180px;height:48px;padding:0 7px 0 14px;border-radius:14px}
@media (prefers-reduced-motion:reduce){.hd,.hd .bar{transition:none}}
/* Header overlays the page so the hero light reaches the very top (no dark strip behind the header) */
.hd{margin-bottom:calc(-1 * var(--hd-h,60px))}
.hd ~ main{padding-top:var(--hd-h,60px)}
.hd ~ .ann:not([hidden]){margin-top:var(--hd-h,60px)}
.hd ~ .ann:not([hidden]) ~ main{padding-top:0}
/* ---- Product status list: card rows ---- */
:root{--st-card:#FFFFFF;--st-line:#E2E8F0;--st-ic:#F1F5F9;--st-text:#0F172A;--st-muted:#64748B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--st-card:#050D1D;--st-line:#19263A;--st-ic:#101B2C;--st-text:#F1F5F9;--st-muted:#77869D}}
:root[data-theme="dark"]{--st-card:#050D1D;--st-line:#19263A;--st-ic:#101B2C;--st-text:#F1F5F9;--st-muted:#77869D}
.stl{display:flex;flex-direction:column;gap:10px;border:0;border-radius:0;background:none;overflow:visible}
.stc{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;padding:14px 20px;background:var(--st-card);border:1px solid var(--st-line);border-radius:13px;color:var(--st-text);text-decoration:none;font-family:var(--font-sans,"Inter",system-ui,sans-serif);transition:border-color .2s ease,background-color .2s ease}
a.stc:hover{border-color:color-mix(in srgb,var(--st-line) 60%,var(--st-muted));background:color-mix(in srgb,var(--st-card) 88%,var(--st-ic))}
.sc-empty{color:var(--st-muted);font-size:13px}
.sc-l{display:flex;align-items:center;gap:14px;min-width:0}
.sc-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:var(--st-ic);border:1px solid var(--st-line);color:color-mix(in srgb,var(--st-text) 82%,var(--st-muted))}
.sc-ic svg{width:17px;height:17px}
.sc-t{min-width:0}
.sc-n{display:block;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-u{display:block;margin-top:3px;font-size:12px;line-height:1.3;color:var(--st-muted)}
.sc-r{display:flex;align-items:center;gap:18px;flex:none}
.sc-m{text-align:right}
.sc-k{display:block;font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--st-muted)}
.sc-d{display:block;margin-top:4px;font-size:11.5px;line-height:1.3;color:color-mix(in srgb,var(--st-text) 78%,var(--st-muted));white-space:nowrap}
.sc-div{width:1px;height:30px;background:var(--st-line)}
.sc-s{--c:#8A97AB;display:inline-flex;align-items:center;gap:9px;min-width:112px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.sc-s i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent),0 0 10px color-mix(in srgb,var(--c) 50%,transparent)}
.sc-s.undetected{--c:#20D6A0}.sc-s.testing{--c:var(--accent)}.sc-s.updating{--c:#F2B544}.sc-s.detected,.sc-s.offline{--c:#F26D6D}.sc-s.unknown{--c:#8A97AB}
@media (max-width:640px){.stc{gap:12px;padding:12px 14px;min-height:66px}.sc-l{gap:12px}.sc-ic{width:34px;height:34px;border-radius:9px}.sc-ic svg{width:15px;height:15px}.sc-r{gap:12px}.sc-m,.sc-div{display:none}.sc-s{min-width:0}}
/* Live Discord preview: the widget bot's channel view fills the Discord window */
.dw.live{display:block;height:540px;padding:0;background:var(--surface)}
.dw.live::after{display:none}
.dw.live iframe{display:block;width:100%;height:100%;border:0;color-scheme:normal}
/* wider window so the bot shows its channel list next to the messages (needs ~600px) */
.dsc.live{grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:48px}
@media (max-width:860px){.dsc.live{grid-template-columns:1fr}.dw.live{height:520px}}
/* Product cards: only the "View product" button is clickable (no stretched link over the whole card) */
.card .btn::after{content:none!important}
.card:hover{transform:none;border-color:var(--line);box-shadow:none}
.card:hover .art::after{transform:none}.card:hover .art-logo{transform:translate(-50%,-50%)}
.card:hover .btn i{transform:none}
.card:has(.btn:hover){border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card .btn:hover i,.card .btn:focus-visible i{transform:translateX(3px)}
/* ---- Discord community section (WidgetBot) ---- */
.dsc.wb{grid-template-columns:minmax(0,.7fr) minmax(0,1.65fr);gap:44px;align-items:center}
.dw.wb{--wb-side:color-mix(in srgb,var(--surface) 62%,var(--bg));display:grid;grid-template-columns:240px minmax(0,1fr);height:640px;padding:0;background:var(--surface);border-radius:16px;box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.dw.wb::after{display:none}
/* Sidebar */
.wb-side{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--wb-side);border-right:1px solid var(--line)}
.wb-srv{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-bottom:1px solid var(--line);flex:none;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.wb-srv b{font-size:.92rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-ic{width:28px;height:28px;border-radius:9px;object-fit:contain;background:var(--surface2);padding:4px;flex:none}
.wb-nav{flex:1;min-height:0;overflow-y:auto;padding:8px 8px 12px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.wb-grp+.wb-grp{margin-top:10px}
.wb-cat{display:flex;align-items:center;gap:3px;width:100%;padding:10px 6px 5px 2px;border:0;background:none;color:var(--muted);font-family:var(--font-sans,"Inter",sans-serif);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .15s}
.wb-cat:hover{color:var(--text)}
.wb-cat svg{width:12px;height:12px;flex:none;transition:transform .18s ease}
.wb-cat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-grp.closed .wb-cat svg{transform:rotate(-90deg)}
.wb-grp.closed .wb-ch:not(.on){display:none}
.wb-ch{position:relative;display:flex;align-items:center;gap:7px;width:100%;min-height:34px;margin:1px 0;padding:6px 8px;border:0;border-radius:7px;background:none;color:var(--muted);font:inherit;font-size:.9rem;font-weight:500;text-align:left;cursor:pointer;transition:background-color .12s,color .12s}
.wb-ch svg{width:18px;height:18px;flex:none;opacity:.65}
.wb-ch span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-ch:hover{background:color-mix(in srgb,var(--surface2) 75%,transparent);color:var(--text)}
.wb-ch.on{background:color-mix(in srgb,var(--surface2) 100%,var(--accent) 10%);color:var(--text)}
.wb-ch.on::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.wb-ch.on svg{color:var(--accent);opacity:1}
.wb-ch:focus-visible,.wb-cat:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:7px}
.wb-join{margin:10px 12px 12px;justify-content:center;flex:none}
/* Message area */
.wb-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.wb-bar{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px;border-bottom:1px solid var(--line);flex:none;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.wb-bar-ic{display:grid;color:var(--muted)}
.wb-bar-ic svg{width:20px;height:20px}
.wb-bar b{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;padding:3px 9px;border-radius:99px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#2fbf8a;background:color-mix(in srgb,#2fbf8a 12%,transparent)}
.wb-live[hidden]{display:none}
.wb-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.wb-stage{position:relative;flex:1;min-height:0}
.wb-stage widgetbot{display:block;width:100%;height:100%}
.wb-stage iframe{display:block;width:100%;height:100%;border:0}
.wb-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--muted);font-size:.9rem;background:var(--surface)}
.wb-state b{color:var(--text);font-weight:600}
.wb-state-row{display:flex;gap:8px;margin-top:8px}
.wb-spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:wbspin .8s linear infinite}
@keyframes wbspin{to{transform:rotate(360deg)}}
@media (max-width:1000px){.dsc.wb{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){
 .dw.wb{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:660px}
 .wb-side{border-right:0;border-bottom:1px solid var(--line)}
 .wb-join,.wb-cat{display:none}
 .wb-srv{height:44px}
 .wb-side{display:flex;flex-direction:column}
 .wb-nav{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:10px;scrollbar-width:none}
 .wb-nav::-webkit-scrollbar{display:none}
 .wb-grp,.wb-list{display:contents}
 .wb-grp.closed .wb-ch:not(.on){display:flex}
 .wb-ch{width:auto;flex:none;margin:0;padding:6px 12px 6px 9px;border:1px solid var(--line);border-radius:99px}
 .wb-ch.on{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
 .wb-ch.on::before{display:none}
 .wb-bar{height:46px}
}
@media (prefers-reduced-motion:reduce){.wb-ch,.wb-cat svg{transition:none}.wb-spin{animation-duration:2.4s}.wb-nav{scroll-behavior:auto}}

/* ---- Guest checkout + keys on the order page ---- */
.gst label{display:block;font-size:.85rem;font-weight:600;margin:0 0 7px}
.gst input{width:100%;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:.95rem;transition:border-color .15s,box-shadow .15s}
.gst input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.gst .err{margin:6px 0 0}
.gst-note{margin:10px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.gst-note a,.pdesc.sm a{color:var(--accent)}
.pdesc.sm{font-size:.86rem;margin-top:16px}
.sr.oi span:first-child{display:flex;flex-direction:column;gap:8px;min-width:0}
.okey{display:flex;align-items:center;gap:8px;max-width:100%}
.okey code{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem;color:var(--text);overflow-wrap:anywhere}
.okey.wait{color:#e0a94a;font-size:.82rem}

/* Hero headline: "Dominate every" + a word that switches between Wipe and Lobby */
.hero h1 .rw{display:grid;justify-items:center;margin-top:.02em}
.rw-w{grid-area:1/1;padding:0 .04em .08em;background:linear-gradient(100deg,var(--accent) 10%,color-mix(in srgb,var(--accent) 45%,#fff) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease}
.rw-w.on{opacity:1;transform:none;filter:none}
.rw-w.out{opacity:0;transform:translateY(-.45em);filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.rw-w,.rw-w.out{transform:none;filter:none;transition:opacity .3s linear}}

/* ---- Payment method picker + PayPal instructions ---- */
.pmeth{display:grid;gap:8px}
.pmo{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s}
.pmo:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.pmo[aria-checked="true"]{border-color:color-mix(in srgb,var(--accent) 70%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
.pmo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pmo-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--surface2,var(--surface));color:var(--accent);flex:none}
.pmo-ic svg{width:20px;height:20px}
.pmo-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pmo-t b{font-size:.92rem;font-weight:600}
.pmo-t small{color:var(--muted);font-size:.78rem}
.pmo-r{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;transition:border-color .15s,box-shadow .15s}
.pmo[aria-checked="true"] .pmo-r{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 9px var(--accent)}
.pm-note{margin:10px 0 0;font-size:.82rem}
.ppbox{margin:0 0 18px;padding:18px;border:1px solid color-mix(in srgb,#2a7de1 45%,var(--line));border-radius:14px;background:color-mix(in srgb,#2a7de1 6%,var(--surface))}
.ppbox h2{margin:0 0 12px;font-size:1.05rem}
.ppsteps{margin:0;padding:0;list-style:none;counter-reset:pp;display:grid;gap:10px}
.ppsteps li{counter-increment:pp;display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:start}
.ppsteps li::before{content:counter(pp);grid-row:1/3;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:color-mix(in srgb,#2a7de1 22%,transparent);color:#9cc8ff}
.ppsteps span{color:var(--muted);font-size:.84rem}
.ppv{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.ppv b{font-size:1rem;overflow-wrap:anywhere}
.ppdone{margin:12px 0 0;color:#3ccf9a;font-size:.9rem}
#ppSent{margin-top:12px}

.ppbox{text-align:left}
.ppbox h2{text-align:left}
.ppsteps li{grid-template-columns:24px minmax(0,1fr);row-gap:2px}
.ppsteps li>span,.ppsteps li>.ppv{grid-column:2}
.ppsteps li::before{grid-row:1/3;grid-column:1}
.ppbox .pdesc.sm{text-align:left}
#ppSent{display:inline-flex}

/* ---- Scroll reveal (see reveal.js) ---- */
html.rv-on .zr{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms),filter .75s ease var(--rv-d,0ms)}
html.rv-on .zr.zr-in{opacity:1;transform:none;filter:none}

/* ---- FAQ: one rounded box, rows with hairlines, + on the right ---- */
.faqbox{margin-top:22px;padding:6px 24px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.faqbox details{border-bottom:1px solid var(--line);padding:0}
.faqbox details:last-child{border-bottom:0}
.faqbox summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.faqbox summary i{display:none}
.faqbox summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;color:var(--muted);transition:transform .25s ease,color .2s}
.faqbox summary:hover::after{color:var(--text)}
.faqbox details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faqbox summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.faqbox details p{margin:-6px 0 0;padding:0 28px 20px 0;color:var(--muted);line-height:1.6}
.faqbox details[open] p{animation:faqin .3s ease}
@keyframes faqin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:560px){.faqbox{padding:2px 16px}.faqbox summary{padding:16px 0;font-size:.95rem}}
@media (prefers-reduced-motion:reduce){.faqbox summary::after{transition:none}.faqbox details[open] p{animation:none}}

/* ---------- Seasonal themes (Admin -> Website -> Seasonal theme), kept subtle ---------- */
:root[data-season="halloween"]{--accent:#e8701a;--accent-hover:#d4600c;--on-accent:#1a0b00;--amb-glow:#ff7a1a;--pt-rgb:230,130,60}
:root[data-season="christmas"]{--accent:#d63848;--accent-hover:#bf2a3a;--on-accent:#fff;--amb-glow:#e23d4b;--pt-rgb:120,150,170}
:root[data-season="newyear"]{--accent:#c99a1e;--accent-hover:#b0850f;--on-accent:#1d1400;--amb-glow:#f5c451;--pt-rgb:200,160,60}
@media (prefers-color-scheme:dark){
 :root[data-season="halloween"]:not([data-theme="light"]){--accent:#ff9a3c;--accent-hover:#ff8420;--on-accent:#1a0b00;--pt-rgb:255,170,90}
 :root[data-season="christmas"]:not([data-theme="light"]){--accent:#ff6b77;--accent-hover:#ff4f5e;--on-accent:#1f0306;--pt-rgb:255,255,255}
 :root[data-season="newyear"]:not([data-theme="light"]){--accent:#f5c451;--accent-hover:#e8b43a;--on-accent:#1d1400;--pt-rgb:255,225,150}
}
:root[data-season="halloween"][data-theme="dark"]{--accent:#ff9a3c;--accent-hover:#ff8420;--on-accent:#1a0b00;--pt-rgb:255,170,90}
:root[data-season="christmas"][data-theme="dark"]{--accent:#ff6b77;--accent-hover:#ff4f5e;--on-accent:#1f0306;--pt-rgb:255,255,255}
:root[data-season="newyear"][data-theme="dark"]{--accent:#f5c451;--accent-hover:#e8b43a;--on-accent:#1d1400;--pt-rgb:255,225,150}

.hd .logo{position:relative}
.season-hat{position:absolute;left:14px;top:-10px;width:19px;height:16px;transform:rotate(-14deg);pointer-events:none}
.season-hat svg{width:100%;height:100%;display:block}
:root[data-season="christmas"] .season-hat{left:12px;top:-11px}

.season-badge{display:inline-flex;align-items:center;gap:8px;margin:0 auto 16px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);
 background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--muted);font-size:.78rem;font-weight:500;letter-spacing:.02em}
.hero .season-badge{max-width:none}
.season-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.sb-cd{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;padding-left:8px;border-left:1px solid var(--line)}

.season-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
@media (prefers-reduced-motion:reduce){.season-fx{display:none}}

/* ---------- Screenshot gallery (product page, above the features) ---------- */
/* Always 4 per row (2 on phones); fewer are centred at the same size. */
.fx.shots{padding-bottom:0}
.fx.shots .fx-h{margin-bottom:32px}
.shot-grid{--shot-gap:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--shot-gap)}
.shot{position:relative;display:block;flex:0 0 calc((100% - 3 * var(--shot-gap)) / 4);padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:zoom-in;aspect-ratio:16/9;transition:border-color .2s}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shot:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.shot:hover img{transform:scale(1.04)}
.shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shot-zoom{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;background:rgba(5,8,14,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.shot-zoom svg{width:15px;height:15px}
.shot:hover .shot-zoom,.shot:focus-visible .shot-zoom{opacity:1;transform:none}
@media (max-width:760px){
 .shot-grid{--shot-gap:10px}
 .shot{flex-basis:calc((100% - var(--shot-gap)) / 2)}
 .shot-zoom{opacity:1;transform:none;width:26px;height:26px}
}

/* Full-screen viewer */
.lb{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(3,5,10,.92);color:#fff}
.lb::backdrop{background:transparent}
.lb[open]{display:grid;place-items:center;animation:lb-in .2s ease}
@keyframes lb-in{from{opacity:0}}
.lb-fig{margin:0;width:100%;height:100%;display:grid;place-items:center;padding:64px 72px 56px;box-sizing:border-box}
.lb-fig img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:0;transform:scale(.985);transition:opacity .22s,transform .22s}
.lb-fig img.in{opacity:1;transform:none}
.lb-count{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.78rem;letter-spacing:.08em;color:rgba(255,255,255,.7)}
.lb-btn{position:absolute;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.16)}
.lb-btn svg{width:20px;height:20px}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
html.lb-open{overflow:hidden}
@media (max-width:560px){.lb-fig{padding:60px 10px 50px}.lb-prev,.lb-next{top:auto;bottom:8px;transform:none}.lb-prev{left:10px}.lb-next{right:10px}}
@media (prefers-reduced-motion:reduce){.lb[open],.lb-fig img,.shot img{animation:none;transition:none}}

/* ---- Guide blocks: callouts, buttons, images, video ---- */
.gd-sec p{line-height:1.65;margin:0 0 12px}
.g-cal{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:12px;margin:0 0 14px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.g-cal p{margin:0;color:var(--text)}
.g-cal-i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;line-height:1;margin-top:1px}
.g-cal-info{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.g-cal-info .g-cal-i{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.g-cal-warning{border-color:color-mix(in srgb,#e0a94a 45%,var(--line));background:color-mix(in srgb,#e0a94a 10%,transparent)}
.g-cal-warning .g-cal-i{background:color-mix(in srgb,#e0a94a 26%,transparent);color:#e0a94a}
.g-cal-tip{border-color:color-mix(in srgb,#3ccf9a 42%,var(--line));background:color-mix(in srgb,#3ccf9a 9%,transparent)}
.g-cal-tip .g-cal-i{background:color-mix(in srgb,#3ccf9a 24%,transparent);color:#2fbf8a}
.g-btnrow{margin:0 0 16px}
.g-dl{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:11px;font-weight:600;text-decoration:none;background:var(--accent);color:var(--on-accent);border:1px solid transparent;transition:transform .12s,filter .12s}
.g-dl:hover{filter:brightness(1.07);transform:translateY(-1px)}
.g-dl.sec{background:transparent;color:var(--text);border-color:var(--line)}
.g-dl.sec:hover{border-color:var(--accent);color:var(--accent)}
.g-dl-i{width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--dl-mask) center/contain no-repeat;mask:var(--dl-mask) center/contain no-repeat;--dl-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V4a1 1 0 0 1 1-1Zm-7 15a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E")}
.g-fig{margin:0 0 16px}
.g-fig img{width:100%;max-width:640px;border-radius:12px;border:1px solid var(--line);display:block}
.g-fig figcaption{margin-top:7px;font-size:.84rem;color:var(--muted)}
.g-vid{position:relative;width:100%;max-width:680px;aspect-ratio:16/9;margin:0 0 16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000}
.g-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Guides "in progress" (locked) ---- */
.gc-progress{grid-column:1/-1;text-align:center;max-width:460px;margin:30px auto;padding:36px 28px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.gc-progress h3{font-size:1.3rem;margin:16px 0 8px;letter-spacing:-.02em}
.gc-progress p{color:var(--muted);margin:0 0 20px;line-height:1.6}
.gcp-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:#e0a94a;background:color-mix(in srgb,#e0a94a 14%,transparent);border:1px solid color-mix(in srgb,#e0a94a 40%,var(--line))}
.gcp-badge i{width:8px;height:8px;border-radius:50%;background:#e0a94a;box-shadow:0 0 0 0 color-mix(in srgb,#e0a94a 60%,transparent);animation:gcpPulse 1.8s infinite}
@keyframes gcpPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,#e0a94a 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hb .nav-wip,.top nav a .nav-wip{display:inline-block;margin-left:5px;font-size:.62rem;font-weight:700;letter-spacing:.04em;color:#e0a94a;vertical-align:1px;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.gcp-badge i{animation:none}}