@font-face { font-family:'Satoshi'; src:url('/fonts/Satoshi-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/fonts/Satoshi-Medium.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/fonts/Satoshi-Bold.woff') format('woff'); font-weight:700; font-display:swap; }

:root {
  --n50:#f5f5f6; --n100:#ebebec; --n200:#dbdcdd; --n300:#c4c5c7; --n400:#a1a2a4; --n500:#84827e;
  --n600:#656360; --n700:#4d4a44; --n800:#32302c; --n900:#1c1b18; --n950:#0e0d0b;
  --green500:#22c55e; --green600:#16a34a; --green700:#15803d; --green900:#14532d;
  --amber600:#d97706; --amber50:#fffbeb;
  --font-sans:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --nav-h:64px;
  --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px;
  --space-40:40px; --space-48:48px; --space-64:64px; --space-96:96px;
  color-scheme:light;
}

*, *::before, *::after { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--n900); font:400 16px/1.65 var(--font-sans); }
h1, h2, h3, h4, p, figure, blockquote { margin:0; }
img, svg { max-width:100%; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-underline-offset:4px; }
button { font:inherit; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.display { font-size:clamp(32px,5vw,56px); line-height:1.08; font-weight:600; letter-spacing:-.04em; color:var(--n900); }
.h2 { font-size:clamp(30px,4vw,36px); line-height:1.25; font-weight:600; letter-spacing:-.04em; }
.h3 { font-size:24px; line-height:1.3; font-weight:600; letter-spacing:-.02em; }
.h4 { font-size:20px; line-height:1.35; font-weight:600; }
.sub { font-size:20px; line-height:1.5; font-weight:400; color:var(--n600); }
.sub-sm { font-size:16px; line-height:1.65; font-weight:400; }
.muted { font-size:14px; line-height:1.5; color:var(--n500); }
.eyebrow { font:400 11px/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.2em; color:var(--n500); }
.mono { font-family:var(--font-mono); font-size:14px; }
.stat { font-size:clamp(40px,5vw,56px); line-height:1; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.stat.stat-sm { font-size:clamp(28px,3vw,40px); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; font:600 14px/1 var(--font-sans); border-radius:8px; border:1px solid transparent; transition:background-color .15s,border-color .15s,color .15s; cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--green600); color:#fff; border-color:var(--green700); }
.btn-primary:hover { background:var(--green700); border-color:var(--green900); }
.btn-secondary { background:#fff; color:var(--n700); border-color:var(--n200); }
.btn-secondary:hover { background:var(--n50); border-color:var(--n300); color:var(--n900); }
.btn-cta { padding:8px 16px; }
.btn:focus-visible, :focus-visible { outline:2px solid var(--n900); outline-offset:2px; }
.logo-mono img { filter:grayscale(1) brightness(0); opacity:.7; }
.logo-mono:hover img { opacity:.9; }
.tile { width:48px; height:48px; flex:none; border:1px solid var(--n200); border-radius:12px; background:var(--n50); display:grid; place-items:center; padding:8px; }
.tile img { width:100%; height:100%; object-fit:contain; border-radius:8px; }
.dot { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:var(--green500); }
.tag { display:inline-block; font:500 11px/1 var(--font-sans); padding:4px 8px; border-radius:999px; border:1px solid var(--n200); color:var(--n600); background:#fff; }
.tag-ok { color:var(--green700); border-color:#bbf7d0; background:#f0fdf4; }
.tag-hold { color:var(--amber600); border-color:#fde68a; background:var(--amber50); }
.art { border:1px solid var(--n200); border-radius:16px; overflow:hidden; background:var(--n50); aspect-ratio:16/9; position:relative; }
.art picture { display:block; width:100%; height:100%; }
.art img { width:100%; height:100%; object-fit:cover; display:block; }