/* ============================================================
   FUSION ELECTRIC — landing template (MVP)
   Brand: blue + navy + white. No glows / neon.
   ============================================================ */
:root{
  /* ===== BRAND — Fusion Blue #27A7DF (sampled from the logo mark) ===== */
  --blue-50:#eaf6fc; --blue-100:#cfeaf8; --blue-200:#a6d9f2; --blue-300:#6fc2ea; --blue-400:#45b2e4;
  --blue-500:#27a7df; --blue-600:#1e8fc4; --blue-700:#1a75a1; --blue-800:#195f81; --blue-900:#143d52;
  --brand:var(--blue-500); --brand-600:var(--blue-700); --brand-tint:var(--blue-50);
  /* ===== INK — cool charcoal (matches logo "E"); never pure black ===== */
  --ink-950:#0e1217; --ink-900:#15181c; --ink-800:#1f242b; --ink-700:#2d343d;
  /* ===== Cool-gray neutrals ===== */
  --gray-600:#4a5462; --gray-500:#667180; --gray-400:#8a94a1; --gray-300:#b7bfc9;
  --gray-200:#d7dce2; --gray-150:#e6e9ed; --gray-100:#f1f3f5; --gray-50:#f8fafb;
  /* legacy ink-* aliases → mapped onto the official gray scale */
  --ink-600:var(--gray-600); --ink-500:var(--gray-500); --ink-400:var(--gray-400);
  --ink-300:var(--gray-300); --ink-200:var(--gray-200); --ink-100:var(--gray-150); --ink-50:var(--gray-50);
  --ink:var(--ink-900);
  --near-black:var(--ink-950); --slate:var(--gray-500);
  --line:var(--gray-150); --bg:#ffffff; --bg-soft:var(--gray-50);
  /* ===== SEMANTIC signals (used sparingly) ===== */
  --amber-50:#fdf4e6; --amber-300:#f0be6f; --amber-400:#e8a23d; --amber-500:#e8a23d;
  --success:#1f9d6b; --warning:#e8a23d; --danger:#d6453d; --info:var(--blue-500);
  /* ===== ELEVATION — charcoal-tinted shadows ===== */
  --shadow-sm:0 1px 2px rgba(14,18,23,.08);
  --shadow-md:0 6px 20px rgba(14,18,23,.10);
  --shadow-lg:0 20px 44px rgba(14,18,23,.16);
  --ring:0 0 0 3px rgba(69,178,228,.40);
  /* ===== RADIUS ===== */
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  /* ===== TYPE — Saira (display) · IBM Plex Sans (body) · IBM Plex Mono (data) ===== */
  --lightblue:rgba(39,167,223,.14); /* transparent Fusion-blue topbar */
  --font:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Saira','Arial Narrow',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-display:clamp(40px,6vw,61px);
  --fs-h1:clamp(31px,4.2vw,49px);
  --fs-h2:clamp(25px,3vw,39px);
  --fs-h3:20px;
  --fs-lead:20px;
  --fs-body:17px;
  --fs-small:14px;
  --fs-mono:14px;

  /* ===== SURFACE THEMING (default = light) =====
     Every section sets --surface (its background) and the matching
     foreground tokens; all text/borders reference these so a background
     recolor flips the text automatically (never white-on-white). */
  --surface:#ffffff;
  --surface-2:var(--ink-50);
  --on:var(--ink);            /* primary text on this surface */
  --on-muted:var(--ink-600);  /* secondary text */
  --on-faint:var(--ink-500);  /* faint / fine print */
  --hair:var(--line);         /* hairline borders */
}
/* Dark surface: white-on-navy. Light surface: ink-on-white. */
.surface--dark{
  --surface:var(--ink-950); --surface-2:var(--ink-900);
  --on:#ffffff; --on-muted:rgba(255,255,255,.74); --on-faint:rgba(255,255,255,.55);
  --hair:rgba(255,255,255,.12);
  --scrim-a:rgba(14,18,23,.5); --scrim-b:rgba(14,18,23,.82);
  --header-scrolled:rgba(14,18,23,.92);
}
.surface--light{
  --surface:#ffffff; --surface-2:var(--ink-50);
  --on:var(--ink); --on-muted:var(--ink-600); --on-faint:var(--ink-500);
  --hair:var(--line);
  --scrim-a:rgba(0,0,0,0); --scrim-b:rgba(11,20,28,.05);
  --header-scrolled:rgba(255,255,255,.9);
}

