:root{--bg:#F6F8FC;--surface:#fff;--ink:#1A2140;--mute:#5B6485;--line:#DDE3F0;--tag:#FFE45C;--drop:#F0445B;--ok:#12A87F;--blue:#3D5AFE;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12162B;--surface:#1B2140;--ink:#EEF1FF;--mute:#A3ACCB;--line:#2C3560;--blue:#8496FF}}
:root[data-theme="dark"]{--bg:#12162B;--surface:#1B2140;--ink:#EEF1FF;--mute:#A3ACCB;--line:#2C3560;--blue:#8496FF}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.6 "Instrument Sans",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;line-height:1.05;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:800}
h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:800}
h3{font-size:1.35rem;font-weight:500}
p{margin:0}a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:9px;font:800 1.3rem "Bricolage Grotesque",sans-serif;text-decoration:none}
.logo i{width:30px;height:22px;background:var(--tag);border-radius:4px 9px 9px 4px;position:relative;border:2px solid var(--ink)}
.logo i:after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.links{display:flex;gap:6px;align-items:center}
.links a{text-decoration:none;padding:8px 14px;border-radius:99px;font-weight:600;font-size:.95rem}
.links a:hover,.links a.on{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:14px 26px;border-radius:99px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:1rem;font-family:inherit;transition:transform .2s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn.alt{background:var(--tag);color:#1A2140}
@media(max-width:640px){.links a.hide{display:none}}
/* hero */
.hero{padding:64px 0 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero p.lead{font-size:1.2rem;color:var(--mute);max-width:34em;margin:22px 0 30px}
.hl{background:linear-gradient(transparent 62%,var(--tag) 62%);padding:0 .08em}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.shelf{position:relative;padding:26px 20px 34px}
.shelf:after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--ink);border-radius:4px;box-shadow:0 8px 0 -2px var(--line)}
.prod{font-weight:600;color:var(--mute);margin-bottom:14px;display:flex;justify-content:space-between}
.live{color:var(--ok);display:flex;align-items:center;gap:6px;font-size:.9rem}
.live:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent;box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 25%,transparent)}}
.tag{background:var(--surface);border:2px solid var(--ink);border-radius:8px 22px 22px 8px;padding:14px 18px 14px 26px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:relative;transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .4s}
.tag:before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;border:2px solid var(--ink)}
.tag b{font:800 1.7rem "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums}
.tag small{display:block;color:var(--mute);font-size:.82rem;line-height:1.2}
.tag.you{background:var(--tag);color:#1A2140}.tag.you small{color:#4a4520}
.tag.hit{transform:rotate(-2deg) translateX(-8px);background:color-mix(in srgb,var(--drop) 14%,var(--surface))}
.chip{font-size:.78rem;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--drop);color:#fff;margin-left:8px;opacity:0;transition:opacity .3s}
.tag.hit .chip{opacity:1}
.spark{width:100%;height:70px;margin-top:6px}
.spark path{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;background:var(--surface);padding:14px 0;margin:30px 0}
.ticker div{display:flex;gap:44px;width:max-content;animation:slide 38s linear infinite;font-weight:600}
.ticker span{white-space:nowrap}.ticker em{font-style:normal;color:var(--drop)}.ticker u{text-decoration:none;color:var(--ok)}
@keyframes slide{to{transform:translateX(-50%)}}
/* sections */
section{padding:56px 0}
.head{max-width:640px;margin-bottom:38px}.head p{color:var(--mute);margin-top:14px}
.feat{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.f{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:30px;overflow:hidden;position:relative}
.f p{color:var(--mute);margin-top:10px}
.f:nth-child(1){grid-column:span 4;border-radius:26px 90px 26px 26px}
.f:nth-child(2){grid-column:span 2;background:var(--tag);color:#1A2140;border-color:transparent;transform:rotate(1.2deg)}
.f:nth-child(2) p{color:#4a4520}
.f:nth-child(3){grid-column:span 6;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;border-radius:26px 26px 26px 90px}
.big{font:800 3rem "Bricolage Grotesque",sans-serif;color:var(--drop)}
.stock{display:flex;gap:8px;flex-wrap:wrap}
.stock span{padding:8px 14px;border-radius:99px;font-weight:600;font-size:.9rem;border:1px solid var(--line);animation:blink 4s infinite}
.stock .in{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.stock .low{background:color-mix(in srgb,#F5A623 22%,transparent);color:#B0700A}
.stock .out{background:color-mix(in srgb,var(--drop) 16%,transparent);color:var(--drop)}
.stock span:nth-child(2n){animation-delay:1s}.stock span:nth-child(3n){animation-delay:2.3s}
@keyframes blink{45%,55%{transform:translateY(-4px)}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;position:relative}
.steps div{padding:0 26px 0 0}
.steps div:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--bg);font:800 1.2rem "Bricolage Grotesque",sans-serif;margin-bottom:16px;box-shadow:0 0 0 8px var(--bg)}
.steps:before{content:"";position:absolute;left:0;right:0;top:22px;border-top:2px dashed var(--line);z-index:-1}
.steps p{color:var(--mute);margin-top:8px}
.band{background:var(--ink);color:var(--bg);border-radius:34px;padding:54px 34px;text-align:center}
.band p{color:inherit;opacity:.8;margin:14px auto 26px;max-width:32em}
.band .btn{background:var(--tag);color:#1A2140}
/* about */
.abt{padding:64px 0 20px;max-width:820px}
.abt .lead{font-size:1.25rem;color:var(--mute);margin-top:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vals div{border-left:5px solid var(--tag);background:var(--surface);padding:20px 22px;border-radius:6px 20px 20px 6px}
.vals p,.tl p{color:var(--mute);margin-top:6px}
.tl{border-left:2px dashed var(--line);margin-left:10px;padding-left:28px}
.tl div{position:relative;margin-bottom:30px}
.tl div:before{content:"";position:absolute;left:-38px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--tag);border:3px solid var(--ink)}
.tl b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.2rem}
form{display:grid;gap:12px;max-width:520px;margin:0 auto;text-align:left}
input,textarea{font:inherit;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
footer{border-top:1px solid var(--line);padding:34px 0 40px;color:var(--mute);font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
main{animation:in .5s}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
@media(max-width:860px){.hero,.split{grid-template-columns:1fr}.f:nth-child(n){grid-column:span 6}.f:nth-child(3){grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:26px}.steps:before{display:none}.vals{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.spark path{stroke-dashoffset:0}}