/* ============ THEMES ============ */
/* 1 · LIGHT — cool neutral, charcoal ink, indigo accent */
:root[data-theme="light"]{
  --bg:        oklch(0.985 0.002 255);
  --surface:   oklch(0.965 0.003 255);
  --surface-2: oklch(0.944 0.004 255);
  --border:    oklch(0.892 0.005 255);
  --border-strong: oklch(0.78 0.007 255);
  --text:      oklch(0.255 0.006 262);
  --muted:     oklch(0.505 0.008 262);
  --faint:     oklch(0.66 0.007 262);
  --accent:    oklch(0.55 0.17 264);
  --accent-2:  oklch(0.49 0.18 264);
  --on-accent: oklch(0.99 0.01 264);
  --code-bg:   oklch(0.205 0.006 262);
  --code-text: oklch(0.92 0.006 262);
  --code-dim:  oklch(0.60 0.012 262);
  --code-key:  oklch(0.80 0.13 30);
  --code-fn:   oklch(0.82 0.14 255);
  --code-str:  oklch(0.83 0.13 150);
}
/* 2 · DARK — charcoal-native (matches the logo), electric azure accent */
:root[data-theme="dark"]{
  --bg:        oklch(0.205 0.004 260);
  --surface:   oklch(0.245 0.005 260);
  --surface-2: oklch(0.288 0.006 260);
  --border:    oklch(0.335 0.006 260);
  --border-strong: oklch(0.45 0.008 260);
  --text:      oklch(0.962 0.003 260);
  --muted:     oklch(0.705 0.006 260);
  --faint:     oklch(0.55 0.007 260);
  --accent:    oklch(0.79 0.135 218);
  --accent-2:  oklch(0.85 0.12 218);
  --on-accent: oklch(0.19 0.02 240);
  --code-bg:   oklch(0.158 0.004 260);
  --code-text: oklch(0.90 0.006 260);
  --code-dim:  oklch(0.52 0.008 260);
  --code-key:  oklch(0.82 0.13 30);
  --code-fn:   oklch(0.83 0.13 218);
  --code-str:  oklch(0.85 0.13 165);
}
/* 3 · VAULT — warm charcoal, gold accent (“holy” / premium) */
:root[data-theme="amber"]{
  --bg:        oklch(0.198 0.006 64);
  --surface:   oklch(0.238 0.008 64);
  --surface-2: oklch(0.280 0.010 64);
  --border:    oklch(0.335 0.010 62);
  --border-strong: oklch(0.45 0.013 60);
  --text:      oklch(0.952 0.006 72);
  --muted:     oklch(0.705 0.010 66);
  --faint:     oklch(0.55 0.010 64);
  --accent:    oklch(0.78 0.125 80);
  --accent-2:  oklch(0.84 0.125 82);
  --on-accent: oklch(0.20 0.03 72);
  --code-bg:   oklch(0.152 0.008 62);
  --code-text: oklch(0.91 0.008 72);
  --code-dim:  oklch(0.52 0.010 64);
  --code-key:  oklch(0.82 0.13 45);
  --code-fn:   oklch(0.84 0.12 82);
  --code-str:  oklch(0.84 0.12 140);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:"Archivo", system-ui, sans-serif; font-weight:600; line-height:1.08; letter-spacing:-0.02em; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:"JetBrains Mono", monospace; }

/* layout */
.wrap{ max-width:1200px; margin:0 auto; padding:0 40px; }
.eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:7px; height:7px; background:var(--accent); display:inline-block; transform:rotate(45deg); }
.section{ border-top:1px solid var(--border); }
.section-pad{ padding:96px 0; }

/* ============ NAV ============ */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .logo{ height:30px; width:auto; display:block; }
.brand .logo-w{ display:none; }
[data-theme="dark"] .brand .logo-c, [data-theme="amber"] .brand .logo-c{ display:none; }
[data-theme="dark"] .brand .logo-w, [data-theme="amber"] .brand .logo-w{ display:block; }
footer .brand .logo{ height:34px; }
.nav-links{ display:flex; align-items:center; gap:34px; font-size:14.5px; }
.nav-links a{ color:var(--muted); transition:color .15s; }
.nav-links a:hover{ color:var(--text); }
.nav-item{ position:relative; }
.nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  min-width:180px; padding:8px; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); box-shadow:0 12px 32px color-mix(in oklab, var(--text) 18%, transparent);
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s, visibility .15s;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown a{ display:block; padding:9px 12px; font-size:14px; color:var(--muted); }
.nav-dropdown a:hover{ color:var(--text); background:color-mix(in oklab, var(--accent) 12%, transparent); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.btn{
  font-family:"Archivo"; font-weight:500; font-size:14.5px;
  padding:10px 18px; border:1px solid var(--accent); background:var(--accent);
  color:var(--on-accent); cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-ghost:hover{ background:var(--surface); border-color:var(--text); }
.menu-toggle{ display:none; }

/* ============ FOOTER (shared bits) ============ */
.foot-bottom{ display:flex; justify-content:space-between; gap:20px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); font-family:"JetBrains Mono"; font-size:12px; color:var(--faint); flex-wrap:wrap; }
.foot-legal{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.foot-legal a{ color:var(--faint); transition:color .15s; }
.foot-legal a:hover{ color:var(--text); }
.lang-switch{ display:flex; align-items:center; gap:6px; }
.lang-btn{ font-family:"JetBrains Mono"; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  background:transparent; border:none; color:var(--faint); cursor:pointer; padding:2px 0; transition:color .15s; }
.lang-btn:hover{ color:var(--text); }
.lang-btn[aria-current="page"]{ color:var(--accent); }
.lang-sep{ color:var(--faint); }

/* ============ COOKIE CONSENT ============ */
.field-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; }
.field-check input[type="checkbox"]{ width:auto; margin-top:3px; accent-color:var(--accent); cursor:pointer; }
.field-check label{ font-family:"Hanken Grotesk"; font-size:13.5px; letter-spacing:normal; text-transform:none; color:var(--muted); margin-bottom:0; cursor:pointer; }
.field-check label a{ color:var(--text); text-decoration:underline; }
#hpCookieBanner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:100;
  max-width:640px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border-strong);
  padding:20px 24px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 12px 32px color-mix(in oklab, var(--text) 18%, transparent);
}
.hp-cc-text{ font-size:14px; color:var(--muted); flex:1; min-width:220px; }
.hp-cc-text a{ color:var(--text); text-decoration:underline; }
.hp-cc-actions{ display:flex; gap:10px; flex-shrink:0; }
.hp-cc-actions .btn{ padding:9px 16px; font-size:13.5px; }
@media (max-width:480px){
  #hpCookieBanner{ flex-direction:column; align-items:stretch; left:12px; right:12px; bottom:12px; }
  .hp-cc-actions{ justify-content:flex-end; }
}