/* Homepage-only styles (index.html + pt/index.html).
   Loaded after style.css, which holds everything shared by the other pages.
   Rules keep their original relative order, so the cascade is unchanged. */

/* --- Content Sections (Sticky Logic) --- */
.sticky-section {
    padding: 100px 0;
    position: relative;
    background-color: var(--bg-body);
}

.alt-bg {
    background-color: var(--bg-alt);
}

.sticky-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.reverse-layout {
    flex-direction: row-reverse;
}

.text-content {
    flex: 1;
    padding-top: 20px;
}

.visual-content {
    flex: 1;
    position: sticky;
    top: 120px;
}

.text-content p {
    margin-bottom: 20px;
    color: var(--text-main);
    font-size: 1.1rem;
    text-align: justify;
}

.feature-list {
    margin-top: 30px;
}

.feature-list li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    font-weight: 500;
    color: var(--text-main);
}

.feature-list li::before {
    content: "➜";
    position: absolute;
    left: 0;
    color: var(--brand-highlight);
    font-weight: 900;
}

/* --- Cards & Visuals --- */
.card {
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-card);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--glass-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--shadow-color);
    border-color: var(--primary-blue);
}

.card h3 {
    color: var(--text-main);
}

/* --- Research & Innovation (Redesign) --- */
.innovation-section {
    padding: 100px 0;
    background-color: var(--bg-body);
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .sticky-container {
        flex-direction: column;
    }

    .reverse-layout {
        flex-direction: column;
    }

    .visual-content {
        position: static;
        width: 100%;
    }
}

/* Graph Card Styles */
.graph-container {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
}

#forecast-graph {
    width: 100%;
    height: 100%;
}

/* ============================================================================
   v5 redesign layer — merged from the former style_v5.css (2026-06).
   Loads after the base layer above; on equal specificity these rules win.
   Top-level class selectors here are disjoint from the base layer, so this
   was concatenated verbatim (not deduped). Anything that previously referred
   to "style_v5.css" now lives in this section of style.css.
   ============================================================================ */

/* =========================================================
   Verlantis — v5 add-on
   Loads AFTER style.css. Replaces hero with animated city scene.
   Everything else inherits from v1.
   ========================================================= */

:root {
  /* Hero-only dynamic vars (JS updates) */
  --v5-sky-top:     #06081a;
  --v5-sky-mid:     #0c0d24;
  --v5-sky-low:     #131534;
  --v5-sky-horizon: #1b1530;
  --v5-sun-glow:    #5a4faa;
  --v5-sun-core:    #c2bce0;
  --v5-light:       0.5;
  --v5-flow:        0;

  /* Parallax offsets, in SVG user units — JS rewrites these each frame.
     Far moves least, back moves most; the foreground reads none of them. */
  --px-mtn:  0px;
  --px-far:  0px;
  --px-mid:  0px;
  --px-back: 0px;
}

/* ===== Floating nav (v5) =====
   Fully transparent over hero — just floating elements, no card.
   Dark text once scrolled past hero. */
.v5-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  pointer-events: none;
  transition: transform .35s ease, opacity .25s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Scrolled past the hero: the floating nav solidifies into a sticky blurred
   bar (mirrors the BREOS nav). Light/white by day — the .is-scrolled rules
   below darken the labels to suit it — and a dark blurred bar at night with
   the labels kept light. */
.v5-nav.is-scrolled {
  background: rgba(253, 253, 251, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(36, 59, 110, .12);
  box-shadow: 0 8px 26px -20px rgba(20, 40, 80, .55);
  pointer-events: auto;
}
/* The sky animation (and thus --v5-light, which tints the logo) freezes when
   the hero scrolls out of view, so pin the logo's tone to the bar: brand by
   day, white at night — independent of wherever the sky froze. */
.v5-nav.is-scrolled .v5-nav-logo { --v5-logo-white: 0%; filter: none; }
[data-theme="dark"] .v5-nav.is-scrolled {
  background: var(--au-nav);
  border-bottom-color: var(--au-nav-bd);
}
[data-theme="dark"] .v5-nav.is-scrolled .v5-nav-logo { --v5-logo-white: 100%; }
[data-theme="dark"] .v5-nav.is-scrolled .v5-nav-brand { color: #fff; }
[data-theme="dark"] .v5-nav.is-scrolled .v5-nav-links a { color: rgba(255, 255, 255, .92); }
[data-theme="dark"] .v5-nav.is-scrolled .v5-nav-links a:hover { color: var(--brand-highlight); }
[data-theme="dark"] .v5-nav.is-scrolled .v5-nav-lang { border-left-color: rgba(255, 255, 255, .18); }
[data-theme="dark"] .v5-nav.is-scrolled #theme-toggle.v5-nav-toggle { color: rgba(255, 255, 255, .92); }
[data-theme="dark"] .v5-nav.is-scrolled #theme-toggle.v5-nav-toggle:hover { color: var(--brand-highlight); }
.v5-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 36px;
  max-width: 1400px;
  margin: 0 auto;
  pointer-events: none;
}
.v5-nav-brand, .v5-nav-links { pointer-events: auto; }
.v5-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: color .3s ease, text-shadow .3s ease;
}
.v5-nav.is-scrolled .v5-nav-brand {
  color: var(--brand-blue);
  text-shadow: none;
}
.v5-nav-logo {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  /* Soft drop-shadow so the mark lifts off the hero sky — shapes the shadow to
     the V itself and leaves the color cycle untouched. Matches the brand text's
     shadow and, like it, fades out on the solid scrolled bar. */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
  transition: filter .3s ease;
}
/* Fallback (no color-mix): the paths' fill="#FFFFFF" attribute shows a white
   mark — always legible on the hero sky, and cache-proof since it needs no CSS.
   Enhancement (color-mix supported): recolor to brand colors by day, fade to
   white at night. CSS beats the presentation attribute, so this wins where
   supported. One inline layer = no edge halo. */
