/* Bluefront AI theme overrides (bright + blue). Loaded after every other stylesheet.
   The base conversion (tools/theme_convert.py + fix_dark.py) turned dark surfaces light and lime into blue;
   this file holds the hand tuned pieces. */

::selection { background: var(--accent); color: #fff; }

/* ---------- Navigation: white glass pill ---------- */
.nav { background: rgba(var(--card-rgb), 0.78); border-color: rgba(var(--ink-rgb), 0.09); box-shadow: 0 8px 28px rgba(var(--shadow-rgb), 0.06); }
.nav-wrap.is-compact .nav { background: rgba(var(--card-rgb), 0.94); border-color: rgba(var(--ink-rgb), 0.1); box-shadow: 0 12px 34px rgba(var(--shadow-rgb), 0.12); }
.brand, .brand__name { color: var(--ink); }
.brand__name b { color: var(--accent); }
.nav__link { color: var(--muted); }
.nav__link:hover { color: var(--ink); background: rgba(var(--accent-rgb), 0.08); }
.nav__link[aria-current="page"] { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn--light { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--light:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn--light svg, .btn--light .btn__arrow { color: #fff; }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%); }
.hero__tag { background: var(--card); border-color: rgba(var(--ink-rgb), 0.12); color: var(--muted); }

/* ---------- Hero glass dashboard: white glass, navy text ---------- */
.gd { --glass-a: rgba(var(--card-rgb), 0.98); --glass-b: rgba(var(--glass-b-rgb), 0.96); --edge: rgba(var(--ink-rgb), 0.12); --lime: var(--accent); }
.gd::before { background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0) 72%); }
.gd__shadow { background: radial-gradient(closest-side, rgba(var(--ink-rgb), 0.28), rgba(var(--ink-rgb), 0) 100%); filter: blur(14px); }
.gd__card {
  background: linear-gradient(135deg, var(--glass-a), var(--glass-b));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(var(--card-rgb), 0.9), 0 2.2cqw 4.2cqw rgba(var(--shadow-rgb), 0.16);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.gd__card::after {
  background: radial-gradient(circle at var(--sx) var(--sy), rgba(var(--accent-rgb), calc(0.05 + var(--hov) * 0.13)), rgba(var(--accent-rgb), 0) 55%),
              linear-gradient(115deg, rgba(var(--card-rgb), 0) 38%, rgba(var(--card-rgb), 0.55) 47%, rgba(var(--card-rgb), 0) 56%);
}
.gd__title, .gd__kpi strong, .gd__row b, .gd__amount { color: var(--ink); }
.gd__muted, .gd__label, .gd__q, .gd__legend { color: var(--muted-2); }
.gd__dot { background: rgba(var(--ink-rgb), 0.18); }
.gd__tab { color: var(--muted); border-color: rgba(var(--ink-rgb), 0.12); }
.gd__tab.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
.gd__kpi { background: rgba(var(--accent-rgb), 0.05); border-color: rgba(var(--accent-rgb), 0.1); }
.gd__kpi em { color: var(--accent); }
.gd__bar { background: rgba(var(--ink-rgb), 0.16); }
.gd__bar--b { background: linear-gradient(180deg, #4a86ff, var(--accent)); box-shadow: 0 0 1.4cqw rgba(var(--accent-rgb), 0.28); }
.gd__chart { border-bottom-color: rgba(var(--ink-rgb), 0.16); }
.gd__line path { stroke: var(--ink); }
.gd__line circle { fill: var(--card); stroke: var(--ink); }
.gd__track { background: rgba(var(--ink-rgb), 0.1); }
.gd__fill { background: linear-gradient(90deg, #7fa8ff, var(--accent)); }
.gd__tick, .gd__chip.is-now { background: var(--accent); border-color: var(--accent); color: #fff; }
.gd__chip { border-color: rgba(var(--ink-rgb), 0.14); color: var(--muted); }
.gd__chip.is-done { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent); }
.gd__sign span:last-child { color: var(--muted); }
.gd__legend i.l { background: var(--ink); }
.gd__note { color: var(--muted-2); }

/* ---------- Proof band ---------- */
.stack__mark { color: var(--muted); }
.stack__mark img { filter: var(--logo-filter); opacity: 0.4; }

/* ---------- Light panels that used to be dark ---------- */
.chaos { background: radial-gradient(80% 120% at 88% 6%, rgba(var(--accent-rgb), 0.08), transparent 55%), radial-gradient(70% 90% at 0% 100%, rgba(var(--accent-rgb), 0.05), transparent 55%), var(--surface); }
.chaos-sheet { background: var(--card); border-color: rgba(var(--ink-rgb), 0.12); box-shadow: 0 26px 60px -34px rgba(var(--shadow-rgb), 0.35); }
.chaos-sheet__chrome, .chaos-sheet__tabs { background: rgba(var(--ink-rgb), 0.035); }
.chaos-c { color: var(--muted); }
.chaos-c--warm { background: rgba(245, 197, 66, 0.22); color: #8a6200; }
.chaos-c--cool { background: rgba(60, 130, 246, 0.14); color: #1f4fb4; }
.chaos-c--mint { background: rgba(51, 194, 138, 0.16); color: #146b4a; }
.chaos-c--ref { background: rgba(229, 72, 77, 0.16); color: #b3262b; }
.gerp__panel { background: var(--card); border-color: rgba(var(--ink-rgb), 0.1); box-shadow: 0 26px 55px -30px rgba(var(--shadow-rgb), 0.3); color: var(--ink); }
.gerp__panel::after { background: linear-gradient(118deg, transparent 58%, rgba(var(--accent-rgb), 0.06)); }
.chaos-line { stroke: rgba(var(--accent-rgb), 0.38); }
.chaos-line--glow { stroke: var(--accent); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.55)); }
.chaos-node { fill: var(--card); stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.5)); }
.chaos-spark { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.95)); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55); }
.chaos-phase { color: var(--muted); border-color: rgba(var(--ink-rgb), 0.14); background: var(--surface); }
.chaos-phase.is-active, .gerp__tag--accent, .gerp-chip.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---------- Blueprint scene ---------- */
.bp-stage { background: radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 62%), var(--surface); border-color: rgba(var(--ink-rgb), 0.1); }
.bp-chip { color: var(--ink); background: var(--card); border-color: rgba(var(--ink-rgb), 0.12); box-shadow: 0 8px 22px rgba(var(--shadow-rgb), 0.1); }
.bp-card, .bp-dash { background: var(--card); border-color: rgba(var(--ink-rgb), 0.12); box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.16); }

/* ---------- CTA band (blue) ---------- */
.cta { background: linear-gradient(135deg, #2f6bff 0%, #1d5bff 45%, #1237c9 100%); color: #fff; }
.cta .overline, .cta h2, .cta__lead, .cta__note { color: #fff; }
.cta .overline::before { background: #fff; }
.cta__btn { background: #fff; color: var(--accent); border-color: #fff; }
.cta__btn:hover { background: #f3f7ff; }

/* ---------- Footer (deep navy) ---------- */
.footer { background: var(--navy); --accent: #8fb4ff; --accent-hover: #b4cdff; }
.footer__brand, .footer__brandname, .footer__tagline { color: #fff; }
.footer__brandname b { color: #8fb4ff; font-weight: 500; }
.footer__mark { width: 34px; height: 34px; }
.footer__col a { color: rgba(255, 255, 255, 0.72); }
.footer__col a:hover { color: #fff; }
.footer__col h2 { color: rgba(255, 255, 255, 0.5); }
.footer__watermark img { filter: brightness(0) invert(1); }
.footer__wordmark text { fill: rgba(255, 255, 255, 0.08); }

/* ---------- Calculator result panel ---------- */
.calc__results { --accent: #8fb4ff; --accent-hover: #b4cdff; background: radial-gradient(at 100% 0, #1a3f94, transparent 65%), var(--navy); }

/* ---------- Process timeline ---------- */
.tl-card { background: var(--card); border-color: var(--border); box-shadow: 0 10px 30px -20px rgba(var(--shadow-rgb), 0.3); }
.tl-card.is-active { border-color: var(--accent); }
.tl-card__num { color: var(--muted-2); }
.tl-card.is-active .tl-card__num { color: var(--accent); }
.tl-line path { stroke: var(--gray-300); }
.tl-line .tl-line__draw { stroke: var(--accent); }

/* ---------- Forms ---------- */
.form-field input, .form-field textarea { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); }
.form-success { background: var(--surface); color: var(--ink); }

/* Footer logo size (explicit, so the inline SVG cannot stretch) */
.footer__mark, .footer__mark svg { width: 34px; height: 34px; max-width: 34px; max-height: 34px; display: block; }
.brand__mark, .brand__mark svg { display: block; }

/* Timeline cards need a visible edge on a bright background */
.tl-card { background: var(--card); border-color: var(--border-strong); box-shadow: 0 14px 34px -22px rgba(var(--shadow-rgb), 0.45); }
.tl-card.is-active { border-color: var(--accent); box-shadow: 0 18px 40px -20px rgba(var(--accent-rgb), 0.45); }
.tl-card__title { color: var(--ink); }
.tl-card__text { color: var(--muted); }

/* Mobile navigation */
.nav__toggle { background: rgba(var(--ink-rgb), 0.06); border-color: rgba(var(--ink-rgb), 0.14); }
.nav__toggle:hover { background: rgba(var(--accent-rgb), 0.1); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { background: var(--ink); }
.nav.is-open .nav__toggle span { background: transparent; }
.mobile-menu { background: rgba(var(--card-rgb), 0.97); border-color: rgba(var(--ink-rgb), 0.1); box-shadow: 0 20px 50px rgba(var(--shadow-rgb), 0.16); color: var(--ink); }
.mobile-menu a { color: var(--muted); }
.mobile-menu a:hover { background: rgba(var(--accent-rgb), 0.08); color: var(--ink); }

/* ---------- Logo v2: nav mark is the bare glyph (no tile) ---------- */
.brand__mark svg, .footer__mark svg { display: block; width: 100%; height: 100%; }
.nav-wrap .brand__mark { width: 30px; height: 30px; }
.nav-wrap.is-compact .brand__mark { width: 24px; height: 24px; }
.brand__name { font-weight: 700; letter-spacing: -0.02em; }
.footer__brandname { font-weight: 700; }

/* ---------- Footer: big, bold, faded brand line (mark + "Bluefront AI") ---------- */
.footer__big { margin-top: 2.5rem; overflow: hidden; container-type: inline-size; line-height: 1; user-select: none; pointer-events: none; }
.footer__big-in { display: flex; align-items: center; justify-content: center; gap: 0.14em; font-size: 12.2cqw; font-weight: 800; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.1); white-space: nowrap; transform: translateY(7%); }
.footer__big-in svg { width: 0.84em; height: 0.84em; flex: none; opacity: 0.1; }
.footer__big-in span { line-height: 0.95; }

/* Footer fixes: brand row, and show the whole faded wordmark */
.footer__brand { flex-direction: row; align-items: center; gap: 0.7rem; }
.footer__mark { display: inline-block; flex: none; }
.footer__big { margin-top: 3rem; padding: 0 2% 1.5rem; }
.footer__big-in { transform: none; }
.footer__mark svg g { fill: #fff; }

/* ==========================================================================
   THEME TOKENS. Light is the default; html[data-theme="dark"] swaps them.
   ========================================================================== */
:root {
  color-scheme: light;
  --ink-rgb: 11, 27, 63;
  --accent-rgb: 29, 91, 255;
  --shadow-rgb: 11, 27, 63;
  --card: #ffffff;
  --card-rgb: 255, 255, 255;
  --glass-b-rgb: 238, 244, 255;
  --logo-filter: grayscale(1) brightness(0);
  --art-filter: none;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071022;
  --surface: #0a1530;
  --surface-2: #0e1c3f;
  --card: #0e1c3f;
  --card-rgb: 14, 28, 63;
  --glass-b-rgb: 11, 22, 52;
  --fg: #eaf1ff;
  --ink: #f1f5ff;
  --ink-rgb: 255, 255, 255;
  --muted: #a9b9db;
  --muted-2: #8aa0cc;
  --border: #1b2c55;
  --border-strong: #2b4075;
  --accent: #3d7bff;
  --accent-rgb: 61, 123, 255;
  --accent-hover: #6b9bff;
  --accent-soft: #12254f;
  --navy: #040b1d;
  --shadow-rgb: 0, 0, 0;
  --gray-50: #0b1530;
  --gray-100: #0f1c3d;
  --gray-200: #16264d;
  --gray-300: #2a3d6b;
  --gray-400: #6f84b3;
  --gray-500: #8aa0cc;
  --logo-filter: grayscale(1) brightness(0) invert(1);
  --art-filter: invert(1) hue-rotate(180deg) brightness(0.92) saturate(1.1);
}
html[data-theme="dark"] .pl-layer img,
html[data-theme="dark"] .pl-floor img { filter: var(--art-filter); }
html[data-theme="dark"] .hero { background: linear-gradient(180deg, #0a1530 0%, #071022 100%); }
html[data-theme="dark"] .chaos-c--warm { background: rgba(245, 197, 66, 0.16); color: #ffe08a; }
html[data-theme="dark"] .chaos-c--cool { background: rgba(96, 165, 250, 0.16); color: #bcd7ff; }
html[data-theme="dark"] .chaos-c--mint { background: rgba(51, 194, 138, 0.16); color: #9be5c4; }
html[data-theme="dark"] .chaos-c--ref { background: rgba(229, 72, 77, 0.2); color: #ff9aa0; }
html[data-theme="dark"] .gd__bar--b { background: linear-gradient(180deg, #6b9bff, var(--accent)); }
html[data-theme="dark"] .footer { background: var(--navy); }
html[data-theme="dark"] .calc__inputs { background: var(--card); }
html[data-theme="dark"] img.work-img { opacity: 0.95; }

/* Faded footer wordmark: generated text, purely decorative */
.chaos-sheet__file { color: var(--muted); }

/* Dark theme: brighter accent text, deeper fills so white text stays readable (4.5:1) */
html[data-theme="dark"] {
  --accent: #4a86ff;
  --accent-rgb: 74, 134, 255;
  --accent-hover: #79a3ff;
  --accent-fill: #2d62e8;
}
html[data-theme="dark"] :is(.btn--light, .btn:not(.btn--ghost), .gd__tab.is-on, .gd__tick, .gd__chip.is-now, .chaos-phase.is-active, .gerp__tag--accent, .gerp-chip.is-active, .bf-mega__link:hover .bf-mega__icon, .bf-mega__link:focus-visible .bf-mega__icon, .footer__motion[aria-pressed="true"]) {
  background-color: var(--accent-fill); border-color: var(--accent-fill);
}
html[data-theme="dark"] :is(.btn--light, .btn:not(.btn--ghost)):hover { background-color: #3b72f2; border-color: #3b72f2; }
html[data-theme="dark"] .cta__btn { color: #1d4fd8; }

/* Contrast fixes found by the accessibility scan */
.chaos-sheet__tabs span.is-active { background: rgba(var(--accent-rgb), 0.16); color: var(--ink); }
.bf-crumbs, .bf-crumbs a { color: var(--muted); }
.bf-crumbs a:hover { color: var(--accent); }
.footer { --gray-100: #eaf0ff; --gray-200: #d3ddf3; --gray-300: #b7c6e6; --gray-400: #98abd4; --gray-500: #8296c0; --muted: #b7c6e6; --muted-2: #98abd4; --ink: #ffffff; }

:root { --muted-2: #5d6d8f; --gray-500: #5d6d8f; }
.chaos-sheet__tabs span { color: var(--muted); }
html[data-theme="dark"] .mock-list__row.is-done .mock-list__status { color: #5fd391; }
html[data-theme="dark"] .mock-list__row.is-done .mock-list__label::before { background: #36c277; }
.calc__cta, html[data-theme="dark"] .calc__cta { background: #fff; color: #0a1c4a; border-color: #fff; }
.calc__cta:hover, html[data-theme="dark"] .calc__cta:hover { background: #eaf0ff; color: #0a1c4a; border-color: #eaf0ff; }
html[data-theme="dark"] .btn--light.calc__cta { background-color: #fff; color: #0a1c4a; border-color: #fff; }
html[data-theme="dark"] .calc__results .btn.btn--light.calc__cta { background-color: #fff; color: #0a1c4a; border-color: #fff; }
html[data-theme="dark"] .calc__results .btn.btn--light.calc__cta:hover { background-color: #eaf0ff; }

/* Smooth scrolling is done by Lenis. The browser's own smooth scrolling (html { scroll-behavior: smooth }) turns the instant
   jump to the top that ScrollTrigger uses while measuring into an animation, which left pinned scenes with a start that was
   off by the scroll distance whenever the page was refreshed or resized while scrolled (the scene then drew over the
   section before it). The old rule only matched .lenis.lenis-smooth, a class the page never gets. */
html.lenis, html.lenis body { scroll-behavior: auto !important; }

/* Legal pages */
.legal h2 { margin: 2.2rem 0 0.7rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.legal h2:first-child { margin-top: 0; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul { margin: 0 0 1.25rem; padding-left: 1.3rem; color: var(--muted); line-height: 1.7; }
.legal li { margin-bottom: 0.35rem; }

/* Thank-you screen: booking offer and the urgent line (shown after the form is sent) */
.form-success [hidden] { display: none !important; }
.form-success__book { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.form-success__book p { margin: 0 0 0.85rem; }
.form-success__alt { margin-top: 1.2rem; font-size: 0.92rem; }