:root{
  --bg:#ffffff;
  --panel:#f8fafc;
  --card:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --brand:#0ea5e9; /* sky-500 */
  --brand-700:#0284c7; /* sky-600 */
  --border:#e2e8f0;
  --accent:#22c55e; /* emerald-500 */
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.7;}
img{ max-width:100%; height:auto; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ width:100%; max-width:1150px; margin:0 auto; padding:0 20px; }

/* Header */
.site-header{ position:sticky; top:0; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--border); z-index:50; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:inherit; }
.nav{ display:flex; gap:16px; align-items:center; }
.nav a{ padding:10px 12px; border-radius:12px; color:var(--fg); }
.nav a:hover{ background:rgba(2,132,199,.08); text-decoration:none;}
.nav a.cta{ background:linear-gradient(135deg, var(--brand), var(--accent)); color:#fff; font-weight:700; }
.nav a.cta:hover{ filter:brightness(1.05); }

/* Hero & content */
.content{ padding:34px 0 60px; }
.hero{ position:relative; overflow:hidden; background:radial-gradient(80% 100% at 0% 0%, rgba(14,165,233,.08), transparent 60%),
  radial-gradient(70% 90% at 100% 0%, rgba(34,197,94,.08), transparent 60%), linear-gradient(180deg, #f0f9ff, #ffffff);
  border:1px solid var(--border); padding:34px; border-radius:20px; margin:22px 0 28px; }
.hero:after{ content:""; position:absolute; inset:0; background:url('/assets/grid.svg'); opacity:.08; }
.lead{ font-size:18px; color:#334155; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: 0 6px 20px rgba(2,132,199,.06); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

h1{ font-size:38px; line-height:1.2; margin:0 0 12px; letter-spacing:-.01em;}
h2{ font-size:28px; margin-top:28px; }
h3{ font-size:22px; margin-top:22px; }
p{ margin:12px 0; color:#334155; }
ul,ol{ padding-left:22px; }
li{ margin:6px 0; }

/* Forms */
.form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label{ display:flex; flex-direction:column; font-weight:600; color:#0f172a; }
.form input, .form textarea{ margin-top:6px; background:#ffffff; color:#0f172a; border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; font:inherit; outline:none; }
.form input:focus, .form textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,165,233,.2); }
.form .span-2{ grid-column:1 / -1; }
.form .checkbox{ flex-direction:row; align-items:center; gap:10px; font-weight:500; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border:1px solid var(--border);
  border-radius:12px; background:#fff; color:var(--fg); }
.btn-primary{ background:linear-gradient(135deg, var(--brand), var(--accent)); color:#fff; border:none; font-weight:700; }
.btn-primary:hover{ filter:brightness(1.08); }
.actions{ display:flex; gap:10px; }

/* Cookie banner */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; background:#ffffff; border-top:1px solid var(--border); padding:14px 0; box-shadow:0 -6px 20px rgba(0,0,0,.06); }
.cookie-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cookie-text p{ margin:6px 0; color:#475569; }
.cookie-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.3); }
.cookie-card{ background:#fff; border:1px solid var(--border); padding:20px; border-radius:16px; width:min(560px, 92vw); }
.switch{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.hidden{ display:none; }
.link{ color:var(--brand-700); }

.site-footer{ border-top:1px solid var(--border); margin-top:48px; }
.site-footer .container{ padding:24px 0; color:#64748b; font-size:14px; }

/* Responsive */
@media (max-width: 900px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .form .grid{ grid-template-columns:1fr; }
  .nav{ gap:10px; flex-wrap:wrap; }
}