/* ============================================================
   LIGHT THEME — Override layer, stacks after b.css
   Brand palette from EnerTec Company Profile 2026.
   Dark navy: #022D40 · Blue: #2061A9 · Teal: #15BCCF
============================================================ */

/* ---------- Color system ---------- */
:root {
  --bg:        #F8F9F9;   /* profile near-white */
  --surface:   #FFFFFF;
  --surface-2: #EDF0F2;
  --line:      rgba(0,0,0,.09);
  --line-2:    rgba(0,0,0,.17);
  --text:      #022D40;   /* brand dark navy */
  --muted:     #3D6070;
  --muted-2:   #7A909E;
  --brand:     #2061A9;   /* corporate blue */
  --brand-2:   #1A4E8A;
  --gold:      #2061A9;   /* blue replaces gold as primary accent */
  --gold-2:    #1A4E8A;
  --cyan:      #15BCCF;   /* brand teal — icons, highlights */
  --green:     #0A7844;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(32,97,169,.03),  transparent 60%),
    radial-gradient(1000px 500px at 0% 110%,  rgba(21,188,207,.04), transparent 60%);
}

/* ---------- Display typography ---------- */
.display .ghost { color: rgba(2,45,64,.35); }

/* ---------- Buttons ---------- */
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-2); box-shadow: 0 14px 30px rgba(32,97,169,.28); }
.btn-ghost { color: var(--text); border-color: var(--line-2); background: rgba(0,0,0,.02); }
.btn-ghost:hover { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.22); }

