*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:hidden on body alone doesn't catch overflow from position:fixed
   descendants (like nav) on some mobile browsers, since fixed elements anchor
   to html's containing block, not body's - hence the same rule on html too */
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text-primary);overflow-x:hidden;width:100%;}
:root{

  --bg:#F0F0ED;
  --bg2:#E8E8E4;
  --bg3:#DEDED9;
  --bg-inv:#1a1f2e;
  --white:#ffffff;

  --dark:#1a1f2e;
  --ink:rgba(26,31,46,0.65);
  --ink-soft:rgba(26,31,46,0.45);
  --ink-faint:rgba(26,31,46,0.30);
  --ink-ghost:rgba(26,31,46,0.18);
  --ink-rule:rgba(26,31,46,0.08);

  --border:rgba(26,31,46,0.10);
  --border-med:rgba(26,31,46,0.16);
  --border-strong:rgba(26,31,46,0.28);

  --glass:rgba(240,240,237,0.92);
  --glass-mid:rgba(240,240,237,0.70);
  --glass-light:rgba(240,240,237,0.55);

  --on-dark:rgba(240,240,237,0.90);
  --on-dark-soft:rgba(240,240,237,0.55);
  --on-dark-faint:rgba(240,240,237,0.40);
  --on-dark-ghost:rgba(240,240,237,0.20);

  --accent-100:#f2f6fa;
  --accent-200:#dde8f2;
  --accent-300:#c2d6e8;
  --accent-400:#a7c4dd;
  --accent-500:#78A4CB;
  --accent-600:#6488a9;
  --accent-700:#4f6c86;
  --accent-800:#3a4f61;
  --accent-900:#24313d;

  --analysis-100:#f0eeff;
  --analysis-200:#d4cfff;
  --analysis-300:#a89fff;
  --analysis-400:#7b6fff;
  --analysis-500:#5040e0;
  --analysis-600:#3d2fbd;
  --analysis-700:#2c209a;
  --analysis-800:#1c1470;
  --analysis-900:#0e0940;

  --healthy-100:#ecfdf3;
  --healthy-200:#bbf7d0;
  --healthy-300:#6ee7a0;
  --healthy-400:#22c55e;
  --healthy-500:#16a34a;
  --healthy-600:#15803d;
  --healthy-700:#166534;
  --healthy-800:#14532d;
  --healthy-900:#052e16;

  --caution-100:#fffbeb;
  --caution-200:#fde68a;
  --caution-300:#fbbf24;
  --caution-400:#f59e0b;
  --caution-500:#d97706;
  --caution-600:#b45309;
  --caution-700:#92400e;
  --caution-800:#78350f;
  --caution-900:#451a03;

  --critical-100:#fef2f2;
  --critical-200:#fecaca;
  --critical-300:#f87171;
  --critical-400:#ef4444;
  --critical-500:#dc2626;
  --critical-600:#b91c1c;
  --critical-700:#991b1b;
  --critical-800:#7f1d1d;
  --critical-900:#450a0a;

  --dot-green:#27C93F;
  --dot-red:#FF5F56;
  --dot-yellow:#FFBD2E;

  --brand:              var(--accent-500);
  --brand-hover:        var(--accent-600);
  --brand-active:       var(--accent-700);
  --brand-muted:        rgba(120,164,203,0.12);
  --brand-subtle:       rgba(120,164,203,0.06);
  --brand-border:       var(--accent-300);
  --brand-glow:         rgba(120,164,203,0.25);

  --accent:             var(--brand);
  --accent-muted:       var(--brand-muted);
  --accent-subtle:      var(--brand-subtle);
  --accent-glow:        var(--brand-glow);

  --analysis:           var(--analysis-500);
  --analysis-hover:     var(--analysis-600);
  --analysis-muted:     rgba(80,64,224,0.12);
  --analysis-subtle:    rgba(80,64,224,0.06);
  --analysis-border:    var(--analysis-300);

  --status-positive:    var(--healthy-700);
  --status-warning:     var(--caution-700);
  --status-negative:    var(--critical-700);

  --battery-healthy:        var(--healthy-500);
  --battery-healthy-bg:     var(--healthy-100);
  --battery-healthy-border: var(--healthy-300);

  --battery-second-life:    var(--healthy-600);
  --battery-second-life-bg: var(--healthy-100);

  --battery-investigate:    var(--caution-500);
  --battery-investigate-bg: var(--caution-100);
  --battery-investigate-border: var(--caution-300);

  --battery-critical:       var(--critical-500);
  --battery-critical-bg:    var(--critical-100);
  --battery-critical-border:var(--critical-300);

  --battery-confidence:     var(--brand);
  --battery-analysis:       var(--analysis-500);
  --battery-neutral:        var(--ink-soft);

  --evidence-measured:      var(--brand);
  --evidence-computed:      var(--analysis-500);
  --evidence-rule:          var(--caution-600);
  --evidence-ai:            var(--ink-soft);

  --surface-primary:     var(--bg);
  --surface-secondary:   var(--bg2);
  --surface-tertiary:    var(--bg3);
  --surface-inverse:     var(--dark);
  --surface-overlay:     var(--glass);

  --text-primary:        var(--dark);
  --text-body:           var(--ink);
  --text-secondary:      var(--ink-soft);
  --text-tertiary:       var(--ink-faint);
  --text-disabled:       var(--ink-ghost);
  --text-inverse:        var(--on-dark);
  --text-inverse-soft:   var(--on-dark-soft);
  --text-brand:          var(--brand);

  --border-default:      var(--border);
  --border-strong-tok:   var(--border-med);
  --border-brand:        var(--brand-border);

  --button-primary-bg:       var(--surface-inverse);
  --button-primary-color:    var(--bg);
  --button-primary-hover-bg: rgba(26,31,46,0.82);

  /* Same reasoning as .hero-bottom: this button carries white text on a solid
     fill, so it needs a darker step of the ramp than the base --brand token. */
  --button-brand-bg:         var(--accent-700);
  --button-brand-color:      var(--white);
  --button-brand-hover-bg:   var(--accent-800);

  --button-ghost-border:     var(--border-med);
  --button-ghost-color:      var(--ink-soft);
  --button-ghost-hover-border: var(--dark);
  --button-ghost-hover-color:  var(--dark);

  --button-outline-white-border: var(--on-dark-ghost);
  --button-outline-white-color:  var(--on-dark);
  --button-outline-white-hover-bg: var(--on-dark-ghost);

  --card-bg:             var(--surface-primary);
  --card-border:         var(--border-default);
  --card-padding:        32px;

  --nav-bg:              var(--surface-overlay);
  --nav-border:          var(--border-default);
  --nav-text:            var(--text-secondary);
  --nav-text-hover:      var(--text-primary);

  --section-pad-v:       80px;
  --section-pad-h:       64px;

  --mono:'JetBrains Mono',monospace;
}

