/* ============================================================
   Project Gateway — gateway.css
   Shared premium-minimal design system. One source of truth.
   Linked by all affiliate pages. Page-specific layout stays
   in each page's own <style>; this file holds tokens + primitives.
   ============================================================ */

:root {
  /* surfaces */
  --canvas:#ffffff; --raise:#f6f7f9; --raise-2:#f1f3f5;
  /* ink */
  --ink:#0a0e17; --ink-2:#1d2433; --body:#4a5568; --muted:#8a94a6;
  /* hairlines */
  --line:#e8eaee; --line-2:#f1f3f5; --line-str:#dfe3e8;
  /* accent — deep cyan legible on white; neon kept for micro-moments */
  --accent:#0a9cb8; --accent-ink:#07788e; --accent-bright:#22d3ee;
  --accent-wash:#ecfbff; --accent-ring:rgba(10,156,184,0.32);
  /* radius scale */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* shadows — barely there */
  --sh-1:0 1px 2px rgba(10,14,23,0.04);
  --sh-2:0 6px 22px rgba(10,14,23,0.07), 0 2px 6px rgba(10,14,23,0.04);
  --sh-dark:0 20px 60px rgba(10,14,23,0.35);
  /* type scale (modular) */
  --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:16px; --t-lg:18px;
  --t-xl:21px; --t-2xl:26px; --t-3xl:34px; --t-4xl:46px;
  /* space scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --maxw:1080px;

  /* legacy --pg-* aliases (so older inline rules still resolve) */
  --pg-obsidian:var(--ink); --pg-cyan:var(--accent); --pg-mint:#a7f3d0;
  --pg-bg:var(--raise); --pg-surface:var(--canvas); --pg-border:var(--line);
  --pg-muted:var(--muted); --pg-tag-bg:var(--accent-wash);
  --pg-tag-text:var(--accent-ink); --radius:var(--r-md);
}

/* ── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  background:var(--canvas); color:var(--body);
  line-height:1.65; font-size:var(--t-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { color:var(--ink); font-weight:600; letter-spacing:-0.022em; line-height:1.15; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
.tnum { font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ── Layout ───────────────────────────────────────── */
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }
section { padding:var(--s9) 0; }
.section-alt { background:var(--raise); }

/* ── Eyebrow + centered section head ──────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-xs); font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent-bright); box-shadow:0 0 0 3px var(--accent-wash);
}
.head { text-align:center; max-width:680px; margin:0 auto var(--s7); }
.head .eyebrow { margin-bottom:var(--s4); }
.head h2 { font-size:var(--t-3xl); letter-spacing:-0.03em; margin-bottom:var(--s3); }
.head p { color:var(--body); font-size:var(--t-md); max-width:600px; margin:0 auto; }
.head.left { text-align:left; }
.head.left .eyebrow, .head.left h2, .head.left p { margin-left:0; margin-right:0; }

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-size:var(--t-base); font-weight:600; letter-spacing:-0.01em; line-height:1;
  padding:13px 22px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer;
  transition:transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background:var(--ink); color:#fff; box-shadow:var(--sh-1); }
.btn-primary:hover { background:var(--ink-2); box-shadow:var(--sh-2); }
.btn-secondary { background:var(--canvas); color:var(--ink); border-color:var(--line-str); }
.btn-secondary:hover { border-color:var(--ink); background:var(--raise); }
.btn-accent { background:var(--accent); color:#fff; box-shadow:var(--sh-1); }
.btn-accent:hover { background:var(--accent-ink); box-shadow:var(--sh-2); }
.btn-inverse { background:#fff; color:var(--ink); }
.btn-inverse:hover { background:#eef1f4; }
.btn-ghost-dark { background:transparent; color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.22); }
.btn-ghost-dark:hover { border-color:var(--accent-bright); color:var(--accent-bright); }
.btn-sm { padding:9px 16px; font-size:var(--t-sm); }

/* ── Cards ────────────────────────────────────────── */
.card {
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s5);
  transition:transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--line-str); }
.card h3 { font-size:var(--t-md); margin-bottom:var(--s2); }
.card p { font-size:var(--t-sm); color:var(--body); line-height:1.6; }
.card-icon {
  width:40px; height:40px; border-radius:var(--r-sm); background:var(--accent-wash);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4);
}
.card-icon svg { width:20px; height:20px; color:var(--accent); }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:760px){ .grid-3{ grid-template-columns:1fr; } }
@media (max-width:600px){ .grid-2{ grid-template-columns:1fr; } }

/* ── Nav (white, sticky, blur) ────────────────────── */
.top-nav {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.82);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line); padding:var(--s3) var(--s5);
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-base); font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.nav-logo svg { width:26px; height:26px; }

/* ── FAQ ──────────────────────────────────────────── */
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--line); padding:var(--s5) 0; }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-q { font-size:var(--t-md); font-weight:600; color:var(--ink); margin-bottom:var(--s2); }
.faq-a { font-size:var(--t-sm); color:var(--body); line-height:1.7; }

/* ── Footer (the one dark anchor) ─────────────────── */
.site-footer {
  background:var(--ink); color:rgba(255,255,255,0.45); font-size:var(--t-xs);
  padding:var(--s6) var(--s5) var(--s7); border-top:1px solid rgba(255,255,255,0.08);
}
.footer-inner { max-width:var(--maxw); margin:0 auto; }
.site-footer strong { color:rgba(255,255,255,0.72); font-weight:600; }
.footer-meta { color:rgba(255,255,255,0.35); }
.footer-meta a { color:var(--accent-bright); }