@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/intertight-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/assets/fonts/jetbrainsmono-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
  }


/* ------- tokens ------- */
:root {
  --bg:       #0A0B0D;
  --bg-2:     #0F1115;
  --surface:  #14171C;
  --surface-2:#1A1D23;
  --line:     rgba(255,255,255,0.08);
  --line-2:   rgba(255,255,255,0.04);
  --ink:      #F4F5F7;
  --ink-2:    #D7DADF;
  --mute:     #8A8F98;
  --mute-2:   #5F646D;
  --warm:     #F0C06A;
  --teal:     #4BC0AF;
  --royal:    #6E80FF;
  --violet:   #9C6EFF;
  --danger:   #E26E6E;

  /* Storpeak brand system v1.0 - locked tokens. */
  --brand-green:       #2A7A6F;   /* Blur Green - primary identity */
  --brand-green-light: #5FB0A3;   /* Light Teal - accents on dark */
  --brand-blue:        #3F66FF;   /* Bright Blue - ridge, CTAs */
  --brand-ink:         #0A0A0A;
  --brand-bone:        #EFEFEC;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.45, 1);

  --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----- Tab content typography (shared across ALL tabs) -----
     Use these tokens for any text inside a .tab-view so the design
     stays unified across What we do, Solutions, Technology,
     Insights, Contact, and any future tabs. */
  --tab-lead-size: clamp(18px, 1.9vw, 23px);   /* big intro / statement paragraph */
  --tab-lead-line: 1.42;
  --tab-h3-size:   clamp(28px, 3.2vw, 44px);   /* section / feature headings */
  --tab-h3-line:   1.08;
  --tab-body-size: clamp(14.5px, 1.2vw, 16.5px); /* body prose paragraphs */
  --tab-body-line: 1.65;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: clamp(120px, 13vh, 140px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01","ss02","cv01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ambient background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(75,192,175,0.08), transparent 60%),
    radial-gradient(900px 600px at 100% 20%, rgba(110,128,255,0.06), transparent 60%),
    radial-gradient(800px 800px at 0% 100%, rgba(240,192,106,0.05), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(75,192,175,0.25); color: var(--ink); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ------- typography ------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(75,192,175,0.6);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin: 0;
}
h1.display {
  font-size: clamp(54px, 10vw, 148px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-weight: 500;
}
h2.display {
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-weight: 500;
}
h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 500;
}
p { margin: 0; color: var(--ink-2); }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--mute); line-height: 1.5; max-width: 56ch; }

.italic-display {
  font-family: "Inter Tight", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }

.num-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------- legacy floating nav (hidden, replaced by in-card nav) ------- */
.nav-wrap { display: none; }
.nav {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}
.nav.nav-hidden { transform: translateY(-140%); }

.nav-logo {
  display: inline-flex; align-items: center;
  color: var(--ink);
  transition: filter .2s var(--ease);
}
.nav-logo:hover { filter: brightness(1.12); }
/* Single-image lock-up, sized to match the previous mark+wordmark height. */
.nav-logo__lockup {
  height: 28px;
  width: auto;
  display: block;
  user-select: none;
}
/* Legacy nodes kept for any cloned tab views still using the split mark+text. */
.nav-logo .mark {
  height: 28px; display: grid; place-items: center;
}
.nav-logo .mark img { height: 28px; width: auto; display: block; }
.nav-logo .mark svg { width: 18px; height: 24px; display: block; }

/* Storpeak wordmark - lowercase split colors per Brand Guidelines v1.0.
   Primary (Bone / Paper): "stor" in Ink, "peak" in Blur Green.
   Dark surface (On Ink): "stor" shifts to Paper, "peak" shifts to Light Teal
   (the designated "accents on dark" color, replacing Blur Green). */
.sp-wordmark {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  line-height: 1;
}
.sp-wordmark .sp-stor { color: #FFFFFF; }
.sp-wordmark .sp-peak { color: var(--brand-green-light); }

.nav-links {
  display: flex; justify-content: center; gap: 4px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.nav-links a {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.04); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.nav-cta:hover { background: #fff; transform: translateY(-1px); }
.nav-cta .arrow { transition: transform .3s var(--ease); }
.nav-cta:hover .arrow { transform: translate(2px, -2px); }

.nav-burger { display: none; }
@media (max-width: 760px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .nav-burger {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
  }
  .nav-burger span {
    width: 14px; height: 1.2px; background: var(--ink);
    box-shadow: 0 4px 0 var(--ink), 0 -4px 0 var(--ink);
  }
}

/* ------- buttons ------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover { background: #fff; transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.btn .arrow { font-family: var(--font-mono); font-size: 13px; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translate(3px, -3px); }

/* ------- badge ------- */
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(75,192,175,0.7);
  animation: pulse 2.4s var(--ease) infinite;
}
.badge-split {
  display: inline-flex; align-items: center; gap: 0;
  padding: 0; border: 0; background: transparent;
}
.badge-split > span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.badge-split > span:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); border-right: 0; color: var(--ink); background: rgba(75,192,175,0.08); }
.badge-split > span:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; color: var(--mute); }

/* ============================================================
   HERO — Reference-matched card
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(14px, 1.6vw, 22px);
  background: #050507;
  overflow: hidden;
}
.hero-stage {
  position: relative;
  width: 100%;
  min-height: min(820px, 92svh);
  padding-top: clamp(72px, 9vh, 96px);
  border-radius: clamp(20px, 2vw, 30px);
  background:
    radial-gradient(120% 60% at 50% 0%, #1a1a1f 0%, #0d0d10 48%, #08080a 100%);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 60px 120px -40px rgba(0,0,0,0.8);
}

/* Vertical stripe pattern — venetian blinds effect, matches reference */
.hero-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background-color: #060609;
  background-image:
    /* thin bright vertical hairlines — kept subtle */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 48px
    ),
    /* wider dark bands between — softer */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 24px,
      rgba(0,0,0,0.32) 24px,
      rgba(0,0,0,0.32) 25px,
      transparent 25px,
      transparent 48px
    ),
    /* base vertical gradient */
    linear-gradient(180deg, #0e0e14 0%, #060609 50%, #040408 100%);
  mask-image:
    linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,0.4) 100%);
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,0.4) 100%);
  z-index: 1;
}

/* Soft top glow */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(60% 40% at 30% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(55% 50% at 80% 30%, rgba(130,100,200,0.06), transparent 65%);
}

/* ---------- In-card nav ---------- */
.card-nav {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: clamp(18px, 2vw, 28px) clamp(22px, 3vw, 44px);
}
.card-nav > .card-nav-auth { justify-self: end; }

/* ---------- Floating top nav: transparent at the top of the page;
   when the user scrolls, the nav collapses to top:0 and the whole band
   picks up an opaque backdrop so logo, wordmark, and tab pills sit on
   a solid strip instead of floating over the hero. ---------- */
.floating-nav {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  width: auto;
  z-index: 100;
  padding: 14px clamp(36px, 5vw, 82px);
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  /* Only fade the glass band in/out. The scrolled state is geometrically
     designed so the nav contents stay at the SAME y-position (floating
     top+padding == scrolled top+padding), so transitioning top/padding only
     made the bar visibly slide/jitter on scroll. Switching them instantly is
     invisible (the floating band is transparent) and keeps the bar stable. */
  transition: background .28s var(--ease), border-color .28s var(--ease),
              backdrop-filter .28s var(--ease);
}
.floating-nav.is-scrolled {
  top: 0;
  /* Glass band reaches to the top edge, but contents stay at the same
     y-position as the initial floating state (top:28px + padding-top:14px = 42px)
     so the logo and tabs don't visibly jump up on scroll. */
  padding-top: 42px;
  padding-bottom: 14px;
  background: rgba(10, 11, 13, 0.88);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.card-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.4vw, 7px);
  color: #d9d9de;
}
/* Single-image horizontal lock-up used at every viewport. */
.card-brand__lockup {
  height: clamp(44px, 4.6vw, 56px);
  width: auto;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: auto;
  transition: filter .2s var(--ease);
}
.card-brand:hover .card-brand__lockup { filter: brightness(1.12); }
/* Legacy class names retained for any cloned tab-views */
.card-brand__mark {
  width: auto;
  height: clamp(46px, 4.8vw, 60px);
  flex-shrink: 0;
  display: block;
}
.card-brand .logo-dot {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #e2e2e6;
}
.card-brand .logo-dot svg { width: 26px; height: 26px; display:block; }
.card-brand__wordmark {
  font-family: "Inter Tight", var(--font-display);
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: lowercase;
  transition: filter .2s var(--ease);
}
.card-brand:hover .card-brand__wordmark { filter: brightness(1.12); }

.card-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  list-style: none;
  margin: 0; padding: 0;
}
.card-nav-links a {
  font-size: 13.5px;
  font-weight: 400;
  color: #9a9aa1;
  letter-spacing: -0.005em;
  transition: color .2s var(--ease);
}
.card-nav-links a:hover { color: #e4e4e8; }

.card-nav-auth {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(14, 14, 20, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.25);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.auth-pill {
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #d4d4d8;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.auth-pill:hover { background: rgba(255,255,255,0.06); color: #f2f2f5; }
.auth-pill.is-active {
  background: rgba(255,255,255,0.14);
  color: #f4f4f7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.auth-pill.is-active:hover { background: rgba(255,255,255,0.2); }

/* Upcoming tab — clickable, shows a coming-soon placeholder panel */
.auth-pill--soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
  color: #a9a9b0;
}
.auth-pill--soon:hover { background: rgba(255,255,255,0.04); color: #dedee2; }
.soon-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(75,192,175,0.18);
  color: var(--teal);
  border: 1px solid rgba(75,192,175,0.4);
}

/* ---------- Hero content grid ---------- */
.hero-layout {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 60px);
  padding: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 60px) clamp(90px, 9vw, 130px);
  min-height: clamp(520px, 66svh, 760px);
}

.intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.intro-badge .av-stack {
  display: inline-flex;
}
.intro-badge .av-stack span {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #1a1a1d;
  margin-left: -6px;
}
.intro-badge .av-stack span:first-child { margin-left: 0; }
.intro-badge .av-stack span:nth-child(1) {
  background:
    radial-gradient(circle at 35% 30%, #e9dbc3, #70543a 85%);
}
.intro-badge .av-stack span:nth-child(2) {
  background:
    radial-gradient(circle at 35% 30%, #d4d7da, #5a6068 85%);
}
.intro-badge .av-stack span:nth-child(3) {
  background:
    radial-gradient(circle at 35% 30%, #c9bfe8, #534569 85%);
}
.intro-badge .badge-copy {
  font-size: 12.5px;
  color: #bfbfc5;
  letter-spacing: -0.005em;
  font-weight: 400;
}

h1.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6.2vw, 86px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin: 22px 0 0;
  padding-bottom: 2px;
  max-width: none;
  white-space: normal;
  /* Base title: solid off-white. The accent span paints its own
     teal→royal gradient over the "Energy" word. Counter-gaps inside
     Energy (the enclosed space of "e" and "y") show the hero's dark
     background through, which blends naturally with the darker
     portion of the gradient — no white-spot artifact on any word. */
  color: #f4f4f8;
  -webkit-text-fill-color: #f4f4f8;
}
/* Storpeak palette — #086254 (teal) → #314AB8 (royal blue).
   We use `display: inline-block` plus a tiny horizontal padding (and a
   negative margin to cancel it visually) so the gradient's bounding box
   extends slightly past the glyph cluster. Without that, Safari/WebKit
   was clipping the top-right of the "y" in "Energy" — the diagonal
   stem ran past the inline box's right edge by a fraction of a pixel.
   `box-decoration-break: clone` keeps the gradient consistent across
   any line wrap. */
.hero-title .accent-gradient {
  display: inline-block;
  padding: 0.06em 0.08em 0.16em;
  margin: -0.06em -0.08em -0.16em;
  background-image: linear-gradient(90deg, #086254, #314AB8);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.hero-sub {
  font-size: 17px;
  color: #9a9aa2;
  max-width: 42ch;
  margin: 28px 0 0;
  line-height: 1.55;
}

.hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 32px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.pill-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.pill-btn.pill-light {
  background: rgba(240,240,245,0.48);
  color: #f4f4f7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pill-btn.pill-light:hover {
  background: rgba(250,250,252,0.70);
  color: #15151a;
  transform: translateY(-1px);
}
.pill-btn.pill-dark {
  background: transparent;
  color: #e4e4e8;
}
.pill-btn.pill-dark:hover { background: rgba(255,255,255,0.06); }

/* ---------- 3D cubes scene ---------- */
.cube-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  perspective: 1800px;
  perspective-origin: 50% 40%;
}
.cube-scene::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; bottom: 8%;
  height: 90px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,0.75), transparent 72%);
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
}

/* ---------- Liquid-glass iridescent hero shapes ----------
   Clean, mark-free surfaces. Soft rounded corners blend face-to-face.
   Each face carries layered iridescent blobs (purple / cyan / pink /
   sky) that drift over a silver-to-charcoal body. Positions shift on
   long cycles so colors breathe within each cube and ripple across
   the three cubes via staggered delays. */