/* ===== THEME PREVIEW — recolors the dominant (dark) surfaces =====
   navy = default. Each theme just overrides the .surface--dark tokens;
   text/borders follow automatically. Light content sections stay light. */
[data-theme="black"] .surface--dark{
  --surface:#06090D; --surface-2:#111820;
  --scrim-a:rgba(0,0,0,.5); --scrim-b:rgba(0,0,0,.86);
  --header-scrolled:rgba(6,9,13,.92);
}
[data-theme="blue"] .surface--dark{
  --surface:#143d52; --surface-2:#195f81;
  --scrim-a:rgba(8,30,45,.5); --scrim-b:rgba(8,30,45,.82);
  --header-scrolled:rgba(20,61,82,.92);
}
[data-theme="cyan"] .surface--dark{
  --surface:#27a7df; --surface-2:#1e8fc4;
  --on:var(--ink); --on-muted:rgba(14,18,23,.76); --on-faint:rgba(14,18,23,.55);
  --hair:rgba(14,18,23,.16);
  --scrim-a:rgba(10,55,75,.16); --scrim-b:rgba(10,55,75,.38);
  --header-scrolled:rgba(39,167,223,.92);
}
[data-theme="white"] .surface--dark{
  --surface:#ffffff; --surface-2:var(--ink-50);
  --on:var(--ink); --on-muted:var(--ink-600); --on-faint:var(--ink-500);
  --hair:var(--line);
  --scrim-a:rgba(0,0,0,0); --scrim-b:rgba(11,20,28,.05);
  --header-scrolled:rgba(255,255,255,.9);
}
/* on light-background themes the header logo (blue F / white E) needs to read on light */
[data-theme="white"] .nav:not(:hover) .brand__logo,
[data-theme="cyan"]  .nav:not(:hover) .brand__logo{ filter:brightness(0) saturate(0); }

.mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.01em}
.display,.section__title,.band__title,.contact__title,.hero__tagline,
.brand__text,.role h4,.section__head .section__title{
  font-family:var(--font-display);letter-spacing:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;font-size:var(--fs-body);line-height:1.6;
}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}

/* ---------- Header (overlays hero) ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:var(--header-scrolled);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--hair);
}
.topbar{
  display:flex;align-items:center;justify-content:center;gap:22px;
  padding:8px 40px;background:var(--lightblue);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair);
}
.topbar__msg{font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--on-muted)}
.topbar__phone{font-size:12.5px;font-weight:700;color:var(--on)}
.nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  /* very transparent Fusion-blue by default (~80% transparent) */
  background:rgba(39,167,223,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s ease, box-shadow .15s ease;
}
/* hovering anywhere in the bar makes it a solid deep blue (AA with white text) */
.nav:hover{background:rgba(26,117,161,.97)}
/* keep the CTA + logo readable once the bar goes solid blue on hover */
.nav:hover .nav__cta{background:#fff;color:var(--blue-700)}
.brand{display:inline-flex;align-items:center;gap:13px;color:var(--on)}
.brand__logo{height:50px;width:auto;display:block;transition:filter .25s ease}
/* flip the two-tone mark to solid white when the bar goes solid on hover */
.nav:hover .brand__logo{filter:brightness(0) invert(1)}
/* wordmark lockup — Saira (the logo's typeface) so mark + text read as one unit */
.brand__wordmark{
  display:flex;flex-direction:column;line-height:.92;
  font-family:var(--font-display);text-transform:uppercase;
  padding-left:13px;border-left:1px solid var(--hair);transition:border-color .25s ease;
}
.brand__wordmark b{font-weight:800;font-size:22px;letter-spacing:.03em;color:var(--on)}
.brand__wordmark span{
  margin-top:1px;font-weight:600;font-size:10.5px;letter-spacing:.44em;color:var(--on-muted);
}
.nav:hover .brand__wordmark{border-color:rgba(255,255,255,.28)}
.nav:hover .brand__wordmark b{color:#fff}
.nav:hover .brand__wordmark span{color:rgba(255,255,255,.8)}
@media (max-width:560px){ .brand__wordmark span{display:none} .brand__wordmark b{font-size:19px} }
.brand__text{font-weight:800;font-size:18px;letter-spacing:.06em;color:var(--on)}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{
  position:relative;font-weight:500;font-size:15px;color:var(--on-muted);
  transition:color .2s;
}
/* restrained hover: color shift + a growing underline (no glow) */
.nav__links a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--on);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.nav__links a:hover{color:var(--on)}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1)}
.nav__cta{
  padding:10px 18px;border-radius:7px;background:var(--blue-700);color:#fff;
  font-weight:600;transition:background .2s ease,color .2s ease;
}
.nav__cta:hover{background:var(--blue-800)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:24px;height:2px;background:var(--on);border-radius:2px;transition:.25s}

