/* =============================================================
   Lighthouse brand layer — loaded on every page after styles.css.
   Geist type, brand-blue accent, the framed column (vertical rails), dashed
   section dividers, one spacing scale, small radii. Shared nav/footer theming.
   Dark values first (the homepage's ?theme=dark), then the light theme, which
   is the default everywhere (html.bx-light).
   ============================================================= */

/* Fonts: self-hosted (latin subset, variable weight) so no request leaves the site before first paint */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/geist-latin.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: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-mono-latin.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: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin.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; }
.bx {
  --bx-bg: #060B16;
  --bx-bg-2: #0A1426;
  --bx-card: rgba(255, 255, 255, 0.035);
  --bx-line: rgba(255, 255, 255, 0.08);
  --bx-line-2: rgba(255, 255, 255, 0.14);
  --bx-text: #F2F5FA;
  --bx-soft: #C9D2E0;
  --bx-muted: #8D99AD;
  --bx-dim: #5E6A7E;
  --bx-gold: #FBD848;
  --bx-gold-2: #FFE995;
  --bx-r: 6px;   /* controls */
  --bx-r2: 10px; /* surfaces */
  --bx-sans: "Geist", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bx-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Spacing scale: every section uses --sec top and bottom, every heading-to-content gap is --gap */
  --bx-max: 1240px;
  --pad: clamp(20px, 3.2vw, 40px);
  --sec: clamp(72px, 7.5vw, 112px);
  --gap: clamp(40px, 4.5vw, 64px);
  --bx-dash: rgba(255, 255, 255, 0.22);
  /* Lighthouse app tokens (new_lighthouse_alpha/src/index.css) */
  --app-navy: #0a192f;
  --app-blue: #3498db;
  --app-blue-ink: #20638f;
  --app-emerald: #10b981;
  --app-amber: #f59e0b;
  --app-violet: #8b5cf6;
  background: var(--bx-bg);
  color: var(--bx-text);
  font-family: var(--bx-sans);
}
.bx :focus-visible { outline-color: var(--bx-gold); }
.bx ::selection { background: rgba(251, 216, 72, 0.35); color: #fff; }

/* ---------- Shared chrome, re-themed for the dark homepage ---------- */
.bx .nav { background: rgba(6, 11, 22, 0.6); }
.bx .nav.scrolled { background: rgba(6, 11, 22, 0.86); border-bottom-color: var(--bx-line); }
.bx .brand-word, .bx .nav-link, .bx .nav-signin, .bx .nav-toggle { color: #E6ECF5; }
.bx .nav-link:hover, .bx .nav-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.bx .nav-signin:hover { color: var(--bx-gold); }
.bx .nav .btn-primary { background: var(--bx-gold); color: #0A0F1C; font-weight: 600; border-radius: var(--bx-r); }
.bx .nav .btn-primary:hover { background: var(--bx-gold-2); }
.bx .dropdown { background: #0C1527; border-color: var(--bx-line-2); border-radius: var(--bx-r2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.bx .dd-link { border-radius: var(--bx-r); }
.bx .dd-link:hover { background: rgba(255, 255, 255, 0.05); }
.bx .dd-title { color: #fff; }
.bx .dd-desc { color: var(--bx-muted); }
.bx .dd-ic { background: rgba(251, 216, 72, 0.1); color: var(--bx-gold); border-radius: var(--bx-r); }
.bx .mobile-menu { background: var(--bx-bg); }
.bx .mobile-menu a { color: var(--bx-text); border-bottom-color: var(--bx-line); }
.bx .mobile-menu .mobile-cta { color: var(--bx-gold); border-bottom-color: var(--bx-line); }
.bx .footer { background: #04070F; border-top-color: var(--bx-line); }
.bx .footer-about, .bx .footer-col h2, .bx .footer-bottom { color: var(--bx-muted); }
.bx .footer-col a { color: var(--bx-soft); }
.bx .footer-col a:hover { color: var(--bx-gold); }
.bx .footer-bottom { border-top-color: var(--bx-line); }
.bx .socials a { border-color: var(--bx-line-2); color: var(--bx-muted); border-radius: var(--bx-r); }
.bx .socials a:hover { color: var(--bx-gold); border-color: rgba(251, 216, 72, 0.4); }

/* ---------- Frame + primitives ---------- */
.bx .nav .container, .bx .footer .container { max-width: var(--bx-max); padding-inline: var(--pad); }
.bx .footer { padding-block: var(--gap) 32px; }
/* Frame: two vertical rails at the content edges, top to bottom of the page (nav, hero, sections, footer) */
.bx { position: relative; }
.bx::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5; pointer-events: none;
  width: min(var(--bx-max), 100%); transform: translateX(-50%);
  border-inline: 1px solid var(--bx-line-2);
}
.bx .nav .container { border-inline: 1px solid var(--bx-line-2); }
.bx-wrap { width: 100%; max-width: var(--bx-max); margin-inline: auto; padding-inline: var(--pad); position: relative; }
.bx-sec { position: relative; padding-block: var(--sec); }
/* Section dividers: full-width dashed lines that slowly march to the right */
.bx-hero::before, .bx-logos::before, .bx-sec::before, .bx-stats::before, .bx-final::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--bx-dash) 0 6px, transparent 6px 12px);
  background-size: 12px 1px; animation: bx-march 1.4s linear infinite;
}
.bx-hero::before { top: var(--nav-h); }
@keyframes bx-march { to { background-position: 12px 0; } }

.bx-display {
  font-family: var(--bx-sans); font-weight: 600; color: var(--bx-text);
  font-size: clamp(2.7rem, 1.2rem + 5.2vw, 5.6rem); line-height: 1; letter-spacing: -0.05em;
  text-wrap: balance;
}
.bx-display.sm { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.4rem); line-height: 1.03; }
.bx-h2 {
  font-family: var(--bx-sans); font-weight: 600; color: var(--bx-text);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.3rem); line-height: 1.05; letter-spacing: -0.045em;
  text-wrap: balance; margin-top: 14px;
}
.bx-lead { margin: 28px auto 0; max-width: 660px; font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.3rem); line-height: 1.55; color: #A9B4C6; text-wrap: pretty; }
.bx-sub { margin-top: 16px; max-width: 58ch; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); line-height: 1.6; color: var(--bx-muted); text-wrap: pretty; }
.bx-mono { font-family: var(--bx-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bx-dim); }
.bx-mono.gold { color: var(--bx-gold); }
.bx-head { max-width: 860px; margin-bottom: var(--gap); }