.cube {
  position: absolute;
  transform-style: preserve-3d;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  --w: 220px;
  --h: 220px;
  --d: 220px;
  width: var(--w);
  height: var(--h);
}
/* All six faces share the same glass treatment using the brand palette
   (teal --teal #4BC0AF and royal --royal #6E80FF with mint/sky variants).
   Face alpha is tuned so you see through the NEAR face to the FAR face
   of the SAME cube (internal depth), but two stacked faces accumulate
   enough opacity to occlude the cubes behind — cube-1 blocks cube-2 in
   its footprint, cube-2 blocks cube-3. */
.cube .face {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: clamp(22px, 2.6vw, 40px);
  overflow: hidden;
  background:
    radial-gradient(38% 48% at 20% 25%, rgba(30,110,95,0.62), transparent 48%),     /* dark teal */
    radial-gradient(36% 46% at 80% 75%, rgba(35,80,210,0.88), transparent 46%),     /* deep royal blue (dominant) */
    radial-gradient(34% 42% at 55% 45%, rgba(50,110,200,0.80), transparent 48%),    /* cobalt blue */
    radial-gradient(32% 40% at 90% 12%, rgba(110,155,230,0.78), transparent 46%),   /* steel blue */
    radial-gradient(30% 38% at 10% 90%, rgba(40,100,90,0.58), transparent 48%),     /* deep teal */
    radial-gradient(34% 42% at 40% 60%, rgba(4,8,16,0.78), transparent 46%),        /* BLACK shadow */
    radial-gradient(32% 40% at 70% 30%, rgba(160,168,180,0.55), transparent 48%),   /* GREY neutral */
    radial-gradient(30% 38% at 28% 75%, rgba(230,240,255,0.48), transparent 44%),   /* silver highlight (clear-glass) */
    linear-gradient(140deg,
      rgba(180,205,235,0.42) 0%,
      rgba(90,135,205,0.42) 32%,
      rgba(30,70,150,0.46) 68%,
      rgba(8,25,75,0.52) 100%);
  background-size:
    280% 280%, 260% 260%, 270% 270%, 240% 240%, 290% 290%,
    250% 250%, 235% 235%, 270% 270%,
    100% 100%;
  box-shadow:
    /* bright rim light along top + left edges */
    inset 0 0 0 1px rgba(255,255,255,0.30),
    inset 0 2px 3px rgba(255,255,255,0.32),
    inset 2px 0 3px rgba(255,255,255,0.20),
    /* soft inner glow for glass body */
    inset 0 0 40px rgba(150,220,210,0.08),
    /* bottom-right internal shadow */
    inset 0 -2px 3px rgba(0,0,0,0.32),
    inset -2px 0 3px rgba(0,0,0,0.24);
  animation: iridescentGlass 16s ease-in-out infinite;
}

/* Each face type runs the iridescence at a different offset so the 3D
   form has internal variation — back catches different colors than front. */
.cube .f-front  { animation-delay: 0s; }
.cube .f-back   { animation-delay: -8s; }
.cube .f-top    { animation-delay: -3s; }
.cube .f-bottom { animation-delay: -11s; }
.cube .f-right  { animation-delay: -5s; }
.cube .f-left   { animation-delay: -13s; }

@keyframes iridescentGlass {
  0%, 100% { background-position:
     0%   0%, 100% 100%,  50%  30%,  80%   8%,  12%  92%,
    40%  40%,  10%  60%,  75%  25%,
     0%   0%; }
  33%      { background-position:
    82%  70%,  28%  22%,  18%  82%,  22%  88%,  90%  22%,
    75%  15%,  85%  85%,  20%  70%,
     0%   0%; }
  66%      { background-position:
    38%  18%,  64%  86%,  88%   8%,   4%  54%,  52%  58%,
    20%  85%,  50%  30%,  60%  50%,
     0%   0%; }
}

/* Rectangular prism face placement (W × H × D) */
.cube .f-front  { width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); margin-top: calc(var(--h) / -2); transform: translateZ(calc(var(--d) / 2)); }
.cube .f-back   { width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); margin-top: calc(var(--h) / -2); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.cube .f-right  { width: var(--d); height: var(--h); margin-left: calc(var(--d) / -2); margin-top: calc(var(--h) / -2); transform: rotateY(90deg)  translateZ(calc(var(--w) / 2)); }
.cube .f-left   { width: var(--d); height: var(--h); margin-left: calc(var(--d) / -2); margin-top: calc(var(--h) / -2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.cube .f-top    { width: var(--w); height: var(--d); margin-left: calc(var(--w) / -2); margin-top: calc(var(--d) / -2); transform: rotateX(90deg)  translateZ(calc(var(--h) / 2)); }
.cube .f-bottom { width: var(--w); height: var(--d); margin-left: calc(var(--w) / -2); margin-top: calc(var(--d) / -2); transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* Shape 1 — HORIZONTAL rectangle extending in DEPTH (not width):
   narrow front face, long right-side face receding into scene.
   filter would flatten preserve-3d; drop shadow stays on .cube-scene::before. */
.cube-1 {
  --w: clamp(140px, 14vw, 200px);
  --h: clamp(160px, 15vw, 210px);
  --d: clamp(220px, 22vw, 300px);
  left: 4%; top: 58%;
  transform: rotateX(-20deg) rotateY(-34deg);
  z-index: 3;
  animation: cubeFloat1 42s ease-in-out infinite;
}

/* Shape 2 — SHORTEST + WIDEST (middle): low-profile horizontal slab */
.cube-2 {
  --w: clamp(192px, 21.5vw, 275px);
  --h: clamp(58px, 6vw, 82px);
  --d: clamp(108px, 11vw, 145px);
  left: 38%; top: 84%;
  transform: rotateX(-20deg) rotateY(-34deg);
  z-index: 2;
  animation: cubeFloat2 42s ease-in-out infinite -10s;
}

/* Shape 3 — HORIZONTAL rectangle extending in DEPTH (back-right) */
.cube-3 {
  --w: clamp(140px, 15vw, 195px);
  --h: clamp(155px, 15vw, 210px);
  --d: clamp(200px, 22vw, 285px);
  right: 10%; top: 58%;
  transform: rotateX(-20deg) rotateY(-34deg);
  z-index: 1;
  animation: cubeFloat3 42s ease-in-out infinite;
}

/* Cross-cube stagger: shift every face of cubes 2 and 3 by another
   large offset on top of the face-local offset, so color waves ripple
   across the three-cube composition in addition to within each cube. */
.cube-2 .face { animation-delay: -5.3s; }
.cube-2 .f-back   { animation-delay: -13.3s; }
.cube-2 .f-top    { animation-delay: -8.3s;  }
.cube-2 .f-bottom { animation-delay: -0.3s;  }
.cube-2 .f-right  { animation-delay: -10.3s; }
.cube-2 .f-left   { animation-delay: -2.3s;  }

.cube-3 .face { animation-delay: -10.6s; }
.cube-3 .f-back   { animation-delay: -2.6s;  }
.cube-3 .f-top    { animation-delay: -13.6s; }
.cube-3 .f-bottom { animation-delay: -5.6s;  }
.cube-3 .f-right  { animation-delay: -15.6s; }
.cube-3 .f-left   { animation-delay: -7.6s;  }

/* --- Float animations (cube-level, subtle bob + micro-tilt) --- */
/* Choreography — cubes 1 & 3 swap toward each other through the middle.
   RIGHT-EDGE SAFETY: cube-3 sits near the right edge of the scene;
   even small rightward drift risks overflow. Its keyframe magnitude
   is capped at -14vw (the prior -30vw was overflowing). cube-1 has
   plenty of leftward room so its +30vw drift is retained. */
/* Single swap peak at 50% — cubes rise, drift, and reach the swap
   position simultaneously in one continuous motion. No intermediate
   waypoints, no plateaus, no reversal at the peak — ease-in-out
   alone produces a smooth arc from origin → swap → origin. */
@keyframes cubeFloat1 {
  0%, 100% { transform: translate3d(0,    0,    0) rotateX(-20deg) rotateY(-34deg); }
  50%      { transform: translate3d(18vw, -48px, 0) rotateX(-21.5deg) rotateY(-35deg); }
}
@keyframes cubeFloat2 {
  0%, 100% { transform: translate3d(0,     0, 0) rotateX(-20deg) rotateY(-34deg); }
  50%      { transform: translate3d(-46px, 0, 0) rotateX(-20deg) rotateY(-34.5deg); }
}
@keyframes cubeFloat3 {
  0%, 100% { transform: translate3d(0,     0,    0) rotateX(-20deg) rotateY(-34deg); }
  50%      { transform: translate3d(-13vw, -38px, 0) rotateX(-21.5deg) rotateY(-33deg); }
}

/* Watermark */
.hero-watermark {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.14);
  letter-spacing: 0.02em;
  z-index: 3;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 960px) {
  .card-nav-links { display: none; }
  .hero-layout {
    grid-template-columns: 1fr;
    padding: 24px 22px 40px;
    min-height: unset;
  }
  .cube-scene { min-height: 320px; }
  .cube-1 { left: 8%; top: 55%; }
  .cube-2 { left: 42%; top: 44%; }
  .cube-3 { right: 4%; top: 18%; }
  h1.hero-title { font-size: clamp(46px, 12.5vw, 80px); }

  /* Mobile/tablet: the floating nav must occlude page content the INSTANT
     the user scrolls. On the homepage the bar starts transparent and fades
     its glass in over 0.28s; combined with the 0.88-alpha background and a
     backdrop blur that lags during momentum scroll on touch devices, page
     content "ghosted" through the bar before it covered. (Static tab pages
     never showed this - they render the bar already in its scrolled state.)
     Fix: solid background, applied with no transition and no blur, so the
     bar hides content the moment is-scrolled flips on. */
  .floating-nav { transition: none; }
  .floating-nav.is-scrolled {
    background: #0A0B0D;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (max-width: 900px) {
  /* Tighter brand lockup on tablet/mobile so the nav fits the viewport. */
  .card-brand__mark { height: 44px; }
  .card-brand__lockup { height: 52px; }
  .card-brand__wordmark { font-size: 30px; }
  .auth-pill { padding: 7px 12px; font-size: 12.5px; }
  .card-nav-auth { padding: 3px; gap: 1px; }
  .floating-nav { padding: 10px 20px; }
}
@media (max-width: 640px) {
  /* Two-row mobile nav:
     Row 1: brand lockup (mark + wordmark both visible)
     Row 2: all 5 tab pills, evenly spread, no horizontal scroll. */
  .card-nav {
    padding: 10px 14px;
    gap: 8px;
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .floating-nav { padding: 8px 12px; }
  /* Anchor scrolled contents at the same y as the initial floating
     state (top:28 + padding-top:8 = 36) so the logo and tabs don't
     jump down or distort when the glass band kicks in on scroll. */
  .floating-nav.is-scrolled {
    padding-top: 36px;
    padding-bottom: 8px;
  }
  .card-brand { gap: 6px; }
  .card-brand__mark { height: 32px; }
  .card-brand__lockup { height: 44px; }
  .card-brand__wordmark { display: inline; font-size: 22px; }
  .card-nav-auth {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 3px;
    justify-self: stretch;
  }
  .auth-pill {
    padding: 7px 4px;
    font-size: 10.5px;
    letter-spacing: -0.005em;
    flex-shrink: 1;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  /* Very narrow phones: tighten nav further so all 5 tabs still fit. */
  .floating-nav { padding: 8px 8px; }
  .card-nav { padding: 8px 8px; }
  .auth-pill { padding: 6px 2px; font-size: 9.5px; }
  .card-brand__wordmark { font-size: 20px; }
  .card-brand__mark { height: 28px; }
  .card-brand__lockup { height: 38px; }
}

/* ============================================================
   SECTION BASICS
   ============================================================ */
section { position: relative; }
.section-pad { padding: clamp(40px, 5vw, 72px) var(--gutter); }

/* Anchor targets land just below the fixed floating nav when reached
   via tab click / hash link. The scroll-margin-top is sized to match
   the nav height so the section's first paint sits immediately under
   the nav - no visible gap, no hiding of the heading. */
section[id] { scroll-margin-top: clamp(120px, 13vh, 140px); }

/* Punchy lines intro — stacked, each line on its own, efficient. */
.three-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 52ch;
}
.three-lines p {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.three-lines p + p { color: var(--mute); }

/* Split section head — title on the left, punchy intro lines on the right,
   bottom-aligned so the copy sits beside the h2 baseline. */
.section-head-split {
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .section-head-split {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
  }
  .section-head-split .sh-aside { padding-bottom: 8px; }
}

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: var(--container);
  margin: 0 auto 32px;
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; }
}
.section-head .sh-title h2 { max-width: 14ch; }
.section-head .sh-aside {
  color: var(--mute);
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 17px);
  justify-self: end;
}
.section-head .sh-aside .eyebrow { display: block; margin-bottom: 10px; }

/* ============================================================
   STATEMENT BEAT
   ============================================================ */
.statement {
  padding: clamp(100px, 14vw, 200px) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.statement .inner { max-width: 1100px; margin: 0 auto; }
.statement .kicker {
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.statement h2 {
  font-size: clamp(36px, 6.4vw, 110px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  max-width: 22ch;
}
.statement h2 em {
  font-family: "Inter Tight", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--warm);
  background: linear-gradient(135deg, var(--warm), #FFD989);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.statement .caption {
  margin-top: 48px;
  color: var(--mute);
  font-size: 15px;
  max-width: 52ch;
}

/* ============================================================
   TECHNOLOGY — 3 beats
   ============================================================ */
.tech-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 960px) {
  .tech-grid { grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
}

.beat {
  position: relative;
  padding: clamp(24px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-height: 440px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.beat > * { position: relative; z-index: 2; }
.beat:hover { transform: translateY(-3px); }

/* Corner glow per variant (always-on highlighted state, more intense on hover) */
.beat__glow {
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  transition: opacity .35s var(--ease), transform .6s var(--ease);
}
.beat:hover .beat__glow { opacity: 1; transform: scale(1.08); }

.beat--teal { border-color: rgba(75,192,175,0.45); }
.beat--teal .beat__glow { background: radial-gradient(circle, rgba(75,192,175,0.28), transparent 60%); }
.beat--teal:hover { border-color: rgba(75,192,175,0.6); }

.beat--royal { border-color: rgba(110,128,255,0.45); }
.beat--royal .beat__glow { background: radial-gradient(circle, rgba(110,128,255,0.28), transparent 60%); }
.beat--royal:hover { border-color: rgba(110,128,255,0.6); }

.beat--warm { border-color: rgba(240,192,106,0.45); }
.beat--warm .beat__glow { background: radial-gradient(circle, rgba(240,192,106,0.28), transparent 60%); }
.beat--warm:hover { border-color: rgba(240,192,106,0.6); }

.beat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Inner wrapper in .beat holds art + title + copy */
.beat > div {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.beat__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin: 0 0 4px;
  text-align: left;
  text-wrap: balance;
}
/* Paragraphs share a single wrap strategy so all three cards read with
   identical left-edge alignment and greedy, non-balanced line breaks. */
.beat p {
  text-align: left;
  text-wrap: normal;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
.beat--teal .beat__title {
  background: linear-gradient(90deg, #5ED5C2 0%, #4BC0AF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.beat--royal .beat__title {
  background: linear-gradient(90deg, #A5B2FF 0%, #6E80FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.beat--warm .beat__title {
  background: linear-gradient(90deg, #FFD88A 0%, #F0C06A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.beat p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   SPLIT CARDS — capability grid shown below the 3 beats on the
   What-we-do tab. Six cards, color-coded per beat.
   ============================================================ */
.cap-section  { margin-top: clamp(48px, 5.5vw, 80px); }
.cap-head     { margin-bottom: clamp(20px, 2.4vw, 32px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cap-head h3  { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.025em; margin: 8px 0 0; color: var(--ink); max-width: 28ch; line-height: 1.15; }
.cap-head__right { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }

.cap-grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1120px) { .cap-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 820px)  { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cap-grid { grid-template-columns: 1fr; } }

.cap-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 22px 22px 20px;
  overflow: hidden;
  transition: border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.cap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-accent, rgba(255,255,255,0.18)), transparent);
  opacity: 0.65;
}
.cap-card::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-accent, rgba(255,255,255,0.06)) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.cap-card:hover {
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}
.cap-card:hover::after { opacity: 0.35; }

.cap-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.cap-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--card-icon-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--card-icon-border, rgba(255,255,255,0.07));
  color: var(--card-icon-color, var(--ink-2));
}
.cap-card__icon svg { width: 16px; height: 16px; display: block; }
.cap-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.cap-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.18;
}
.cap-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  letter-spacing: -0.005em;
}

/* Lead statement shown above the capability grid.
   Convention: every tab's lead paragraph should be followed by an
   <hr class="tab-divider"> for a consistent separator look. */
.cap-intro {
  max-width: 64ch;
  margin: 0 auto;
  text-align: center;
}
.cap-intro p {
  font-family: var(--font-display);
  font-size: var(--tab-lead-size);
  line-height: var(--tab-lead-line);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   SOLUTIONS TAB — editorial hero + image + prose layout:
   simple, confident, one big picture, short paragraphs around it.
   ============================================================ */
.sol-top {
  max-width: 920px;
  margin: 0 auto clamp(36px, 4.5vw, 64px);
  padding: 0 var(--gutter);
  text-align: center;
}
.sol-top .eyebrow { justify-content: center; margin-bottom: 18px; }
.sol-top .display {
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.036em;
  margin: 0 0 20px;
}
.sol-top .sol-sub {
  font-size: var(--tab-lead-size);
  line-height: var(--tab-lead-line);
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0 auto;
}

.sol-image {
  margin: 0 auto clamp(48px, 6vw, 84px);
  padding: 0 var(--gutter);
  max-width: 1320px;
  position: relative;
}
.sol-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: clamp(14px, 1.8vw, 26px);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 40px 100px -24px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.05) inset;
}
.sol-image__tag {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  left: calc(var(--gutter) + clamp(16px, 2vw, 28px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(14,14,20,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sol-image__tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(75,192,175,0.7);
  animation: pulse 2.4s var(--ease) infinite;
}

.sol-body {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px) clamp(32px, 4vw, 72px);
}
@media (max-width: 760px) { .sol-body { grid-template-columns: 1fr; gap: 32px; } }

.sol-body h3 {
  font-family: var(--font-display);
  font-size: var(--tab-h3-size);
  line-height: var(--tab-h3-line);
  letter-spacing: -0.028em;
  font-weight: 500;
  margin: 0 0 18px;
  color: var(--ink);
  max-width: 16ch;
}
.sol-body p {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin: 0;
}

.sol-close {
  max-width: 64ch;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: clamp(36px, 4vw, 56px) var(--gutter) 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ============================================================
   "Live" demo section — pair of rich cards linking to the real
   deployed apps. Used on the Technology tab. Kept elegant and
   minimal: icon, live pulse pill, title, short desc, CTA arrow.
   ============================================================ */
.tab-live {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.tab-live__head {
  text-align: center;
  margin-bottom: clamp(28px, 3.2vw, 48px);
}
.tab-live__head .eyebrow { justify-content: center; margin-bottom: 14px; }
.tab-live__title {
  font-family: var(--font-display);
  font-size: var(--tab-h3-size);
  line-height: var(--tab-h3-line);
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}
.tab-live__sub {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 auto;
}

.tab-live__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 820px) { .tab-live__grid { grid-template-columns: 1fr; } }

.live-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  min-height: 260px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.live-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--card-accent, rgba(255,255,255,0.2)), transparent);
  opacity: 0.7;
}
.live-card::after {
  content: "";
  position: absolute;
  inset: -30% -30% auto auto;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-accent, rgba(255,255,255,0.08)) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.live-card:hover {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.live-card:hover::after { opacity: 0.35; }

.live-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--card-icon-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--card-icon-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  color: var(--card-icon-color, var(--ink-2));
}
.live-card__icon svg { width: 22px; height: 22px; display: block; }

.live-card__pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(14,14,20,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink-2);
}
.live-card__pulse .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-accent-solid, var(--teal));
  box-shadow: 0 0 10px var(--card-accent-solid, var(--teal));
  animation: pulse 2.2s var(--ease) infinite;
}

.live-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.live-card__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.024em;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}
.live-card__desc {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  margin: 0;
}
.live-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-accent-solid, var(--ink));
}
.live-card__cta .arrow { transition: transform .25s var(--ease); }
.live-card:hover .live-card__cta .arrow { transform: translate(4px, -4px); }