/* ---------- Hero (full-screen video) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--surface)}
.hero__media{position:absolute;inset:0}
.hero__video,.hero__fallback,.hero__scrim{position:absolute;inset:0;width:100%;height:100%}
.hero__video{object-fit:cover;background:transparent}
/* clean, static stand-in until real footage is dropped in. No animation, no glow. */
.hero__fallback{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 24px),
    linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);
  background-color:var(--surface);
}
.hero__scrim{
  background:linear-gradient(180deg, var(--scrim-a) 0%, transparent 30%, var(--scrim-b) 100%);
}
.hero__caption{
  position:absolute;left:40px;bottom:96px;z-index:3;max-width:760px;
}
.hero__tagline{
  color:var(--on);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  font-size:var(--fs-display);text-shadow:0 2px 24px rgba(8,15,22,.5);
}
.hero__scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--on-muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.hero__scrollcue:hover{color:var(--on)}

/* ---------- Blue divider bar (hero → content) ---------- */
.hero-divider{
  position:relative;z-index:6;height:8px;width:100%;
  background:rgba(39,167,223,.55);
  backdrop-filter:blur(3px);
  border-top:1px solid rgba(39,167,223,.35);
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* ---------- Content ---------- */
.content{position:relative;z-index:2;background:var(--bg)}
.section{padding:96px 40px;max-width:1200px;margin:0 auto;background:var(--surface)}
.eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:18px;
}
.display{font-size:var(--fs-h1);font-weight:800;line-height:1.04;letter-spacing:-.02em;color:var(--on)}
.eyebrow--center{text-align:center}
.prose{margin-top:26px;max-width:760px}
.prose p{font-size:var(--fs-lead);line-height:1.7;color:var(--on-muted);margin-bottom:18px}
.prose strong{color:var(--on)}
.pullquote{
  margin:34px 0 0;padding-left:20px;border-left:3px solid var(--brand);
  font-size:22px;font-weight:600;color:var(--on);
}

/* ---------- Capabilities (embedded interactive isometric city) ---------- */
.section--capsX{max-width:none;margin:0;padding:0;background:var(--surface);scroll-margin-top:112px}
.caps-frame{display:block;width:100%;height:clamp(480px,82vh,780px);border:0}
@media (max-width:860px){ .caps-frame{height:600px} }

