/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{max-width:100%;height:auto}
:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}

/* ===== Tokens ===== */
:root{
  --max-w:1100px; --pad:24px;
  --brand:#0ea5e9; --brand-600:#0284c7;
  --ink:#0f172a; --muted:#64748b;
  --bg:#ffffff; --bg-soft:#f8fafc;
  --border:#e5e7eb;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(2,8,23,.06),0 1px 1px rgba(2,8,23,.03);
  --shadow-md:0 8px 24px rgba(2,8,23,.10);
  --ring:0 0 0 3px rgba(14,165,233,.25);
}

/* ===== Base ===== */
body{
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}
.wrapper{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)}
.section{padding:64px 0}
.section--soft{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
h1{font-weight:700;letter-spacing:-.01em;font-size:clamp(28px,3.5vw,44px);margin:0 0 10px}
h2{font-weight:700;letter-spacing:-.005em;font-size:clamp(20px,2.2vw,26px);margin:24px 0 12px}
p{margin:0 0 12px}
.small{color:var(--muted);font-size:14px}

/* ===== Header/Nav ===== */
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(6px);
  background:rgba(255,255,255,.9);border-bottom:1px solid var(--border)}
.brand{font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:.2px}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:var(--ink);opacity:.85;padding:6px 8px;border-radius:6px;text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;background:var(--bg-soft)}

/* ===== Hero ===== */
.hero{padding:64px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hero p{color:var(--muted)}

/* ===== Buttons ===== */
a{color:var(--brand)}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--brand);color:#fff;
  font-weight:700;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .12s,background .12s}
.btn:hover{background:var(--brand-600);transform:translateY(-1px)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand);box-shadow:none}
.btn.ghost:hover{background:var(--brand);color:#fff}

/* ===== Grid & Cards ===== */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card strong{display:block;margin-bottom:6px}

/* ===== Footer (single system) ===== */
.footer{margin-top:72px;border-top:1px solid var(--border);background:#fff;color:#1f2937}
.footer .wrapper{padding:40px var(--pad)}
.footer__grid{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr;align-items:start}
.footer .brand{font-weight:800;color:var(--ink);text-decoration:none}
.footer .list{list-style:none;margin:8px 0 0;padding:0}
.footer .list li{margin:6px 0;line-height:1.6}
.footer .foot-h{font-weight:700;color:var(--ink)}
.footer a{text-decoration:none;color:inherit}
.footer a:hover{color:var(--brand)}
.footer__bar{border-top:1px solid var(--border);margin-top:24px;padding:16px 0 32px;text-align:center;font-size:14px;color:var(--muted)}

@media (max-width:800px){
  .footer__grid{grid-template-columns:1fr;text-align:center}
  .footer .brand{margin-bottom:6px}
}

/* ===== Dark mode ===== */
@media (prefers-color-scheme:dark){
  :root{--bg:#0b0f14;--bg-soft:#0f1522;--ink:#e5e7eb;--muted:#9aa3af;--border:#1f2937}
  .card{background:#0f1522;border-color:var(--border)}
  .header,.hero,.section--soft,.footer{border-color:var(--border)}
  .brand,.nav a{color:var(--ink)}
}/* ==== Footer (final unified) ==== */
.footer{margin-top:72px;border-top:1px solid var(--border);background:#fff;color:#1f2937}
.footer .wrapper{padding:40px var(--pad)}
.footer__grid{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr;align-items:start}
.footer .brand{font-weight:800;color:var(--ink);text-decoration:none}
.footer .list-plain{list-style:none;margin:8px 0 0;padding:0}
.footer .list-plain li{margin:6px 0;line-height:1.6}
.footer .foot-h{font-weight:700;color:var(--ink)}
.footer a{text-decoration:none;color:inherit}
.footer a:hover{color:var(--brand)}
.footer .legal{border-top:1px solid var(--border);margin-top:24px;padding:16px 0 32px;text-align:center;font-size:14px;color:var(--muted)}
@media (max-width:800px){
  .footer__grid{grid-template-columns:1fr;text-align:center}
  .footer .brand{margin-bottom:6px}
}