/* Color variants matching the real products */
.live-card--royal {
  --card-accent: rgba(110,128,255,0.5);
  --card-accent-solid: var(--royal);
  --card-icon-bg: rgba(110,128,255,0.1);
  --card-icon-border: rgba(110,128,255,0.3);
  --card-icon-color: var(--royal);
}
.live-card--warm {
  --card-accent: rgba(240,192,106,0.5);
  --card-accent-solid: var(--warm);
  --card-icon-bg: rgba(240,192,106,0.1);
  --card-icon-border: rgba(240,192,106,0.3);
  --card-icon-color: var(--warm);
}

/* ============================================================
   BATTERY MODEL DEMO — interactive showcase on the Technology tab.
   Three sliders (temperature, DoD, C-rate) drive a live SoH curve.
   ============================================================ */
/* Shared header above the twin playgrounds — ONE title covers both. */
.demos-head {
  max-width: 920px;
  margin: 0 auto clamp(28px, 3.2vw, 44px);
  padding: 0 var(--gutter);
  text-align: center;
}
.demos-head__title {
  font-family: var(--font-display);
  font-size: var(--tab-h3-size);
  line-height: var(--tab-h3-line);
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}
.demos-head__sub {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
}

/* Twin-playground wrapper: 2 columns at desktop, 1 at tablet/mobile.
   Order is forced so Market (royal) sits on the LEFT and Battery (warm)
   on the RIGHT — matching the "Two tools. One intelligence." cards above. */
.demos-twin {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 3.5vw, 48px);
}
@media (min-width: 1100px) {
  .demos-twin { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.demos-twin .mk-demo { order: 1; }
.demos-twin .bm-demo { order: 2; }

/* Shared playground rules (apply to both battery + market demos) */
.bm-demo, .mk-demo {
  display: flex;
  flex-direction: column;
}
.bm-demo__head, .mk-demo__head {
  text-align: center;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
.bm-demo__head .eyebrow, .mk-demo__head .eyebrow {
  justify-content: center;
  margin-bottom: 14px;
}
.bm-demo__title, .mk-demo__title {
  font-family: var(--font-display);
  font-size: var(--tab-h3-size);
  line-height: var(--tab-h3-line);
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
}
.bm-demo__sub, .mk-demo__sub {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 auto;
}

.bm-demo__body, .mk-demo__body {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  flex: 1;
}

.bm-demo__controls, .mk-demo__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
@media (max-width: 480px) {
  .bm-demo__controls, .mk-demo__controls { grid-template-columns: 1fr; }
}

.bm-slider, .mk-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bm-slider__head, .mk-slider__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.bm-slider__label, .mk-slider__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.bm-slider__value, .mk-slider__value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bm-slider__input, .mk-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(75,192,175,0.55) 0%, rgba(110,128,255,0.55) 50%, rgba(240,192,106,0.6) 100%);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.bm-slider__input::-webkit-slider-thumb,
.mk-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--teal);
  cursor: grab;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  transition: transform .2s var(--ease);
}
.bm-slider__input::-webkit-slider-thumb:hover,
.mk-slider__input::-webkit-slider-thumb:hover { transform: scale(1.1); }
.bm-slider__input::-webkit-slider-thumb:active,
.mk-slider__input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.bm-slider__input::-moz-range-thumb,
.mk-slider__input::-moz-range-thumb {
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--teal);
  cursor: grab;
}
.bm-slider__input:focus-visible::-webkit-slider-thumb,
.mk-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(75,192,175,0.35);
}

.bm-slider__range, .mk-slider__range {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute-2);
  letter-spacing: 0.06em;
}

.bm-demo__chart, .mk-demo__chart {
  display: flex;
  align-items: center;
  min-height: 220px;
}
.bm-demo__chart .bm-chart,
.mk-demo__chart .mk-chart {
  width: 100%;
  height: auto;
  display: block;
}

.bm-demo__foot, .mk-demo__foot {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  justify-content: space-around;
  margin-top: clamp(20px, 2.4vw, 30px);
  flex-wrap: wrap;
}
.bm-stat, .mk-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.bm-stat__label, .mk-stat__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.bm-stat__value, .mk-stat__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bm-stat__value small, .mk-stat__value small {
  font-size: 0.36em;
  font-weight: 400;
  color: var(--ink-2);
  margin-left: 6px;
  letter-spacing: 0;
}

.bm-demo__hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--mute-2);
  max-width: 52ch;
  margin: clamp(20px, 2.2vw, 28px) auto 0;
  line-height: 1.5;
}

/* Shared closing prose block — centred single-column, sits below a
   .tab-divider. Use on any tab to land a short "our thesis" or
   "our tech" statement after the main content. */
.tab-closing {
  max-width: 62ch;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.tab-closing h3 {
  font-family: var(--font-display);
  font-size: var(--tab-h3-size);
  line-height: var(--tab-h3-line);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 18px;
}
.tab-closing p {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin: 0;
}

/* Unified tab separator — use <hr class="tab-divider"> on any tab to
   mark a major visual break. Conventions:
     - after a lead / intro paragraph, before the main content
     - between two major sections of a tab (e.g. cloned block + custom block)
   Margins are symmetric so the divider line sits visually centred
   between the surrounding blocks. Sections that the divider follows
   should zero their own padding-bottom to avoid double spacing — see
   the .tab-view .tab-view__body rule below. */
.tab-divider,
.sol-divider {
  border: 0;
  height: 1px;
  max-width: min(820px, 80%);
  margin: clamp(48px, 5.5vw, 80px) auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

/* Between-section rule. Sits in the document flow between two
   section-pad blocks; carries no margin of its own so the surrounding
   section padding creates symmetric breathing room above and below. */
/* Section dividers on the main scrolling page. Sized to clearly signal a
   change of section to first-time visitors: thicker, wider, brighter, with
   a soft on-brand teal glow and a brighter teal-tinted core. */
.section-rule {
  border: 0;
  height: 3px;
  max-width: min(1240px, 92%);
  margin: clamp(10px, 1.6vw, 24px) auto;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 14%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.12) 86%,
    transparent 100%);
  box-shadow: 0 0 18px rgba(255,255,255,0.12);
}

