:root{--bg:#0a0f16;--bg2:#0f1620;--panel:#131c28;--line:#243244;--ink:#eaf0f6;--muted:#a9b8c7;--amber:#ffb02e;--amber-ink:#1a1100;--link:#8fd8f0;--r:10px;
--body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;--head:"Saira Semi Condensed","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1.125rem/1.75 var(--body)}
img{max-width:100%;height:auto}
a{color:var(--link)}a:hover{color:#fff}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0 0 .6em;letter-spacing:.005em}
h1{font-size:clamp(2.3rem,5.5vw,3.8rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.5vw,2.3rem);font-weight:600}
h3{font-size:1.4rem;font-weight:600}
p{margin:0 0 1.1em;max-width:68ch}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--amber);color:var(--amber-ink);padding:8px 14px;z-index:99}
/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(10,15,22,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;min-height:68px}
.logo{font:italic 700 1.9rem var(--head);color:var(--ink);text-decoration:none;margin-right:auto}
.logo b{color:var(--amber)}
.logo small{display:block;font:400 .7rem var(--body);font-style:normal;color:var(--muted);margin-top:-4px}
.nav{display:flex;gap:6px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:8px;font-weight:600}
.nav a:hover,.nav a[aria-current]{background:var(--panel)}
.nav .basket{border:1px solid var(--amber);color:var(--amber)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 14px;font:inherit;font-weight:600}
@media(max-width:820px){.menu-btn{display:block}
.nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg2);padding:12px 20px 20px;border-bottom:1px solid var(--line)}
.nav.open{display:flex}.nav a{padding:14px}}
/* buttons */
.btn{display:inline-block;padding:14px 26px;border-radius:var(--r);font-weight:700;text-decoration:none;border:2px solid var(--amber);color:var(--amber);margin:0 12px 12px 0}
.btn.primary{background:var(--amber);color:var(--amber-ink)}
.btn.primary:hover{background:#ffc15c;color:var(--amber-ink)}.btn:hover{background:rgba(255,176,46,.12)}
/* hero */
.hero{padding:72px 0 56px;background:radial-gradient(900px 420px at 80% 20%,rgba(255,176,46,.09),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero p.lead{font-size:1.25rem;color:var(--muted)}
.rig-box{perspective:700px;aspect-ratio:1;max-width:420px;width:100%;margin-inline:auto;position:relative;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle,var(--panel),var(--bg2) 70%)}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg))}
.rig svg{width:100%;height:100%}
.readout{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);display:flex;gap:18px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 18px;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.readout b{color:var(--ink);display:inline-block;min-width:3.2ch;text-align:right}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:40px}.rig-box{max-width:300px}}
/* sections */
section{padding:64px 0}
.alt{background:var(--bg2);border-block:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.grid3{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.card h3{margin-bottom:.4em}.card p{margin:0;color:var(--muted)}
.feature{border-top:3px solid var(--amber)}
.product{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.product:hover{border-color:var(--amber);color:var(--ink)}
.price{font:700 1.7rem var(--head);color:var(--amber)}
.product span.more{margin-top:auto;color:var(--link);font-weight:700;text-decoration:underline}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:0}}
/* footer */
.site-footer{padding:48px 0 36px;border-top:1px solid var(--line);background:var(--bg2);font-size:1rem;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:20px}
.site-footer a{color:var(--ink)}
.site-footer p{max-width:none;margin:0 0 8px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}