:root{
  --bg: #0b0c10;
  --surface: #101218;
  --text: #e9eef3;
  --muted: #9aa7b3;
  --brand: #6ad1ff;
  --brand-2: #b884ff;
  --ok: #8cf5a6;
  --warn: #ffd479;
  --shadow: 0 3px 18px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(180deg, var(--bg), #0d1117 60%);
  color: var(--text);
}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(8px);
  background: rgba(13,17,23,.6); border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700}
.nav{display:flex; gap:14px}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--text)}
.theme-toggle{background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text); padding:6px 10px; border-radius:8px; cursor:pointer}
.container{max-width:1050px; margin:0 auto; padding:24px 18px}
.hero{padding:28px 0 10px}
.hero h1{font-size: clamp(28px, 4vw, 42px); margin: 8px 0 4px}
.hero p{color:var(--muted); margin:0 0 14px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; text-decoration:none; color:var(--text); border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.btn.primary{background: linear-gradient(180deg, #1a2a3a, #141c24); border-color: rgba(106,209,255,.4); box-shadow: var(--shadow)}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; margin:24px 0}
.card{display:block; padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); text-decoration:none; color:var(--text)}
.card h3{margin:4px 0 6px}
.card p{margin:0; color:var(--muted)}
.newsletter{margin:22px 0 12px}
.inline-form{display:flex; gap:10px; flex-wrap:wrap}
.inline-form input{flex:1; min-width:220px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.25); color:var(--text)}
.site-footer{padding:20px 18px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); text-align:center}
.muted{color:var(--muted)}
main p{line-height:1.6}
main h2{margin-top:20px}
.stack{display:grid; gap:12px}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns: repeat(auto-fit, minmax(260px,1fr));}
.box{padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.product{
  display:grid; grid-template-columns: 92px 1fr auto; gap:12px; align-items:center;
  border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; background:rgba(255,255,255,.02)
}
.product img{width:92px; height:92px; object-fit:cover; border-radius:10px; background:#1a1f27}
.product .meta{color:var(--muted); font-size:14px}
.faq summary{cursor:pointer; font-weight:600}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.15); font-size:12px; color:var(--muted)}
code,kbd{background:#111620; border:1px solid rgba(255,255,255,.08); padding:1px 6px; border-radius:6px}
table{width:100%; border-collapse:collapse}
td,th{border-bottom:1px solid rgba(255,255,255,.08); padding:8px 6px; text-align:left}

@media (prefers-color-scheme: light) {
  :root{ --bg: #f6fbff; --surface:#fff; --text:#0e141b; --muted:#4b5a68; --brand:#0079ff; --brand-2:#844aff }
  body{ background: linear-gradient(180deg, var(--bg), #f1f7ff 60%) }
  .site-header{ background: rgba(255,255,255,.75); border-bottom:1px solid rgba(0,0,0,.06) }
  .card, .btn, .inline-form input, .box, .product{ border-color: rgba(0,0,0,.1) }
}