/* ── NAV ────────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:57px;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);}
.nav-brand{display:flex;align-items:center;gap:0;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-links{display:flex;align-items:center;gap:8px;}
.nav-link{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-soft);text-decoration:none;padding:7px 14px;border-radius:2px;transition:color 0.2s,background 0.2s;white-space:nowrap;}
.nav-link:hover{color:var(--dark);}
.nav-link-cta{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--dark);
  color:var(--dark) !important;
  padding:7px 14px;
  letter-spacing:0.1em;
  position:relative;
}
.nav-link-cta::before{
  content:'';
  width:6px;height:6px;
  background:var(--accent);
  flex-shrink:0;
  border-radius:50%;
}
.nav-link-cta:hover{background:var(--dark);color:var(--bg) !important;}
.nav-link-cta:hover::before{background:var(--bg);}

/* ── ABOVE-FOLD WRAPPER ──────────────────────────────────────────── */
.above-fold{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  padding-top:57px;
}
@media(max-width:900px){
  .above-fold{ min-height:100svh; }
}

/* ── HERO ────────────────────────────────────────────────────────── */
.hero{
  flex:1;
  background:var(--bg);
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
}

.hero-top{
  background:var(--bg);
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:0 64px 32px;
  z-index:1;
  border-bottom:none;
}

/* Fix 1: remove white line between hero-bottom and next section */
.hero-bottom{
  /* Deliberately darker than --accent: this block has white text on a solid
     fill, so it uses accent-700 (same hue family, enough contrast for white
     text) rather than the base accent-500, which may be too light for that. */
  background:var(--accent-700);
  position:relative;
  display:flex;
  align-items:center;
  padding:0 64px;
  z-index:1;
  margin-bottom:-1px;
}

.hero-cols{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  pointer-events:none;
  z-index:0;
}
.hero-col-guide{
  border-right:1px solid var(--ink-rule);
}
.hero-col-guide:first-child{
  border-left:1px solid var(--ink-rule);
}

.hero-image-wrap{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:52%;
  z-index:2;
  pointer-events:none;
}
.hero-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center right;
  display:block;
  max-width:100%;
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) scale(1);}
  40%{transform:translateY(-18px) scale(1.01);}
  70%{transform:translateY(-9px) scale(1.005);}
}

h1.hero-title{
  font-size:clamp(50px, 6.0vw, 96px);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--dark);
  max-width:58%;
  z-index:1;
}

.hero-sub-wrap{
  display:flex;
  flex-direction:column;
  gap:28px;
  max-width:420px;
  z-index:3;
}
.hero-sub{
  font-size:15px;
  font-weight:300;
  color:var(--on-dark);
  line-height:1.8;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1.5px solid var(--on-dark-ghost);
  color:var(--on-dark);
  background:transparent;
  padding:12px 22px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  cursor:pointer;
  transition:all 0.2s;
  text-transform:uppercase;
}
.hero-cta::before{
  content:'';
  width:7px;height:7px;
  background:var(--on-dark);
  flex-shrink:0;
}
.hero-cta:hover{
  background:var(--on-dark-ghost);
  border-color:var(--on-dark);
}

.hero-coords{
  position:absolute;
  right:9%;
  bottom:12%;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:2px;
  pointer-events:none;
}
.hero-coord-line{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--on-dark);
  text-align:right;
}

