:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569;
  --brand:#828b6c; --brand2:#8fbc8f;
  --card:#f8fafc; --ring:#c0d9af;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --fg:#e6e8ee; --muted:#a1a8b8;
         --brand:#828b6c; --brand2:#8fbc8f;
         --card:#0f172a; --ring:#556b2f;
  }
}
*{ box-sizing:border-box }
html,body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji'; background:var(--bg); color:var(--fg); }
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ width:min(1100px, 92%); margin-inline:auto }
header{ position:sticky; top:0; backdrop-filter:saturate(180%) blur(10px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid color-mix(in oklab, var(--fg) 10%, transparent); z-index:50 }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.brand img{ height:80px; width:auto; border-radius:12px }
.links{ display:flex; gap:18px; align-items:center; font-weight:600 }
main{ padding:40px 0 }
.hero{ display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:center }
.hero h1{ font-size: clamp(32px, 5vw, 48px); line-height:1.1; margin:0 0 12px }
.hero p{ color:var(--muted); font-size: clamp(16px, 2.2vw, 18px); margin:0 0 24px }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--brand) 40%, var(--fg) 8%); background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, var(--bg)), color-mix(in oklab, var(--brand2) 10%, var(--bg))); font-weight:600 }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.grid--aside {
  grid-template-columns: 2fr 1fr;
  align-items: start;
}
.card{ background:var(--card); border:1px solid color-mix(in oklab, var(--fg) 10%, transparent); border-radius:18px; padding:18px; box-shadow: 0 10px 24px rgba(2,6,23,.05) }
.muted{ color:var(--muted) }
.card ul {
  padding-left: 20px;
  margin-top: 16px;
  margin-bottom: 16px;
  color: var(--muted);
}
.card ul li {
  margin-bottom: 12px;
  padding-left: 4px;
}
.card ul li strong {
  display: block;
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 4px;
}
footer{ border-top:1px solid color-mix(in oklab, var(--fg) 10%, transparent); padding:28px 0; font-size:14px; color:var(--muted) }
@media (max-width: 900px){ .hero, .grid--aside { grid-template-columns:1fr } .grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .grid{ grid-template-columns:1fr } }