/* ---------- Capabilities (legacy list — unused) ---------- */
.section--caps{background:linear-gradient(180deg,#fff, var(--bg-soft));max-width:none;padding-left:0;padding-right:0}
.section__head{max-width:1200px;margin:0 auto 40px;padding:0 40px}
.section__title{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.02em}
.section__sub{margin-top:12px;font-size:18px;color:var(--slate);max-width:720px}
.caps{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(260px,1fr) 1.5fr;gap:44px;align-items:start}
.caps__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.caps__list li{
  padding:18px 4px;border-bottom:1px solid var(--line);font-size:20px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:color .2s,padding-left .2s,border-color .2s;
  outline:none;
}
.caps__list li:hover,.caps__list li:focus-visible{color:var(--brand);padding-left:12px}
.caps__list li.is-active{color:var(--brand);padding-left:12px;border-bottom-color:var(--brand)}
.caps__panel{position:sticky;top:120px}
.caps__stage{
  min-height:300px;border-radius:16px;border:1px dashed #c7d0de;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(13,21,38,.04) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(13,21,38,.04) 31px 32px),
    #fff;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
}
.caps__stagenote{color:#9aa4b2;font-size:14px;font-weight:500}
.caps__title{margin-top:26px;font-size:26px;font-weight:800;letter-spacing:-.01em}
.caps__desc{margin-top:12px;font-size:18px;line-height:1.65;color:var(--slate)}

/* ---------- Trusted by ---------- */
.section--trust{text-align:center}
.trust__lead{max-width:720px;margin:6px auto 26px;font-size:20px;line-height:1.6;color:var(--on)}
.trust__logos{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
}
.trust__logos li{
  padding:12px 20px;border:1px solid var(--hair);border-radius:10px;background:var(--surface);
  font-weight:600;font-size:15px;color:var(--on-muted);
}

/* ---------- Careers band ---------- */
.section--band{
  color:var(--on);background:var(--surface);border-top:3px solid var(--brand);
  padding:96px 40px;
}
.band__inner{max-width:1000px;margin:0 auto;text-align:center}
.band__title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em;max-width:820px;margin:0 auto;color:var(--on)}
.band__sub{margin:18px auto 34px;max-width:680px;font-size:18px;color:var(--on-muted)}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px;text-align:left}
.role{background:var(--surface-2);border:1px solid var(--hair);border-radius:12px;padding:22px}
.role h4{font-size:18px;font-weight:700;color:var(--on);margin-bottom:8px}
.role p{font-size:14.5px;line-height:1.6;color:var(--on-muted)}
.btn{display:inline-block;padding:14px 26px;border-radius:8px;font-weight:600;font-size:15px;transition:.2s}
.btn--light{background:var(--blue-700);color:#fff}
.btn--light:hover{background:var(--blue-800)}
.btn--outline{border:1px solid var(--hair);color:var(--on)}
.btn--outline:hover{background:var(--surface-2)}

/* ---------- Contact ---------- */
.contact{background:var(--surface)}
.contact__cta{text-align:center;padding:88px 40px 20px;color:var(--on);max-width:820px;margin:0 auto}
.contact__title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em;color:var(--on)}
.contact__sub{margin:16px auto 28px;font-size:18px;color:var(--on-muted);max-width:560px}
.contact__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--surface);color:var(--on-muted);padding:56px 40px 40px}
.footer__h4b{margin-top:22px}
.footer__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.brand--footer{display:inline-block;margin-bottom:16px}
.footer__logo{height:66px;width:auto;display:block}
.footer__tag{color:var(--on-faint);font-size:15px;max-width:320px}
.footer h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--on);margin-bottom:14px}
/* credential / contact data reads like a spec sheet */
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.01em;line-height:1.5}
.footer a:hover{color:var(--on)}
.footer__fine{max-width:1200px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--hair);font-size:13px;color:var(--on-faint)}

/* ---------- Theme preview switch (temporary tool) ---------- */
.theme-switch{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;
  background:rgba(11,20,28,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:var(--font);
}
.theme-switch__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);padding:0 6px}
.theme-switch button{
  border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.85);background:transparent;padding:6px 12px;border-radius:999px;transition:.15s;
  display:inline-flex;align-items:center;gap:7px;
}
.theme-switch button::before{content:"";width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.theme-switch button[data-set-theme="white"]::before{background:#fff}
.theme-switch button[data-set-theme="cyan"]::before{background:#27a7df}
.theme-switch button[data-set-theme="blue"]::before{background:#195f81}
.theme-switch button[data-set-theme="navy"]::before{background:#15181c}
.theme-switch button[data-set-theme="black"]::before{background:#06090D}
.theme-switch button:hover{background:rgba(255,255,255,.10)}
.theme-switch button.is-on{background:#fff;color:#0B141C}
.theme-switch button.is-on::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
@media (max-width:600px){ .theme-switch__label{display:none} .theme-switch button{padding:6px 9px} }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .topbar{padding:7px 18px;gap:12px}
  .topbar__msg{font-size:11px}
  .nav{padding:14px 18px}
  .nav__toggle{display:flex}
  .nav__links{
    position:absolute;top:100%;right:12px;left:12px;flex-direction:column;align-items:flex-start;
    gap:6px;padding:14px;background:rgba(11,20,28,.98);border-radius:12px;
    box-shadow:0 20px 40px rgba(8,15,22,.5);display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__cta{width:100%;text-align:center}
  .section{padding:64px 22px}
  .section--band{padding:64px 22px}
  .hero__caption{left:22px;right:22px;bottom:88px}
  .caps{grid-template-columns:1fr}
  .caps__panel{position:static}
  .roles{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:28px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}