.hero-eyebrow-tag{
  position:absolute;
  top:28px;
  right:64px;
  z-index:3;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  color:var(--ink-faint);
  text-transform:uppercase;
}

/* ── STATS STRIP ─────────────────────────────────────────────────── */
.hero-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);background:var(--bg2);}
.hero-stat{padding:28px 28px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between;transition:background 0.2s;background:var(--bg2);}
.hero-stat:hover{background:var(--bg3);}
.hero-stat-num{font-size:clamp(28px,2.8vw,44px);font-weight:200;color:var(--dark);line-height:1;letter-spacing:-0.04em;}
.hero-stat-label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.1em;color:var(--ink-soft);margin-top:14px;line-height:1.6;text-transform:uppercase;}
.hero-stat-sublabel{font-family:var(--mono);font-size:10px;letter-spacing:0.02em;color:var(--ink-soft);margin-top:6px;}

/* ── TICKER ─────────────────────────────────────────────────────── */
.ticker-wrap{overflow:hidden;background:var(--dark);padding:11px 0;}
.ticker-track{display:inline-block;white-space:nowrap;animation:ticker 40s linear infinite;}
.ticker-track span{font-family:var(--mono);font-size:10px;letter-spacing:0.15em;color:var(--white);padding:0 36px;}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── PROBLEM ────────────────────────────────────────────────────── */
.problem-section{background:var(--bg);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);}
.problem-intro{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:var(--ink-soft);margin-bottom:24px;text-transform:uppercase;}
.problem-big{font-size:clamp(24px,3vw,42px);font-weight:200;line-height:1.15;letter-spacing:-0.02em;color:var(--dark);max-width:780px;margin-bottom:48px;}
.problem-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.problem-list{list-style:none;}
.problem-list li{font-size:14px;font-weight:300;color:var(--ink);line-height:1.75;padding:16px 0;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:16px;}
/* Fix 5: replace em-dash bullets in problem list with a short bar */
.problem-list li::before{content:'';width:12px;height:1px;background:var(--ink-faint);flex-shrink:0;margin-top:11px;}
.problem-questions{display:flex;flex-direction:column;border:1px solid var(--border);}
.problem-q{padding:18px 24px;border-bottom:1px solid var(--border);font-size:14px;font-weight:300;color:var(--ink);display:flex;justify-content:space-between;align-items:center;transition:background 0.15s;}
.problem-q:hover{background:var(--bg3);}
.problem-q:last-child{border-bottom:none;}

/* ── MATERIAL VISUAL (battery.png electrode microstructure) ─────── */
.split-section{display:grid;grid-template-columns:1fr 1fr;min-height:540px;border-bottom:1px solid var(--border);}
.split-dark{background:var(--bg2);display:block;border-right:1px solid var(--border);}
/* the image + overlay need overflow:hidden to clip the cover-fit image and
   the glow, but overflow:hidden on a grid item also collapses its implicit
   min-height to 0 for track-sizing purposes - so normal-flow content added
   after it (the mobile pipeline list) would silently get clipped instead of
   growing the row. Isolating overflow:hidden to this inner wrapper keeps
   .split-dark itself a plain flow container that can grow to fit both. */
/* height:100% matters on desktop: .split-dark is a grid item stretched to
   match .split-light's (often taller) height, and the image should fill
   that whole stretched box like it used to, not just this 540px floor.
   On mobile the two panels no longer share a row (single-column grid), so
   .split-dark's height is intrinsic and this percentage resolves to auto -
   exactly what's wanted there, since min-height is the real floor on mobile. */
.split-dark-media{position:relative;overflow:hidden;min-height:540px;height:100%;}
/* Panel shape isn't fixed (fixed ~540px tall, width scales with the viewport
   since the site has no max-width container), so the image fills it edge to
   edge via object-fit:cover rather than being sized/inset to an exact ratio.
   Labels overlay directly on the image, each with its own small backing chip
   for legibility over busy material detail. */
.battery-visual{position:absolute;inset:0;z-index:1;}
.battery-visual-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;mix-blend-mode:multiply;pointer-events:none;}
.battery-glow{position:absolute;inset:-20%;background:radial-gradient(ellipse,var(--ink-rule) 0%,transparent 65%);filter:blur(40px);pointer-events:none;z-index:0;animation:glowPulse 5s ease-in-out infinite;}
@keyframes glowPulse{0%,100%{opacity:0.7;transform:scale(1);}50%{opacity:1;transform:scale(1.1);}}
/* callout system: small backed labels on the image, thin leader lines
   dropping to a square dot marking the target region on the material */
/* Fixed-width, wrapping text gives every label the same footprint regardless
   of how long its wording is - that constant width is what makes it possible
   to lay out five labels without any two ever overlapping each other or a
   neighbour's dot (variable-width nowrap labels made that unpredictable). */
/* bullet always sits first/left, for every label regardless of which side
   its box is anchored to (left:X% growing right, or right:X% growing left) -
   only the box's own position changes near the panel edges, never the
   internal bullet-then-text order */