/* Side-by-side feature block: BESS photo left, "added value" copy right */
.sol-feature {
  max-width: 1280px;
  margin: clamp(56px, 6vw, 90px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 920px) {
  .sol-feature { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
}

.sol-feature__image {
  position: relative;
  margin: 0;
}
/* <picture> defaults to display:inline, which collapses the child img's
   width:100% to 0. Make it block so the image fills the figure column. */
.sol-feature__image picture { display: block; }
.sol-feature__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: clamp(14px, 1.6vw, 24px);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.05) inset;
}
.sol-feature__image .sol-image__tag {
  position: absolute;
  top: clamp(14px, 1.6vw, 22px);
  left: clamp(14px, 1.6vw, 22px);
}

.sol-feature__text h3 {
  font-family: var(--font-display);
  font-size: var(--tab-h3-size);
  line-height: var(--tab-h3-line);
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 14ch;
}
.sol-feature__text h3 .accent-gradient {
  background: linear-gradient(120deg, var(--teal) 0%, var(--royal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sol-feature__text p {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 58ch;
}

/* Closing prose shown below the capability grid */
.cap-ender {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(32px, 4vw, 56px) var(--gutter);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.cap-ender__prose {
  max-width: 62ch;
  margin: 0 auto;
}
.cap-ender__prose p {
  font-size: var(--tab-body-size);
  line-height: var(--tab-body-line);
  color: var(--ink-2);
  letter-spacing: -0.005em;
  margin: 0 0 16px;
}
.cap-ender__prose p:last-child { margin-bottom: 0; }

/* Beat-color variants */
.cap-card--teal {
  --card-accent: rgba(75,192,175,0.55);
  --card-icon-bg: rgba(75,192,175,0.1);
  --card-icon-border: rgba(75,192,175,0.28);
  --card-icon-color: var(--teal);
}
.cap-card--royal {
  --card-accent: rgba(110,128,255,0.55);
  --card-icon-bg: rgba(110,128,255,0.1);
  --card-icon-border: rgba(110,128,255,0.28);
  --card-icon-color: var(--royal);
}
.cap-card--warm {
  --card-accent: rgba(240,192,106,0.55);
  --card-icon-bg: rgba(240,192,106,0.1);
  --card-icon-border: rgba(240,192,106,0.28);
  --card-icon-color: var(--warm);
}

.beat .art {
  height: 200px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.2));
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.beat--teal .art { background: linear-gradient(180deg, rgba(75,192,175,0.03), rgba(0,0,0,0.2)); }
.beat--royal .art { background: linear-gradient(180deg, rgba(110,128,255,0.03), rgba(0,0,0,0.2)); }
.beat--warm .art { background: linear-gradient(180deg, rgba(240,192,106,0.03), rgba(0,0,0,0.2)); }

/* Beat art — shared */
.art-forecast,
.art-dispatch,
.art-battery {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- 01 / FORECAST — spot + dispatch + forecast line chart ----------
   Past data (spot + dispatch, left of NOW) is static once drawn in.
   Forecast zone (right of NOW) breathes to signal uncertainty /
   "this is a prediction, continuously resolved". */
.art-forecast .fc-spot,
.art-forecast .fc-dispatch {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: fcDraw 2.6s var(--ease) .2s forwards;
}
.art-forecast .fc-dispatch {
  animation-delay: .4s;
}
.art-forecast .fc-spot-fill {
  opacity: 0;
  animation: fcFadeIn .8s var(--ease) 2.5s forwards;
}

/* Forecast zone — projections breathe as one group, and each path
   has its own "marching ants" stroke offset so the dashes flow
   continuously along the line (signals live re-solving). */
.art-forecast .fc-forecast-zone {
  opacity: 0;
  transform-origin: 160px 100px;
  transform-box: view-box;
  animation:
    fcForecastIn 1s var(--ease) 2.6s forwards,
    fcForecastBreathe 4.5s ease-in-out 3.8s infinite;
}
.art-forecast .fc-forecast {
  animation: fcMarchGold 1.6s linear infinite;
}
.art-forecast .fc-dispatch-proj {
  animation: fcMarchBlue 2.0s linear infinite;
}

/* NOW marker pulses */
.art-forecast .fc-now-dot  { animation: fcNowDot  2.2s ease-in-out 1.2s infinite both; transform-origin: center; transform-box: fill-box; }
.art-forecast .fc-now-glow { animation: fcNowGlow 2.2s ease-in-out 1.2s infinite both; transform-origin: center; transform-box: fill-box; }

@keyframes fcDraw {
  0%   { stroke-dashoffset: 360; opacity: 0.2; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}
@keyframes fcFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fcForecastIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* Breath: gentle vertical wave + subtle scaleY, around the NOW pivot.
   Only affects the forecast zone — the past data stays still. */
@keyframes fcForecastBreathe {
  0%, 100% { transform: translateY(0)    scaleY(1);    }
  50%      { transform: translateY(-2px) scaleY(1.05); }
}
/* Dash offsets flow along the stroke direction. Dash cycle 3+4 = 7 on
   the gold forecast, 2+3 = 5 on the blue projection — negative offset
   moves dashes from left to right (into the future). */
@keyframes fcMarchGold {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -14; }
}
@keyframes fcMarchBlue {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -10; }
}
@keyframes fcNowDot {
  0%, 100% { transform: scale(1);   opacity: 1;    }
  50%      { transform: scale(1.2); opacity: 0.85; }
}
@keyframes fcNowGlow {
  0%, 100% { transform: scale(1);   opacity: 0.3; }
  50%      { transform: scale(2.4); opacity: 0;   }
}

/* ---------- 02 / OPERATE — dispatch bars cascade + NOW cursor sweep ---------- */
.art-dispatch .dispatch-bars rect {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: barGrow .8s var(--ease) both;
  animation-delay: calc(var(--i) * 40ms);
}
.art-dispatch .dispatch-now-col {
  animation: nowSweep 9s ease-in-out 1.5s infinite;
}

@keyframes barGrow {
  0%   { transform: scaleY(0);    opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scaleY(1);    opacity: 1; }
}
@keyframes nowSweep {
  0%   { transform: translateX(0);     opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(310px); opacity: 0; }
}

/* ---------- 03 / PROTECT — battery ----------
   Horizontal battery with segmented charge, breathing level,
   pulsing edge marker, and a warranty envelope that pulses softly. */
.art-battery {
  display: grid;
  place-items: center;
}
.art-battery .bat-fill {
  transform-origin: left center;
  transform-box: fill-box;
  animation: batCharge 22s ease-in-out infinite;
}
.art-battery .bat-marker {
  animation: batMarkerCharge 22s ease-in-out infinite;
  transform-box: fill-box;
}
.art-battery .bat-marker-dot {
  animation: batMarkerCharge 22s ease-in-out infinite;
  transform-box: fill-box;
}
.art-battery .bat-status-dot {
  animation: batStatus 1.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.art-battery .bat-envelope {
  animation: batEnvelope 5s ease-in-out infinite;
}

/* Slow charge cycle — fill grows from 10% to 90%, pauses near full, discharges.
   bat-fill native width represents 100% (scaleX=1 = full; scaleX=0.1 = 10%). */
@keyframes batCharge {
  0%    { transform: scaleX(0.10); filter: brightness(0.82); }
  55%   { transform: scaleX(0.90); filter: brightness(1.15); }
  70%   { transform: scaleX(0.90); filter: brightness(1.15); }
  100%  { transform: scaleX(0.10); filter: brightness(0.82); }
}
/* Marker + dot track the fill's right edge.
   Native position sits at the 100% mark (x≈222);
   translateX(-174.6px) maps to 10%, translateX(-19.4px) maps to 90%.
   (fill native width 194px; 10% width = 19.4px → delta 194-19.4 = 174.6px;
    90% width = 174.6px → delta 194-174.6 = 19.4px) */
@keyframes batMarkerCharge {
  0%    { transform: translateX(-174.6px); opacity: 0.55; }
  55%   { transform: translateX(-19.4px);  opacity: 1;    }
  70%   { transform: translateX(-19.4px);  opacity: 1;    }
  100%  { transform: translateX(-174.6px); opacity: 0.55; }
}
@keyframes batStatus {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 0 rgba(75,192,175,0)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 6px rgba(75,192,175,0.6)); }
}
@keyframes batEnvelope {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .art-forecast .fc-spot,
  .art-forecast .fc-dispatch,
  .art-forecast .fc-spot-fill,
  .art-forecast .fc-forecast-zone,
  .art-forecast .fc-now-dot,
  .art-forecast .fc-now-glow,
  .art-dispatch .dispatch-bars rect,
  .art-dispatch .dispatch-now-col,
  .art-battery .bat-fill,
  .art-battery .bat-marker,
  .art-battery .bat-marker-dot,
  .art-battery .bat-status-dot,
  .art-battery .bat-envelope { animation: none !important; transform: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* ============================================================
   CENTERFOLD — product
   ============================================================ */
.centerfold-wrap {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.centerfold-stage {
  position: relative;
  margin-top: 56px;
  padding: 40px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(75,192,175,0.06), rgba(110,128,255,0.04) 60%, transparent);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.centerfold-stage::before {
  content: "";
  position: absolute; inset: auto -20% -50% -20%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(240,192,106,0.14), transparent 70%);
  filter: blur(20px);
  z-index: -1;
}
.dashboard {
  position: relative;
  background: linear-gradient(180deg, #0F1216 0%, #0B0D10 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.35);
  transform: perspective(1800px) rotateX(2deg) rotateY(-1deg);
  overflow: hidden;
  transform-origin: 50% 30%;
}
.dashboard-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.dashboard-bar .dots { display: inline-flex; gap: 6px; }
.dashboard-bar .dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.dashboard-bar .crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-bar .status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-bar .status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 10px var(--teal);
  animation: pulse 2.4s var(--ease) infinite;
}

.dashboard-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 440px;
}
.dashboard-side {
  border-right: 1px solid var(--line);
  padding: 16px 10px;
  background: rgba(255,255,255,0.015);
  display: flex; flex-direction: column; gap: 4px;
}
@media (max-width: 760px) {
  .dashboard-body { grid-template-columns: 1fr; }
  .dashboard-side { display: none !important; }
  .dashboard-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
  .dashboard-bar .crumbs { font-size: 10px; }
}
.dashboard-side .item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--mute);
  display: flex; align-items: center; gap: 10px;
  cursor: default;
}
.dashboard-side .item .i {
  width: 14px; height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}
.dashboard-side .item.active {
  background: rgba(75,192,175,0.08);
  color: var(--ink);
}
.dashboard-side .item.active .i { background: var(--teal); }
.dashboard-side hr {
  border: 0; height: 1px; background: var(--line);
  margin: 12px 4px;
}
.dashboard-side .heading {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--mute-2);
  text-transform: uppercase;
  padding: 8px 12px 4px;
}
.dashboard-main {
  padding: 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 640px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
}
.kpi .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-transform: uppercase;
}
.kpi .value {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi .delta {
  font-family: var(--font-mono);
  font-size: 11px;
}
.kpi .delta.up { color: var(--teal); }
.kpi .delta.down { color: var(--danger); }

.chart {
  flex: 1;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  position: relative;
  min-height: 240px;
}
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px; flex-wrap: wrap;
}
@media (max-width: 640px) {
  .chart-head .title { font-size: 12px; }
  .chart-head .legend { gap: 8px; font-size: 9px; }
}
.chart-head .title {
  font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.chart-head .legend {
  display: inline-flex; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chart-head .legend i {
  width: 8px; height: 2px; display: inline-block; margin-right: 5px;
  vertical-align: middle;
}
.chart svg { width: 100%; height: 180px; overflow: visible; }

.callout {
  position: absolute;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10,11,13,0.85);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.callout.c1 { top: 20%; right: -70px; display: none; }
@media (min-width: 1100px) {
  .callout.c1 { display: block; }
}
.callout.c2 { bottom: 40%; left: -70px; display: none; }
@media (min-width: 1100px) {
  .callout.c2 { display: block; }
}
.callout::before {
  content: "";
  position: absolute;
  width: 40px; height: 1px;
  background: var(--line);
}
.callout.c1::before { left: -42px; top: 50%; }
.callout.c2::before { right: -42px; top: 50%; }

/* ============================================================
   OUR TECHNOLOGY — two tools, one engine
   ============================================================ */
.tech-stack {
  max-width: var(--container);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 1000px) {
  .tech-stack { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.tech-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,0.55);
}
.tech-card > * { position: relative; z-index: 2; }
.tech-card:hover { transform: translateY(-3px); }

.tech-card__glow {
  position: absolute;
  top: -140px; right: -140px;
  width: 380px; height: 380px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  transition: opacity .35s var(--ease), transform .6s var(--ease);
}
.tech-card:hover .tech-card__glow { opacity: 1; transform: scale(1.08); }

.tech-card--teal { border-color: rgba(75,192,175,0.42); }
.tech-card--teal .tech-card__glow { background: radial-gradient(circle, rgba(75,192,175,0.28), transparent 62%); }
.tech-card--teal:hover { border-color: rgba(75,192,175,0.6); }

.tech-card--blue { border-color: rgba(59,130,246,0.42); }
.tech-card--blue .tech-card__glow { background: radial-gradient(circle, rgba(59,130,246,0.3), transparent 62%); }
.tech-card--blue:hover { border-color: rgba(59,130,246,0.62); }

.tech-card--warm { border-color: rgba(240,192,106,0.42); }
.tech-card--warm .tech-card__glow { background: radial-gradient(circle, rgba(240,192,106,0.28), transparent 62%); }
.tech-card--warm:hover { border-color: rgba(240,192,106,0.6); }

.tech-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tech-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.tech-live i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(75,192,175,0.75);
  animation: pulse 2.4s var(--ease) infinite;
}
.tech-live--warm { color: var(--warm); }
.tech-live--warm i { background: var(--warm); box-shadow: 0 0 10px rgba(240,192,106,0.75); }

.tech-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 0;
}
.tech-card--teal .tech-card__title {
  background: linear-gradient(90deg, #5ED5C2 0%, #4BC0AF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tech-card--blue .tech-card__title {
  background: linear-gradient(90deg, #7DA6FF 0%, #3b82f6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tech-card--warm .tech-card__title {
  background: linear-gradient(90deg, #FFD88A 0%, #F0C06A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tech-card__lead {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  max-width: 54ch;
  /* Holds enough vertical space for the longest lead in the row
     (3 lines on desktop) so the mini-app previews below align across
     the Live energy market and Battery lifetime cards. */
  min-height: 4.6em;
}

/* ---------- Mini app mockup (shared) ---------- */
.mini-app {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #0f1216 0%, #0b0d10 100%);
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.mini-app > .mini-app__body { flex: 1 1 auto; }
.mini-app__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.mini-dots { display: inline-flex; gap: 4px; }
.mini-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.mini-crumbs {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
}
.mini-status i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(75,192,175,0.7);
  animation: pulse 2.4s var(--ease) infinite;
}
.mini-status--warm { color: var(--warm); }
.mini-status--warm i { background: var(--warm); box-shadow: 0 0 8px rgba(240,192,106,0.7); }

.mini-app__body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 260px;
}
@media (max-width: 640px) {
  .mini-app__body { grid-template-columns: 1fr; }
}
/* Keep the dashboard mockups inside their card at EVERY width. Without
   min-width:0 the 1fr content track expands to its min-content (driven by
   the trade table), overflowing the card so its overflow:hidden clips the
   chart's right edge, the FORECAST label, the SPREAD KPI and the table's
   right columns. Letting the tracks shrink + scrolling the table fixes it. */
.mini-app__body > *,
.mini-app__body--physics > *,
.mini-main,
.mini-main > * { min-width: 0; }
.mini-trade { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sidebar */
.mini-side {
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
  display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 640px) {
  .mini-side { display: none; }
}
.mini-side__h {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
  padding: 6px 10px 4px;
}
.mini-side__item {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--mute);
  display: flex; align-items: center; gap: 8px;
}
.mini-side__item .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: inline-block;
  flex-shrink: 0;
}
/* Platform palette (from EnWISE dashboard) */
.mini-side__item .dot--emerald { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.65); }
.mini-side__item .dot--rose    { background: #f43f5e; box-shadow: 0 0 8px rgba(244,63,94,0.65); }
.mini-side__item .dot--violet  { background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.65); }
.mini-side__item .dot--amber   { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.65); }
.mini-side__item .dot--blue    { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.65); }
.mini-side__item.is-active {
  background: rgba(16,185,129,0.1);
  color: var(--ink);
  border-left: 2px solid #10b981;
  padding-left: 8px;
}
/* Sidebar spacer — pushes Assets to the bottom of the column */
.mini-side__spacer { flex: 1; min-height: 12px; }

