:root{
  --bg: #F5F7F9;
  --surface: #FFFFFF;
  --surface-alt: #EDF1F4;
  --text: #101826;
  --text-muted: #56626F;
  --border: #DCE2E7;
  --accent: #0B84BD;
  --accent-bright: #0EA5E9;
  --accent-soft: #E1F1F9;
  --font-display: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0A0F16; --surface: #101822; --surface-alt: #141D28;
    --text: #E8EDF2; --text-muted: #8B98A5; --border: #1E2833;
    --accent: #38BDF8; --accent-bright: #38BDF8; --accent-soft: #12293A;
  }
}
:root[data-theme="dark"]{
  --bg: #0A0F16; --surface: #101822; --surface-alt: #141D28;
  --text: #E8EDF2; --text-muted: #8B98A5; --border: #1E2833;
  --accent: #38BDF8; --accent-bright: #38BDF8; --accent-soft: #12293A;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font-display); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
img{ max-width: 100%; }
.wrap{ max-width: 1080px; margin: 0 auto; padding-left: clamp(20px,5vw,48px); padding-right: clamp(20px,5vw,48px); }
section{ padding: 88px 0; }
h1,h2,h3{ letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.eyebrow{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}

/* nav */
nav{
  position: sticky; top:0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.02rem; text-decoration:none; color:var(--text); }
.brand img{ width:36px; height:36px; }
.navlinks{ display:flex; align-items:center; gap:28px; font-size:0.88rem; }
.navlinks a{ text-decoration:none; color:var(--text-muted); }
.navlinks a:hover{ color: var(--text); }
.navlinks .cta-btn{
  background: var(--accent); color:#fff; padding:8px 16px; border-radius:6px;
  font-weight:600; font-size:0.85rem;
}
@media (max-width: 640px){ .navlinks a:not(.cta-btn){ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:7px;
  font-weight:600; font-size:0.95rem; text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-primary:hover{ background:var(--accent-bright); }
.btn-secondary:hover{ border-color: var(--accent); color:var(--accent); }

/* simple page header, used by sub-pages like Privacy/Terms */
.page-header{ padding: 64px 0 40px; border-bottom: 1px solid var(--border); }
.page-header h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight:700; }
.page-header .updated{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-top: 14px; }

/* long-form legal content */
.legal{ max-width: 720px; }
.legal h2{ font-size: 1.25rem; font-weight:700; margin: 40px 0 14px; }
.legal h2:first-child{ margin-top: 0; }
.legal p{ color: var(--text); line-height: 1.75; margin: 0 0 16px; font-size: 0.98rem; }
.legal ul{ margin: 0 0 16px; padding-left: 1.3em; }
.legal li{ line-height: 1.7; margin-bottom: 8px; font-size: 0.98rem; }
.legal a{ color: var(--accent); }

footer{ border-top:1px solid var(--border); padding:32px 0; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer .fbrand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:0.9rem; }
footer .fbrand img{ width:28px; height:28px; }
footer small{ color:var(--text-muted); font-size:0.82rem; }
.footer-links{ display:flex; gap:20px; font-size:0.84rem; }
.footer-links a{ color:var(--text-muted); text-decoration:none; }
.footer-links a:hover{ color:var(--text); }