.mkt-label{position:absolute;display:flex;align-items:flex-start;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:var(--dark);background:var(--glass);border:1px solid var(--ink-rule);border-radius:2px;padding:4px 7px;opacity:0;animation:fadeNodeIn 0.6s ease forwards;pointer-events:none;z-index:2;}
.mkt-label-text{max-width:96px;white-space:normal;line-height:1.3;}
.mkt-bullet{width:5px;height:5px;flex-shrink:0;margin-top:2px;background:var(--accent);}
.mkt-leader{position:absolute;width:1px;background:var(--border-med);opacity:0;animation:fadeNodeIn 0.6s ease forwards;pointer-events:none;z-index:1;}
.mkt-dot{position:absolute;width:5px;height:5px;transform:translate(-50%,-50%);background:var(--accent);box-shadow:0 0 0 3px var(--glass),0 0 5px var(--accent-glow);opacity:0;animation:fadeNodeIn 0.6s ease forwards;pointer-events:none;z-index:2;}
.h-pipeline{position:absolute;bottom:24px;left:20px;right:20px;padding:16px 20px;background:var(--glass-light);border:1px solid var(--ink-rule);border-radius:8px;backdrop-filter:blur(8px);z-index:2;}
/* mobile-only stacked equivalent of .h-pipeline, see the mobile media query
   below for its visible styling; hidden here so desktop never sees it */
.h-pipeline-mobile{display:none;}
.split-canvas-wrap{display:none;}
.battery-float-wrap{display:contents;}
.split-light{background:var(--surface-primary);padding:var(--section-pad-v) var(--section-pad-h);display:flex;flex-direction:column;justify-content:center;}
.section-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:var(--ink-soft);margin-bottom:20px;text-transform:uppercase;}
.section-eyebrow-dark{color:var(--ink-faint);}
h2.display{font-size:clamp(26px,3vw,44px);font-weight:200;line-height:1.1;letter-spacing:-0.025em;margin-bottom:20px;color:var(--dark);}
.body-copy{font-size:14px;font-weight:300;line-height:1.8;color:var(--ink);max-width:420px;}
.pillars{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border-top:1px solid var(--border);}
.pillar{padding:28px 0;border-bottom:1px solid var(--border);padding-right:28px;}
.pillar:nth-child(odd){border-right:1px solid var(--border);}
.pillar:nth-child(even){padding-left:28px;padding-right:0;}
.pillar:nth-last-child(-n+2){border-bottom:none;}
.pillar-icon{width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:14px;border-radius:50%;}
.pillar-title{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--dark);margin-bottom:8px;letter-spacing:0.04em;}
.pillar-desc{font-size:13px;font-weight:300;color:var(--ink);line-height:1.7;}

/* ── COMPARE ────────────────────────────────────────────────────── */
.compare-section{background:var(--bg2);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.compare-header{margin-bottom:40px;position:relative;}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;}
.compare-card{background:var(--card-bg);border:1px solid var(--card-border);padding:var(--card-padding);}
.compare-card-label{font-family:var(--mono);font-size:10px;letter-spacing:0.16em;color:var(--ink-soft);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);text-transform:uppercase;}
.compare-soh{font-size:64px;font-weight:200;color:var(--dark);line-height:1;letter-spacing:-0.04em;}
.compare-soh-label{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--ink-soft);margin-top:8px;margin-bottom:28px;text-transform:uppercase;}
.compare-row{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border);}
.compare-row:last-child{border-bottom:none;}
.compare-row-key{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-soft);flex-shrink:0;padding-right:16px;text-transform:uppercase;}
.compare-row-val{font-size:13px;font-weight:300;color:var(--dark);text-align:right;line-height:1.4;}
.compare-verdict{margin-top:24px;padding:16px 20px;border:1px solid var(--border);background:var(--bg2);}
.compare-verdict-label{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;}
.compare-verdict-text{font-size:14px;font-weight:400;color:var(--text-primary);}
.verdict-bad{border-color:var(--battery-critical-border);background:var(--battery-critical-bg);}
.verdict-bad .compare-verdict-text{color:var(--battery-critical);}

/* Fix 7: compare divider — remove top border, add vertical line above text matching the one below */
.compare-divider{
  text-align:center;
  padding:72px var(--section-pad-h);
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.7s ease, transform 0.7s ease;
  position:relative;
  /* removed border-top */
  overflow:hidden;
}
.compare-divider.visible{opacity:1;transform:translateY(0);}
.compare-divider-eyebrow{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.22em;
  color:var(--ink-faint);
  text-transform:uppercase;
  margin-bottom:28px;
}
/* vertical line ABOVE eyebrow (matches the one below the text) */
.compare-divider-rule-top{
  width:1px;
  height:40px;
  background:var(--border-med);
  margin:0 auto 32px;
}
.compare-divider-text{
  font-size:clamp(18px, 2.4vw, 30px);
  font-weight:300;
  color:var(--dark);
  line-height:1.55;
  max-width:700px;
  margin:0 auto;
  letter-spacing:-0.01em;
}
.compare-divider-text strong{font-weight:600;color:var(--dark);}
.compare-divider-rule{width:1px;height:40px;background:var(--border-med);margin:32px auto 0;}