/* Main panel */
.mini-main {
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.mini-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (max-width: 900px) {
  .mini-kpis { grid-template-columns: repeat(2, 1fr); }
}
.mini-kpi {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.018);
  display: flex; flex-direction: column; gap: 2px;
}
.mini-kpi .l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.mini-kpi .v {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mini-kpi .v small {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--mute);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 2px;
}
.mini-kpi .d {
  font-family: var(--font-mono);
  font-size: 9px;
}
.mini-kpi .d.up { color: var(--teal); }
.mini-kpi .d.down { color: var(--danger); }

/* Inline chart */
.mini-chart {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
}
.mini-chart__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.mini-chart__title {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
}
.mini-chart__legend {
  display: inline-flex; gap: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mini-chart__legend i {
  width: 8px; height: 2px; display: inline-block; margin-right: 4px;
  vertical-align: middle;
}
.mini-chart svg {
  width: 100%;
  height: 100%;
  min-height: 120px;
  max-height: 160px;
}
/* Forecast (Energy Market Prices) chart: fill the dedicated space in the card
   like the battery aging chart. The taller 480x400 viewBox + xMidYMid meet
   keeps the curves undistorted while flex:1 lets the SVG take the full height
   left over after the chart title. */
.mini-chart svg.forecast-chart {
  flex: 1 1 auto;
  height: auto;
  min-height: 150px;
  max-height: none;
  aspect-ratio: auto;
}

/* ---------- Physics card specifics ---------- */
.mini-app__body--physics {
  grid-template-columns: 150px 1fr;
}
@media (max-width: 720px) {
  .mini-app__body--physics { grid-template-columns: 1fr; }
}
.mini-physics-left {
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.012);
}
@media (max-width: 720px) {
  .mini-physics-left { border-right: 0; border-bottom: 1px solid var(--line); }
}
.mini-physics-right {
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
/* Battery lifetime card: KPIs sit at the bottom in a 2x2 grid so the
   chart and stress decomposition read first, then the snapshot KPIs.
   Ordering is set explicitly on every direct child so flex order
   resolves predictably across the 4 element types. */
.mini-physics-right > .mini-chart__head { flex-shrink: 0; margin-top: 4px; order: 1; }
.mini-physics-right > svg.soh-chart {
  flex: 1 1 auto;
  height: auto;
  min-height: 300px;
  order: 2;
}
.mini-physics-right > .stress-panel { flex-shrink: 0; order: 3; }
.mini-physics-right > .mini-kpis { flex-shrink: 0; order: 4; }
.mini-app--physics .mini-kpis { grid-template-columns: repeat(2, 1fr); }

/* Push operating window to the bottom of the left sidebar */
.mini-physics-left > .cell-library { flex-shrink: 0; }
.mini-physics-left > .params {
  flex-shrink: 0;
  margin-top: auto;
}

.soh-gauge {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.soh-gauge svg {
  width: 120px; height: 120px;
}
.soh-gauge__sub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.soh-gauge__sub .kv {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 2px;
  gap: 2px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.soh-gauge__sub .kv:last-child { border-right: 0; }
.soh-gauge__sub .kv b {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.soh-gauge__sub .kv b small {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--mute);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 1px;
}
.soh-gauge__sub .kv em {
  font-style: normal;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 8.5px;
  color: var(--mute-2);
}

.params {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 4px;
}
.params__h {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 2px;
  white-space: nowrap;
}
.param-row {
  display: grid;
  grid-template-columns: 60px 1fr 44px;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.param-row .bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.param-row .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--warm), #FFD88A);
  border-radius: 2px;
}
.param-row .val {
  text-align: right;
  color: var(--ink-2);
}

.soh-chart {
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 480;
}

/* Stress decomposition — stacked bar + inline chips */
.stress-panel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.018);
}
.stress-panel__h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.stress-bar-line {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
  background: rgba(0,0,0,0.3);
}
.stress-bar-line .seg {
  display: block;
  height: 100%;
}
.stress-bar-line .sf-1 { background: linear-gradient(90deg, #FFD88A, #F0C06A); }
.stress-bar-line .sf-2 { background: linear-gradient(90deg, #F5B25A, #E09C42); }
.stress-bar-line .sf-3 { background: linear-gradient(90deg, #F28A8A, #E26E6E); }
.stress-bar-line .sf-4 { background: linear-gradient(90deg, #A5B2FF, #6E80FF); }
.stress-bar-line .sf-5 { background: linear-gradient(90deg, #7FD7C8, #4BC0AF); }

.stress-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.stress-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.stress-chip .dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  display: inline-block;
}
.stress-chip .dot.sf-1 { background: #F0C06A; }
.stress-chip .dot.sf-2 { background: #E09C42; }
.stress-chip .dot.sf-3 { background: #E26E6E; }
.stress-chip .dot.sf-4 { background: #6E80FF; }
.stress-chip .dot.sf-5 { background: #4BC0AF; }
.stress-chip b {
  color: var(--ink);
  font-weight: 600;
  font-size: 9.5px;
  margin-left: 1px;
}

/* Legacy stress-row bar (unused now but kept) */
.stress-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
}
.stress-h {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.stress-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
  background: rgba(255,255,255,0.03);
}
.stress-bar .s { display: block; height: 100%; }
.stress-bar .s1 { background: #F0C06A; }
.stress-bar .s2 { background: #E09C42; }
.stress-bar .s3 { background: #E26E6E; }
.stress-bar .s4 { background: #6E80FF; }
.stress-bar .s5 { background: #4BC0AF; }
.stress-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stress-legend span { display: inline-flex; align-items: center; gap: 4px; }
.stress-legend i {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block;
}
.stress-legend i.s1 { background: #F0C06A; }
.stress-legend i.s2 { background: #E09C42; }
.stress-legend i.s3 { background: #E26E6E; }
.stress-legend i.s4 { background: #6E80FF; }
.stress-legend i.s5 { background: #4BC0AF; }

/* Dispatch timeline strip (dashboard signature) — row of colored slots */
.mini-dispatch {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
  display: flex; flex-direction: column; gap: 8px;
}
.mini-dispatch__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.dispatch-strip {
  display: grid;
  grid-template-columns: repeat(48, 1fr);
  gap: 1px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.dispatch-strip i {
  display: block;
  height: 100%;
  background: rgba(255,255,255,0.05);
  position: relative;
}
.dispatch-strip .idle { background: rgba(255,255,255,0.07); }
.dispatch-strip .ch.s1 { background: rgba(16,185,129,0.42); }
.dispatch-strip .ch.s2 { background: rgba(16,185,129,0.68); }
.dispatch-strip .ch.s3 { background: #10b981; }
.dispatch-strip .dis.s1 { background: rgba(245,158,11,0.42); }
.dispatch-strip .dis.s2 { background: rgba(245,158,11,0.68); }
.dispatch-strip .dis.s3 { background: #f59e0b; }
.dispatch-strip .now {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  position: relative;
  z-index: 2;
}

/* Trading blotter — mirrors platform Trading tab table */
.mini-trade {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(244,63,94,0.04), transparent 70%),
    rgba(255,255,255,0.012);
  display: flex; flex-direction: column; gap: 10px;
}
.mini-trade__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.mini-trade__slot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-2);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.3);
  color: #f43f5e;
}
.mini-trade__table {
  display: flex;
  flex-direction: column;
}
.mini-trade__thead {
  display: grid;
  grid-template-columns: 46px minmax(90px,1.1fr) minmax(72px,0.8fr) 44px 56px 72px 48px;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 6px;
  font-family: var(--font-mono);
  color: var(--mute-2);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

/* Slot groups — each timeslot bundles its actions behind a subtle shared tint.
   Time column is a single vertically-centered cell next to a stack of rows. */
.slot-group {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 2px 6px;
  margin-top: 4px;
}
.slot-group:first-of-type { margin-top: 2px; }
.slot-group:nth-of-type(odd)  { background: rgba(255,255,255,0.018); }
.slot-group:nth-of-type(even) { background: rgba(255,255,255,0.038); }
.slot-group.is-now {
  background: rgba(16,185,129,0.06);
  box-shadow: inset 2px 0 0 0 #10b981;
  padding-left: 8px;
}
.slot-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  align-self: center;
}
.slot-rows {
  display: flex;
  flex-direction: column;
}
.slot-row {
  display: grid;
  grid-template-columns: minmax(90px,1.1fr) minmax(72px,0.8fr) 44px 56px 72px 48px;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  transition: background .2s var(--ease);
}
.slot-row.is-proposed {
  color: var(--ink);
}
.slot-row + .slot-row {
  border-top: 1px dashed rgba(255,255,255,0.05);
}
.ta-r { text-align: right; }
.tc-time { color: var(--ink); font-weight: 500; }
.tc-mkt {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt--da   { color: #8b5cf6; background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); }
.mkt--id   { color: #3b82f6; background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); }
.mkt--afrr { color: #f472b6; background: rgba(244,114,182,0.1); border-color: rgba(244,114,182,0.3); }
.mkt--mfrr { color: #fb923c; background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.3); }
.tc-act {
  font-weight: 600;
  letter-spacing: 0.08em;
}
.act--sell { color: #f59e0b; }
.act--buy  { color: #10b981; }
.act--hold { color: var(--mute); }
.tc-mwh { color: var(--ink); font-weight: 500; }
.tc-price { color: var(--ink-2); }
.tc-pl { font-weight: 500; }
.pl--pos { color: #10b981; }
.pl--neg { color: #ef4444; }
.tc-conf { display: flex; justify-content: flex-end; }
.conf-bar {
  width: 34px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  display: inline-block;
}
.conf-bar em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 2px;
}
@media (max-width: 860px) {
  .mini-trade__thead,
  .mini-trade__row {
    grid-template-columns: 42px 1fr 60px 40px 50px 60px;
    font-size: 9px;
  }
  .mini-trade__thead > :nth-child(7),
  .mini-trade__row > :nth-child(7) { display: none; }
}

/* Cell library chips */
.cell-library {
  display: flex; flex-direction: column; gap: 6px;
}
.cell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cell-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--mute);
  white-space: nowrap;
}
.cell-chip.is-active {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.5);
  color: #10b981;
  box-shadow: 0 0 10px rgba(16,185,129,0.22);
}

/* Feature highlights list */
.tech-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tech-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.tech-highlights li i {
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-top: 8px;
}
.tech-card--teal .tech-highlights li i { background: var(--teal); box-shadow: 0 0 6px rgba(75,192,175,0.5); }
.tech-card--warm .tech-highlights li i { background: var(--warm); box-shadow: 0 0 6px rgba(240,192,106,0.5); }

/* ============================================================
   SOLUTIONS — three segments, one intelligence
   ============================================================ */

/* Section head override — leaves room for the italic second line.
   Same sizing also applies to the Technology section (#product) so the
   "End-to-end. / One intelligence." headline matches "Multiple segments.
   / One intelligence." Covers both the source #product on the main view
   and the cloned content inside the Technology tab (which loses its id
   on clone). */
.sol-head .sh-title h2.sol-title,
#product .sh-title h2.display,
.tab-view[data-view="technology"] .sh-title h2.display {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: none;
}
.sol-head .sh-title h2.sol-title .italic-display,
#product .sh-title h2.display .italic-display,
.tab-view[data-view="technology"] .sh-title h2.display .italic-display {
  letter-spacing: -0.045em;
}

/* Shared intelligence band */
.intel-band {
  max-width: var(--container);
  margin: 0 auto 22px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg, rgba(75,192,175,0.04), transparent 30%, rgba(110,128,255,0.035) 70%, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.intel-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-2);
  padding-right: 14px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.intel-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.intel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
}
.intel-pill .ip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(75,192,175,0.6);
}
.intel-pill:nth-child(3) .ip-dot { background: var(--warm); box-shadow: 0 0 8px rgba(240,192,106,0.55); }
.intel-pill:nth-child(5) .ip-dot { background: var(--royal); box-shadow: 0 0 8px rgba(110,128,255,0.55); }
.intel-sep {
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.intel-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Grid: stacked — storage hero on top, producer+consumer half/half below */
.seg-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Card silhouette backgrounds ---------- */
.card-art {
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to top, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 80%, transparent 100%);
  transition: opacity .4s var(--ease);
}
.seg-primary > .card-art,
.seg-card > .card-art {
  position: absolute;
  z-index: 1;
}

.card-art--storage {
  color: #4BC0AF;
  opacity: 0.48;
  width: 100%;
}
.card-art--producer {
  color: #F0C06A;
  opacity: 0.52;
  width: 78%;
  left: auto;
  right: 0;
}
.card-art--consumer {
  color: #8e9bff;
  opacity: 0.5;
  width: 88%;
  left: auto;
  right: 0;
}

.seg-primary:hover .card-art--storage { opacity: 0.6; }
.seg-card--warm:hover .card-art--producer { opacity: 0.62; }
.seg-card--royal:hover .card-art--consumer { opacity: 0.6; }


/* ---------- PRIMARY — Battery storage (full width) ---------- */
.seg-primary {
  position: relative;
  border: 1px solid rgba(75,192,175,0.45);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 2.8vw, 40px) clamp(32px, 3.8vw, 56px) clamp(200px, 17vw, 290px);
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(75,192,175,0.14), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(110,128,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 34px 70px -30px rgba(0,0,0,0.65);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .3s var(--ease);
}
.seg-primary:hover { border-color: rgba(75,192,175,0.6); }
.seg-primary::before {
  content: "";
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(75,192,175,0.55), transparent);
  z-index: 1;
}
.seg-primary .seg-glow {
  position: absolute;
  top: -220px; right: -220px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(75,192,175,0.24), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.seg-primary .seg-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 85%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 85%);
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}
.seg-primary > * { position: relative; z-index: 2; }

.seg-primary > .seg-primary__glyph {
  position: absolute;
  top: clamp(20px, 2.2vw, 32px);
  right: clamp(26px, 3vw, 44px);
  z-index: 3;
  opacity: 0.9;
}
.seg-primary__chips {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seg-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  color: var(--mute);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
}
/* Beat cards use long descriptive chips; keep them on a single line
   and shrink to fit so all three read uniformly across the row.
   Bumped one step bigger - was clamp(7.5px, 0.58vw, 9px) - so the
   numbered labels (01 / 02 / 03) read more clearly. */
.beat__top { flex-wrap: nowrap; }
.beat__top .seg-chip {
  white-space: nowrap;
  /* 3-column layout (>=960px) is the tightest case. Floor at 8px so
     chip 03 (the longest) still fits inside the narrowest 3-column
     card (~244px content). Ceiling at 11px gives a clear bump over
     the previous 9px max on wide viewports. The single-column
     override below restores 11px on phones / tablets where the card
     spans the full width. */
  font-size: clamp(8px, 0.74vw, 11px);
  letter-spacing: 0.04em;
  padding: 6px 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 959px) {
  .beat__top .seg-chip { font-size: 11px; padding: 6px 12px; }
}
.seg-chip--teal {
  color: #5ED5C2;
  border-color: rgba(75,192,175,0.55);
  background: rgba(75,192,175,0.16);
}
.seg-chip--royal {
  color: #A5B2FF;
  border-color: rgba(110,128,255,0.55);
  background: rgba(110,128,255,0.16);
}
.seg-chip--warm {
  color: #FFD88A;
  border-color: rgba(240,192,106,0.55);
  background: rgba(240,192,106,0.16);
}
.seg-chip--blue {
  color: #7DA6FF;
  border-color: rgba(59,130,246,0.4);
  background: rgba(59,130,246,0.1);
}
.seg-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.seg-live i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(75,192,175,0.75);
  animation: pulse 2.4s var(--ease) infinite;
}
.seg-primary__glyph { opacity: 0.9; }

.seg-primary__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.12;
  max-width: none;
  margin: 0 0 6px;
  white-space: nowrap;
  background: linear-gradient(135deg, #4BC0AF 0%, #7B9CFF 55%, #6E80FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (max-width: 520px) {
  .seg-primary__title { white-space: normal; }
}
.seg-primary__lead {
  margin-top: 22px;
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--ink-2);
  max-width: 58ch;
  line-height: 1.55;
}
.seg-primary__ctas {
  margin-top: 32px;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Bottom stripe — trust anchors (markets + onboarding floor) */
.seg-primary__stripe {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: clamp(22px, 2.2vw, 30px);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stripe-label {
  color: var(--mute);
  padding-right: 8px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.stripe-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.stripe-pills span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ink-2);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.stripe-pills span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(75,192,175,0.5);
}
.stripe-pills span[data-cat="balancing"]::before { background: var(--royal); box-shadow: 0 0 6px rgba(110,128,255,0.5); }
.stripe-pills span[data-cat="capacity"]::before  { background: var(--warm);  box-shadow: 0 0 6px rgba(240,192,106,0.5); }
.stripe-pills span[data-cat="ancillary"]::before { background: var(--warm);  box-shadow: 0 0 6px rgba(240,192,106,0.5); }
.stripe-pills span:hover {
  border-color: rgba(255,255,255,0.22);
  color: var(--ink);
}
.stripe-meta {
  margin-left: auto;
  color: var(--mute-2);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

/* Segment-card stripe — mirrors the seg-primary "Trading across" pill row,
   tinted to each card's accent (warm = producers, royal = consumers). */
.seg-card__stripe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.seg-card--warm .stripe-pills span::before {
  background: var(--warm);
  box-shadow: 0 0 6px rgba(240,192,106,0.5);
}
.seg-card--royal .stripe-pills span::before {
  background: var(--royal);
  box-shadow: 0 0 6px rgba(110,128,255,0.5);
}
.seg-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.seg-cta--light {
  background: var(--ink);
  color: var(--bg);
}
.seg-cta--light:hover { background: #fff; transform: translateY(-1px); }
.seg-cta--ghost {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border-color: var(--line);
}
.seg-cta--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.seg-cta .arrow { font-family: var(--font-mono); font-size: 13px; transition: transform .3s var(--ease); }
.seg-cta:hover .arrow { transform: translate(3px, -3px); }

/* ---------- SECONDARY — Producers & Consumers (half / half) ---------- */
.seg-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 800px) {
  .seg-secondary { grid-template-columns: 1fr 1fr; }
}
.seg-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2vw, 28px) clamp(24px, 2.4vw, 32px) clamp(140px, 14vw, 190px);
  background: linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.004));
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.seg-card > * { position: relative; z-index: 2; }
.seg-card__glow {
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  transition: opacity .35s var(--ease), transform .6s var(--ease);
}
.seg-card--warm { border-color: rgba(240,192,106,0.45); }
.seg-card--warm .seg-card__glow { background: radial-gradient(circle, rgba(240,192,106,0.3), transparent 60%); }
.seg-card--royal { border-color: rgba(110,128,255,0.45); }
.seg-card--royal .seg-card__glow { background: radial-gradient(circle, rgba(110,128,255,0.3), transparent 60%); }
.seg-card:hover { transform: translateY(-3px); }
.seg-card--warm:hover { border-color: rgba(240,192,106,0.6); }
.seg-card--royal:hover { border-color: rgba(110,128,255,0.6); }
.seg-card:hover .seg-card__glow { opacity: 1; transform: scale(1.08); }

.seg-card > .seg-card__glyph {
  position: absolute;
  top: clamp(16px, 1.6vw, 24px);
  right: clamp(18px, 1.8vw, 26px);
  z-index: 3;
  opacity: 0.9;
}
.seg-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.seg-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.seg-card__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin: 2px 0 6px;
  max-width: 14ch;
}
.seg-card--warm .seg-card__title {
  background: linear-gradient(90deg, #F0C06A 0%, #e2a84c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.seg-card--royal .seg-card__title {
  background: linear-gradient(90deg, #8e9bff 0%, #6E80FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.seg-card__lead {
  font-size: clamp(14.5px, 1.05vw, 16px);
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 38ch;
  margin-top: 4px;
}

.seg-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.seg-card__foot > span { display: inline-flex; align-items: center; gap: 8px; }
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot--warm { background: var(--warm); box-shadow: 0 0 8px rgba(240,192,106,0.5); animation: pulse 2.4s var(--ease) infinite; }
.status-dot--royal { background: var(--royal); box-shadow: 0 0 8px rgba(110,128,255,0.5); animation: pulse 2.4s var(--ease) infinite; }
.seg-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}
.seg-card__link:hover { color: var(--ink); }
.seg-card__link .arrow { font-family: var(--font-mono); font-size: 12px; transition: transform .3s var(--ease); }
.seg-card__link:hover .arrow { transform: translate(3px, -3px); }

/* Soon pill inside a seg-card footer, colored per card */
.seg-soon {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-block;
  line-height: 1.4;
}
.seg-soon--warm {
  background: rgba(240,192,106,0.14);
  color: var(--warm);
  border: 1px solid rgba(240,192,106,0.38);
}
.seg-soon--royal {
  background: rgba(110,128,255,0.14);
  color: var(--royal);
  border: 1px solid rgba(110,128,255,0.38);
}
.seg-soon--teal {
  background: rgba(75,192,175,0.14);
  color: var(--teal);
  border: 1px solid rgba(75,192,175,0.38);
}

/* Mobile stacking */
@media (max-width: 640px) {
  .seg-primary__stripe { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stripe-label { border-right: 0; padding-right: 0; }
  .stripe-meta { margin-left: 0; }
  .intel-band { padding: 12px 14px; }
  .intel-label { padding-right: 10px; }
  .intel-meta { display: none; }
}

/* ============================================================
   METRICS STRIP
   ============================================================ */
.metrics {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 60px var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric .value {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, var(--ink) 40%, rgba(244,245,247,0.4));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.metric .value .unit { font-size: 0.45em; color: var(--mute); font-family: var(--font-mono); letter-spacing: 0; margin-left: 4px; }
.metric .label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 900px) {
  .principles { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.principle {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.principle:hover { border-color: rgba(255,255,255,0.14); }
.principle .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-bottom: 20px;
}
.principle h3 {
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.principle p { color: var(--mute); }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .founder { grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
}
.founder-portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(240,192,106,0.08), rgba(110,128,255,0.06));
  border: 1px solid var(--line);
}
.founder-portrait::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(240,192,106,0.3), transparent 65%),
    radial-gradient(60% 60% at 70% 70%, rgba(75,192,175,0.12), transparent 65%);
  filter: blur(10px);
  z-index: 0;
}
.founder-portrait .placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 140px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.06);
  z-index: 1;
}
.founder-body .eyebrow { margin-bottom: 20px; display: block; }
.founder-body blockquote {
  margin: 0;
  padding: 0;
  font-family: "Inter Tight", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
}
.founder-body blockquote::before { content: "“"; color: var(--warm); margin-right: 4px; font-style: normal; }
.founder-body blockquote::after  { content: "”"; color: var(--warm); margin-left: 4px; font-style: normal; }
.founder-meta {
  margin-top: 28px;
  display: flex; align-items: center; gap: 14px;
  color: var(--mute);
  font-size: 13.5px;
}
.founder-meta .line {
  flex: 1; height: 1px; background: var(--line);
}
.founder-meta strong { color: var(--ink-2); font-weight: 500; }

/* ============================================================
   CONTACT — two-track layout (Partners / Capital), each with its own
   compact form posting to a distinct Netlify form bucket.
   ============================================================ */
.contact-v2 {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(255,255,255,0.03), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.008));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 34px 70px -30px rgba(0,0,0,0.6);
  overflow: hidden;
  isolation: isolate;
}
.contact-v2::before {
  content: "";
  position: absolute;
  top: -220px; right: -220px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.contact-v2 > * { position: relative; z-index: 1; }
.contact-social {
  position: absolute;
  top: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 2.4vw, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--ink-2);
  z-index: 2;
}
.contact-social svg { display: block; width: 18px; height: 18px; }
/* LinkedIn badge links (contact + footer): interactive hover. */
.contact-social, .footer-social {
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.contact-social:hover, .footer-social:hover {
  color: var(--ink);
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
}
.contact-v2 .section-head { margin: 0; }
.contact-v2 .sh-title h2.display {
  font-size: clamp(44px, 6vw, 82px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
}
.contact-v2 .sh-aside .three-lines p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.5;
}
.contact-form {
  margin-top: clamp(32px, 4vw, 56px);
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 680px) {
  .cf-row-2 { grid-template-columns: 1fr 1fr; }
}
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.cf-field input,
.cf-field textarea,
.cf-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  padding: 10px 0 12px;
  outline: none;
  transition: border-color .25s var(--ease);
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--mute-2); }
.cf-field input:focus,
.cf-field textarea:focus,
.cf-field select:focus { border-bottom-color: rgba(255,255,255,0.55); }
.cf-field textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); line-height: 1.55; }

/* Select wrapper — custom down-arrow, keeps the shared underline style */
.cf-select { position: relative; }
.cf-select select {
  cursor: pointer;
  padding-right: 28px;
}
.cf-select select option { background: var(--surface); color: var(--ink); }
.cf-select-arrow {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-55%);
  color: var(--mute);
  pointer-events: none;
  font-size: 12px;
}

.cf-submit-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
/* Netlify honeypot - visually hidden but still picked up by bots and
   by Netlify's build-time form parser. */
.cf-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-captcha {
  margin: 6px 0 4px;
  min-height: 78px;
  /* The g-recaptcha iframe is 304x78 by default - reserve the space so
     the layout does not jump when the widget loads. */
}
.cf-submit {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cf-submit:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
}
.cf-submit .arrow { transition: transform .2s var(--ease); }
.cf-submit:hover .arrow { transform: translate(3px, -3px); }

.cf-status {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
.cf-status[data-state="ok"] {
  color: #C7F2E8;
  border-color: rgba(94,213,194,0.32);
  background: rgba(94,213,194,0.08);
}
.cf-status[data-state="err"] {
  color: #F4C0C0;
  border-color: rgba(255,130,130,0.32);
  background: rgba(255,130,130,0.08);
}

/* Two-card contact layout — left = BESS owners / energy generators /
   energy customers (routes to info@), right = capital / strategic
   partners (routes to investor@). Both share the same compact form
   and shared submit handler keyed on the form's `name` attribute.

   Alignment strategy: at desktop width the parent .contact-tracks
   defines three explicit row tracks (title, lede, form). Each card
   subgrids those rows so titles align with titles, ledes with
   ledes, and forms start at the same y-coordinate across the two
   cards regardless of how many lines each title or lede wraps to. */
.contact-tracks {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 32px);
}
@media (min-width: 920px) {
  .contact-tracks {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
  }
}
.contact-track {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 920px) {
  .contact-track {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 18px;
  }
}
.contact-track__num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.contact-track__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
  align-self: start;
}
.contact-track__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 44ch;
  align-self: start;
}
.contact-track .contact-form {
  margin-top: 0;
  gap: 14px;
  align-self: stretch;
}
.contact-track .cf-row { gap: 14px; }
@media (min-width: 1280px) {
  .contact-track .cf-row-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1279px) and (min-width: 920px) {
  /* Two cards side-by-side at this width — keep the form fields stacked
     so each label has a comfortable line. */
  .contact-track .cf-row-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   WHY STORPEAK — 4 value pillars (added value, not capabilities).
   Sits between the Forecast/Operate/Protect beats and Solutions.
   Vertical-line dividers between columns; mono number on top of
   each column, headline below, supporting copy at the bottom.
   ============================================================ */
/* About us — "Who we are" intro. Two-column editorial layout: eyebrow +
   heading on the left, introduction prose on the right. */
.about-who {
  /* Content width matches the other tab sections (container, gutter-padded).
     max-width includes the gutter so the inner content equals --container. */
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.about-who__media { margin: 16px 0 0; }
.about-who__media picture { display: block; }
.about-who__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(12px, 1.4vw, 18px);
  border: 1px solid var(--line);
}
/* Sit the intro prose slightly lower than the eyebrow/image top. */
.about-who__prose { padding-top: clamp(14px, 2.4vw, 38px); }
@media (max-width: 860px) {
  .about-who__prose { padding-top: 0; }
}
@media (max-width: 860px) {
  .about-who { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
}
.about-who__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 58px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
  margin: 14px 0 0;
  max-width: 16ch;
}
.about-who__lede {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1.1em;
}
.about-who__prose p {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 1.05em;
}
.about-who__prose p:last-child { margin-bottom: 0; }

/* About us — "The team" section wrapping the value pillars. */
.about-team {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.about-team > .eyebrow { margin-bottom: clamp(28px, 3.4vw, 48px); }
.about-team .value-pillars { max-width: none; margin: 0; }

/* Founder profile: photo on the left, name + role + bio on the right. */
.team-lead {
  display: grid;
  grid-template-columns: clamp(220px, 26vw, 320px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 84px);
}
@media (max-width: 700px) {
  .team-lead { grid-template-columns: 1fr; gap: 24px; }
  .team-lead__photo { max-width: 320px; }
}
.team-lead__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
}
.team-lead__photo picture { display: block; width: 100%; height: 100%; }
.team-lead__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.team-lead__photo-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.team-lead__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 2px 0 6px;
}
.team-lead__role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 clamp(28px, 3.2vw, 40px);
}
.team-lead__bio {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}

/* About us (main page): founder photo on the left, name + title + a short
   message (title + subtitle) on the right. */
.about-main {
  max-width: var(--container);
  margin: clamp(8px, 2vw, 20px) auto 0;
  display: grid;
  grid-template-columns: clamp(240px, 30vw, 380px) 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 820px) {
  .about-main { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 32px); }
  .about-main__photo { max-width: 340px; }
}
.about-main__photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}
.about-main__photo picture { display: block; width: 100%; height: 100%; }
.about-main__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-main__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 4px;
}
.about-main__role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 clamp(22px, 2.8vw, 34px);
}
.about-main__msg-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 32ch;
}
.about-main__msg-sub {
  font-size: clamp(16px, 1.2vw, 19px);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}

.value-pillars {
  max-width: var(--container);
  margin: 0 auto;
}
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px 0;
}
@media (min-width: 720px) {
  .value-grid { grid-template-columns: 1fr 1fr; gap: 40px 0; }
}
@media (min-width: 1080px) {
  .value-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
}
.value-pillar {
  position: relative;
  padding: 6px clamp(18px, 2vw, 28px) 6px clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
}
.value-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255,255,255,0.16);
}
@media (min-width: 720px) and (max-width: 1079px) {
  /* Two-up — only the second column gets a left divider, since the
     first column is at the page edge. */
  .value-pillar:nth-child(2n+1)::before { display: none; }
}
@media (max-width: 719px) {
  .value-pillar::before { display: none; }
  .value-pillar {
    padding: 0 0 24px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .value-pillar:last-child { border-bottom: none; padding-bottom: 0; }
}
.value-pillar__num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 16px;
}
/* Title and desc are stacked with a fixed gap between them (no
   `margin-bottom: auto` on the title). With every title forced to two
   lines via <br/>, the desc top sits at the same y across all pillars
   so the first lines of all sublines read on a single horizontal line.
   The descs extend downward by varying amounts; grid stretch keeps the
   cards themselves equal in height. */
.value-pillar__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
}
.value-pillar__desc {
  margin: clamp(56px, 6.5vw, 88px) 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 32ch;
}
@media (max-width: 719px) {
  .value-pillar__desc { margin-top: 18px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: 40px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  color: var(--mute);
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 14px; color: var(--ink-2); }
.footer-col a:hover { color: var(--ink); }
.footer-brand { display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.footer-brand .wordmark {
  font-family: "Inter Tight", var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  line-height: 1;
}
.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  transition: filter .2s var(--ease);
}
.footer-lockup:hover { filter: brightness(1.1); }
.footer-lockup__mark {
  width: auto;
  height: 38px;
  flex-shrink: 0;
  display: block;
}
/* Single-image horizontal lock-up for the footer brand row. */
.footer-lockup__lockup {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--ink-2);
}
.footer-social svg { display: block; width: 13px; height: 13px; }