/* ---------- Header — two states ---------- */
/* State 1: transparent over dark hero */
.nav       { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); }
.nav a     { color: rgba(255,255,255,.78); }
.nav a:hover { color: #fff; background: rgba(255,255,255,.10); }
.nav-cta   { background: var(--gold); color: #fff; }
.brand .tag { color: rgba(255,255,255,.50); border-color: rgba(255,255,255,.16); }
/* Hamburger: white over dark hero */
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: #E5E7EB; transition: background .35s ease; }

/* State 2: scrolled — light frosted glass */
.header.is-scrolled {
  background: rgba(248,249,249,.93);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  border-bottom-color: var(--line);
}
.header.is-scrolled .nav       { background: rgba(0,0,0,.04); border-color: var(--line); }
.header.is-scrolled .nav a     { color: var(--muted); }
.header.is-scrolled .nav a:hover { color: var(--text); background: rgba(0,0,0,.04); }
.header.is-scrolled .brand .tag { color: var(--muted); border-color: var(--line); }
/* Logo white → dark navy when on light bg */
.header.is-scrolled .brand img { filter: brightness(0); transition: filter .35s ease; }
/* Hamburger: dark when scrolled */
.header.is-scrolled .nav-toggle span,
.header.is-scrolled .nav-toggle span::before,
.header.is-scrolled .nav-toggle span::after { background: var(--text); }

/* Mobile nav drawer — always light */
@media (max-width: 980px) {
  .nav {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 24px 60px rgba(0,0,0,.12);
  }
  .nav a { color: var(--muted); }
  .nav a:hover { color: var(--text); background: rgba(0,0,0,.04); }
  .nav .nav-cta-mobile { background: var(--gold); color: #fff; }
  .nav .nav-cta-mobile:hover { background: var(--gold-2); }
}

/* ---------- Hero — cinematic dark, fades into brand bg ---------- */
.hero h1, .hero .hero-sub, .hero .hero-tag { color: #E5E7EB; }
.hero .hero-sub  { color: rgba(229,231,235,.80); }
.hero .hero-tag  { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.display .ghost  { color: rgba(229,231,235,.82); }

/* Overlay: dark top → fades into brand near-white */
.hero::before {
  background:
    linear-gradient(180deg,
      rgba(2,45,64,.72) 0%,
      rgba(2,45,64,.42) 50%,
      #F8F9F9 100%),
    repeating-linear-gradient(0deg,   rgba(255,255,255,.025) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.025) 0 1px, transparent 1px 80px);
}
.hero-bg img { opacity: .62; }

/* Ghost btn on dark hero */
.hero .btn-ghost {
  color: #E5E7EB;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
}
.hero .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.50);
  background: rgba(255,255,255,.10);
}

/* Ticker fades into page bg */
.hero-ticker {
  background: linear-gradient(180deg, transparent, rgba(248,249,249,.97));
  border-top-color: rgba(0,0,0,.07);
  color: var(--muted);
}
.hero-ticker .marquee-track span::before { background: var(--cyan); }

/* ---------- Trust strip ---------- */
.trust-strip { border-bottom-color: var(--line); background: var(--surface); }
.trust-strip .marquee-track .logo-pill {
  background: var(--bg);
  border-color: var(--line);
}
.trust-strip .marquee-track .logo-pill::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
}
.trust-strip .marquee-track .logo-pill::after {
  background: radial-gradient(140px 100px at 100% 0%, rgba(32,97,169,.10), transparent 70%);
}
.trust-strip .marquee-track .logo-pill:hover {
  border-color: var(--gold);
  background: var(--surface-2);
  box-shadow: 0 10px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(32,97,169,.18);
}
.trust-strip .marquee-track .logo-pill img { filter: brightness(.9) saturate(1.05); }
.trust-strip .label .gold { color: var(--cyan); }

/* ---------- Section heads ---------- */
.section-head { border-bottom-color: var(--line); }

/* ---------- Capability modules ---------- */
.module { background: var(--surface); border-color: var(--line); }
.module:hover { background: var(--surface-2); border-color: var(--line-2); }
/* Top accent line uses --gold → now blue */

/* ---------- Bento ---------- */
.bento-card { border-color: var(--line); background: var(--surface); }
.bento-card::after {
  background: linear-gradient(180deg, transparent 50%, rgba(6,10,18,.82) 100%);
}
/* Text always sits over dark photography — must be white regardless of theme */
.bento-card .meta h4  { color: #ffffff; }
.bento-card .meta .ix { color: rgba(21,188,207,.85); }   /* brand teal */
.bento-card .meta .tag {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
}

/* ---------- Supply flow ---------- */
.flow { background: var(--surface); border-color: var(--line); }
.flow::before {
  background:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 24px);
}
.flow-step { background: var(--bg); border-color: var(--line); }
.flow-step.is-active {
  box-shadow: 0 0 0 1px var(--gold), 0 14px 40px rgba(32,97,169,.12);
}

/* ---------- Sector tabs ---------- */
.tab { background: var(--bg); border-color: var(--line); }
.tab:hover { border-color: var(--line-2); }
.tab.is-active { background: var(--surface); }
.panel { background: var(--surface); border-color: var(--line); }
.panel p, .panel li { color: var(--muted); }

/* ---------- Network ---------- */
.network-wrap { background: var(--surface); border-color: var(--line); }
.network-map  { background: var(--surface-2); }
.network-map img { opacity: .55; mix-blend-mode: multiply; }
.npin .label  { color: var(--text); }
.netstat      { border-bottom-color: var(--line); }

/* ---------- Project capability strip ---------- */
.proj-strip .copy { background: var(--surface); border-color: var(--line); }
.proj-strip .copy li { border-color: var(--line); color: var(--muted); }
.proj-strip .copy li:hover { border-color: var(--gold); color: var(--text); }
.proj-strip .visual { border-color: var(--line); }
.proj-strip .visual::after {
  background: linear-gradient(180deg, transparent 58%, rgba(2,45,64,.72));
}

/* ---------- Advantage ---------- */
.adv-cell { background: var(--surface); border-color: var(--line); }
.adv-cell:hover { border-color: var(--line-2); }
.adv-cell::before {
  background: radial-gradient(180px 180px at 100% 0%, rgba(32,97,169,.08), transparent 70%);
}

/* ---------- Partners ---------- */
.partners-b .cat-row { border-top-color: var(--line); }

/* Glass → light glass tiles */
.partners-b[data-variant="glass"] .logo,
.partners-b:not([data-variant]) .logo {
  background: var(--bg);
  border-color: var(--line);
  backdrop-filter: none;
}
.partners-b[data-variant="glass"] .logo::before,
.partners-b:not([data-variant]) .logo::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
}
.partners-b[data-variant="glass"] .logo::after,
.partners-b:not([data-variant]) .logo::after {
  background: radial-gradient(180px 120px at 100% 0%, rgba(32,97,169,.08), transparent 70%);
}
.partners-b[data-variant="glass"] .logo:hover,
.partners-b:not([data-variant]) .logo:hover {
  background: var(--surface-2);
  border-color: var(--gold);
  box-shadow: 0 10px 28px rgba(0,0,0,.07), 0 0 0 1px rgba(32,97,169,.18);
}
.partners-b[data-variant="glass"] .logo img,
.partners-b:not([data-variant]) .logo img { filter: brightness(.92) saturate(1.05); }

.partners-b[data-variant="outline"] .logo { border-color: var(--line); }
.partners-b[data-variant="outline"] .logo:hover {
  border-color: var(--gold);
  background: rgba(32,97,169,.04);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}

/* ---------- Final CTA — dark full-bleed image ---------- */
/* mono-tag override: --gold is dark blue in light theme, needs to be bright on dark CTA panel */
.cta-final-b .mono-tag { color: rgba(21,188,207,.9); }  /* brand teal — visible on dark */

.cta-final-b::before {
  background:
    radial-gradient(700px 350px at 50% 40%, rgba(21,188,207,.08), transparent 58%),
    linear-gradient(180deg, rgba(2,45,64,.52) 0%, rgba(2,45,64,.92) 100%);
}
/* Glass card — frosted navy panel */
.cta-final-b .panel-card {
  background: rgba(2,45,64,.30);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cta-final-b .panel-card::before {
  background: linear-gradient(135deg,
    rgba(21,188,207,.45), transparent 35%,
    transparent 65%, rgba(32,97,169,.45));
}
.cta-final-b h2   { color: #FFFFFF; }
.cta-final-b p    { color: rgba(255,255,255,.72); }
.cta-final-b .btn-ghost {
  color: #E5E7EB;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
}
.cta-final-b .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.50);
  background: rgba(255,255,255,.10);
}

/* ---------- Footer ---------- */
.footer-b { background: var(--surface); border-top-color: var(--line); }
.footer-b .meta { border-top-color: var(--line); }