/* ==========================================================
   WELTROM BRAND SYSTEM v3.0
   Teal accent (#7FEDCA) · pill controls, square photography · Barlow Condensed + Inter
   Source of truth: /brand/weltrom-brand-guide.html
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --volt: #7FEDCA;
  --volt-deep: #0F8A6C;
  --volt-tint: #E3FBF3;
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --sunken: #F1EFE9;
  --border: #E4E2DC;
  --border-strong: #D2CFC5;
  --ink: #12161F;
  --ink-soft: #454B5C;
  --muted: #767C8C;
  --white: #FFFFFF;
  --overlay: #0E1116;
  --overlay-soft: #B7BECC;
  --ok: #1E9E63;
  --warn: #C9891A;
  --crit: #D31538;
  --r-pill: 999px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--volt); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { list-style: none; }

/* ---------- Header / Nav ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(250,250,248,0.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.site-header .inner {
  max-width: 1360px; margin: 0 auto; padding: 1.1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.brandmark { display: flex; align-items: center; gap: 0.7rem; }
.brandmark-text { font-family: 'Barlow Condensed', sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); transition: color 0.3s ease; }
.brandmark-tag { display: none; }

/* ---------- Transparent header (floats over a full-bleed hero video, e.g. homepage) ----------
   Only applied where header.site-header carries .transparent — every other page keeps the
   original always-solid sticky header untouched. .scrolled is toggled by site.js once the
   page has scrolled past the hero, swapping the header to a solid white bar + dark text. */