/* ============================================================
   MOBILE POLISH - targeted tweaks for <= 640px phones so the
   site stays comfortable to read and tap on small screens.
   ============================================================ */
@media (max-width: 640px) {
  /* Tight gutters on phones - keep copy off the edges but don't
     eat the whole viewport with padding. */
  :root { --gutter: 18px; }
  /* Belt-and-braces: nothing should force the document wider than
     the viewport. Individual offenders below fix themselves; this
     stops anything we missed from producing a horizontal scrollbar. */
  html, body { overflow-x: hidden; }
  /* Contact form controls get larger touch targets. */
  .cf-field input,
  .cf-field textarea,
  .cf-field select { font-size: 16px; padding: 12px 0 12px; }
  .cf-submit { width: 100%; justify-content: center; padding: 14px 20px; }
  .cf-submit-row { justify-content: stretch; align-items: stretch; }
  /* Contact card shrinks its big outer padding so the form fills the
     phone more usefully. Keep room for the LinkedIn badge top-right. */
  .contact-v2 { padding: 28px 20px; }
  .contact-v2 .sh-title h2.display { font-size: clamp(40px, 12vw, 56px); }
  .contact-v2 .sh-title .eyebrow { padding-right: 42px; }
  /* Hero CTA is comfortably tappable. */
  .hero-ctas .pill-btn { padding: 14px 22px; font-size: 15px; }
  /* Footer stack reads better with a touch more breathing room. */
  footer { padding: 32px var(--gutter) 24px; }
  .footer-grid { gap: 22px; }
  .footer-bottom { margin-top: 28px; }

  /* --- Mini app dashboard (Technology section) ---
     Grid children need `min-width: 0` so 1fr tracks shrink to the
     parent instead of expanding to min-content (which was pushing
     the dashboard wider than the viewport). */
  .mini-app__body,
  .mini-app__body > *,
  .mini-main,
  .mini-chart,
  .mini-chart__head { min-width: 0; }
  .mini-main { padding: 10px; gap: 10px; width: auto; }
  .mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mini-kpi { padding: 6px 8px; gap: 1px; }
  .mini-kpi .v { font-size: 13px; }
  .mini-kpi .l { font-size: 8.5px; }
  .mini-kpi .d { font-size: 8.5px; }
  .mini-chart__head { flex-wrap: wrap; gap: 6px; }
  .mini-chart svg { width: 100%; height: auto; }

  /* Dispatch card (Live energy market operations): KPIs land at the
     bottom on mobile so the chart, trading table and dispatch strip
     read first. The wrapper is already display:flex column, so an
     `order` value pushes the KPIs past every sibling without affecting
     the desktop layout (which still keeps them on top). */
  .mini-app--dispatch .mini-main > .mini-kpis { order: 5; }
  .mini-app--dispatch .mini-main > .mini-chart    { order: 1; }
  .mini-app--dispatch .mini-main > .mini-trade    { order: 2; }
  .mini-app--dispatch .mini-main > .mini-dispatch { order: 3; }

  /* Trading Actions table on mobile: compact columns and let the
     whole table scroll horizontally inside its own container instead
     of bleeding past the card edge. */
  .mini-trade { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mini-trade__table { min-width: 520px; }

  /* Cell library chips (Battery technology 1-6) on mobile: switch to
     a 2-column grid with text wrap so longer labels never overflow
     the card. nowrap (default desktop) was clipping chips 4 and 6. */
  .cell-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .cell-chip {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
    padding: 5px 6px;
    font-size: 8.5px;
  }

  /* Trading actions table: let it scroll inside its own container
     instead of bleeding past the card edge. */
  .mini-app,
  .mini-app__bar,
  .mini-app__body,
  .tech-card,
  .seg-primary,
  .sol-card { min-width: 0; }
  .mini-app { max-width: 100%; }

  /* Any wide table or grid that can't reasonably stack gets an
     internal scroll instead of pushing the page wider. */
  table { display: block; max-width: 100%; overflow-x: auto; }

  /* Insights article bodies: long tables and inline grids were written
     with desktop widths, so collapse them gracefully on phones. */
  .insights-article__body table {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 12.5px;
  }
  .insights-article__body table th,
  .insights-article__body table td { padding: 8px 6px !important; }
  /* Tables wrapped in a .table-scroll on mobile get a swipeable strip
     so columns can keep readable widths instead of being squeezed
     past the last visible cell. The wrapper inherits the table's
     visible card framing. */
  .insights-article__body .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 18px 0;
    /* Faded right edge hints at scrollable content beyond the viewport. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
  }
  .insights-article__body .table-scroll > table {
    /* Override the global mobile `table { display: block; max-width: 100% }`
       fallback so the table can expand beyond the viewport inside its
       scroll container. */
    display: table !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow-x: visible !important;
  }
  /* Give each cell a minimum width so dense text wraps within the cell
     instead of being clipped on the far-right edge. */
  .insights-article__body .table-scroll > table th,
  .insights-article__body .table-scroll > table td { min-width: 96px; }
  /* Any hard-coded inline grid in the article body (repeat 3/4/5/6,
     or mixed fixed-plus-fraction tracks like "110px repeat(4,1fr)")
     collapses to 1 column on narrow phones so child cards never
     overflow. Auto-fit grids with a minmax floor already collapse. */
  .insights-article__body div[style*="grid-template-columns:repeat(3"],
  .insights-article__body div[style*="grid-template-columns: repeat(3"],
  .insights-article__body div[style*="grid-template-columns:repeat(4"],
  .insights-article__body div[style*="grid-template-columns: repeat(4"],
  .insights-article__body div[style*="grid-template-columns:repeat(5"],
  .insights-article__body div[style*="grid-template-columns: repeat(5"],
  .insights-article__body div[style*="grid-template-columns:repeat(6"],
  .insights-article__body div[style*="grid-template-columns: repeat(6"],
  .insights-article__body div[style*="grid-template-columns:110px"],
  .insights-article__body div[style*="grid-template-columns: 110px"],
  .insights-article__body div[style*="grid-template-columns:180px"],
  .insights-article__body div[style*="grid-template-columns: 180px"] {
    grid-template-columns: 1fr !important;
  }
  /* Side-panel callouts with deep paddings feel cramped on phones. */
  .insights-article__body div[style*="padding: 16px 18px"],
  .insights-article__body div[style*="padding: 18px 20px"],
  .insights-article__body div[style*="padding:16px 18px"],
  .insights-article__body div[style*="padding:18px 20px"] {
    padding: 14px 14px !important;
  }
  .insights-article__body .revenue-stack { min-width: 0; }
  /* Revenue-stack cells use white-space:nowrap on desktop; the labels
     "Wholesale 40-60%" etc. don't fit in their flex share at 375px so
     allow wrapping and shrink the font on phones. */
  .insights-article__body .revenue-stack > div {
    white-space: normal;
    font-size: 9.5px;
    text-align: center;
    line-height: 1.15;
    padding: 0 3px;
    min-width: 0;
  }
  .insights-article__body .revenue-stack { height: auto; min-height: 38px; }
  /* Any SVG or large illustration inside an article body stays
     within the column, never bleeds past the card edge. */
  .insights-article__body svg,
  .insights-article__body img {
    max-width: 100%;
    height: auto;
  }
  /* Outer scroll wrappers already set overflow-x: auto on the table,
     but a few wrapping DIVs add their own scrollbar. Make sure the
     wrapper itself never exceeds the article width. */
  .insights-article__body div[style*="overflow-x: auto"],
  .insights-article__body div[style*="overflow-x:auto"] {
    max-width: 100%;
  }

  /* Battery lifetime panel (Technology tab) - on mobile flatten the
     two-column grid into one column and reorder so the Operating Window
     lands AFTER the Stress decomposition panel. Uses display: contents
     so the left/right wrapper divs dissolve and order applies directly
     to their children. */
  .mini-app__body--physics {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Match the 10px inset that .mini-main gives to the Energy market
       card body — without it, .mini-physics-right's children render at
       display:contents (so the wrapper's own padding is ignored) and
       the chart, chips, and stress panel push to the mini-app edge. */
    padding: 10px;
  }
  .mini-physics-left,
  .mini-physics-right { display: contents; }
  .cell-library      { order: 1; }
  .mini-physics-right > .mini-chart__head { order: 2; }
  .mini-physics-right > svg             { order: 3; }
  .mini-physics-right > .stress-panel   { order: 4; }
  .params            { order: 5; }
  .mini-physics-right > .mini-kpis      { order: 6; }

  /* Primary solutions card ("For battery energy storage.") title used
     to collide with the absolute-positioned glyph top-right. Leave
     room for the 48px glyph + its offset.
     The mobile padding-bottom reserves a tall band where the BESS
     silhouette reaches up to just under the "Trading across" chips. */
  .seg-primary { padding-top: clamp(74px, 18vw, 90px); padding-bottom: clamp(240px, 62vw, 320px); }
  .seg-primary__title { padding-right: 0; font-size: clamp(24px, 8.5vw, 40px); }
  .seg-primary > .seg-primary__glyph { top: 22px; right: 22px; }
  /* BESS silhouette on mobile:
     Native SVG aspect (3.85:1) means at 100% card width it only
     draws ~88px tall - much shorter than the peer silhouettes.
     Visually scale it up with CSS transform anchored to bottom-
     center so the containers grow in both height and width (sides
     clipped by the parent's overflow:hidden). The existing top-
     fade mask softens the upper edge into the card body. */
  .seg-primary > .card-art--storage {
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    opacity: 0.62;
    transform: scale(4.2);
    transform-origin: 50% 100%;
  }

  /* Hero title: the forced `<br/>` + large font split the phrase
     awkwardly across four lines. Slightly tighter fluid size reads
     cleaner on narrow screens. */
  h1.hero-title { font-size: clamp(42px, 11vw, 64px); letter-spacing: -0.04em; }
  .hero-sub { font-size: 15px; }

  /* Section padding: large horizontal padding on mobile was eating
     into already-narrow content columns. */
  .section-pad { padding-left: var(--gutter); padding-right: var(--gutter); }

  /* Any stray inline-style width="..." on embedded SVGs should not
     exceed the card width. */
  .tech-card svg,
  .seg-primary svg,
  .beat svg,
  .sol-card svg { max-width: 100%; }
}

/* Narrow phones - additional protection against the longest chip
   labels and KPI rows squeezing content. The longest chip (03 · Protect
   Battery Energy Storage Lifetime) overflows even at 375px on iOS, so
   we widen the breakpoint to 480px and allow the chip to wrap to two
   lines with centred text. The pill keeps its rounded shape because
   border-radius is a percentage of height; the wrap just stacks the
   words rather than clipping them. */
@media (max-width: 480px) {
  /* Physics card (Battery lifetime) keeps its 2x2 KPI grid on phones —
     SoH, Cycles, Projected, Optimised stack as 2 rows of 2 instead of
     a tall 4-row column that pushed everything else out of view. */
  .mini-app--physics .mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beat__top { flex-wrap: wrap; }
  .beat__top .seg-chip {
    font-size: 10px;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    border-radius: 14px;
    max-width: 100%;
  }
}

/* Tiny phones (<= 480px): collapse the designed <br/> breaks in hero
   copy so text flows naturally instead of splitting into ragged
   two-word lines. .hero-break is a marker class the HTML uses only
   for this purpose. */
@media (max-width: 480px) {
  .hero-break { display: none; }
}
.footer-bottom {
  max-width: var(--container);
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-2);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-disclaimer {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.65;
  max-width: 48ch;
}

/* ------- reveal on scroll -------
   Short transition (0.45s) and a small translateY so content feels
   responsive while scrolling. Previously 0.9s + 14px created a
   visible "still animating" lag behind the scroll position. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ------- reduced motion ------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .badge .dot, .eyebrow .dot, .dashboard-bar .status i, body::before { animation: none !important; }
}

/* ------- focus visible ------- */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   TABS — main view + dedicated tab views
   Main view = the full scrolling page (default / home).
   Tab views = independent duplicated content, one per tab.
   ============================================================ */
.main-view { display: block; }
.tab-views { display: none; }

/* When a tab is active: hide main, show tab-views, show matching tab-view */
body.in-tab-view .main-view { display: none; }
body.in-tab-view .tab-views { display: block; }

.tab-view {
  display: none;
  opacity: 0;
  /* Top padding clears the fixed nav and lands tab content at the SAME
     y-position as the hero "Get started" CTA (which scrolls its target
     to 20px below the nav). --tab-pad-top is set in JS to navBottom + 20
     so every tab click matches that landing across viewports; the clamp
     is a pre-JS fallback (desktop ~133px, mobile two-row nav ~158px). */
  padding-top: var(--tab-pad-top, clamp(133px, 16vh, 158px));
  padding-bottom: clamp(64px, 6vw, 100px);
  min-height: 100vh;
}
.tab-view.is-active {
  display: block;
  animation: tabFadeIn .48s var(--ease) both;
}

/* When a section-pad block is cloned into a tab-view__body, the
   tab-view itself already supplies the top/bottom breathing room.
   Zero the cloned section's vertical padding so the gap doesn't
   double up (which previously stacked the section's 64px pB on top
   of the next tab-divider's margin-top, producing 150px+ of dead
   space inside the tab). Horizontal gutter padding is preserved.
   !important is needed to defeat inline styles on source sections
   (e.g. #product carries padding-top: 40px for the main view). */
.tab-view .tab-view__body > section.section-pad {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* While transitioning, prevent scroll flash */
html.is-tab-switching { scroll-behavior: auto; }

/* ============================================================
   INSIGHTS HUB — content hub (replaces the coming-soon panel)
   ============================================================ */
/* Outer wrapper mirrors .section-pad: full-width with gutter padding only.
   Inner groups carry the max-width + auto-centering so the visible left
   edge matches other tabs (32px from viewport at 1280px, not 52px). */
.insights-hub {
  padding: 0 var(--gutter);
}

.insights-hub__group:first-of-type { margin-top: 0; }

.insights-hub__group {
  max-width: var(--container);
  margin: clamp(48px, 6vw, 80px) auto 0;
}
.insights-hub__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 2.6vw, 32px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.insights-hub__group-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.insights-hub__group-head .group-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.insights-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1040px) { .insights-hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .insights-hub__grid { grid-template-columns: 1fr; } }

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.2vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
  min-height: 220px;
}
.hub-card:hover {
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.042), rgba(255,255,255,0.012));
}
.hub-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.hub-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  align-self: flex-start;
}
.hub-card[data-group="market"]   .hub-card__tag { color: #A5B2FF; border-color: rgba(110,128,255,0.35); background: rgba(110,128,255,0.08); }
.hub-card[data-group="battery"]  .hub-card__tag { color: #5ED5C2; border-color: rgba(75,192,175,0.35);  background: rgba(75,192,175,0.08); }

.hub-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.018em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.hub-card:hover .hub-card__title { color: #ffffff; }
.hub-card__teaser {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}

/* ============================================================
   INSIGHTS ARTICLE — full article detail view
   ============================================================ */
.insights-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.insights-article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  margin-bottom: clamp(28px, 4vw, 48px);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.insights-article__back:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--ink);
  background: rgba(255,255,255,0.05);
}
.insights-article__back svg { width: 10px; height: 10px; }

.insights-article__header { margin-bottom: clamp(28px, 3.4vw, 44px); }
.insights-article__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.insights-article[data-group="market"]  .insights-article__tag { color: #A5B2FF; border-color: rgba(110,128,255,0.35); background: rgba(110,128,255,0.08); }
.insights-article[data-group="battery"] .insights-article__tag { color: #5ED5C2; border-color: rgba(75,192,175,0.35);  background: rgba(75,192,175,0.08); }

.insights-article__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 52px);
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 18px;
}
.insights-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  flex-wrap: wrap;
}
.insights-article__meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.insights-article__body {
  font-family: var(--font-body);
  font-size: var(--tab-body-size);
  line-height: 1.72;
  color: var(--ink-2);
}
.insights-article__body > * { max-width: 72ch; }
.insights-article__body p { margin: 0 0 1.15em; }
.insights-article__body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--ink);
  margin: 2em 0 0.6em;
}
.insights-article__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
}
.insights-article__body strong { color: var(--ink); font-weight: 600; }
.insights-article__body a { color: #A5B2FF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.insights-article__body a:hover { color: #C8D1FF; }
.insights-article__body ul {
  margin: 0 0 1.15em;
  padding-left: 1.2em;
}
.insights-article__body li { margin: 0 0 0.45em; }
.insights-article__body blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 2px solid rgba(75,192,175,0.5);
  background: rgba(75,192,175,0.04);
  color: var(--ink);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.insights-article__sources {
  margin-top: clamp(40px, 4.5vw, 60px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.insights-article__sources h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 14px;
}
.insights-article__sources ol {
  list-style: decimal;
  padding-left: 1.4em;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.insights-article__sources li { margin: 0 0 8px; }
.insights-article__sources a {
  color: #A5B2FF;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-word;
}
.insights-article__sources a:hover { color: #C8D1FF; }

.insights-article__footer {
  margin-top: clamp(44px, 4.8vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.insights-article__footer span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

@media (max-width: 640px) {
  .insights-article__body { font-size: 15.5px; line-height: 1.68; }
  .insights-article__footer { flex-direction: column; align-items: flex-start; }
  .prim-scale-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Revenue stack row: keep the last (smallest) slice wide enough to hold its label. */
.revenue-stack { display: flex; width: 100%; height: 30px; border-radius: 6px; overflow: hidden; font-size: 11.5px; color: var(--bg); font-weight: 600; }
.revenue-stack > div { display: flex; align-items: center; justify-content: center; padding: 0 4px; white-space: nowrap; }