/* Warden's landing: the design guide's tokens (warden/docs/DESIGN.md §2), Cinzel for display, Inter for the rest. */
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(cinzel.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;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(inter.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;
}
:root {
  --bg-void: #050a18;
  --bg-surface: #0b1430;
  --bg-raised: #111c3d;
  --bg-mist: rgba(2, 20, 62, 0.9);
  --bg-glass: rgba(5, 10, 24, 0.65);
  --border-subtle: rgba(126, 181, 253, 0.12);
  --border-strong: rgba(126, 181, 253, 0.28);
  --flame-600: #0254e4;
  --flame-600-hover: #0a5ff0;
  --flame-400: #11a4fa;
  --flame-200: #7eb5fd;
  --flame-mist: rgba(2, 84, 228, 0.22);
  --text-primary: #eef2fa;
  --text-secondary: #a7b3cc;
  --white: #fff;
  --radius-sm: 4px;
  --radius-md: 8px;
  --ease: 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --glow-flame: 0 0 0 1px rgba(126, 181, 253, 0.35), 0 0 24px -4px rgba(27, 120, 252, 0.55),
    0 0 64px -12px rgba(2, 84, 228, 0.45);
  --glow-card: 0 0 32px -12px rgba(27, 120, 252, 0.45);
  --glow-logo: 0 0 0.4rem rgba(27, 120, 252, 0.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Blue mist over the void. */
body {
  margin: 0; min-height: 100vh; font: 400 1.0625rem/1.65 var(--font-ui); color: var(--text-primary);
  background: radial-gradient(ellipse 70% 36rem at 70% -8rem, var(--flame-mist), transparent),
    radial-gradient(ellipse 50% 30rem at 0% 30%, var(--bg-mist), transparent), var(--bg-void);
  background-attachment: fixed;
}
p, li { color: var(--text-secondary); }
a { color: var(--flame-400); }
a:hover { color: var(--flame-200); }
:focus-visible { outline: 2px solid var(--flame-200); outline-offset: 2px; }
h1, .brand strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
main, nav, footer { max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }

/* The sticky glass header, the only glass on the site. */
body > header {
  position: sticky; top: 0; z-index: 10; background: var(--bg-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle);
}
nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { filter: drop-shadow(var(--glow-logo)); }
.brand strong { color: var(--text-primary); font-size: 1.5rem; letter-spacing: 0.12em; }

/* Buttons: 44px targets, small radius, the glow on the hero's call to action and on hover or focus. */
.button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border-radius: var(--radius-sm);
  background: var(--flame-600); color: var(--white); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.button:is(:hover, :focus-visible) { background: var(--flame-600-hover); color: var(--white); box-shadow: var(--glow-flame); }
.button:active { transform: scale(0.98); }
.cta { box-shadow: var(--glow-flame); }

.hero { padding: 1.5rem 0 2rem; text-align: center; }
.hero h1 { margin: 0 0 1.5rem; }
.banner { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.lead { max-width: 40rem; margin-inline: auto; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

/* Section divider: a thin line fading out both ways with a star in the middle. */
.divider { display: flex; align-items: center; gap: 1rem; margin: 1rem auto 2.5rem; max-width: 32rem; color: var(--flame-400); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong)); }
.divider::after { transform: scaleX(-1); }

/* At least 15rem per card: 3 + 2, 2 + 2 + 1 or one per row, never squeezed. */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; margin-bottom: 3rem; }
.features article {
  padding: 1.75rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--ease), transform var(--ease);
}
.features h2 { margin: 0 0 0.5rem; font-size: 1.375rem; font-weight: 600; line-height: 1.3; }
.features p { margin: 0; }
@media (hover: hover) {
  .features article:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--glow-card); }
}
/* The legal pages and the footer every page ends with. */
.legal { max-width: 48rem; padding-block: 2rem; }
.legal h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.2; }
.legal h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2rem; }
.legal strong { color: var(--text-primary); }
code { font: 500 0.9em var(--font-mono); color: var(--flame-200); background: var(--bg-raised); padding: 2px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
footer { padding-block: 1rem 2rem; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.875rem; }
@media (max-width: 575px) {
  .brand strong { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}