/* ── CODE / TERMINAL ────────────────────────────────────────────── */
.code-section{background:var(--bg2);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.code-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:32px;position:relative;}
.code-top h2{font-size:clamp(24px,2.8vw,42px);font-weight:200;line-height:1.1;letter-spacing:-0.025em;color:var(--dark);margin-bottom:16px;}
.code-top p{font-size:14px;font-weight:300;color:var(--ink);line-height:1.8;max-width:360px;}
.terminal{background:var(--bg);border:1px solid var(--border-med);border-radius:6px;overflow:hidden;box-shadow:0 2px 20px var(--ink-rule);}
.terminal-bar{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:7px;}
.t-dot{width:11px;height:11px;border-radius:50%;}
.t-dot.r{background:var(--dot-red);}.t-dot.y{background:var(--dot-yellow);}.t-dot.g{background:var(--dot-green);}
.terminal-title{font-family:var(--mono);font-size:11px;color:var(--ink-ghost);letter-spacing:0.04em;margin-left:6px;}
.terminal-body{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:300;line-height:1.45;display:flex;background:var(--bg);}
.t-gutter{background:var(--bg2);border-right:1px solid var(--border);padding:14px 0;flex-shrink:0;min-width:42px;text-align:right;user-select:none;}
.t-linenum{display:block;height:1.45em;padding:0 10px;font-size:10.5px;font-weight:300;color:var(--ink-ghost);font-family:'JetBrains Mono',monospace;line-height:1.45;}
.t-col{padding:14px 20px;flex:1;overflow-x:auto;}
.t-line{display:block;white-space:pre;height:1.45em;line-height:1.45;}
.t-comment{color:#b0b8c2;font-style:italic;font-weight:300;}
.t-key{color:#7a8490;font-weight:300;}
.t-val{color:#3d4550;font-weight:400;}
.t-label{color:#505a65;font-weight:500;letter-spacing:0.05em;}
.t-good{color:var(--battery-healthy);font-weight:600;}
.t-warn{color:var(--battery-critical);font-weight:600;}
.t-head{color:#a0a8b0;font-weight:400;letter-spacing:0.06em;}
.t-dim{color:#b8bec4;font-weight:300;}

/* ── PERF ───────────────────────────────────────────────────────── */
.perf-section{background:var(--bg2);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.perf-header{margin-bottom:48px;position:relative;}
.perf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;}
.perf-card{background:var(--card-bg);padding:var(--card-padding);border:1px solid var(--card-border);}
.perf-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px;}
.perf-big-num{font-size:clamp(40px,4vw,68px);font-weight:200;color:var(--dark);line-height:1;letter-spacing:-0.04em;margin-bottom:8px;}
.perf-num-label{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:var(--ink-soft);text-transform:uppercase;}

/* ── USE CASES ──────────────────────────────────────────────────── */
.case-section{background:var(--bg2);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);}
.case-list{margin-top:48px;}
.case-row{display:grid;grid-template-columns:150px 90px 1fr 28px;align-items:start;padding:24px 0;border-top:1px solid var(--border);gap:32px;transition:background 0.15s;}
.case-row:last-child{border-bottom:1px solid var(--border);}
.case-row:hover{background:var(--bg2);}
.case-logo-box{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--dark);letter-spacing:0.08em;border:1px solid var(--border-med);padding:6px 12px;display:inline-block;text-transform:uppercase;}
.case-year{font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:0.06em;padding-top:4px;}
.case-title{font-size:18px;font-weight:300;color:var(--dark);margin-bottom:10px;}
.case-desc{font-family:var(--mono);font-size:11px;color:var(--ink-soft);line-height:1.75;max-width:480px;}
.case-arrow{font-size:16px;color:var(--ink-faint);padding-top:4px;}

/* ── INTEGRATION ────────────────────────────────────────────────── */
.integration-section{background:var(--surface-primary);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.provenance-strip{display:flex;border:1px solid var(--border);margin-bottom:48px;overflow:hidden;background:var(--bg2);}
.prov-cell{flex:1;padding:20px 24px;border-right:1px solid var(--border);}
.prov-cell:last-child{border-right:none;}
.prov-step{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:var(--ink-faint);margin-bottom:8px;text-transform:uppercase;}
.prov-name{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-brand);margin-bottom:6px;letter-spacing:0.04em;}
.prov-desc{font-size:12px;font-weight:300;color:var(--ink);line-height:1.6;}
h2.integration-title{font-size:clamp(28px,4vw,56px);font-weight:200;line-height:1.05;letter-spacing:-0.03em;color:var(--dark);max-width:780px;margin-bottom:24px;position:relative;}
h2.integration-title .fade{color:var(--ink-soft);}
.integration-sub{font-size:14px;font-weight:300;color:var(--ink);max-width:480px;line-height:1.8;position:relative;}

/* ── PIPELINE MODULES ───────────────────────────────────────────── */
.services-section{background:var(--bg2);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.service-card{padding:32px 28px 40px;border:1px solid var(--card-border);background:var(--card-bg);}
.service-illustration{width:100%;height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;opacity:0.85;}
.service-illustration svg{width:64px;height:64px;}
.service-title{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--dark);margin-bottom:10px;letter-spacing:0.06em;}
.service-desc{font-size:13px;font-weight:300;color:var(--ink);line-height:1.7;}

/* ── CTA ────────────────────────────────────────────────────────── */
.cta-section{background:var(--dark);min-height:360px;padding:var(--section-pad-v) var(--section-pad-h);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:48px;}
.cta-top{position:relative;z-index:1;}
.cta-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;color:var(--on-dark-faint);margin-bottom:20px;text-transform:uppercase;}
.cta-big{font-size:clamp(52px,8vw,108px);font-weight:200;color:var(--bg);line-height:1;letter-spacing:-0.04em;}
.cta-net{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--on-dark-faint);margin-top:12px;text-transform:uppercase;max-width:560px;line-height:1.6;}
.cta-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;}
.cta-mono-label{font-size:14px;font-weight:300;color:var(--on-dark-soft);line-height:1.9;max-width:440px;}
.btn-outline-white{display:flex;align-items:center;gap:12px;border:1px solid var(--button-outline-white-border);background:transparent;color:var(--button-outline-white-color);cursor:pointer;padding:14px 28px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.1em;transition:all 0.2s;}
.btn-outline-white:hover{background:var(--button-outline-white-hover-bg);border-color:var(--on-dark-soft);}

