/* The Arsenal — public landing page.
   Deliberately self-contained: this file does NOT import src/css/variables.css.
   That file currently ships the Classic warm/gold theme; the identity used here
   (white canvas, indigo primary, Inter) lives on feat/arsenal-redesign and is
   not merged yet. Keeping our own copy of the tokens means the landing page
   renders correctly today and does not drift when the redesign lands.
   No JS on this page, and no third-party requests — CSP is default-src 'self'. */

/* ── Inter ──────────────────────────────────────────────────────────────────
   Subset files are the same ones src/css/fonts.css uses on the redesign
   branch (generated by tools/fetch-fonts.mjs). Only latin + latin-ext are
   declared here — this page is English-only, and the other five subsets would
   be dead weight. Regenerate upstream, not here. */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../src/fonts/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --bg: #f7f8fb;
  --bg-warm: #f1f3f8;
  --surface: #ffffff;
  --border: #e4e7ee;
  --border-light: #edeff3;
  --text: #171a26;
  --text-muted: #5c6273;
  --text-dim: #8b90a0;
  --primary: #5b4ce0;
  --primary-hover: #4a3cc4;
  --primary-soft: rgba(91, 76, 224, 0.10);
  /* Two-layer bloom behind the accented headline words. Tight layer gives the
     letterforms their halo, wide layer spreads it into the canvas. Tuned per
     theme because the primary shifts between light and dark. */
  --accent-glow: rgba(91, 76, 224, 0.30);
  --accent-glow-wide: rgba(91, 76, 224, 0.16);
  --secondary: #4b8df8;
  --green: #16a34a;

  --radius-card: 14px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-pop: 0 8px 28px rgba(16, 24, 40, 0.12);

  --wrap: 1120px;
  --gutter: 24px;
  --section-y: 96px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1117;
    --bg-warm: #141721;
    --surface: #171a22;
    --border: #262a36;
    --border-light: #1f2330;
    --text: #e8eaf0;
    --text-muted: #9aa0b0;
    --text-dim: #6b7183;
    --primary: #7c6cf0;
    --primary-hover: #948aff;
    --primary-soft: rgba(124, 108, 240, 0.14);
    /* Stronger on the dark canvas — a glow that reads on white disappears here. */
    --accent-glow: rgba(124, 108, 240, 0.50);
    --accent-glow-wide: rgba(124, 108, 240, 0.26);
    --secondary: #6ba1ff;
    --green: #34d399;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
img { max-width: 100%; display: block; }

/* The page is built to be skimmed: body copy sits at --text-muted and the
   phrase that carries the point is bolded to full contrast. Reading only the
   bold text should still give you the whole argument. Don't bold whole
   sentences — the contrast stops working once most of the line is dark. */
strong { font-weight: 600; color: var(--text); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--primary-hover); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── Shared section furniture ───────────────────────────────────────────── */

section { padding: var(--section-y) 0; }

/* Alternating tint so adjacent sections read as separate. Applied to every
   other section in document order — hero, inside, and cta sit on --bg; how
   and security are banded. */
.band { background: var(--bg-warm); border-block: 1px solid var(--border); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.section-head { max-width: 660px; margin-bottom: 48px; }
.section-head h2 { font-size: 34px; }
.section-head p {
  margin-top: 14px;
  font-size: 17px;
  color: var(--text-muted);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-control);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #ffffff;
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--bg-warm);
  border-color: var(--text-dim);
  color: var(--text);
}

.beta-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-dim);
}

/* ── Nav ────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg); /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 66px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.nav-brand:hover { color: var(--text); }
.nav-brand img { width: 28px; height: 28px; object-fit: contain; }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 15px;
}
.nav-links a { color: var(--text-muted); font-weight: 500; }
.nav-links a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-actions .signin { color: var(--text-muted); font-size: 15px; font-weight: 500; }
.nav-actions .signin:hover { color: var(--text); }
.nav-actions .btn { height: 40px; padding: 0 18px; font-size: 14px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 104px 0 96px;
  text-align: center;
  overflow: hidden;
}
/* Soft indigo bloom behind the headline. Pure CSS so nothing extra loads. */
.hero::before {
  content: '';
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 620px;
  background: radial-gradient(ellipse at center, var(--primary-soft), transparent 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.hero h1 {
  font-size: clamp(38px, 6vw, 60px);
  letter-spacing: -0.035em;
  /* Sized so the headline sets as two balanced lines rather than leaving a
     one-word orphan on a third. text-wrap:balance does the real work where
     supported; the max-width is the fallback. */
  max-width: 24ch;
  text-wrap: balance;
  margin: 0 auto;
}
.hero h1 .accent {
  color: var(--primary);
  text-shadow: 0 0 16px var(--accent-glow), 0 0 44px var(--accent-glow-wide);
}
.hero-sub {
  margin: 24px auto 0;
  max-width: 660px;
  font-size: 18px;
  color: var(--text-muted);
  /* Keeps the last line from stranding a single word under the subhead. */
  text-wrap: balance;
}
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ── How it works ───────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.step-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { color: var(--text-muted); font-size: 15px; }

/* ── Features ───────────────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.feature { padding: 26px 24px; }
.feature h3 { font-size: 16px; margin-bottom: 8px; }
.feature p { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }

/* ── Security ───────────────────────────────────────────────────────────── */

.security-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.security-item h3 {
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.security-item h3::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.security-item p { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }

.security-foot {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-muted);
}

/* ── Closing CTA ────────────────────────────────────────────────────────── */

.cta { text-align: center; }
.cta-band {
  background: var(--primary-soft);
  border: 1px solid var(--border); /* fallback where color-mix is unsupported */
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: var(--radius-card);
  padding: 64px 32px;
}
.cta-band h2 { font-size: 32px; max-width: 18ch; margin: 0 auto; }
.cta-band p {
  margin: 16px auto 0;
  max-width: 520px;
  color: var(--text-muted);
  font-size: 16.5px;
}
.cta-band .btn { margin-top: 30px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--border); padding: 32px 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-dim);
}
.footer-brand { display: flex; align-items: center; gap: 9px; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-brand img { width: 20px; height: 20px; object-fit: contain; opacity: 0.75; }
.footer a { color: var(--text-muted); font-weight: 500; }
.footer a:hover { color: var(--text); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .security-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (max-width: 760px) {
  :root { --section-y: 56px; --gutter: 20px; }

  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
  .nav-actions { margin-left: auto; }

  .hero { padding: 64px 0 56px; }
  .hero h1 { max-width: none; }
  .hero-sub { font-size: 16.5px; }
  .hero-cta .btn { flex: 1 1 auto; }

  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: 27px; }

  .steps,
  .feature-grid,
  .security-grid {
    grid-template-columns: 1fr;
  }
  .steps { gap: 30px; }
  .security-grid { gap: 26px; }

  .cta-band { padding: 44px 24px; }
  .cta-band h2 { font-size: 25px; }

  .footer-inner { justify-content: center; text-align: center; }
}