:root{
  --bg:#0d1117; --panel:#161b22; --border:#2a313c; --text:#e6edf3; --muted:#9aa7b4;
  --accent:#3b82f6; --accent-ink:#fff; --radius:14px; --maxw:1040px;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f7f8fa; --panel:#fff; --border:#e5e8ec; --text:#0d1117; --muted:#586069; }
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.site-header,.site-footer{max-width:var(--maxw);margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand span{color:var(--accent)}
nav a{color:var(--muted);margin-left:20px;font-weight:600}
nav a:hover{color:var(--text)}
main{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hero{padding:72px 0 56px;max-width:720px}
.hero h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 18px}
.hero h1 em{color:var(--accent);font-style:normal}
.hero p{font-size:1.2rem;color:var(--muted);margin:0 0 28px}
.cta{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:12px 22px;border-radius:999px;font-weight:700}
.cta:hover{filter:brightness(1.07)}
.products{padding:24px 0 72px}
.products h2{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0;font-size:1.15rem;letter-spacing:-.01em}
.card .tag{color:var(--muted);margin:0}
.card .desc{color:var(--muted);font-size:.95rem;margin:0;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{font-weight:700}
.badge{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--border);padding:3px 8px;border-radius:999px}
.btn{background:var(--accent);color:var(--accent-ink);padding:9px 16px;border-radius:999px;font-weight:700;font-size:.9rem}
.btn[aria-disabled=true]{background:transparent;color:var(--muted);border:1px solid var(--border);pointer-events:none}
.site-footer{color:var(--muted);font-size:.9rem;border-top:1px solid var(--border);margin-top:40px}
.loading{color:var(--muted)}