/* ── FOOTER ─────────────────────────────────────────────────────── */
footer{background:var(--bg2);padding:40px var(--section-pad-h);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.footer-note{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:0.06em;}

/* ── PIPELINE ANIMATION ─────────────────────────────────────────── */
.pipe-node{opacity:0;animation:fadeNodeIn 0.6s cubic-bezier(0.22,1,0.36,1) forwards;}
@keyframes fadeNodeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.pipe-connector{stroke-dasharray:6 4;stroke-dashoffset:0;animation:dashFlow 1.2s linear infinite;}
@keyframes dashFlow{to{stroke-dashoffset:-20;}}

/* ── EVIDENCE TAG CLASSES ────────────────────────────────────────── */
.ev-measured  { color:var(--evidence-measured);  border-color:var(--brand-border);      background:var(--brand-subtle);    }
.ev-computed  { color:var(--evidence-computed);  border-color:var(--analysis-border);   background:var(--analysis-subtle); }
.ev-rule      { color:var(--evidence-rule);      border-color:var(--caution-300);       background:var(--caution-100);     }
.ev-ai        { color:var(--evidence-ai);        border-color:var(--border-med);        background:var(--surface-secondary);}

/* ── BATTERY STATE CLASSES ───────────────────────────────────────── */
.batt-healthy      { color:var(--battery-healthy);     background:var(--battery-healthy-bg);     border-color:var(--battery-healthy-border);     }
.batt-second-life  { color:var(--battery-second-life); background:var(--battery-second-life-bg); border-color:var(--battery-healthy-border);     }
.batt-investigate  { color:var(--battery-investigate); background:var(--battery-investigate-bg); border-color:var(--battery-investigate-border); }
.batt-critical     { color:var(--battery-critical);    background:var(--battery-critical-bg);    border-color:var(--battery-critical-border);    }

/* ── GET STARTED ────────────────────────────────────────────────── */
.getstarted-section{background:var(--surface-primary);padding:var(--section-pad-v) var(--section-pad-h);border-bottom:1px solid var(--border);}
.gs-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;margin-top:48px;}
.gs-steps{display:flex;flex-direction:column;}
.gs-step{display:grid;grid-template-columns:48px 1fr;gap:0;padding:20px 0;border-bottom:1px solid var(--border);}
.gs-step:first-child{padding-top:0;}
.gs-step:last-child{border-bottom:none;}
.gs-step-num{font-size:clamp(28px,3vw,42px);font-weight:200;color:var(--dark);letter-spacing:-0.04em;line-height:1;padding-top:4px;}
.gs-step-body{padding-left:8px;}
.gs-step-title{font-size:16px;font-weight:300;color:var(--dark);margin-bottom:6px;line-height:1.4;}
.gs-step-desc{font-size:13px;font-weight:300;color:var(--ink-soft);line-height:1.7;}
.gs-cta-wrap{margin-top:40px;display:flex;flex-direction:column;gap:12px;}
.gs-cta-note{font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:0.08em;}
.gs-mockup{position:relative;display:flex;flex-direction:column;gap:0;}