@supports (color: color-mix(in srgb, red, white)) {
  .v5-nav-logo {
    /* 0% = brand color (day) · 100% = white (night). Driven by --v5-light (JS). */
    --v5-logo-white: clamp(0%, calc((0.65 - var(--v5-light)) / 0.3 * 100%), 100%);
  }
  /* Wings: blue gradient by day, fading to white at night (the stops shift). */
  .v5-logo-teal {
    fill: url(#v5LogoGrad);
  }
  .v5-logo-grad-0 { stop-color: color-mix(in srgb, #3AA6D6, #fff var(--v5-logo-white, 0%)); transition: stop-color .3s ease; }
  .v5-logo-grad-1 { stop-color: color-mix(in srgb, #2462A8, #fff var(--v5-logo-white, 0%)); transition: stop-color .3s ease; }
  .v5-logo-navy {
    fill: color-mix(in srgb, #243B6E, #fff var(--v5-logo-white, 0%));
    transition: fill .3s ease;
  }
}
/* "Verlantis" wordmark — the traced logotype replaces the plain text label.
   Letters use currentColor so the mark rides the bar's state exactly like the
   old <span> did: white over the hero, brand blue once scrolled, white on the
   dark scrolled bar. The sun-dot over the "i" keeps its gold accent in every
   state. viewBox is cropped to the glyphs' true bounds — the source art carries
   heavy padding around the wordmark. */
.v5-nav-wordmark {
  display: block;
  height: 21px;
  width: auto;
  flex: none;
  /* Mirror the brand text's lift off the hero sky (the emblem does the same);
     fade it out on the solid scrolled bar. */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
  transition: filter .3s ease;
}
.v5-nav.is-scrolled .v5-nav-wordmark { filter: none; }
.v5-nav-wordmark .v5-wm-letters { fill: currentColor; }
.v5-nav-wordmark .v5-wm-sun { fill: #FDB035; stroke: #FDB035; }

.v5-nav-links {
  display: inline-flex;
  align-items: center;
  gap: 28px;
}
.v5-nav-links a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: color .2s ease, text-shadow .3s ease;
}
.v5-nav-links a:hover { color: var(--brand-highlight); }
.v5-nav.is-scrolled .v5-nav-links a {
  color: rgba(36, 59, 110, 0.78);
  text-shadow: none;
}
.v5-nav.is-scrolled .v5-nav-links a:hover { color: var(--brand-blue); }
.v5-nav-lang {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color .3s ease;
}
.v5-nav.is-scrolled .v5-nav-lang {
  border-left-color: rgba(36, 59, 110, 0.22);
}

/* Theme toggle — inherits nav color so it tracks hero/scrolled states.
   The sun/moon swap itself is handled by .sun-icon/.moon-icon in style.css.
   ID is needed in the selector to override the #theme-toggle base rule. */
#theme-toggle.v5-nav-toggle {
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: color .2s ease, transform .25s ease;
}
#theme-toggle.v5-nav-toggle:hover { background: transparent; color: var(--brand-highlight); transform: rotate(15deg); }
.v5-nav.is-scrolled #theme-toggle.v5-nav-toggle { color: rgba(36, 59, 110, 0.78); text-shadow: none; }
.v5-nav.is-scrolled #theme-toggle.v5-nav-toggle:hover { color: var(--brand-blue); }
/* Keep the sun icon the same nav color (style.css tints it gold in dark). */
[data-theme="dark"] #theme-toggle.v5-nav-toggle .sun-icon { color: inherit; }

@media (max-width: 720px) {
  .v5-nav-inner { padding: 16px 18px; }
  .v5-nav-wordmark { display: none; }
  .v5-nav-links { gap: 18px; }
  .v5-nav-links a { font-size: 11px; letter-spacing: 0.14em; }
  .v5-nav-lang { padding-left: 14px; }
}

/* ----- Reset old .hero styles for the new hero ----- */
.hero-v5 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--v5-sky-top);
  display: flex;
  align-items: center;
  padding: 100px 0 80px;
}

/* Sky gradient (z = 0) */
.hero-v5-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom,
                    var(--v5-sky-top)     0%,
                    var(--v5-sky-mid)     45%,
                    var(--v5-sky-low)     75%,
                    var(--v5-sky-horizon) 100%);
  pointer-events: none;
}
/* The warm halo around the sun. It used to be a radial-gradient in the sky's
   background at var(--v5-sun-x/y), so the whole sky repainted whenever the sun
   moved. Now it is a 60px gradient scaled up on the compositor (a tiny raster,
   not a hero-sized one) and moved along the arc by hero.js at frame rate.
   z 1, after the stars: a composited layer UNDER the starfield would force the
   whole full-width starfield onto its own layer (the halo is ~0 at night). */
.v5-halo { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; will-change: transform; }
.v5-halo i {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
  background: radial-gradient(closest-side, rgba(var(--v5-sun-glow-rgb, 255, 138, 61), var(--v5-sky-glow-alpha, 0.2)), transparent);
}

/* Stars (z = 1) — fade in as light drops. Stop short of the bottom 35% so they
   never paint over the waterfront. */
.hero-v5-stars {
  position: absolute;
  inset: 0 0 35% 0;
  z-index: 1;
  opacity: calc((1 - var(--v5-light)) * 0.9);
  pointer-events: none;
}
/* The base starfield is steady: animating this full-width pseudo kept a
   hero-wide layer alive and promoted everything painted above it. The twinkle
   lives on a dozen tiny stars instead (.v5-twinkles, below). */
.hero-v5-stars::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.86;
  background-image:
    radial-gradient(1px 1px at 6% 12%, #fff, transparent),
    radial-gradient(1px 1px at 14% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 22% 8%, #fff, transparent),
    radial-gradient(1px 1px at 30% 18%, #fff, transparent),
    radial-gradient(1px 1px at 38% 32%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 46% 14%, #fff, transparent),
    radial-gradient(1px 1px at 54% 26%, #fff, transparent),
    radial-gradient(1px 1px at 62% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 30%, #fff, transparent),
    radial-gradient(1px 1px at 78% 16%, #fff, transparent),
    radial-gradient(1px 1px at 86% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 94% 8%, #fff, transparent),
    radial-gradient(1px 1px at 10% 38%, #fff, transparent),
    radial-gradient(1px 1px at 26% 44%, #fff, transparent),
    radial-gradient(1px 1px at 42% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 46%, #fff, transparent),
    radial-gradient(1px 1px at 74% 42%, #fff, transparent),
    radial-gradient(1px 1px at 90% 48%, #fff, transparent);
}
/* ---------- twinkling stars, compositor-only ----------
   A dozen 2-3px stars whose opacity + scale animate on the compositor thread:
   no main-thread work, no repaint of the sky, a few KB of layers. They live in
   their own container, NOT inside .hero-v5-stars: an animated child under that
   opacity-faded parent turned the whole full-width starfield into a separate
   12 MB surface. Each star fades with the light on its own wrapper instead, and
   the set is hidden (layers released) while it is day. */
.v5-twinkles { position: absolute; inset: 0 0 35% 0; z-index: 1; pointer-events: none; }
.hero-v5.stars-off .v5-twinkles { visibility: hidden; }
.hero-v5.stars-off .v5-tw b { animation-play-state: paused; }
.v5-tw { position: absolute; opacity: calc((1 - var(--v5-light)) * .95); }
.v5-tw b {
  display: block; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 3px 1px rgba(220, 230, 255, .6);
  opacity: .15; transform: scale(.7);
  animation: v5-tw var(--d) ease-in-out var(--dl) infinite alternate;
}
.v5-tw.big b { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; box-shadow: 0 0 5px 1.5px rgba(220, 230, 255, .6); }
@keyframes v5-tw { 70% { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .v5-tw b { animation: none; opacity: .8; } }

/* Clouds (z = 2) — tinted by the current sun colour. They drift on their own slow
   loop, deliberately decoupled from the day cycle. */
.hero-v5-clouds {
  position: absolute;
  inset: 0 0 30% 0;
  z-index: 2;
  pointer-events: none;
}
.v5-cloud {
  /* 1px blur softens the hard vector edges of the cloud ellipses. It lives on
     each cloud group, NOT on the <svg>: as a full-width filter it allocated one
     1600x420 offscreen surface, and because the drift transforms animate inside
     it, that whole surface was re-rasterised for the entire 90-150s loop. Three
     cloud-sized surfaces render identically — the groups barely overlap, and a
     1px blur across the gaps between them is not something an eye resolves. */
  filter: blur(1px);
  fill: color-mix(in srgb, var(--v5-sun-core) 38%, var(--v5-sky-mid));
  /* scale with the light instead of a fixed .16 floor: same .46 presence at
     full day, but gone at night (used to linger as unreadable dark smudges) */
  opacity: calc(var(--v5-light) * 0.46);
}
/* two-tone clouds: a lit crown + shaded belly instead of one flat sticker.
   Children of the .v5-cloud group, so these opacities MULTIPLY the group's
   day/night fade — the light/shade ratio holds at every hour. */
.v5-cloud-hi { fill: color-mix(in srgb, var(--v5-sun-core) 75%, var(--v5-sky-mid)); opacity: 0.85; }
.v5-cloud-sh { fill: color-mix(in srgb, var(--v5-sky-mid) 78%, #04060f); opacity: 0.55; }
/* ---------- clouds: one small layer each ----------
   Same shapes, same blur, same 90-150 s drift, but each cloud is its own tiny
   <svg> whose wrapper slides on the compositor (SVG children can't be
   composited, so the old drift re-rasterised the clouds every frame). */
.v5-cstage { position: absolute; left: 0; top: 0; width: 1600px; height: 420px; transform-origin: 0 0; }
.v5-cw { position: absolute; will-change: transform; }
.v5-cw svg { display: block; overflow: visible; }
.v5-cw.c1 { animation: v5-drift 110s ease-in-out infinite alternate; }
.v5-cw.c2 { animation: v5-drift 150s ease-in-out infinite alternate-reverse; }
.v5-cw.c3 { animation: v5-drift 90s  ease-in-out infinite alternate; }

@keyframes v5-drift {
  from { transform: translateX(-50px); }
  to   { transform: translateX(50px); }
}

/* Sun (z = 3) */
.hero-v5-sun {
  position: absolute;
  /* placed by a compositor animation along the arc (hero.js), not left/top */
  left: 0;
  top: 0;
  transform: translate3d(-200px, -200px, 0);   /* off-screen until hero.js places it */
  will-change: transform;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top:  -70px;
  z-index: 3;
  pointer-events: none;
}
.hero-v5-sun::before {
  content: "";
  position: absolute;
  inset: -180%;
  background: radial-gradient(circle at center,
              rgba(var(--v5-sun-glow-rgb, 255, 138, 61), 0.5) 0%,
              transparent 35%);
  pointer-events: none;
}
.hero-v5-sun::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--v5-sun-core), var(--v5-sun-glow) 65%);
  box-shadow:
    0 0 40px var(--v5-sun-glow),
    0 0 100px rgba(var(--v5-sun-glow-rgb, 255, 138, 61), 0.6),
    0 0 240px rgba(var(--v5-sun-glow-rgb, 255, 138, 61), 0.3);
  opacity: calc(0.4 + var(--v5-light) * 0.6);
}
/* Horizon lens streak — only reads near sunrise/sunset, peaks at the horizon and
   vanishes at midday and at night (the product term is 0 at both ends). */
.v5-sun-streak {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 3px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent,
              rgba(var(--v5-sun-glow-rgb, 255, 138, 61), 0.8) 50%, transparent);
  filter: blur(1px);
  opacity: calc((1 - var(--v5-light)) * var(--v5-light) * 2.6);
  pointer-events: none;
}

/* Moon — rides the same arc as the sun, half a cycle out of phase (positioned
   by JS): full-moon geometry, peaking when the sun is lowest. (1 - light)²
   keeps it invisible until dusk has actually settled, so it never shares a
   daytime sky with the sun. Off-screen start position, so there is no flash
   at the top-left corner before the first JS frame. */
.hero-v5-moon {
  position: absolute; left: 0; top: 0;
  transform: translate3d(-200px, -200px, 0);   /* off-screen until hero.js places it */
  will-change: transform;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  z-index: 3;
  pointer-events: none;
  opacity: calc((1 - var(--v5-light)) * (1 - var(--v5-light)) * 0.95);
}
.hero-v5-moon::before {
  content: "";
  position: absolute; inset: -130%;
  background: radial-gradient(circle at center,
              rgba(190, 208, 255, 0.22) 0%, transparent 42%);
}
.hero-v5-moon::after {
  content: "";
  position: absolute; inset: 14%;
  border-radius: 50%;
  /* craters first (they paint on top), then the shaded disc */
  background:
    radial-gradient(7px 7px at 63% 38%, rgba(122, 138, 180, 0.5), transparent 68%),
    radial-gradient(5px 5px at 42% 60%, rgba(122, 138, 180, 0.4), transparent 68%),
    radial-gradient(6px 6px at 60% 70%, rgba(122, 138, 180, 0.3), transparent 68%),
    radial-gradient(circle at 36% 32%, #F7FAFF, #D9E3F8 48%, #AEBEE2 100%);
  box-shadow:
    0 0 24px rgba(190, 208, 255, 0.5),
    0 0 70px rgba(160, 182, 240, 0.25);
}

/* Light on the water — a soft vertical glade under the sun (golden hour) and
   under the moon (deep night). Deliberately quiet: screen-blended, capped well
   below the reflection's brightness, zero at noon and during transitions.
   Horizontal position is a compositor animation that tracks the sun / moon
   (hero.js); height matches the on-screen water band (--v5-water-h, set by JS on resize). */
.hero-v5-glade {
  position: absolute;
  bottom: 0;
  width: 150px;
  height: var(--v5-water-h, 90px);
  left: 0;
  transform: translate3d(-200px, 0, 0);   /* off-screen until hero.js places it */
  will-change: transform;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-v5-glade.sun {
  background: radial-gradient(ellipse 52% 105% at 50% 0%,
              rgba(var(--v5-sun-glow-rgb, 255, 138, 61), 0.5), transparent 72%);
  /* (1-light)·light peaks at golden hour, 0 at both noon and night */
  opacity: calc((1 - var(--v5-light)) * var(--v5-light) * 1.3);
}
.hero-v5-glade.moon {
  width: 120px;
  background: radial-gradient(ellipse 46% 105% at 50% 0%,
              rgba(196, 214, 255, 0.42), transparent 72%);
  /* (1-light)² — only exists once dusk has fully settled */
  opacity: calc((1 - var(--v5-light)) * (1 - var(--v5-light)) * 0.5);
}

/* Birds — a three-bird flock gliding across the sky, day only. One long
   undulating crossing; the day gate fades them out before dusk. */
.hero-v5-birds {
  position: absolute;
  top: 24%; left: 0;
  width: 100%; height: 60px;
  z-index: 2;
  pointer-events: none;
  opacity: clamp(0, calc((var(--v5-light) - 0.62) * 4), 0.8);
}
.v5-flock {
  position: absolute;
  top: 10px; left: 0;
  width: 80px; height: 40px;
  animation: v5-fly 58s linear infinite;
}
.v5-flock svg { overflow: visible; width: 100%; height: 100%; }
.v5-bird { stroke: rgba(20, 28, 60, 0.55); stroke-width: 1.6; fill: none; stroke-linecap: round; }
@keyframes v5-fly {
  from { transform: translateX(-160px) translateY(0); }
  25%  { transform: translateX(28vw)  translateY(-10px); }
  50%  { transform: translateX(55vw)  translateY(6px); }
  75%  { transform: translateX(80vw)  translateY(-6px); }
  to   { transform: translateX(calc(100vw + 60px)) translateY(0); }
}

/* Shooting star — JS-triggered easter egg (~1 in 1000 nights; append ?star to
   the URL to force one per night). Bright end leads the streak. */
.hero-v5-star {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  width: 90px; height: 2px;
  opacity: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 85%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
  transform: rotate(160deg);
}
.hero-v5-star.go { animation: v5-shoot 0.9s ease-out 1; }
@keyframes v5-shoot {
  0%   { opacity: 0; transform: rotate(160deg) translateX(0); }
  12%  { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(160deg) translateX(240px); }
}

/* City landscape + waterfront (z = 4) */
.hero-v5-city {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: 4;
  pointer-events: none;
  filter: brightness(calc(0.4 + var(--v5-light) * 0.8));
}
.hero-v5-city svg { width: 100%; height: 100%; }

/* PARALLAX — the only layers that move. The foreground deliberately has no
   transform: it stays anchored, so displacement grows with distance (the
   mountains drift most, the slabs right behind the street least; hero.js). The <use>
   reflection inherits these same vars, so the reflections track.
   NB: no `will-change` here — these <g>s are re-cloned under the reflection's
   blur, so forcing GPU layers makes Chrome thrash compositing every frame. */
.v5-far  { transform: translateX(var(--px-far));  fill: color-mix(in srgb, var(--v5-sky-horizon) 58%, #0a0e22); opacity: 0.55; }
.v5-mid  { transform: translateX(var(--px-mid));  fill: color-mix(in srgb, var(--v5-sky-horizon) 32%, #0a0e22); opacity: 0.82; }
.v5-back { transform: translateX(var(--px-back)); fill: color-mix(in srgb, var(--v5-sky-horizon) 14%, #0a0e22); opacity: 0.94; }

.v5-mtn      { transform: translateX(var(--px-mtn)); }
.v5-mtn-far  { fill: color-mix(in srgb, var(--v5-sky-horizon) 72%, #0a0e22); opacity: 0.5; }
.v5-mtn-near { fill: color-mix(in srgb, var(--v5-sky-horizon) 52%, #0a0e22); opacity: 0.65; }

.v5-building   { fill: #15182f; }
.v5-building-2 { fill: #1a1d36; }
.v5-quay       { fill: #07091a; }
.v5-roof-unit  { fill: #0f1228; }

/* ----- Material pass: shading + furniture that breaks the flat look ----- */
/* third facade hue so the blocks don't read as colour clones */
.v5-building-3 { fill: #171b36; }
/* facade volume: rim light on the left edge, ambient shade to the right —
   one overlay rect per foreground building; gradient lives in the SVG defs */
.v5-face { fill: url(#v5Facade); }
/* gable roofs: camera-facing slope lit, far slope in shade */
.v5-roof-shade { fill: rgba(2, 5, 22, 0.32); }
/* thin shadow the roof casts on the facade */
.v5-eaves { fill: rgba(2, 5, 18, 0.45); }
/* rooftop furniture */
.v5-parapet { fill: #20264a; }
.v5-chimney { fill: #1e2342; }
.v5-chimney-cap { fill: #272e55; }
.v5-antenna { stroke: #3a4272; stroke-width: 2; stroke-linecap: round; fill: none; }
.v5-antenna-tip { fill: #7d8ac6; }
.v5-rail { stroke: #272e55; stroke-width: 2; stroke-linecap: round; fill: none; }
.v5-tank { fill: #1d2240; }
/* street level: glass lobbies with canopies; heat pumps beside house doors */
.v5-entrance { fill: #29335e; }
.v5-canopy { fill: #313a6b; }
.v5-mullion { fill: #1c2242; }
.v5-hp { fill: #20264a; }
.v5-hp-fan { fill: none; stroke: #0d1024; stroke-width: 1.5; }
.v5-hp-hub { fill: #0d1024; }
.v5-hp-grille { stroke: #0d1024; stroke-width: 1.5; stroke-linecap: round; fill: none; }

/* Promenade lamps along the quay — --on flips at dusk slightly BEFORE the first
   window wave (streetlights lead homes), same clamp trick as .v5-window. The
   halo is a soft warm disc that only exists at night; the globe is dark glass
   by day. They live inside #skyline, so the water mirrors globe + halo. */
.v5-lamps { --on: clamp(0, calc((0.50 - var(--v5-light)) * 4), 1); }
.v5-lamp-post { fill: #1c2242; }
.v5-lamp-globe {
  fill: #333a63; /* fallback: dark glass where color-mix calc is unsupported */
  fill: color-mix(in srgb, #ffd9a0 calc(var(--on) * 100%), #333a63);
}
.v5-lamp-halo { fill: #ffd9a0; opacity: calc(var(--on) * 0.3); }
/* staggered ignition — each lamp trips at its own dusk level, street-by-street,
   instead of all five popping in unison */
.v5-lamps g:nth-child(1) { --on: clamp(0, calc((0.53 - var(--v5-light)) * 4), 1); }
.v5-lamps g:nth-child(2) { --on: clamp(0, calc((0.46 - var(--v5-light)) * 4), 1); }
.v5-lamps g:nth-child(3) { --on: clamp(0, calc((0.51 - var(--v5-light)) * 4), 1); }
.v5-lamps g:nth-child(4) { --on: clamp(0, calc((0.44 - var(--v5-light)) * 4), 1); }
.v5-lamps g:nth-child(5) { --on: clamp(0, calc((0.49 - var(--v5-light)) * 4), 1); }

/* Energy-story prop on the quay: an EV on a charger. .v5-energy-ind glows with
   --v5-flow — charging while the sun works, a faint standby ember at night. */
.v5-post { fill: #20264a; }
.v5-post-head { fill: #2a3158; }
.v5-energy-ind { fill: var(--brand-highlight); opacity: calc(0.22 + var(--v5-flow, 0) * 0.78); }
.v5-cable { stroke: #0d1024; stroke-width: 1.5; fill: none; }
.v5-ev-glass { fill: #3d4a78; }
.v5-ev-wheel { fill: #0d1024; }
.v5-ev-hub { fill: #39406e; }

/* One window blinks at night — a resident. The cover rects match the wall
   colour and are 0-opacity except for a brief "light off" spike on long,
   mismatched periods; the outer group night-gates the whole trick so daytime
   glass is untouched. */
.v5-win-blinker { opacity: clamp(0, calc((0.40 - var(--v5-light)) * 4), 1); }
.v5-win-blink { fill: #15182f; opacity: 0; animation: v5-win-out 37s linear infinite; }
@keyframes v5-win-out {
  0%, 60% { opacity: 0; }
  61%, 69% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* Night-gated red aviation beacon on the producer tower's antenna */
.v5-beacon-g { opacity: calc((1 - var(--v5-light)) * 0.95); }
.v5-beacon { fill: #ff6157; animation: v5-beacon-blink 2.6s ease-in-out infinite; }
@keyframes v5-beacon-blink {
  0%, 42% { opacity: 1; }
  55%, 88% { opacity: 0.12; }
  100% { opacity: 1; }
}

/* Distant windows — a faint glow at dusk to keep the background alive */
.v5-win-bg { fill: #ffd08a; opacity: clamp(0, calc((0.42 - var(--v5-light)) * 2.6), 0.5); }

/* Foreground windows are visible AT ALL TIMES: cool reflective glass by day,
   warming to a lit amber as dusk falls — so buildings never look window-less.
   --lit (0 by day → 1 at night) is staggered per wave so buildings light up at
   slightly different moments; it drives both the warm tint and the brightness. */
.v5-window.wave-a { --lit: clamp(0, calc((0.55 - var(--v5-light)) * 3),   1); }
.v5-window.wave-b { --lit: clamp(0, calc((0.42 - var(--v5-light)) * 3.2), 1); }
.v5-window.wave-c { --lit: clamp(0, calc((0.30 - var(--v5-light)) * 3.6), 1); }
/* One uniform window size (overrides the per-rect w/h); the small distant
   .v5-win-bg windows in the mid/back layers stay night-only, as depth. */
.v5-window rect {
  width: 16px; height: 22px;
  fill: #6b8fc9; /* fallback: daytime glass blue where color-mix() is unsupported */
  fill: color-mix(in srgb, #ffc972 calc(var(--lit, 0) * 100%), #6b8fc9);
  opacity: calc(0.36 + var(--lit, 0) * 0.6);
}
/* Grid-fill panes that complete each facade into a full, symmetric matrix but
   stay UNLIT: cool, dim glass that never warms to amber. Only the .v5-window
   panes light up at dusk, so each building keeps a realistic mix of lit and dark
   windows instead of an awkward half-empty grid. */
.v5-window-off rect {
  width: 16px; height: 22px;
  fill: #5a73a8;
  opacity: 0.38;
}
/* House front doors — deliberately NOT windows: a warm timber panel running to
   the ground, with a small brass knob. Static, so it never glows like glass. */
.v5-door      { fill: #6e5238; }
.v5-door-knob { fill: #e6b667; }
/* Rooftop PV (tilted residential plates) */
.v5-array      { fill: #2e3d7e; }
.v5-array-edge { fill: none; stroke: #6b85c8; stroke-width: 1.5; }
.v5-array-grid { stroke: #6b85c8; stroke-width: 0.8; opacity: 0.4; fill: none; }
.v5-array-mount{ fill: #0a0d20; }

/* Cable wiring — faint dotted base, always visible */
.v5-cables-base line {
  stroke: rgba(143, 178, 255, 0.09);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  fill: none;
}

.v5-node {
  fill: var(--brand-highlight);
  opacity: var(--v5-flow, 0);
}

/* ----- Waterfront ----- */
.v5-water { fill: color-mix(in srgb, var(--v5-sky-horizon) 45%, #04060f); }
/* The mirrored skyline. brightness() counteracts the night-time .hero-v5-city
   dimming; opacity and lift grow as the light drops, so lit windows reflect
   hardest in the dark (the old flat .24 left only the moon's glade visible). */
.v5-reflection {
  opacity: calc(.3 + (1 - var(--v5-light)) * .3);
  filter: blur(1.5px) brightness(calc(1.45 + (1 - var(--v5-light)) * .8));
}
/* sink the reflection into depth: clear at the waterline, water colour below */
.v5-water-depth { fill: url(#v5Depth); }
/* Subtle dark fade to ensure text legibility (z = 6) */
.hero-v5-fade {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  /* the legibility pool follows the copy (hero.js sets --fx / --fy) */
  background:
    radial-gradient(ellipse 44% 34% at var(--fx, 50%) var(--fy, 34%),
                    rgba(0, 0, 0, 0.36) 0%, transparent 72%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 22%);
  /* the vignette, folded in: one full-hero layer instead of two. The film grain
     that sat on top (overlay blend at .3 x 6% alpha, under 2%) is gone; it
     flattened the whole hero into a backdrop surface for an invisible texture. */
  box-shadow: inset 0 0 180px rgba(0, 0, 5, 0.45);
}

/* Framed layout: once hero.js has measured the skyline, the copy sits a fixed
   gap above the roofline between the two producer towers (padding-bottom set
   in JS). Without JS, or on phones, it stays vertically centred. */
.hero-v5.is-framed { align-items: flex-end; }

/* Hero content (z = 10) — reuses v1 text styles */
.hero-v5-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.hero-v5 h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
  margin: 0 0 22px;
}
.hero-v5 .subheading {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 300;
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto 30px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.hero-v5 .hero-v5-ctas { display: inline-flex; justify-content: center; }

/* Scroll cue — real chevron arrow */
.hero-v5-scroll {
  position: absolute;
  z-index: 11;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--v5-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color .2s ease;
  animation: v5-bounce 2.2s ease-in-out infinite;
}
.hero-v5-scroll:hover { color: var(--brand-highlight); }
.hero-v5-scroll .chev {
  display: block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
@keyframes v5-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* =========================================================
   Idle hero — the scene costs nothing once it is scrolled past.
   hero.js stops its scene loop and pauses the sun/moon animations
   off-screen; this pauses every CSS animation in the hero (flows, ripples,
   clouds, stars, water lights, beacon, CTA) and hides the decorative layers,
   which releases their GPU memory while the reader is further down the page.

   Every layer hidden here is position:absolute and aria-hidden, so dropping
   them cannot shift anything: the hero's height still comes from
   .hero-v5-content, which stays. The hero keeps its own --v5-sky-top
   background, so there is no white flash in the lead-in band either.
   ========================================================= */
.hero-v5.is-idle > [aria-hidden="true"] { visibility: hidden; }
.hero-v5.is-idle *,
.hero-v5.is-idle *::before,
.hero-v5.is-idle *::after { animation-play-state: paused; }

/* Night: --v5-flow is 0, so the energy flows are invisible. JS sets .flow-off
   for the dark half of the cycle; hiding the strips releases their layers. */
.hero-v5.flow-off .v5-flows { visibility: hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v5-cw, .hero-v5-scroll, .v5-rip b, .v5-fl b, .v5-glint b,
  .v5-flock, .v5-win-blink, .hero-v5-star, .v5-beacon { animation: none; }
  .v5-tw b { animation: none; opacity: 0.8; }
  .hero-v5-birds { display: none; }
}

/* =========================================================
 City hero: the energy community (school + carport)
 Producers are the big low roofs; every home only consumes; no storage.
 Everything below that MOVES is a transform/opacity animation on its own
 small layer, run by the compositor at the display's frame rate.
 ========================================================= */
/* ---------- school ---------- */
.v5-sc-band { fill: #20264a; }
.v5-sc-bay  { fill: #1c2142; }
/* classroom glass: pale daylight blue by day, dark once the school is shut */
.v5-sc-glass rect { fill: #6b8fc9; opacity: calc(.12 + var(--v5-light) * .3); }
.v5-sc-clock { fill: #d9dcea; fill: color-mix(in srgb, #d9dcea calc(var(--v5-light) * 100%), #7d84a8); stroke: #0d1024; stroke-width: 1.4; }
.v5-sc-hands { stroke: #0d1024; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.v5-sc-rack  { stroke: #2a3158; stroke-width: 2; fill: none; }
.v5-door-auto { fill: #29335e; }
.v5-inverter { fill: #2a3158; }

/* ---------- carport + cars ---------- */
.v5-cp-beam { fill: #0a0d20; }
/* cars a touch lighter than the facades so they read against the quay */
.v5-car-a { fill: #4d5d94; }
.v5-car-b { fill: #6e4f6c; }

/* meter boxes where each consumer's feed comes in */
.v5-meter { fill: #2a3158; stroke: #0d1024; stroke-width: .8; }

/* ---------- motion layer: flows + ripples, over the city ----------
   These used to animate stroke-dashoffset INSIDE the city's brightness() filter,
   so every frame re-rasterised the whole city and its blurred reflection. Here
   each segment is a clipped strip whose dash pattern slides by exactly one
   period (7 on, 11 off = 18) per loop, so the loop seam is invisible and the
   dashes can never appear to run backwards. The stage is mapped onto the city's
   viewBox by the engine (xMidYMax slice), so 1px here = 1 SVG unit. */
.v5-motion { position: absolute; inset: auto 0 0 0; height: 60%; z-index: 4; pointer-events: none; overflow: hidden; }
@media (max-width: 768px) { .v5-motion { height: 48%; } }
.v5-stage { position: absolute; left: 0; top: 0; width: 1600px; height: 700px; transform-origin: 0 0; }
.v5-flows { opacity: var(--v5-flow, 0); }
.v5-fl { position: absolute; overflow: hidden; }
.v5-fl b { position: absolute; display: block; will-change: transform; }
.v5-fl.l b, .v5-fl.r b { inset: 0 -18px; background: repeating-linear-gradient(90deg, #FDB035 0 7px, transparent 7px 18px); }
.v5-fl.u b, .v5-fl.d b { inset: -18px 0; background: repeating-linear-gradient(180deg, #FDB035 0 7px, transparent 7px 18px); }
.v5-fl.r b { animation: v5-fl-x 1.44s linear infinite; }
.v5-fl.l b { animation: v5-fl-x 1.44s linear infinite reverse; }
.v5-fl.d b { animation: v5-fl-y 1.44s linear infinite; }
.v5-fl.u b { animation: v5-fl-y 1.44s linear infinite reverse; }
@keyframes v5-fl-x { from { transform: translateX(-18px); } to { transform: translateX(0); } }
@keyframes v5-fl-y { from { transform: translateY(-18px); } to { transform: translateY(0); } }
/* the shorthands above (0,2,1) outrank .hero-v5.is-idle * (0,2,0), so pause explicitly */
.hero-v5.flow-off .v5-fl b,
.hero-v5.is-idle .v5-fl b { animation-play-state: paused; }
/* ripples: same idea, 46 on / 34 off = 80 per 7 s; dimmed with the city at night */
.v5-ripples-ov { opacity: calc(.4 + var(--v5-light) * .8); }
.v5-rip { position: absolute; left: -80px; width: 1760px; height: 2px; overflow: hidden; }
.v5-rip b {
  position: absolute; inset: 0 -80px; display: block; will-change: transform;
  background: repeating-linear-gradient(90deg, rgba(180, 205, 255, .06) 0 46px, transparent 46px 80px);
  animation: v5-rip 7s linear infinite;
}
@keyframes v5-rip { from { transform: translateX(-80px); } to { transform: translateX(0); } }

/* ---------- light on the water ----------
   A warm, rippled streak under each street lamp. The outer <i> fades with the
   lamp (same thresholds as the globes); the inner <b> shimmers on the
   compositor. Hidden in full daylight, which releases the layers. */
.v5-glints { position: absolute; inset: 0; }
.hero-v5.stars-off .v5-glints { visibility: hidden; }
.hero-v5.stars-off .v5-glint b { animation-play-state: paused; }
.v5-glint { position: absolute; top: 601px; opacity: calc(var(--lit, 0) * var(--a)); }
.v5-glint.lamp   { --lit: clamp(0, calc((var(--th) - var(--v5-light)) * 4), 1); }
/* soft-edged pool that fades down, broken into ripple bands by a static mask */
.v5-glint b {
  position: absolute; inset: 0; display: block; transform-origin: 50% 0;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 200, 120, .7), rgba(255, 190, 110, .22) 55%, transparent 90%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2.5px, rgba(0, 0, 0, .3) 2.5px 5px);
          mask-image: repeating-linear-gradient(to bottom, #000 0 2.5px, rgba(0, 0, 0, .3) 2.5px 5px);
  animation: v5-glint var(--d) ease-in-out var(--dl) infinite alternate;
}
.v5-glint.lamp b { background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 222, 165, .8), rgba(255, 205, 145, .25) 50%, transparent 90%); }
@keyframes v5-glint {
  0%   { transform: translateX(-.8px) scale(.85, .94); opacity: .7; }
  45%  { transform: translateX(.6px)  scale(1.1, 1);   opacity: 1; }
  100% { transform: translateX(1px)   scale(.92, .9);  opacity: .82; }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-v5 { min-height: 90vh; padding: 90px 0 60px; }
  .hero-v5 h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-v5-scroll { bottom: 22px; }
  .hero-v5-sun { width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; }
  .hero-v5-city, .v5-motion { height: 48%; }
}

/* =========================================================
   Homepage ecosystem (#products) — BREOS → Designer → Hub.
   A left-to-right chain, NOT a fork: BREOS *powers* Designer,
   then Designer *hands off* a planned system to Hub. Hub is the
   operations layer, not a BREOS-powered app — so the visual must
   never imply BREOS feeds it directly. Two animated connectors
   (gold "powers", blue "hands off to") echo the hero's energy
   cables. Daylight skin; Aurora override lives further down.
   ========================================================= */
.circuit-section {
  position: relative;
  padding: 7rem 0;
  overflow: hidden;
  color: #13233f;
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(41, 149, 201, 0.10), transparent 55%),
    linear-gradient(180deg, #f4f7fc 0%, #e7eef7 100%);
  border-bottom: 1px solid rgba(20, 40, 80, 0.08);
}

/* Section header */
.circuit-title {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #13233f;
  text-align: center;
  margin: 0 auto 1rem;
  max-width: 22ch;
}
.circuit-intro {
  max-width: 600px;
  margin: 0 auto 3.6rem;
  text-align: center;
  color: #51607c;
  line-height: 1.65;
}
.circuit-intro strong { color: #13233f; font-weight: 600; }

/* Chain: BREOS → Designer → Hub, left to right.
   Three equal steps separated by two labelled connector columns. */
.chain {
  --ct-gold: #d98a0a;
  --ct-sky: #2995C9;
  --ct-navy: #243B6E;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
}

/* Shared step card */
.chain-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 170px 1.6rem 1.9rem;
  border-radius: 16px;
  text-decoration: none;
  color: #1f2c44;
  background: #fff;
  border: 1px solid rgba(20, 40, 80, 0.10);
  box-shadow: 0 12px 30px -14px rgba(20, 40, 80, 0.22);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.chain-step:hover {
  border-color: rgba(41, 149, 201, 0.55);
  box-shadow: 0 22px 44px -16px rgba(41, 149, 201, 0.35);
}

/* BREOS — the engine, warm-accented as the source. Its surface matches the
   other steps at rest; only the hover accent shifts to the amber it already
   uses for icon, role and CTA. */
.chain-step.is-engine:hover {
  border-color: rgba(217, 138, 10, 0.55);
  box-shadow: 0 22px 44px -16px rgba(217, 138, 10, 0.35);
}

/* One thread: a single line drawn through all three cards. Each card holds
   its own stretch (chip → strung array → community network) in a 170px band
   above the text; the connector columns carry the thread between them. */
.chain-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 170px;
  pointer-events: none;
}
.ct-base, .ct-shadow, .ct-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ct-base { stroke-width: 2.2; }
.ct-shadow { stroke-width: 2.2; stroke: rgba(20, 40, 80, 0.22); filter: url(#ct-soft); }
.ct-pulse { stroke-width: 3.8; opacity: 0; filter: url(#ct-glow); }
.ct-gold { stroke: var(--ct-gold); }
.ct-sky { stroke: var(--ct-sky); }
.ct-navy { stroke: var(--ct-navy); }
.ct-g1 { stroke: url(#ct-g1); }
.ct-g2 { stroke: url(#ct-g2); }
.ct-stop-gold { stop-color: var(--ct-gold); }
.ct-stop-sky { stop-color: var(--ct-sky); }
.ct-stop-navy { stop-color: var(--ct-navy); }
.ct-start { fill: var(--ct-gold); }
.ct-eyelet circle { fill: none; stroke: #8d97a8; stroke-width: 2; }
.ct-eyelet .ct-hole { fill: rgba(20, 40, 80, 0.25); stroke: none; }

/* Text */
.chain-name {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #13233f;
}
.chain-role {
  font-weight: 600;
  color: #2995C9;
  margin: 0.15rem 0 0.7rem;
}
.chain-step.is-engine .chain-role { color: #b9780a; }
.chain-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #5a6a85;
  margin-bottom: 1.2rem;
}

.chain-cta {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.92rem;
  color: #2995C9;
  transition: transform .25s ease;
}
.chain-step.is-engine .chain-cta { color: #c67f0a; }
.chain-step:hover .chain-cta { transform: translateX(3px); }

/* Badges */
.chain-badge {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--v5-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(20, 40, 80, 0.05);
  color: #5a6a85;
  border: 1px solid rgba(20, 40, 80, 0.12);
}

/* Connector columns: the thread crosses between cards through two eyelets */
.chain-link {
  position: relative;
  z-index: 2;
  flex: 0 0 84px;
  align-self: flex-start;
  height: 170px;
}
.chain-link-label {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--v5-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7b899c;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}
.link-powers .chain-link-label { color: #9b6812; }
.link-handoff .chain-link-label { color: var(--ct-sky); }
.chain-thread {
  position: absolute;
  top: 1px; /* the cards' 1px border pushes their drawings down by the same */
  left: 0;
  width: 100%;
  height: 170px;
  overflow: visible;
}

/* Orchestrated reveal: each step + connector eases in along the chain */
.chain.fade-in-section { opacity: 1; transform: none; }
.chain > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.chain.is-visible > *           { opacity: 1; transform: none; }
.chain.is-visible > *:nth-child(1) { transition-delay: .05s; }
.chain.is-visible > *:nth-child(2) { transition-delay: .17s; }
.chain.is-visible > *:nth-child(3) { transition-delay: .29s; }
.chain.is-visible > *:nth-child(4) { transition-delay: .41s; }
.chain.is-visible > *:nth-child(5) { transition-delay: .53s; }

/* Stack vertically on narrow screens; each connector becomes a short
   vertical thread, so BREOS → Designer → Hub still reads top to bottom. */
@media (max-width: 860px) {
  .circuit-section { padding: 5rem 0; }
  .chain { flex-direction: column; align-items: stretch; max-width: 460px; }
  .chain-link {
    flex-basis: auto; align-self: stretch; height: 48px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
  }
  .chain-link::before { content: ""; width: 2px; height: 100%; border-radius: 2px; }
  .link-powers::before { background: linear-gradient(var(--ct-gold), var(--ct-sky)); }
  .link-handoff::before { background: linear-gradient(var(--ct-sky), var(--ct-navy)); }
  .chain-link-label { position: static; transform: none; }
  .chain-thread { display: none; }
}

/* =========================================================
   #communities — Collective Self-Consumption (Daylight skin).
   The shared-array → homes diagram reads as a source→consumer
   circuit: a gold "source" node, dotted connectors carrying a
   blue energy flow, and home nodes that match the card system.
   Same language as #products; homepage-scoped.
   ========================================================= */
#communities {
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(41, 149, 201, 0.10), transparent 55%),
    linear-gradient(180deg, #f4f7fc 0%, #e7eef7 100%);
  border-bottom: 1px solid rgba(20, 40, 80, 0.08);
}

#communities .section-title {
  color: #13233f;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#communities .text-content p { color: #51607c; text-align: left; }
#communities .text-content p strong { color: #13233f; font-weight: 600; }

/* Diagram card — matches .chain-step */
#communities .diagram-card {
  text-align: center;
  background: #fff;
  border: 1px solid rgba(20, 40, 80, 0.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px -14px rgba(20, 40, 80, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
#communities .diagram-card:hover {
  transform: translateY(-5px);
  border-color: rgba(41, 149, 201, 0.55);
  box-shadow: 0 22px 44px -16px rgba(41, 149, 201, 0.35);
}

/* Isometric scene container (the cs- diorama below fills it). */
#communities .iso-scene {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  margin: 6px auto 0;
  overflow: visible;
}

/* "Diorama day" scene (index.html + pt/index.html; built by communities.js).
   A floating neighbourhood tile with a soil cut-away; a day/night cycle
   runs over it. Every colour is a token here so the dark skin only
   swaps tokens. Classes are prefixed cs- and scoped to the scene. */
#communities .iso-scene.cs-scene {
  /* houses */
  --cs-wl: #dde4ef; --cs-wr: #f5f7fb; --cs-rf: #c3cede; --cs-rb: #b3bfd2; --cs-gb: #a9b6cb;
  --cs-fas: #8796b0; --cs-fas2: #a0adc3; --cs-edge: rgba(20, 40, 80, 0.2);
  --cs-win: #a7c6e8; --cs-winframe: #f4f8fd; --cs-door: #243B6E;
  --cs-pv: #243B6E; --cs-pvedge: #1a2b52; --cs-pvline: #6b85c8;
  --cs-bx-l: #c9d3e1; --cs-bx-r: #e8edf5; --cs-bx-t: #f5f7fb;
  /* tile: top surface, road, cut-face strata (L = shaded face, R = lit face) */
  --cs-top: #e6ecf4; --cs-top-dot: rgba(20, 40, 80, 0.10); --cs-road: #c5cedb; --cs-road-dash: #f5f7fb; --cs-paving: #f3f6fa;
  --cs-s0L: #c8d1df; --cs-s1L: #a8b5ca; --cs-s2L: #8f9db7; --cs-s3L: #74839f;
  --cs-s0R: #d8dfea; --cs-s1R: #bcc7d8; --cs-s2R: #a2aec5; --cs-s3R: #8795b0;
  --cs-peb: rgba(20, 40, 80, 0.22); --cs-rim: #ffffff;
  /* network */
  --cs-groove: #b2bdcd; --cs-duct: #55678a; --cs-solar: #f59e0b; --cs-grid: #3f74d8;
  /* nature + light */
  --cs-tree-hi: #c4d8cf; --cs-tree-lo: #7fa596; --cs-trunk: #7a6a58; --cs-lamp: #51607c;
  --cs-shadow: #13233f; --cs-shadow-op: 0.16; --cs-dim: 0.12;
  /* sky */
  --cs-night: #243B6E; --cs-night-op: 0.14; --cs-star: #243B6E; --cs-moon-hi: #b8c6dd; --cs-moon-lo: #6f82a6;
}
#communities .cs-wl { fill: var(--cs-wl); }
#communities .cs-wr { fill: var(--cs-wr); }
#communities .cs-rf { fill: var(--cs-rf); }
#communities .cs-rb { fill: var(--cs-rb); }
#communities .cs-gb { fill: var(--cs-gb); }
#communities .cs-wl, #communities .cs-wr, #communities .cs-rf, #communities .cs-rb, #communities .cs-gb {
  stroke: var(--cs-edge); stroke-width: 0.8; stroke-linejoin: round;
}
#communities .cs-fas { fill: var(--cs-fas); }
#communities .cs-fas2 { fill: var(--cs-fas2); }
#communities .cs-win { fill: var(--cs-win); stroke: var(--cs-winframe); stroke-width: 1.1; stroke-linejoin: round; }
#communities .cs-winlit { fill: #FDB035; opacity: var(--cs-lit, 0); }
#communities .cs-mul { stroke: var(--cs-winframe); stroke-width: 0.8; fill: none; stroke-linecap: round; }
#communities .cs-door { fill: var(--cs-door); stroke: var(--cs-edge); stroke-width: 0.8; }
#communities .cs-pv { fill: var(--cs-pv); stroke: var(--cs-pvedge); stroke-width: 0.6; stroke-linejoin: round; }
#communities .cs-pvl { stroke: var(--cs-pvline); stroke-width: 0.5; fill: none; opacity: 0.75; }
#communities .cs-ch-l { fill: var(--cs-wl); }
#communities .cs-ch-r { fill: var(--cs-wr); }
#communities .cs-ch-t { fill: var(--cs-rb); }
#communities .cs-bx-l { fill: var(--cs-bx-l); }
#communities .cs-bx-r { fill: var(--cs-bx-r); }
#communities .cs-bx-t { fill: var(--cs-bx-t); }
#communities .cs-ch-l, #communities .cs-ch-r, #communities .cs-ch-t,
#communities .cs-bx-l, #communities .cs-bx-r, #communities .cs-bx-t { stroke: var(--cs-edge); stroke-width: 0.8; stroke-linejoin: round; }
#communities .cs-bolt { fill: #f59e0b; }

#communities .cs-top { fill: var(--cs-top); }
#communities .cs-tdot { fill: var(--cs-top-dot); }
#communities .cs-road, #communities .cs-roadcap { fill: var(--cs-road); }
#communities .cs-rdash { stroke: var(--cs-road-dash); stroke-width: 1.4; stroke-dasharray: 6 7; fill: none; }
#communities .cs-pave { fill: var(--cs-paving); stroke: var(--cs-edge); stroke-width: 0.5; }
#communities .cs-rim { fill: none; stroke: var(--cs-rim); stroke-width: 1.2; stroke-linejoin: round; opacity: 0.9; }
#communities .cs-s0L { fill: var(--cs-s0L); } #communities .cs-s1L { fill: var(--cs-s1L); }
#communities .cs-s2L { fill: var(--cs-s2L); } #communities .cs-s3L { fill: var(--cs-s3L); }
#communities .cs-s0R { fill: var(--cs-s0R); } #communities .cs-s1R { fill: var(--cs-s1R); }
#communities .cs-s2R { fill: var(--cs-s2R); } #communities .cs-s3R { fill: var(--cs-s3R); }
#communities .cs-peb { fill: var(--cs-peb); }

#communities .cs-groove { fill: none; stroke: var(--cs-groove); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
#communities .cs-duct { fill: none; stroke: var(--cs-duct); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
#communities .cs-duct-end { fill: var(--cs-duct); }
#communities .cs-grid-core { fill: var(--cs-grid); }
#communities .cs-flow-solar {
  fill: none; stroke: var(--cs-solar); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 14;
  filter: drop-shadow(0 0 3px rgba(253, 176, 53, 0.8));
}
#communities .cs-flow-grid {
  fill: none; stroke: var(--cs-grid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 9;
}

#communities .cs-trunk { stroke: var(--cs-trunk); stroke-width: 2.2; stroke-linecap: round; }
#communities .cs-lamp { stroke: var(--cs-lamp); stroke-width: 1.2; stroke-linecap: round; }
#communities .cs-bulb { fill: #FDB035; opacity: calc(0.35 + 0.65 * var(--cs-lampglow, 1)); }
#communities .cs-lampglow { opacity: var(--cs-lampglow, 1); }
#communities .cs-shd { fill: var(--cs-shadow); }
#communities .cs-shadows { opacity: calc(var(--cs-shade, 1) * var(--cs-shadow-op)); }
#communities .cs-world { filter: brightness(calc(1 - var(--cs-dim) * var(--cs-n, 0))); }

#communities .cs-nightwash { opacity: calc(var(--cs-n, 0) * var(--cs-night-op)); }
#communities .cs-stars circle { fill: var(--cs-star); }
#communities .cs-rays line { stroke: #FDB035; stroke-width: 2; stroke-linecap: round; }

/* gentle float; paused while the scene is off screen */
#communities .cs-bob { animation: cs-bob 6.5s ease-in-out infinite alternate; }
#communities .cs-under {
  animation: cs-under 6.5s ease-in-out infinite alternate;
  transform-origin: 300px 398px;
  transform-box: view-box;
}
#communities .iso-scene.is-paused .cs-bob,
#communities .iso-scene.is-paused .cs-under { animation-play-state: paused; }
@keyframes cs-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes cs-under { from { transform: scale(1); opacity: 0.9; } to { transform: scale(0.92); opacity: 0.6; } }

/* =========================================================
   #technology — "Beyond deterministic models" (Daylight skin).
   Brings the section framing onto the v5 system to match
   #products / #communities: the daylight field, navy title +
   lede, the .feature-list, the .graph-card surface, and the
   axis labels. The probabilistic-forecast graph and its JS
   reveal animation are left intact; the fan/lines are only
   recolored to the v5 accent through their existing classes,
   so script.js stays untouched.
   ========================================================= */
#technology {
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(41, 149, 201, 0.10), transparent 55%),
    linear-gradient(180deg, #f4f7fc 0%, #e7eef7 100%);
  border-bottom: 1px solid rgba(20, 40, 80, 0.08);
}

#technology .section-title {
  color: #13233f;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#technology .text-content p { color: #51607c; text-align: left; }
#technology .text-content p strong { color: #13233f; font-weight: 600; }

/* Feature list — navy body, check mark on the brand accent */
#technology .feature-list li { color: #33425e; }
#technology .feature-list li::before { color: #2995c9; }

/* Graph card — matches .chain-step / .diagram-card */
#technology .graph-card {
  background: #fff;
  border: 1px solid rgba(20, 40, 80, 0.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px -14px rgba(20, 40, 80, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
#technology .graph-card:hover {
  transform: translateY(-5px);
  border-color: rgba(41, 149, 201, 0.55);
  box-shadow: 0 22px 44px -16px rgba(41, 149, 201, 0.35);
}
#technology .graph-card h3 {
  color: #13233f;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
}

/* Card header (title + unit) */
#technology .graph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
#technology .graph-head h3 { margin-bottom: 0; }
#technology .graph-meta {
  font-family: var(--v5-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a6a85;
}

/* Let the break-even SVG size to its own aspect (override base 300px) */
#technology .graph-container { height: auto; }
#technology .graph-container svg { height: auto; display: block; }

/* Legend — mono, line swatches */
#technology .graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  margin-top: 1rem;
  font-family: var(--v5-mono);
  font-size: 0.72rem;
  color: #5a6a85;
}
#technology .graph-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
#technology .lg-sw { width: 16px; height: 0; border-top: 3px solid; border-radius: 2px; }
#technology .lg-det { border-top-color: #f59e0b; }
#technology .lg-sto { border-top-color: #2995c9; }

/* Break-even Monte Carlo graph — Daylight. Built in script.js; colored here.
   .gold = deterministic line, blue = the stochastic cloud/median. */
#technology .be-grid { stroke: rgba(20, 40, 80, 0.10); stroke-width: 1; }
#technology .be-zero { stroke: rgba(20, 40, 80, 0.22); stroke-width: 1; stroke-dasharray: 4 4; }
#technology .be-zerolbl,
#technology .be-axislbl { font: 600 9px/1 var(--v5-mono); letter-spacing: 0.14em; fill: #51607c; text-transform: uppercase; }
#technology .be-det {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease;
  filter: drop-shadow(0 1px 5px rgba(245, 158, 11, 0.40));
}
#technology .be-thread {
  fill: none;
  stroke: #2995c9;
  stroke-width: 1;
  opacity: 0.13;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s ease;
}
#technology .be-band { fill: #2995c9; opacity: 0; transition: opacity 0.9s ease; }
#technology .be-median {
  fill: none;
  stroke: #2995c9;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 1.1s ease, opacity 0.4s ease;
  filter: drop-shadow(0 1px 5px rgba(41, 149, 201, 0.45));
}
#technology .be-dot { opacity: 0; transition: opacity 0.5s ease; }
#technology .be-dot.blue { fill: #2995c9; }
#technology .be-dot.gold { fill: #f59e0b; }
#technology .be-pay { stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity 0.5s ease; }
#technology .be-pay.gold { stroke: #f59e0b; }
#technology .be-pay.blue { stroke: #2995c9; }
#technology .be-paylbl { font: 600 8.5px/1 var(--v5-mono); letter-spacing: 0.08em; opacity: 0; transition: opacity 0.5s ease; }
#technology .be-paylbl.gold { fill: #b9780a; }
#technology .be-paylbl.blue { fill: #2995c9; }

/* =========================================================
   #partners - "Born from Academia" (Daylight skin).
   Final homepage sticky section on the v5 system, framed as an
   editorial "thesis": a single confident origin statement, a
   provenance line, and one credibility chip (the public BREOS
   engine). The old Peer Reviewed / Field Calibrated pillar
   cards are intentionally dropped. Scoped to #partners; base
   style.css untouched (its .innovation-* rules are now unused
   here, harmless dead CSS).
   ========================================================= */
#partners {
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(41, 149, 201, 0.10), transparent 55%),
    linear-gradient(180deg, #f4f7fc 0%, #e7eef7 100%);
  border-bottom: 1px solid rgba(20, 40, 80, 0.08);
}

#partners .partners-thesis {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* The closing statement (doubles as the section h2) */
#partners .pt-head {
  font-size: clamp(1.5rem, 3.1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #13233f;
  margin: 0 0 1.1rem;
}
#partners .pt-head em { font-style: normal; color: #2995c9; }

/* Supporting line under the heading */
#partners .pt-lede {
  max-width: 620px;
  margin: 0 auto 2.2rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #5a6a85;
}

/* Credibility chip(s) - match the .chain-step / .graph-card surface */
#partners .pt-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
#partners .pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(20, 40, 80, 0.10);
  box-shadow: 0 12px 30px -14px rgba(20, 40, 80, 0.22);
  font-size: 0.95rem;
  font-weight: 600;
  color: #13233f;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
/* Same lift+scale as the .btn-primary it sits next to, so the two CTAs in the
   closing row react identically. */
#partners .pt-badge:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(41, 149, 201, 0.55);
  box-shadow: 0 22px 44px -16px rgba(41, 149, 201, 0.35);
}

/* ============================================================
   Dark mode → "Aurora" skin. Same structure; the light defaults
   above are the "Daylight" skin. Toggled by [data-theme="dark"]
   on <html> (set in script.js).
   ============================================================ */
/* Faded photovoltaic-cell grid. Fine cells (40px) grouped into module frames
   (240px = exactly 6 cells, so the bold frame lines always land on a cell line
   instead of drifting off it). Low-alpha so it textures without competing. */
[data-theme="dark"] {
  --pv-grid:
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(150, 180, 255, 0.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(150, 180, 255, 0.05) 39px 40px),
    repeating-linear-gradient(0deg,  transparent 0 239px, rgba(150, 180, 255, 0.085) 239px 240px),
    repeating-linear-gradient(90deg, transparent 0 239px, rgba(150, 180, 255, 0.085) 239px 240px);
  /* Spotlight (same logic as the BREOS page): a horizontal mask clears the grid
     across the centered content column, a vertical mask feathers the page top
     and bottom. Intersected in ::before so the grid survives only in the side
     gutters and dissolves at the corners — texture frames the content. */
  --aurora-mask-x: linear-gradient(90deg, #000 0%, transparent 30%, transparent 70%, #000 100%);
  --aurora-mask-y: linear-gradient(180deg, transparent 0%, #000 6%, #000 88%, transparent 100%);
}

/* The stacked Aurora sections share ONE continuous backdrop painted on <main>
   instead of each section repainting it from its own top edge — that restart
   was shearing the grid at every border. <main> carries a flat deep-navy base;
   a ::before pseudo carries the continuous grid so it can be masked (varied)
   without touching content. Scoped to .v5-aurora so it never affects BREOS. */
[data-theme="dark"] main.v5-aurora {
  position: relative;
  z-index: 0;
  background: var(--au-field);
}
[data-theme="dark"] main.v5-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--pv-grid);
  /* --pv-mask is set by hero.js: a single baked image — a vertical
     page-edge feather with one soft "hole" punched per content block, so the
     grid is erased exactly behind content (revealing the real page gradient —
     no overpaint, no color patch) and survives as texture in the empty space.
     It is ONE layer on purpose: this pseudo is as tall as the whole page, and
     every extra mask layer costs another page-sized offscreen surface.
     When JS is off / unsupported it is unset and the two-layer geometric mask
     below is used as a graceful fallback — mask-composite exists for that path
     only, and is inert against the single baked layer. */
  -webkit-mask-image: var(--pv-mask, var(--aurora-mask-x), var(--aurora-mask-y));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
          mask-image: var(--pv-mask, var(--aurora-mask-x), var(--aurora-mask-y));
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
          mask-composite: intersect;
}

[data-theme="dark"] .circuit-section {
  color: #e7ecf7;
  background: transparent;
  border-bottom-color: transparent;
}
[data-theme="dark"] .circuit-title { color: #fff; }
[data-theme="dark"] .circuit-intro { color: #a2b5d5; }
[data-theme="dark"] .circuit-intro strong { color: #d9e5f7; }

[data-theme="dark"] .chain-step {
  color: #e7ecf7;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .chain-step:hover {
  border-color: rgba(var(--au-blue-rgb), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 26px 60px -24px rgba(var(--au-glow-rgb), 0.5);
}
[data-theme="dark"] .chain-step.is-engine:hover {
  border-color: rgba(255, 207, 138, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 26px 60px -24px rgba(255, 176, 60, 0.5);
}
[data-theme="dark"] .chain { --ct-gold: #feb340; --ct-sky: var(--au-blue); --ct-navy: var(--au-blue-pale); }
[data-theme="dark"] .ct-shadow { stroke: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .ct-eyelet circle { stroke: #455370; }
[data-theme="dark"] .ct-eyelet .ct-hole { fill: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .chain-name { color: #fff; }
[data-theme="dark"] .chain-role { color: var(--au-blue-ink); }
[data-theme="dark"] .chain-step.is-engine .chain-role { color: #ffce83; }
[data-theme="dark"] .chain-desc { color: #91a5c6; }
[data-theme="dark"] .chain-cta { color: var(--au-blue-ink); }
[data-theme="dark"] .chain-step.is-engine .chain-cta { color: #ffce83; }
[data-theme="dark"] .chain-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #b1c3e4;
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .link-powers .chain-link-label { color: #ffce83; }
[data-theme="dark"] .link-handoff .chain-link-label { color: var(--au-blue-ink); }

/* ----- #communities — Aurora (dark) ----- */
[data-theme="dark"] #communities {
  background: transparent;
  border-bottom-color: transparent;
}
[data-theme="dark"] #communities .section-title { color: #fff; }
[data-theme="dark"] #communities .text-content p { color: #a2b5d5; }
[data-theme="dark"] #communities .text-content p strong { color: #d9e5f7; }

[data-theme="dark"] #communities .diagram-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] #communities .diagram-card:hover {
  border-color: rgba(var(--au-blue-rgb), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 26px 60px -24px rgba(var(--au-glow-rgb), 0.5);
}
/* iso scene — dark cs- tokens */
[data-theme="dark"] #communities .iso-scene.cs-scene {
  --cs-wl: #1f2c4a; --cs-wr: #2b3b62; --cs-rf: #36476f; --cs-rb: #2c3b60; --cs-gb: #182340;
  --cs-fas: #121b33; --cs-fas2: #1a2644; --cs-edge: rgba(160, 190, 255, 0.16);
  --cs-win: #34507f; --cs-winframe: #4a618f; --cs-door: #FDB035;
  --cs-pv: #0d1733; --cs-pvedge: #070d20; --cs-pvline: #4a64a8;
  --cs-bx-l: #22305a; --cs-bx-r: #2e3f6a; --cs-bx-t: #3a4c7a;
  --cs-top: #1b2643; --cs-top-dot: rgba(160, 190, 255, 0.10); --cs-road: #121a30; --cs-road-dash: #3a4b74; --cs-paving: #24315a;
  --cs-s0L: #18213b; --cs-s1L: #141c33; --cs-s2L: #10172b; --cs-s3L: #0c1222;
  --cs-s0R: #212d4f; --cs-s1R: #1b2644; --cs-s2R: #161f39; --cs-s3R: #11192f;
  --cs-peb: rgba(160, 190, 255, 0.16); --cs-rim: rgba(160, 190, 255, 0.5);
  --cs-groove: #0f1628; --cs-duct: #2c3b60; --cs-solar: #FDB035; --cs-grid: var(--au-blue);
  --cs-tree-hi: #3f6a62; --cs-tree-lo: #1b3533; --cs-trunk: #4a4036; --cs-lamp: #9db0d0;
  --cs-shadow: #000; --cs-shadow-op: 0.4; --cs-dim: 0.06;
  --cs-night: #0b1430; --cs-night-op: 0.55; --cs-star: #dfe9ff; --cs-moon-hi: #ffffff; --cs-moon-lo: #c9d6ee;
}

/* ----- #technology — Aurora (dark) ----- */
[data-theme="dark"] #technology {
  background: transparent;
  border-bottom-color: transparent;
}
[data-theme="dark"] #technology .section-title { color: #fff; }
[data-theme="dark"] #technology .text-content p { color: #a2b5d5; }
[data-theme="dark"] #technology .text-content p strong { color: #d9e5f7; }
[data-theme="dark"] #technology .feature-list li { color: #d9e5f7; }
[data-theme="dark"] #technology .feature-list li::before { color: var(--au-blue-ink); }

[data-theme="dark"] #technology .graph-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] #technology .graph-card:hover {
  border-color: rgba(var(--au-blue-rgb), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 26px 60px -24px rgba(var(--au-glow-rgb), 0.5);
}
[data-theme="dark"] #technology .graph-card h3 { color: #fff; }
[data-theme="dark"] #technology .graph-meta { color: #91a5c6; }
[data-theme="dark"] #technology .graph-legend { color: #91a5c6; }
[data-theme="dark"] #technology .lg-det { border-top-color: #f7b143; }
[data-theme="dark"] #technology .lg-sto { border-top-color: var(--au-blue); }

/* Break-even Monte Carlo graph — Aurora accent (classes only) */
[data-theme="dark"] #technology .be-grid { stroke: rgba(150, 185, 255, 0.13); }
[data-theme="dark"] #technology .be-zero { stroke: rgba(150, 185, 255, 0.30); }
[data-theme="dark"] #technology .be-zerolbl,
[data-theme="dark"] #technology .be-axislbl { fill: #91a5c6; }
[data-theme="dark"] #technology .be-det { stroke: #f7b143; filter: drop-shadow(0 1px 5px rgba(243, 178, 77, 0.40)); }
[data-theme="dark"] #technology .be-thread { stroke: var(--au-blue); }
[data-theme="dark"] #technology .be-band { fill: var(--au-blue); }
[data-theme="dark"] #technology .be-median { stroke: var(--au-blue); filter: drop-shadow(0 1px 5px rgba(var(--au-blue-rgb), 0.45)); }
[data-theme="dark"] #technology .be-dot.blue { fill: var(--au-blue); }
[data-theme="dark"] #technology .be-dot.gold { fill: #f7b143; }
[data-theme="dark"] #technology .be-pay.gold { stroke: #f7b143; }
[data-theme="dark"] #technology .be-pay.blue { stroke: var(--au-blue); }
[data-theme="dark"] #technology .be-paylbl.gold { fill: #f7b143; }
[data-theme="dark"] #technology .be-paylbl.blue { fill: var(--au-blue); }

/* ----- #partners - Aurora (dark) ----- */
[data-theme="dark"] #partners {
  background: transparent;
  border-bottom-color: transparent;
}
[data-theme="dark"] #partners .pt-head { color: #fff; }
[data-theme="dark"] #partners .pt-head em { color: var(--au-blue-ink); }
[data-theme="dark"] #partners .pt-lede { color: #a2b5d5; }
[data-theme="dark"] #partners .pt-badge {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] #partners .pt-badge:hover {
  border-color: rgba(var(--au-blue-rgb), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 26px 60px -24px rgba(var(--au-glow-rgb), 0.5);
}

@media (prefers-reduced-motion: reduce) {
  #communities .cs-bob, #communities .cs-under { animation: none; }

  /* break-even graph: show final state, no draw-on animation */
  #technology .be-thread,
  #technology .be-det,
  #technology .be-median { stroke-dashoffset: 0 !important; transition: none !important; }
  #technology .be-dot,
  #technology .be-pay,
  #technology .be-paylbl,
  #technology .be-band { transition: none !important; }
  .chain > * { opacity: 1; transform: none; transition: none; }
}