:root{
  --blue:#0072BB;
  --gray:#3C3F4A;
  --text:#121316;
  --muted:#5a5f6a;
  --bg:#ffffff;
  --soft:#f6f7f9;
  --border:#e7e9ee;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --max:1100px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);z-index:10}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none}
.brand__mark{width:28px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--blue),#2b94dd);position:relative;box-shadow:var(--shadow)}
.brand__mark:before,.brand__mark:after{content:"";position:absolute;bottom:-2px;width:14px;height:10px;border-radius:6px;background:rgba(60,63,74,.14)}
.brand__mark:before{left:-4px}
.brand__mark:after{right:-4px}
.brand__name{font-weight:800;letter-spacing:.2px;color:var(--gray)}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{font-weight:600;text-decoration:none;color:var(--gray);opacity:.9}
.nav a:hover{opacity:1;text-decoration:underline}
.header-cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--blue);color:white;text-decoration:none;font-weight:800;border:1px solid rgba(0,0,0,0);box-shadow:0 10px 18px rgba(0,114,187,.18)}
.btn:hover{filter:brightness(.98)}
.btn--ghost{background:white;color:var(--gray);border:1px solid var(--border);box-shadow:none}
.main{min-height:60vh}
.hero{padding:44px 0;background:linear-gradient(180deg,var(--soft),#fff)}
.hero--sub{padding:34px 0}
.kicker{font-weight:800;color:var(--blue);margin:0 0 10px 0}
.hero h1{margin:0 0 10px 0;font-size:clamp(28px,4vw,44px);line-height:1.1;color:var(--gray)}
.lede{margin:0 0 18px 0;color:var(--muted);font-size:1.05rem;max-width:70ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.content{padding:22px 0 50px}
.prose{max-width:78ch}
.prose h2{margin-top:28px;color:var(--gray)}
.prose h3{margin-top:22px;color:var(--gray)}
.prose p{color:var(--text)}
.prose .muted{color:var(--muted)}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:white;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.card h3{margin:0 0 8px 0}
.card p{margin:0;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--border);margin:28px 0}
.cta{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:linear-gradient(180deg,#fff,var(--soft));box-shadow:0 10px 20px rgba(0,0,0,.06)}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.small{font-size:.92rem}
.site-footer{border-top:1px solid var(--border);padding:26px 0;background:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.footer-title{font-weight:900;color:var(--gray);margin-bottom:8px}
.footer-bottom{padding-top:14px}
.link{color:var(--blue);text-decoration:underline}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;display:none;background:rgba(18,19,22,.92);color:#fff;padding:12px 0;z-index:100}
.cookie-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cookie-banner__actions{display:flex;gap:8px}
.cookie-banner .btn{box-shadow:none}
.cookie-banner .btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
@media (max-width:860px){
  .nav{display:none}
}