/* ── TABBED SCREENSHOT VIEWER ───────────────────────────────────── */
.ss-tabs{display:flex;align-items:center;gap:4px;margin-bottom:0;position:relative;background:var(--bg);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;padding:6px 6px 0 6px;}
.ss-tab{position:relative;display:flex;align-items:center;gap:7px;padding:9px 18px;border:none;background:transparent;border-radius:6px 6px 0 0;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.06em;color:var(--ink-faint);cursor:pointer;transition:color 0.2s ease,background 0.2s ease;white-space:nowrap;user-select:none;}
.ss-tab:hover{color:var(--ink);}
.ss-tab.active{background:var(--bg);color:var(--dark);border:1px solid var(--border);border-bottom:1px solid var(--bg);margin-bottom:-1px;z-index:1;}
.ss-tab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.ss-dot-green{background:var(--dot-green);}.ss-dot-red{background:var(--dot-red);}
.ss-tab-score{font-size:10px;opacity:0.55;margin-left:2px;}
.ss-tab.active .ss-tab-score{opacity:0.8;}
.ss-viewer{position:relative;border:1px solid var(--border);border-radius:0 0 10px 10px;overflow:hidden;background:#fff;box-shadow:0 8px 40px var(--border-med);opacity:0;transform:translateY(24px);transition:opacity 0.6s ease 0.1s,transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s;min-height:200px;}
.gs-mockup.visible .ss-viewer{opacity:1;transform:translateY(0);}
.ss-panel{position:absolute;inset:0;opacity:0;transition:opacity 0.4s ease;pointer-events:none;}
.ss-panel.active{position:relative;opacity:1;pointer-events:all;}
.ss-panel img{width:100%;display:block;max-height:520px;object-fit:cover;object-position:top center;}
.ss-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;opacity:0;transition:opacity 0.5s ease 0.5s;}
.gs-mockup.visible .ss-footer{opacity:1;}
.ss-eu-tag{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;color:var(--ink-faint);text-transform:uppercase;}
.ss-eu-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;}
.ss-expand{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;color:var(--ink-faint);background:none;border:1px solid var(--border);border-radius:3px;padding:5px 12px;cursor:pointer;text-transform:uppercase;transition:color 0.2s,border-color 0.2s;}
.ss-expand:hover{color:var(--dark);border-color:var(--border-med);}

/* ── LIGHTBOX ───────────────────────────────────────────────────── */
.ss-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none;opacity:0;transition:opacity 0.3s ease;}
.ss-lightbox.open{opacity:1;pointer-events:all;}
.ss-lb-bg{position:absolute;inset:0;background:rgba(20,24,36,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;}
.ss-lb-inner{position:relative;max-width:960px;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.4);transform:scale(0.93) translateY(20px);transition:transform 0.45s cubic-bezier(0.22,1,0.36,1);}
.ss-lightbox.open .ss-lb-inner{transform:scale(1) translateY(0);}
.ss-lb-inner img{width:100%;display:block;max-height:88vh;object-fit:contain;background:#fff;}
.ss-lb-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:none;background:var(--bg-inv);color:var(--bg);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s;line-height:1;}
.ss-lb-close:hover{background:var(--dark);}

/* ── LOADING SCREEN ─────────────────────────────────────────────── */
#loader{position:fixed;inset:0;background:var(--bg);z-index:99990;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease,visibility 0.5s ease;}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:24px;}
.loader-ring-svg{width:52px;height:52px;display:block;}
.loader-ring-arc{animation:loaderArc 1.1s cubic-bezier(0.4,0,0.2,1) forwards;}
@keyframes loaderArc{from{stroke-dashoffset:163;}to{stroke-dashoffset:0;}}
.loader-ring-dot{animation:loaderDot 1.1s cubic-bezier(0.4,0,0.2,1) forwards;transform-origin:30px 30px;}
@keyframes loaderDot{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.loader-text{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;color:var(--ink-soft);text-transform:uppercase;animation:loaderFade 0.4s ease 0.2s both;}
@keyframes loaderFade{from{opacity:0;}to{opacity:1;}}

/* ── BUTTONS ─────────────────────────────────────────────────────── */
.btn-primary{display:flex;align-items:center;gap:10px;background:var(--button-primary-bg);color:var(--button-primary-color);border:none;padding:13px 26px;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.1em;border-radius:2px;transition:opacity 0.2s;}
.btn-primary:hover{background:var(--button-primary-hover-bg);opacity:1;}
.btn-ghost{background:none;border:1px solid var(--button-ghost-border);color:var(--button-ghost-color);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;padding:13px 22px;border-radius:2px;transition:all 0.2s;}
.btn-ghost:hover{border-color:var(--button-ghost-hover-border);color:var(--button-ghost-hover-color);}

/* ── IMAGE SIZING ────────────────────────────────────────────────── */
.nav-logo-img{height:28px;width:auto;max-width:160px;object-fit:contain;display:block;}
.nav-symbol-placeholder svg{display:block;}
.nav-symbol-placeholder img{height:32px;width:auto;max-height:32px;object-fit:contain;display:block;}

/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .hero{grid-template-rows:auto auto;}
  .hero-top{padding:32px 28px 24px;align-items:flex-end;}
  h1.hero-title{font-size:clamp(42px,11vw,72px);max-width:65%;}
  .hero-bottom{padding:32px 28px;}
  /* no width/opacity override here: let it inherit the full-height,
     full-opacity desktop treatment (top:0/bottom:0, straddling the
     beige/blue boundary) down to the 768px breakpoint below */
  .hero-stats-grid{grid-template-columns:1fr 1fr;}
  .hero-stat{padding:24px 20px;}
}