.bx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 24px; border-radius: var(--bx-r);
  font-family: var(--bx-sans); font-size: 0.97rem; font-weight: 600; white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.bx-btn svg { width: 17px; height: 17px; transition: transform 0.2s ease; }
.bx-btn:hover svg { transform: translateX(3px); }
.bx-btn.gold { background: var(--bx-gold); color: #0A0F1C; }
.bx-btn.gold:hover { background: var(--bx-gold-2); transform: translateY(-1px); }
.bx-btn.ghost { color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--bx-line-2); }
.bx-btn.ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); }
.bx-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* ---------- Light theme (default) ---------- */
html.bx-light .bx {
  --bx-bg: #F6F8FB;
  --bx-bg-2: #EDF2F9;
  --bx-card: #fff;
  --bx-line: rgba(15, 23, 42, 0.08);
  --bx-line-2: rgba(15, 23, 42, 0.14);
  --bx-text: #0B1220;
  --bx-soft: #334155;
  --bx-muted: #5B6779;
  --bx-dim: #667387;   /* 4.6:1 on --bx-bg */
  --bx-gold: #2563EB;   /* accent (name kept so home.css rules apply unchanged) */
  --bx-gold-2: #1D4ED8; /* accent hover */
  --bx-blue-a: rgba(37, 99, 235, 0.08);
  --bx-blue-b: rgba(37, 99, 235, 0.16);
  --bx-blue-c: rgba(37, 99, 235, 0.35);
  --bx-dash: rgba(15, 23, 42, 0.22);
}
html.bx-light .bx ::selection { background: rgba(37, 99, 235, 0.2); color: inherit; }

/* Shared chrome */
html.bx-light .bx .nav { background: rgba(246, 248, 251, 0.75); }
html.bx-light .bx .nav.scrolled { background: rgba(246, 248, 251, 0.92); }
html.bx-light .bx .brand-word, html.bx-light .bx .nav-link, html.bx-light .bx .nav-signin, html.bx-light .bx .nav-toggle { color: #1A1C1E; }
html.bx-light .bx .nav-link:hover, html.bx-light .bx .nav-toggle:hover { color: var(--bx-text); background: rgba(15, 23, 42, 0.05); }
html.bx-light .bx .nav .btn-primary { color: #fff; }
html.bx-light .bx .dropdown { background: #fff; box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.25); }
html.bx-light .bx .dd-link:hover { background: #F1F5FB; }
html.bx-light .bx .dd-title { color: var(--bx-text); }
html.bx-light .bx .dd-ic { background: var(--bx-blue-a); }
html.bx-light .bx .footer { background: #EEF2F8; }
html.bx-light .bx .socials a:hover { border-color: var(--bx-blue-c); }

/* Buttons + type */
html.bx-light .bx .bx-btn.gold { color: #fff; }
html.bx-light .bx .bx-btn.ghost { color: var(--bx-text); background: #fff; }
html.bx-light .bx .bx-btn.ghost:hover { background: #F1F5FB; border-color: rgba(15, 23, 42, 0.24); }
html.bx-light .bx .bx-lead { color: #4A5568; }