header.site-header.transparent {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
header.site-header.transparent .brandmark-text,
header.site-header.transparent nav.main-nav > ul > li > a,
header.site-header.transparent nav.main-nav > ul > li > button,
header.site-header.transparent .header-cta a.text-link {
  color: rgba(255,255,255,0.92);
  transition: color 0.3s ease;
}
header.site-header.transparent nav.main-nav > ul > li > a:hover,
header.site-header.transparent nav.main-nav > ul > li > button:hover,
header.site-header.transparent nav.main-nav > ul > li > a.active { color: #fff; }
header.site-header.transparent .hamburger span { background: #fff; transition: background 0.3s ease; }

header.site-header.transparent.scrolled {
  background: rgba(250,250,248,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
header.site-header.transparent.scrolled .brandmark-text,
header.site-header.transparent.scrolled nav.main-nav > ul > li > a,
header.site-header.transparent.scrolled nav.main-nav > ul > li > button,
header.site-header.transparent.scrolled .header-cta a.text-link { color: var(--ink-soft); }
header.site-header.transparent.scrolled nav.main-nav > ul > li > a:hover,
header.site-header.transparent.scrolled nav.main-nav > ul > li > button:hover,
header.site-header.transparent.scrolled nav.main-nav > ul > li > a.active { color: var(--ink); }
header.site-header.transparent.scrolled .hamburger span { background: var(--ink); }

/* Dynamic logo — mark draws itself on load, as in v1 */
.logo-mark svg { display: block; overflow: visible; }
.logo-wave-path {
  stroke: var(--ink);
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawWave 1.8s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
  transition: stroke 0.3s ease;
}
/* Over the transparent hero video the teal reads better than black; once the header
   solidifies to a white bar (.scrolled) it reverts to ink, same as every other page. */
header.site-header.transparent:not(.scrolled) .logo-wave-path { stroke: #7FEDCA; }
@keyframes drawWave { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .logo-wave-path { animation: none; stroke-dashoffset: 0; } }

nav.main-nav { display: flex; align-items: center; gap: 2rem; }
nav.main-nav > ul { display: flex; align-items: center; gap: 1.8rem; }
nav.main-nav > ul > li { position: relative; }
nav.main-nav > ul > li > a, nav.main-nav > ul > li > button {
  font-size: 0.96rem; font-weight: 500; color: var(--ink-soft);
  background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif;
  display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0;
  transition: color 0.15s;
}
nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li > button:hover,
nav.main-nav > ul > li > a.active { color: var(--ink); }
nav.main-nav svg.chev { width: 10px; height: 10px; transition: transform 0.2s; }
nav.main-nav li.has-dropdown:hover svg.chev { transform: rotate(180deg); }

li.has-dropdown { position: relative; }
/* Invisible hover bridge spanning the gap between the nav link and the dropdown panel below it.
   Wide enough to forgive natural diagonal mouse movement (~±30° off vertical) without reaching
   into a neighboring nav item's own bridge — the dropdown panel itself (wider, further down)
   takes over as the hover target once the cursor is past this sliver. */
li.has-dropdown::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 100px; height: 1rem;
}
.dropdown {
  position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(18,22,31,0.1);
  min-width: 460px; padding: 1.2rem; display: none; gap: 0.3rem; flex-direction: column;
}
li.has-dropdown:hover .dropdown, li.has-dropdown:focus-within .dropdown { display: flex; }
.dropdown a { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; border-radius: 10px; transition: background 0.15s; }
.dropdown a:hover { background: var(--sunken); }
.dropdown a .t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); }
.dropdown a .d { font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; }

.header-cta { display: flex; align-items: center; gap: 1.4rem; }
.header-cta a.text-link { font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.hamburger span { width: 22px; height: 2px; background: var(--ink); transition: transform 0.25s, opacity 0.25s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; }
.mobile-nav.open { display: block; background: var(--surface); border-bottom: 1px solid var(--border); padding: 1rem var(--gutter) 1.5rem; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.2rem; }
.mobile-nav a, .mobile-nav .msub-head { display: block; padding: 0.7rem 0.2rem; font-size: 0.95rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--border); }
.mobile-nav .msub { padding-left: 1rem; }
.mobile-nav .msub a { font-size: 0.85rem; color: var(--ink-soft); border-bottom: none; padding: 0.5rem 0.2rem; }

/* ---------- Layout ---------- */
.wrap { max-width: 1360px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* position+z-index here (not just padding) so every section reliably paints above the
   story-stack's pinned video (z-index:1) — a plain, unpositioned section sits at the
   base stacking layer regardless of DOM order and can end up rendered underneath any
   positioned/sticky content earlier on the page, which is exactly what happened to
   Products/Supporters once the section that used to sit right after the video (and
   carried this same fix) was moved elsewhere. */
section { padding: 5.5rem 0; position: relative; z-index: 2; background: var(--bg); }
section.tight { padding: 3.5rem 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt-deep); margin-bottom: 1.2rem; }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--volt-deep); }
h1, h2, h3, h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.08; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); max-width: 20ch; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p { color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
p.lede { font-size: 1.08rem; line-height: 1.75; max-width: 56ch; }
.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons (pill — the only rounded controls) ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.9rem 1.7rem; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s; font-family: 'Inter', sans-serif; }
.btn-primary { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.btn-primary:hover { background: var(--volt-deep); color: var(--ink); box-shadow: 0 10px 24px rgba(127,237,202,0.45); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--volt-deep); background: var(--volt-tint); }
.btn-on-dark { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-on-dark:hover { background: #E4EAFF; transform: translateY(-1px); }
.btn-outline-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-outline-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ---------- Photography (always square — see brand guide §05) ---------- */
.photo { position: relative; overflow: hidden; background: #12161F; isolation: isolate; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; z-index: 2; }
/* Once a real photo is in place, the gradient/texture/trend-line placeholder graphics retire. */
.photo:has(img)::before, .photo:has(img)::after { display: none; }
.photo.grade-a { background: linear-gradient(200deg, #1B2130 0%, #223056 42%, #7FEDCA 135%); }
.photo.grade-b { background: linear-gradient(160deg, #0E1116 0%, #182338 55%, #35B48C 140%); }
.photo.grade-c { background: linear-gradient(215deg, #101827 0%, #1C2740 50%, #7FEDCA 150%); }
.photo::before { content: ''; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: overlay; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 70px); }
/* Rising-trend motif — echoes the failure-risk chart in the hero console panel.
   Stands in for photography until real site/product photos are shot. */
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.5;
  background-image:
    linear-gradient(0deg, rgba(6,8,15,0.35) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' preserveAspectRatio='none'%3E%3Cpath d='M0,210 C60,206 100,196 140,178 C180,160 200,120 240,96 C280,72 320,52 400,18' fill='none' stroke='%237FEDCA' stroke-width='1.4' stroke-linecap='round' opacity='0.55'/%3E%3Cpath d='M0,232 C70,228 110,220 150,206 C200,188 230,150 270,124 C310,98 350,74 400,52' fill='none' stroke='%237FEDCA' stroke-width='1' stroke-linecap='round' opacity='0.3'/%3E%3Ccircle cx='240' cy='96' r='3' fill='%23C9F7E8'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

/* Hero: full-bleed photo with dark gradient + headline */
.hero-photo { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; }
.hero-photo .scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,17,22,0.92) 0%, rgba(14,17,22,0.55) 48%, rgba(14,17,22,0.15) 78%); z-index: 1; }
.hero-photo .wrap { position: relative; z-index: 2; padding-top: 3rem; padding-bottom: 3rem; }
.hero-photo h1 { color: var(--white); max-width: 16ch; }
.hero-photo h1 em { font-style: normal; color: #7FEDCA; }
.hero-photo p.lede { color: #C8CEDB; margin: 1.5rem 0 2.2rem; }
.hero-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-stats { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.hero-stat { position: relative; padding-top: 0.7rem; }
.hero-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 2px; border-radius: var(--r-pill); background: var(--volt-deep); }
.hero-stat .v { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--white); text-transform: uppercase; }
.hero-stat .l { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #A9B0C2; margin-top: 0.2rem; }

/* ---------- Hero split: light bg + live console chart panel ---------- */
.hero-split { padding: 5rem 0 6rem; background: var(--bg); position: relative; z-index: 3; }
.hero-split .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; position: relative; z-index: 2; }
.hero-split h1 { max-width: 12ch; }
.hero-split h1 em { font-style: normal; color: var(--volt-deep); }
.hero-split p.lede { margin: 1.4rem 0 2rem; }
.hero-stats-light { display: flex; gap: 2.2rem; flex-wrap: wrap; }

/* Hero video background variant — fills the entire viewport (desktop and mobile), with the
   transparent header floating on top of it, Driventic-style animated text reveal on load. */
.hero-split.has-video {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  padding: 6rem 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.hero-split .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-split .bg-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(8,10,15,0.32) 0%, rgba(8,10,15,0.62) 100%); }

/* ---------- About intro (homepage, directly below the hero video) ---------- */
.about-intro { background: var(--surface); }
.about-intro-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 3rem; align-items: center; }
.about-intro-logo { display: flex; justify-content: center; }
.about-intro-logo svg { width: 100%; max-width: 340px; height: auto; overflow: visible; display: block; }
.about-intro-logo .logo-wave-path-big { stroke: #7FEDCA; stroke-dasharray: 200; stroke-dashoffset: 200; }
/* .draw is toggled by site.js every time the logo scrolls into view (either direction),
   forcing a reflow first so the animation restarts instead of only playing once. */
.about-intro-logo .logo-wave-path-big.draw {
  animation: drawWave 1.8s cubic-bezier(0.4,0,0.2,1) forwards;
}
.about-intro-text h2 { color: var(--ink); margin-bottom: 1.4rem; }
.about-intro-text p { color: var(--ink); font-size: 1.05rem; line-height: 1.8; max-width: 62ch; margin-bottom: 1.2rem; }
.about-intro-text p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-intro-logo { justify-content: flex-start; }
  .about-intro-logo svg { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .about-intro-logo .logo-wave-path-big { animation: none; stroke-dashoffset: 0; } }

/* ---------- Story stack (homepage, below "We are Weltrom") ----------
   Pinned background video with two solid text cards that scroll up over it. Pure CSS:
   the video is position:sticky with zero flow-height (so it never runs out of "room" and
   stays pinned for the whole 300vh of this section); the two cards are ordinary
   absolutely-positioned content within that same tall section, so they scroll into view
   at normal speed like any other content — rising from the bottom, passing over the
   still-pinned video, and exiting off the top. Scrolling back up reverses all of it for
   free, since it's just a function of scroll position, not a JS-driven animation. */
/* -87px accounts for the fixed white header: it permanently covers the top ~87px of the
   viewport, so a card's bottom edge visually disappears (tucks behind the header) 87px
   before it would mathematically reach the true viewport top. Without this offset the
   teal card's entry (unaffected by the header, since that only covers the top) would
   start ~87px too late, leaving a sliver of a gap. */
.story-stack { position: relative; height: calc(400vh - 87px); }
.story-video-pin { position: sticky; top: 0; height: 0; z-index: 1; }
.story-video-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; }
.story-video-fill .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.story-video-fill .bg-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(6,8,12,0.28); }

.story-box {
  position: absolute; left: 0; width: 100%; height: 100vh; z-index: 2;
  display: flex; align-items: center;
}
.story-box-inner { padding: 3rem 2.75rem; }
.story-box-inner h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); margin-bottom: 1.3rem; max-width: none; }
.story-box-inner p { font-size: 1.12rem; line-height: 1.75; margin-bottom: 1.1rem; }
.story-box-inner p:last-child { margin-bottom: 0; }

.story-box--black { top: 100vh; }
.story-box--black .story-box-inner { background: #06080B; margin-left: 30%; margin-right: 10%; width: 60%; }
.story-box--black .story-box-inner h2, .story-box--black .story-box-inner p { color: var(--white); }

/* calc(300vh - 87px) — matches the same -87px header correction as .story-stack above,
   so the teal card starts entering at exactly the scroll position where the black card's
   bottom edge visually tucks behind the fixed header, with no gap and no overlap. */
.story-box--teal { top: calc(300vh - 87px); }
.story-box--teal .story-box-inner { background: #7FEDCA; margin-left: 10%; margin-right: 30%; width: 60%; }
.story-box--teal .story-box-inner h2, .story-box--teal .story-box-inner p { color: #06080B; }
/* Noticeably more copy than the black card (4 paragraphs vs 2) — tighter than the black
   card's sizing so it still fits within the 100vh card on typical screens, but bumped up
   from the original pass. */
.story-box--teal .story-box-inner { padding: 2.2rem 2.75rem; }
.story-box--teal .story-box-inner h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 0.9rem; }
.story-box--teal .story-box-inner p { font-size: 1rem; line-height: 1.6; margin-bottom: 0.7rem; }

@media (max-width: 900px) {
  .story-stack { height: calc(440vh - 87px); }
  .story-box--black .story-box-inner, .story-box--teal .story-box-inner {
    width: auto; margin-left: 1.25rem; margin-right: 1.25rem; padding: 2.2rem 1.6rem;
  }
  .story-box-inner p { font-size: 0.94rem; }
}

/* ---------- Rotating hero tagline (video hero only) ---------- */
.hero-tagline { position: relative; z-index: 2; width: 100%; max-width: 960px; min-height: clamp(6rem, 16vw, 9rem); margin: 0 auto; }
.tagline-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 1rem;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: clamp(2.3rem, 6.5vw, 4.4rem); line-height: 1.15; letter-spacing: -0.01em;
  color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1);
}
/* Item 1: enters fully off-screen right, exits fully off-screen left, in the brand blue. */
.tagline-item.type-slide { color: #7FEDCA; transform: translateX(110%); }
.tagline-item.type-slide.active { opacity: 1; transform: translateX(0); }
.tagline-item.type-slide.leaving { opacity: 0; transform: translateX(-110%); }
.tagline-item.type-fade.active { opacity: 1; }
.tagline-item.type-fade.leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tagline-item { transition: none; } }
.hero-stats-light .hero-stat .v { color: var(--ink); }
.hero-stats-light .hero-stat .l { color: var(--muted); }

/* Tagline fades in on load (not scroll) — the tagline-item classes themselves handle
   the per-phrase enter/exit cycling once site.js starts the rotation. */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero-tagline { opacity: 0; animation: heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s forwards; }
@media (prefers-reduced-motion: reduce) {
  .hero-split .bg-video { display: none; }
  .hero-tagline { animation: none; opacity: 1; }
}

.console-panel { background: var(--overlay); border: 1px solid #232B3D; padding: 1.8rem; }
.console-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8B93A6; }
.console-head .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 2.5s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.console-chart { display: block; width: 100%; height: auto; overflow: visible; }
.c-axis { stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.c-label { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 400; fill: #8B93A6; }
.c-axis-title { font-family: 'Inter', sans-serif; font-size: 7px; font-weight: 500; fill: #8B93A6; letter-spacing: 0.08em; text-transform: uppercase; }
.c-window { fill: rgba(127,237,202,0.1); stroke: rgba(127,237,202,0.4); stroke-width: 1; stroke-dasharray: 3 3; }
.c-window-label { font-family: 'Inter', sans-serif; font-size: 7px; font-weight: 500; fill: #7FEDCA; letter-spacing: 0.03em; text-transform: uppercase; }
.c-alarm-line { stroke: rgba(127,237,202,0.6); stroke-width: 1; stroke-dasharray: 4 3; }
.c-alarm-label { font-family: 'Inter', sans-serif; font-size: 7.5px; font-weight: 500; fill: #7FEDCA; letter-spacing: 0.02em; text-transform: uppercase; }
.c-today-line { stroke: #6E7690; stroke-width: 1; stroke-dasharray: 2 3; }
.c-today-label { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 500; fill: #8B93A6; letter-spacing: 0.04em; text-transform: uppercase; }
.c-failure-line { stroke: #C8CEDB; stroke-width: 1; }
.c-failure-label { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 600; fill: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.c-line { fill: none; stroke: var(--volt); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: drawLine 2s cubic-bezier(0.4,0,0.2,1) 0.6s forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.c-point { fill: var(--volt); }
.c-point-label { font-family: 'Inter', sans-serif; font-size: 7px; font-weight: 500; fill: #fff; letter-spacing: 0.02em; text-transform: uppercase; }
.console-caption { font-size: 0.72rem; line-height: 1.6; color: #8B93A6; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid #232B3D; }
@media (prefers-reduced-motion: reduce) { .c-line { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 900px) { .hero-split .grid { grid-template-columns: 1fr; } }

/* Overlay panel: black block flush on a photo (Driventic pattern) */
.overlay-block { position: relative; }
.overlay-block .photo { min-height: 320px; }
@media (min-width: 641px) { .overlay-block .photo { min-height: 460px; } }
.overlay-block .panel { position: absolute; right: 0; bottom: 0; left: 42%; background: var(--overlay); padding: 2.2rem 2.4rem; z-index: 2; }
.overlay-block .panel h3 { color: var(--white); margin-bottom: 0.7rem; }
.overlay-block .panel p { color: var(--overlay-soft); font-size: 0.92rem; }
@media (max-width: 900px) { .overlay-block .panel { left: 15%; } }
@media (max-width: 640px) { .overlay-block .panel { position: static; } .overlay-block .photo { min-height: 240px; } }

/* ---------- Cards (square) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--border); padding: 2rem 1.8rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.card:hover { border-color: var(--border-strong); box-shadow: 0 16px 32px rgba(18,22,31,0.07); transform: translateY(-3px); }
.card .ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--volt-tint); color: var(--volt-deep); margin-bottom: 1.3rem; }
.card h3 { margin-bottom: 0.7rem; }
.card p { font-size: 0.9rem; }
.card a.card-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.2rem; font-size: 0.78rem; font-weight: 600; color: var(--volt-deep); text-transform: uppercase; letter-spacing: 0.06em; }

.product-card { background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: box-shadow 0.25s, transform 0.25s; }
.product-card:hover { box-shadow: 0 18px 36px rgba(18,22,31,0.08); transform: translateY(-3px); }
.product-card .photo { height: 170px; }
.product-card .body { padding: 1.6rem 1.6rem 1.9rem; }
.product-card .kicker { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--volt-deep); margin-bottom: 0.5rem; }
.product-card h3 { margin-bottom: 0.6rem; }
.product-card p { font-size: 0.88rem; }

/* ---------- Stats band ---------- */
.stat-band { background: var(--overlay); color: var(--white); padding: 4rem 0; }
.stat-band .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.stat-band .stat .v { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; }
.stat-band .stat .l { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #A9B0C2; margin-top: 0.4rem; }

/* ---------- Logos strip ---------- */
.logos-strip { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; opacity: 0.55; }
.logos-strip span { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 1rem; color: var(--ink-soft); }

/* ---------- Supporter logo marquee (auto-scrolling ribbon) ---------- */
.supporters-band { background: var(--overlay); padding: 4.5rem 0; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.marquee-track { display: flex; align-items: center; width: max-content; gap: 7.5rem; animation: marquee-scroll 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Fixed-size bounding box per logo — not just a shared height — so a compact mark (ZHAW)
   and a wide thin wordmark (swissuniversities) occupy the same footprint in the strip
   instead of the wide one reading much bigger just because its aspect ratio is different. */
.marquee-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 220px; height: 72px; }
/* grayscale removes each logo's original color, invert flips dark-on-white to light-on-dark —
   a plain white JPG background (Talent Kick) inverts to near-black and blends into the
   section instead of showing as a visible box, no separate dark-bg logo assets needed. */
.marquee-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) invert(1); opacity: 0.7; transition: opacity 0.2s; }
.marquee-logo:hover img { opacity: 1; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Testimonial ---------- */
.testimonial { background: var(--sunken); border-left: 3px solid var(--volt-deep); padding: 2.4rem 2.6rem; max-width: 760px; }
.testimonial p { font-size: 1.15rem; line-height: 1.65; color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 400; }
.testimonial .who { margin-top: 1.4rem; font-size: 0.82rem; color: var(--muted); }
.testimonial .who strong { color: var(--ink); }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--border-strong); padding: 0.85rem 1.1rem; font-family: 'Inter', sans-serif; font-size: 0.92rem; color: var(--ink); }
.field input, .field select { border-radius: var(--r-pill); }
.field textarea { border-radius: 14px; min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--volt-deep); box-shadow: 0 0 0 3px var(--volt-tint); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--overlay); color: #A9B0C2; padding: 4.5rem 0 2.5rem; }
footer.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
footer.site-footer h5 { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6E7690; margin-bottom: 1.1rem; font-weight: 600; }
footer.site-footer ul { display: flex; flex-direction: column; gap: 0.65rem; }
footer.site-footer a { font-size: 0.86rem; color: #C8CEDB; transition: color 0.15s; }
footer.site-footer a:hover { color: #fff; }
footer.site-footer .brandmark-text { color: #fff; }
footer.site-footer p.tag { font-size: 0.82rem; color: #6E7690; margin-top: 0.8rem; max-width: 28ch; }
footer.site-footer .bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.76rem; color: #6E7690; }
footer.site-footer .bottom a { color: #6E7690; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--ink-soft); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.badge.ok .dot { background: var(--ok); }
.badge.warn .dot { background: var(--warn); }
.badge.crit .dot { background: var(--crit); }

/* ---------- Problem statement ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 2.4rem; }
.problem-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--crit); padding: 2rem 1.9rem; }
.problem-card .tag { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crit); margin-bottom: 0.9rem; }
.problem-card h3 { margin-bottom: 0.7rem; }
.problem-card p { font-size: 0.9rem; }
.root-cause { margin-top: 2rem; padding: 1.4rem 1.7rem; background: var(--sunken); border-left: 3px solid var(--volt-deep); max-width: 68ch; }
.root-cause p { color: var(--ink); font-size: 0.94rem; line-height: 1.7; margin: 0; }
.root-cause strong { color: var(--ink); }

/* ---------- How it works (numbered steps) ---------- */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 2.4rem; position: relative; }
.step { position: relative; }
.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--overlay); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: 1.3rem; }
.step h3 { margin-bottom: 0.7rem; }
.step p { font-size: 0.9rem; }
@media (max-width: 900px) { .problem-grid, .step-grid { grid-template-columns: 1fr; } }

/* ---------- Founder & backers ---------- */
.founder-grid { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
.about-portrait { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong); transition: transform 0.3s, box-shadow 0.3s; }
.about-portrait:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18,22,31,0.12); }
.about-text p { margin-bottom: 1rem; }
.about-text p:last-child { margin-bottom: 0; }
.backer-logos { display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap; margin-top: 2rem; }
.backer-logo-badge img { display: block; height: 36px; width: auto; border-radius: 6px; }
.backer-logo-plain img { display: block; height: 44px; width: auto; filter: grayscale(1) contrast(1.1); opacity: 0.75; transition: opacity 0.2s, filter 0.2s; }
.backer-logo-plain:hover img { opacity: 1; filter: grayscale(0); }
@media (max-width: 640px) { .founder-grid { grid-template-columns: 1fr; } .about-portrait { width: 140px; height: 140px; } }

/* Two founders side by side on desktop, each with photo above bio */
.founders-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.founders-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.founder-col { display: flex; flex-direction: column; gap: 1.4rem; }
.founder-portrait-sm { width: 160px; height: 160px; }
/* Name = card/panel title (Barlow Condensed 700, brand guide §04), Title = eyebrow/overline, bio = body text */
.person-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; color: var(--ink); margin-bottom: 0.3rem; }
.person-title { font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; color: var(--volt-deep); margin-bottom: 1rem; }
.founder-col .about-text p:not(.person-name):not(.person-title) { font-size: 0.92rem; line-height: 1.75; }
@media (max-width: 900px) { .founders-row { grid-template-columns: 1fr; gap: 3rem; } .founders-row.cols-3 { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1180px) { .founders-row.cols-3 { grid-template-columns: 1fr 1fr; } }

/* ---------- Contact page: intro + form side by side, stacked on mobile ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  footer.site-footer .cols { grid-template-columns: 1fr 1fr; }
  .stat-band .grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}
@media (max-width: 900px) {
  nav.main-nav, .header-cta .text-link { display: none; }
  .hamburger { display: flex; }
  section { padding: 3.5rem 0; }
  .card-grid, .card-grid.two { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .hero-photo { min-height: 520px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  footer.site-footer .cols { grid-template-columns: 1fr; gap: 2rem; }
  /* Keep "Book a Demo" on one line next to the logo and hamburger on phones */
  .site-header .inner { gap: 0.75rem; }
  .header-cta { margin-left: auto; }
  .header-cta .btn { white-space: nowrap; padding: 0.65rem 1.1rem; font-size: 0.78rem; }
  .logo-mark svg { width: 44px; height: 33px; }
  .marquee-track { gap: 3rem; }
  .marquee-logo { width: 150px; height: 56px; }
}

/* ---------- Battery Health Check demo (How It Works hero, #try-it) ----------
   Intro, then sliders (left) and a console-panel forecast chart (right) that redraws on every
   input (pure JS, assets/battery-check.js). Below: the upload card — its Python engine only
   downloads once the card scrolls into view. */
section.bc-hero { padding: 2.2rem 0 4.5rem; }
.bc-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; margin-bottom: 2rem; }
.bc-intro .eyebrow { margin-bottom: 0.9rem; }
.bc-intro h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); max-width: 32ch; }
.bc-intro h1 em { font-style: normal; color: var(--volt-deep); }
.bc-intro .lede { margin-top: 1rem; max-width: 64ch; font-size: 1.02rem; line-height: 1.7; }
.bc-intro-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.bc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.6rem; align-items: start; }
/* chart on the right, pinned below the sticky site header while the sliders are used */
.bc-panel { grid-column: 2; grid-row: 1; position: sticky; top: 100px; padding: 1.6rem 1.7rem; }
.bc-controls { grid-column: 1; grid-row: 1; background: var(--surface); border: 1px solid var(--border); padding: 1.5rem 1.6rem 1.4rem; }
.bc-controls .field { margin-bottom: 1.1rem; gap: 0.1rem; }
.bc-controls .field label { font-size: 0.7rem; color: var(--ink-soft); }
.bc-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bc-label-row output { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-controls .hint, .bc-upload .hint { font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
.bc-controls .bc-cond { background: var(--sunken); padding: 0.65rem 0.85rem; color: var(--ink-soft); margin: 0.2rem 0 0.9rem; }
.bc-reset { background: none; border: none; padding: 0.3rem 0; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--volt-deep); }
.bc-reset:hover { text-decoration: underline; }

/* Sliders: 28px touch target, 4px track filled up to the thumb (--fill, set by battery-check.js) */
/* .bc-controls .field input beats the site's pill-shaped .field input styles */
.bc-controls .field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
.bc-controls .field input[type=range]:focus { box-shadow: none; }
.bc-controls .field input[type=range]:focus-visible { outline: 2px solid var(--volt-deep); outline-offset: 2px; }
.bc-controls input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill); background: linear-gradient(var(--volt-deep), var(--volt-deep)) 0 / var(--fill, 50%) 100% no-repeat, var(--border-strong); }
.bc-controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--volt-deep); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--volt-deep), 0 2px 6px rgba(18,22,31,0.2); transition: transform 0.15s; }
.bc-controls input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.bc-controls input[type=range]::-moz-range-track { height: 4px; border-radius: var(--r-pill); background: var(--border-strong); }
.bc-controls input[type=range]::-moz-range-progress { height: 4px; border-radius: var(--r-pill); background: var(--volt-deep); }
.bc-controls input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--volt-deep); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--volt-deep), 0 2px 6px rgba(18,22,31,0.2); }
.bc-controls input[type=range]:disabled { cursor: default; opacity: 0.35; }

.bc-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-top: 1.6rem; }
.bc-source { display: inline-flex; align-items: center; gap: 0.45rem; color: #7FEDCA; }
.bc-source::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bc-source.data { color: #FFD27A; }
.bc-band { fill: rgba(127,237,202,0.14); }
.bc-line { fill: none; stroke: var(--volt); stroke-width: 2; stroke-linecap: round; }
.bc-grid-line { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.bc-eol-window { stroke: rgba(127,237,202,0.5); stroke-width: 5; }
.bc-eol-cap { stroke: #7FEDCA; stroke-width: 1.5; }
.bc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid #232B3D; }
.bc-stats .v { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--white); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bc-stats .l { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8B93A6; margin-top: 0.35rem; }
.bc-stats .s { font-size: 0.74rem; color: #B7BECC; margin-top: 0.15rem; }
.bc-tighter { display: inline-block; margin-top: 1rem; font-size: 0.8rem; font-weight: 600; color: #7FEDCA; }
.bc-tighter:hover { text-decoration: underline; }
.bc-tighter[hidden] { display: none; }

/* "How to read the chart": first sentence visible, sources folded away */
.bc-note { margin-top: 1.2rem; max-width: 95ch; }
.bc-note summary { cursor: pointer; font-size: 0.82rem; line-height: 1.6; color: var(--ink-soft); list-style: none; }
.bc-note summary::-webkit-details-marker { display: none; }
.bc-note summary b { color: var(--ink); }
.bc-note summary span { white-space: nowrap; font-weight: 600; color: var(--volt-deep); }
.bc-note summary span::after { content: ' ↓'; }
.bc-note[open] summary span::after { content: ' ↑'; }
.bc-note p { font-size: 0.8rem; line-height: 1.7; color: var(--muted); margin-top: 0.6rem; }

.bc-upload { margin-top: 3rem; background: var(--surface); border: 1px solid var(--border); padding: 2.2rem 2.2rem 2rem; scroll-margin-top: 100px; }
.bc-upload h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.bc-upload > p { max-width: 72ch; font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; }
.bc-drop { border: 1.5px dashed var(--border-strong); padding: 1.8rem 1.4rem; text-align: center; cursor: pointer; margin-bottom: 1.4rem; transition: border-color 0.2s, background 0.2s; }
.bc-drop:hover, .bc-drop.over { border-color: var(--volt-deep); background: var(--volt-tint); }
.bc-drop:focus-visible { outline: 2px solid var(--volt-deep); outline-offset: 2px; }
.bc-drop strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.bc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.bc-upload .bc-actions .text-link { font-size: 0.82rem; font-weight: 600; color: var(--volt-deep); }
.bc-status { font-size: 0.88rem; color: var(--ink-soft); min-height: 1.5em; margin-top: 1.1rem; }
.bc-status.error { color: var(--crit); }
.bc-privacy { font-size: 0.82rem; line-height: 1.6; color: var(--muted); margin-top: 0.6rem; }
.bc-privacy strong { color: var(--ink); }
.bc-result { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.bc-result[hidden] { display: none; }
.bc-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.bc-tabs:empty { display: none; }
.bc-tabs button[aria-pressed="true"] { border-color: var(--volt-deep); background: var(--volt-tint); }
.bc-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bc-summary > div { background: var(--sunken); padding: 1.1rem 1.2rem; }
.bc-summary .v { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bc-summary .l { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.bc-summary .s { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.25rem; }
.bc-applied { font-size: 0.88rem; color: var(--ink-soft); margin-top: 1.1rem; }
.bc-applied a { color: var(--volt-deep); font-weight: 600; }
.bc-notices { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bc-notices li { font-size: 0.84rem; line-height: 1.6; color: var(--ink-soft); padding-left: 0.9rem; border-left: 2px solid var(--warn); }
.bc-report { margin-top: 1.4rem; }
.bc-report summary, .bc-more summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink); padding: 0.2rem 0; }
.bc-report iframe { width: 100%; height: 1500px; border: 1px solid var(--border); background: var(--surface); margin-top: 1rem; }
.bc-more { margin-top: 1.2rem; }
.bc-more p { font-size: 0.85rem; line-height: 1.7; max-width: 80ch; margin-top: 0.6rem; }
.bc-more code { font-size: 0.8rem; }
.bc-more a { color: var(--volt-deep); font-weight: 600; }

/* How It Works sections below the demo: wider headings so they don't stack 4–5 lines */
#how .section-head, #problem .section-head { max-width: 760px; }
#how h2, #problem h2 { max-width: 30ch; }
.bc-fields .field { justify-content: flex-end; }

/* Closing call to action (dark band, end of How It Works) */
.cta-band { background: var(--overlay); padding: 4.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end; }
.cta-band .eyebrow { color: var(--volt); }
.cta-band .eyebrow::before { background: var(--volt); }
.cta-band h2 { color: var(--white); max-width: 22ch; }
.cta-band p { color: var(--overlay-soft); max-width: 60ch; margin-top: 1rem; }
.cta-band-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

@media (max-width: 1024px) { .bc-summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  section.bc-hero { padding: 1.8rem 0 3.5rem; }
  .bc-intro, .cta-band .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .bc-intro { margin-bottom: 1.4rem; }
  /* phones/tablets: chart on top, pinned under the header; sliders scroll beneath it */
  .bc-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .bc-panel { grid-column: 1; top: 64px; z-index: 5; padding: 0.9rem 1rem 1rem; box-shadow: 0 10px 24px rgba(14,17,22,0.25); }
  .bc-panel .console-head { margin-bottom: 0.5rem; }
  .bc-controls { grid-column: 1; grid-row: 2; }
  .bc-stats { margin-top: 0.6rem; padding-top: 0.6rem; gap: 0.6rem; }
  .bc-stats .s { display: none; }
  .bc-tighter { margin-top: 0.6rem; }
  .bc-upload { padding: 1.8rem 1.5rem; }
}
@media (max-width: 560px) {
  .bc-intro h1 { font-size: 1.95rem; }
  .bc-intro .lede { font-size: 0.95rem; }
  .bc-intro-cta { flex-wrap: nowrap; gap: 0.5rem; }
  .bc-intro-cta .btn { flex: 1 1 0; justify-content: center; padding: 0.85rem 0.8rem; white-space: nowrap; }
  .bc-controls, .bc-upload { padding: 1.3rem 1.1rem; }
  .bc-stats .v { font-size: 1.15rem; }
  .bc-stats .l { font-size: 0.56rem; letter-spacing: 0.06em; }
  .bc-summary { grid-template-columns: 1fr; }
  .bc-upload .bc-actions .btn { flex: 1 1 auto; justify-content: center; }
  .cta-band { padding: 3.5rem 0; }
}