@media(max-width:768px){
  nav{padding:12px 20px;}
  .nav-links .nav-link:not(.nav-link-cta){display:none;}

  /* hide coords only on mobile */
  .hero-coords{display:none;}
  .hero-eyebrow-tag{top:16px;right:24px;}
  /* hero-top transparent so image shows through; image text stays on top */
  .hero-top{background:transparent;overflow:visible;}
  h1.hero-title{position:relative;z-index:4;}

  /* hero layout on mobile */
  .hero{
    grid-template-rows: auto auto;
    min-height: auto;
  }
  .hero-top{
    padding: 36px 24px 28px;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    min-height: 56vw;
  }
  h1.hero-title{
    font-size: clamp(44px, 12vw, 72px);
    max-width: 100%;
    line-height: 0.9;
  }

  /* hero image on mobile — mirrors the desktop treatment: spans the full
     hero height (top:0 to bottom:0) so it straddles the beige/blue boundary
     the same way, just at a mobile-appropriate width and full opacity */
  .hero-image-wrap{
    display: block;
    position: absolute;
    width: 66%;
    top: 0;
    bottom: 0;
    height: auto;
    right: 0;
    opacity: 1;
    z-index: 3;
    pointer-events: none;
    clip-path: none;
  }
  .hero-image-wrap img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center right;
  }

  .hero-bottom{
    padding: 32px 24px 36px;
    min-height: auto;
  }
  .hero-sub{
    font-size: 14px;
    line-height: 1.75;
  }
  .hero-sub-wrap{
    max-width: 100%;
    gap: 20px;
  }

  .meet-trace-section{padding:64px 24px !important;}
  .trace-cards-grid{grid-template-columns:1fr !important;}
  .problem-section{padding:64px 24px;}
  .problem-cols{grid-template-columns:1fr;gap:40px;}
  .split-section{grid-template-columns:1fr;}
  .split-dark-media{min-height:420px;}
  .split-light{padding:64px 24px;}
  /* shrink the label chips so 5 of them keep the same proportional (not
     fixed-px) footprint on a narrow panel that they have on desktop -
     otherwise the fixed 96px chip width eats a much bigger % of a ~375px
     mobile panel than it does on a ~700px+ desktop one, and collides */
  .mkt-label{font-size:8px;padding:3px 5px;gap:4px;}
  .mkt-label-text{max-width:58px;}
  .mkt-bullet{width:4px;height:4px;}
  .mkt-dot{width:4px;height:4px;}
  .h-pipeline{display:none;} /* the SVG version doesn't reflow well at this width */
  .h-pipeline-mobile{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:20px 16px 24px;
    background:var(--bg2);
    position:relative;
  }
  .hpm-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:6px;
  }
  .hpm-row-highlight{background:var(--accent-700);border-color:var(--accent-800);}
  .hpm-row-highlight .hpm-tag{color:rgba(255,255,255,0.85);}
  .hpm-row-highlight .hpm-name{color:#ffffff;}
  .hpm-tag{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;color:var(--ink-faint);text-transform:uppercase;}
  .hpm-name{font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--dark);}
  .hpm-arrow{text-align:center;font-size:12px;line-height:1;color:var(--ink-ghost);}
  .compare-section{padding:64px 24px;}
  .compare-grid{grid-template-columns:1fr;}
  .compare-divider{padding:48px 24px;}
  .code-section{padding:64px 24px;}
  .code-top{grid-template-columns:1fr;gap:32px;}
  .terminal-title{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
  .perf-section{padding:64px 24px;}
  .perf-cards{grid-template-columns:1fr;}
  .case-section{padding:64px 24px;}
  .case-row{grid-template-columns:1fr;gap:12px;}
  .case-year,.case-arrow{display:none;}
  .integration-section{padding:64px 24px;}
  .provenance-strip{flex-direction:column;}
  .prov-cell{border-right:none;border-bottom:1px solid var(--border);}
  .prov-cell:last-child{border-bottom:none;}
  .services-section{padding:64px 24px;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .getstarted-section{padding:64px 24px;}
  .gs-grid{grid-template-columns:1fr;gap:48px;}
  .ss-tabs{overflow-x:auto;border-radius:8px 8px 0 0;}
  .ss-tab{font-size:10px;padding:8px 12px;}
  .cta-section{padding:64px 24px;}
  .cta-bottom{flex-direction:column;align-items:flex-start;gap:24px;}
  .cta-bottom > div:last-child{align-items:flex-start !important;}
  footer{padding:32px 24px;flex-direction:column;gap:16px;align-items:flex-start;}
  .about-section{padding:64px 24px !important;}

  /* Fix 4: CTA logo size on mobile — keep it readable */
  .cta-section img[alt="AmperIQ"]{max-height:52px !important;}
}

@media(max-width:480px){
  .services-grid{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .pillar:nth-child(odd){border-right:none;}
  .pillar:nth-child(even){padding-left:0;}
  .pillar:nth-last-child(-n+2){border-bottom:1px solid var(--border);}
  .pillar:last-child{border-bottom:none;}
  .hero-stats-grid{grid-template-columns:1fr;}
  .perf-big-num{font-size:clamp(36px,10vw,52px);}
}