/* ═════════════════════════════════════════════════════════════════════
   PULSE Homepage v3 — Linear-minimal redesign over Star Flow background
   • Single-column centered hero (lets the bg breathe)
   • KPI strip
   • Alternating feature rows (real screenshots, generous whitespace)
   • Signature scroll-pinned GPU OC moment (kept)
   • Minimal comparison
   • Minimal FAQ
   • Centered final CTA
   Cyan used sparingly — only on live indicator, CTAs, hover/active.
   Depends on shared.css, fonts.css, tokens-v3.css, motion.css, bg.css.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-6); }
@media (max-width: 720px) { .container { padding: 0 var(--sp-5); } }

/* ── Section frame ──────────────────────────────────────────────────── */
.hero-v3, .kpi-strip, .features, .sig, .cmp-section, .faq, .final-cta, .foot {
  position: relative;
  z-index: var(--z-content);
}

/* ── Eyebrow / kicker pill ──────────────────────────────────────────── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.02);
}
.kicker .live-dot { transform: translateY(-1px); }

/* ── Hero (single column, centered, generous whitespace) ─────────────── */
.hero-v3 {
  min-height: 88vh;
  padding: 160px var(--sp-6) var(--sp-9);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-container {
  max-width: 880px;
  margin: 0 auto;
}
.hero-eyebrow-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.hero-title {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(3rem, 7.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: var(--track-mega);
  line-height: 1.08;             /* room for descenders (g, y, p) */
  color: var(--text-1);
  margin-bottom: var(--sp-5);
  padding-bottom: 0.08em;        /* safety against tight clipping */
}
/* Mask wrappers from splitWords() — extra room so descenders aren't clipped */
.hero-title .tk-word-wrap { padding-bottom: 0.18em; vertical-align: bottom; }
.hero-title .accent-grad {
  background: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero-sub {
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 auto var(--sp-7);
}
.hero-cta-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.hero-meta {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  color: var(--text-3);
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
.hero-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta-item svg { width: 14px; height: 14px; opacity: 0.7; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 22px;
  border-radius: var(--r-3);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: var(--tx-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease-out-quart),
              box-shadow var(--dur-3) var(--ease-out-quart),
              background var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) var(--ease-out-quart);
}
.btn-primary {
  background: var(--grad-cta);
  color: #051418;
  box-shadow: var(--glow-c-md), var(--inner-bevel);
}
.btn-primary:hover { box-shadow: var(--glow-c-lg), var(--inner-bevel); transform: translateY(-1px); }
.btn-ghost {
  background: oklch(1 0 0 / 0.03);
  border-color: var(--line-2);
  color: var(--text-1);
}
.btn-ghost:hover { background: oklch(1 0 0 / 0.06); border-color: var(--line-3); color: var(--c-400); }
.btn svg { width: 18px; height: 18px; }

/* ── KPI strip ──────────────────────────────────────────────────────── */
.kpi-strip {
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 880px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
.kpi {
  padding: 0;
  text-align: left;
  border-left: 1px solid var(--line-1);
  padding-left: var(--sp-5);
}
.kpi:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 880px) { .kpi { border-left: 0; padding-left: 0; } }
.kpi-num {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--text-1);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.kpi-num .kpi-suffix { color: var(--c-500); }
.kpi-label {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Section heads (shared) ─────────────────────────────────────────── */
.sec-head { max-width: 720px; margin: 0 auto var(--sp-8); text-align: center; }
.sec-head .kicker { margin-bottom: var(--sp-4); }
.sec-title {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--text-1);
  margin-bottom: var(--sp-3);
}
.sec-sub {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto;
}

/* ── Features (alternating rows) ────────────────────────────────────── */
.features { padding: var(--sp-10) 0; }
.feature-rows { display: flex; flex-direction: column; gap: var(--sp-10); }
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-8);
  align-items: center;
}
.feature-row.reverse { grid-template-columns: 1.15fr 1fr; }
.feature-row.reverse .feature-copy { order: 2; }
.feature-row.reverse .feature-visual { order: 1; }
@media (max-width: 880px) {
  .feature-row, .feature-row.reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .feature-row.reverse .feature-copy { order: 1; }
  .feature-row.reverse .feature-visual { order: 2; }
}
.feature-copy {
  padding: 0 var(--sp-3);
}
.feature-copy .kicker { margin-bottom: var(--sp-4); }
.feature-copy h3 {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.06;
  color: var(--text-1);
  margin-bottom: var(--sp-4);
  max-width: 18ch;
}
.feature-copy p {
  font-size: var(--tx-base);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 50ch;
}
.feature-copy .feature-bullets {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-xs);
  color: var(--text-3);
  letter-spacing: 0.06em;
}
.feature-copy .feature-bullets li::before {
  content: '— ';
  color: var(--c-500);
}

/* Feature visual — frame around real screenshot */
.feature-visual {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  overflow: hidden;
  background: oklch(0.10 0.006 250 / 0.6);
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-3), var(--inner-bevel);
  transition: border-color var(--dur-3) var(--ease-out-quart);
}
.feature-visual:hover { border-color: var(--line-accent); }
.feature-visual picture, .feature-visual img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
/* Fallback visual when no screenshot — gradient + label */
.feature-visual.placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, oklch(0.18 0.010 250), oklch(0.10 0.006 250));
}
.feature-visual.placeholder .ph-label {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-sm);
  color: var(--text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Signature scroll-pinned moment (kept, polished) ─────────────────── */
.sig {
  position: relative;
  height: 360vh;
}
.sig-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sig-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 60%, oklch(0.78 0.16 184 / 0.12), transparent 70%);
  pointer-events: none; z-index: -1;
}
.sig-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  width: 100%;
  max-width: 1180px;
  padding: 0 var(--sp-6);
  align-items: center;
}
@media (max-width: 980px) {
  .sig-stage { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.sig-copy { position: relative; min-height: 320px; }
.sig-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out-expo),
              transform var(--dur-4) var(--ease-out-expo);
  transform: translateY(20px);
}
.sig-scene.is-on { opacity: 1; transform: none; }
.sig-headline {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--text-1);
  margin-bottom: var(--sp-4);
}
.sig-headline em { font-style: normal; color: var(--c-500); }
.sig-body { font-size: var(--tx-lg); color: var(--text-2); line-height: 1.55; max-width: 50ch; }
.sig-readout {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.sig-readout-cell {
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: oklch(0.10 0.006 250 / 0.5);
  backdrop-filter: blur(8px);
}
.sig-readout-cell label {
  display: block;
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.sig-readout-cell .v {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.sig-readout-cell.is-up .v { color: var(--c-500); }
.sig-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  background: oklch(0.10 0.006 250 / 0.6);
  padding: var(--sp-5);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(8px);
}
.sig-chart { width: 100%; height: 100%; display: block; }

/* ── Comparison (minimal text-driven, not table-shaped) ──────────────── */
.cmp-section { padding: var(--sp-10) 0; }
.cmp-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sp-7);
  align-items: start;
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  padding: var(--sp-7);
  background: oklch(0.10 0.006 250 / 0.4);
  backdrop-filter: blur(8px);
}
@media (max-width: 880px) { .cmp-grid { grid-template-columns: 1fr; padding: var(--sp-5); } }
.cmp-grid h3 {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--text-1);
  margin-bottom: var(--sp-3);
}
.cmp-grid p { color: var(--text-2); line-height: 1.6; }
.cmp-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.cmp-list li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  color: var(--text-3);
  letter-spacing: 0.06em;
}
.cmp-list li::before {
  content: '—';
  color: var(--c-500);
}
.cmp-side {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-sm);
  color: var(--text-3);
  line-height: 1.8;
}
.cmp-side strong { color: var(--text-1); display: block; margin-bottom: 6px; font-weight: 600; }
.cmp-side .cmp-row {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-1);
}
.cmp-side .cmp-row:last-child { border-bottom: 0; }
.cmp-side .cmp-row .val { color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { padding: var(--sp-10) 0; }
.faq-v3 { max-width: 760px; margin: 0 auto; }
.faq-v3-item {
  border-bottom: 1px solid var(--line-1);
  transition: background var(--dur-3) var(--ease-out-quart);
}
.faq-v3-item:first-child { border-top: 1px solid var(--line-1); }
.faq-v3-q {
  width: 100%;
  background: none;
  border: 0;
  padding: var(--sp-5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  text-align: left;
  font-size: var(--tx-lg);
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  font-family: inherit;
}
.faq-v3-q:hover { color: var(--c-400); }
.faq-v3-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 50%; flex-shrink: 0;
  transition: transform var(--dur-3) var(--ease-out-quart),
              border-color var(--dur-3) var(--ease-out-quart);
}
.faq-v3-icon svg { width: 14px; height: 14px; color: var(--text-2); transition: color var(--dur-3); }
.faq-v3-item.is-open .faq-v3-icon { transform: rotate(45deg); border-color: var(--c-500); }
.faq-v3-item.is-open .faq-v3-icon svg { color: var(--c-500); }
.faq-v3-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-4) var(--ease-out-expo);
}
.faq-v3-a-inner {
  padding: 0 0 var(--sp-5);
  font-size: var(--tx-base);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 64ch;
}
.faq-v3-item.is-open .faq-v3-a { max-height: 360px; }

/* ── Final CTA ──────────────────────────────────────────────────────── */
.final-cta {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  isolation: isolate;
  overflow: hidden;
}
.final-cta h2 {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.04;
  color: var(--text-1);
  margin-bottom: var(--sp-4);
  max-width: 18ch;
  margin-left: auto; margin-right: auto;
}
.final-cta .accent-grad {
  background: var(--grad-hero-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.final-cta p { color: var(--text-2); font-size: var(--tx-lg); margin-bottom: var(--sp-6); }
.dl-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 18px 32px;
  border-radius: var(--r-3);
  background: var(--grad-cta);
  color: #051418;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: var(--tx-xl);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: var(--glow-c-md), var(--inner-bevel);
  transition: transform var(--dur-2) var(--ease-out-quart),
              box-shadow var(--dur-3) var(--ease-out-quart);
}
.dl-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-c-lg), var(--inner-bevel); }
.dl-ring { width: 22px; height: 22px; }
.dl-ring circle { fill: none; stroke-width: 2; stroke-linecap: round; }
.dl-ring .ring-bg { stroke: oklch(0.10 0.006 250 / 0.30); }
.dl-ring .ring-fg {
  stroke: #051418;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--dur-2) linear;
}
.dl-btn[data-progress] .ring-fg { stroke-dashoffset: calc(60 - (60 * var(--p, 0))); }
.btn-meta {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  color: var(--text-3);
  margin-top: var(--sp-3);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot {
  padding: var(--sp-9) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--line-1);
  background: oklch(0 0 0 / 0.30);
  backdrop-filter: blur(8px);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-7);
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-col h3 {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}
.foot-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { color: var(--text-2); text-decoration: none; font-size: var(--tx-sm); transition: color var(--dur-2); }
.foot-col a:hover { color: var(--c-400); }
.foot-bottom {
  max-width: 1180px;
  margin: var(--sp-7) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  color: var(--text-3); letter-spacing: 0.04em;
}

/* ── Nav scroll states ─────────────────────────────────────────────── */
/* .skip-link styles live in shared.css now (loaded by every page) */
.nav.is-scrolled {
  padding-top: 8px; padding-bottom: 8px;
  background: oklch(0.10 0.006 250 / 0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line-2);
}
.nav.is-hidden { transform: translateY(-100%); transition: transform var(--dur-3) var(--ease-out-quart); }

/* ── Light mode ──────────────────────────────────────────────────────── */
[data-theme="light"] .nav.is-scrolled { background: oklch(0.98 0.004 250 / 0.86); }
[data-theme="light"] .foot { background: oklch(0.98 0.004 250 / 0.60); }
[data-theme="light"] .cmp-grid, [data-theme="light"] .sig-visual, [data-theme="light"] .sig-readout-cell {
  background: oklch(0.98 0.004 250 / 0.80);
}
[data-theme="light"] .feature-visual.placeholder {
  background: linear-gradient(135deg, oklch(0.94 0.005 250), oklch(0.98 0.004 250));
}

/* ═════════════════════════════════════════════════════════════════════
   Simplified Comparison section
   ═════════════════════════════════════════════════════════════════════ */
.cmp-simple {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px 22px;
  max-width: 780px;
  margin: 0 auto var(--sp-7);
}
.cmp-strike {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: oklch(0.78 0.16 184 / 0.55);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  padding: 4px 10px;
  transition: color var(--dur-2) var(--ease-out-quart);
}
.cmp-strike:hover { color: var(--text-2); }
.cmp-result {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  text-align: center;
}
.cmp-logo {
  width: 72px; height: 72px;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.50));
  animation: cmp-logo-pulse 4s ease-in-out infinite;
}
@keyframes cmp-logo-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.4)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.7)); }
}
.cmp-tagline { font-size: var(--tx-lg); color: var(--text-2); margin: 0; max-width: 36ch; }
.cmp-tagline strong { color: var(--text-1); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════════
   Signature Moment v2 — Terminal + Radial Dial
   ═════════════════════════════════════════════════════════════════════ */
.sig-v2 {
  position: relative;
  height: 240vh;            /* scroll distance for the whole sequence */
}
.sig-v2-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.sig-v2-stage {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  width: 100%;
}
@media (max-width: 980px) {
  .sig-v2 { height: auto; }
  .sig-v2-pin { position: static; height: auto; padding: var(--sp-8) 0; }
  .sig-v2-stage { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ── Terminal panel ──────────────────────────────────────────────────── */
.sig-v2-term {
  background: oklch(0.10 0.006 250 / 0.88);
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: var(--shadow-3), var(--inner-bevel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: oklch(0.06 0.005 250 / 0.6);
  border-bottom: 1px solid var(--line-1);
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
.term-dot:nth-child(1) { background: oklch(0.66 0.24 25); }
.term-dot:nth-child(2) { background: oklch(0.82 0.17 85); }
.term-dot:nth-child(3) { background: oklch(0.78 0.18 155); }
.term-title {
  flex: 1; text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.08em;
}
.term-body { padding: var(--sp-5); min-height: 340px; }
.term-line {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0;
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem);
  color: var(--text-2);
  line-height: 1.5;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 260ms var(--ease-out-quart), transform 260ms var(--ease-out-quart);
}
.term-line.is-on { opacity: 1; transform: none; }
.term-prompt { color: var(--c-500); font-weight: 700; }
.term-arrow  { color: var(--text-3); }
.term-cmd    { color: var(--text-1); }
.term-val    { color: var(--c-400); white-space: nowrap; }
.term-tab    {
  flex: 1 1 auto; min-width: 12px;
  align-self: center;
  border-bottom: 1px dotted var(--line-2);
  height: 1px; margin: 0 6px;
}
.term-result .term-arrow { color: var(--c-mint); }
.term-result .term-val   { color: var(--c-mint); font-weight: 700; }

/* ── Radial dial (with PULSE logo at center) ─────────────────────────── */
.sig-v2-dial { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.sig-v2-kicker { margin-top: var(--sp-2); text-align: center; }
.dial-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
}
.dial-svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: oklch(1 0 0 / 0.08); stroke-width: 2; }
.dial-fill {
  fill: none;
  stroke: url(#dialGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 540.354;             /* 2 * π * 86 */
  stroke-dashoffset: calc(540.354 * (1 - var(--dial-p, 0)));
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.65));
  transition: stroke-dashoffset 80ms linear;
}
.dial-ticks line { stroke: oklch(0.78 0.16 184 / 0.4); stroke-width: 1.5; stroke-linecap: round; }

.dial-content {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  text-align: center;
}
.dial-logo {
  width: clamp(48px, 14%, 64px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.6));
  animation: cmp-logo-pulse 4s ease-in-out infinite;
}
.dial-fps {
  font-family: 'Space Mono', monospace;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
  margin-top: var(--sp-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dial-fps .dial-unit {
  font-size: 0.36em;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 4px;
}
.dial-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 6px;
}

.dial-readouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 440px;
  margin-top: var(--sp-2);
}
@media (max-width: 540px) { .dial-readouts { grid-template-columns: repeat(2, 1fr); } }
.dial-chip {
  padding: 10px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: oklch(0.10 0.006 250 / 0.65);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dial-chip label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.dial-chip span { color: var(--c-400); font-weight: 700; }

/* Reduced motion: render all terminal lines visible, freeze logo pulse */
@media (prefers-reduced-motion: reduce) {
  .term-line { opacity: 1 !important; transform: none !important; }
  .cmp-logo, .dial-logo { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   Comparison table (fair, restored)
   ═════════════════════════════════════════════════════════════════════ */
.cmp-wrap {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  background: oklch(0.10 0.006 250 / 0.50);
  overflow-x: auto;
  box-shadow: var(--shadow-2);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.cmp-table th, .cmp-table td {
  padding: var(--sp-4) var(--sp-4);
  text-align: center;
  font-size: var(--tx-sm);
  border-bottom: 1px solid var(--line-1);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.cmp-table thead th {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  background: oklch(1 0 0 / 0.018);
  position: relative;
  font-weight: 600;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.cmp-table thead th.is-pulse {
  color: var(--c-400);
  background: oklch(0.78 0.16 184 / 0.10);
}
.cmp-table thead th.is-pulse::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: var(--grad-cta);
}
.cmp-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--text-1);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: var(--tx-sm);
  letter-spacing: -0.005em;
  text-transform: none;
  background: transparent;
  padding-left: var(--sp-5);
}
.cmp-table tbody tr:last-child td,
.cmp-table tbody tr:last-child th { border-bottom: 0; }
.cmp-table tbody td.is-pulse { background: oklch(0.78 0.16 184 / 0.045); }
.cmp-table tbody tr:hover td,
.cmp-table tbody tr:hover th { background: oklch(1 0 0 / 0.015); }
.cmp-table tbody tr:hover td.is-pulse { background: oklch(0.78 0.16 184 / 0.08); }
.cmp-yes { color: var(--c-400); font-weight: 600; }
.cmp-no  { color: var(--text-4); }
.cmp-partial { color: var(--amber-400); font-weight: 500; }
@media (max-width: 720px) {
  .cmp-table th, .cmp-table td { padding: var(--sp-3) var(--sp-3); font-size: var(--tx-xs); }
}

/* ═════════════════════════════════════════════════════════════════════
   Brand wordmark — icon merges with "ULSE" to read as one word.
   Suppresses the drop-shadow glow, logoPulse breath, and gap so the
   waveform mark sits in the type rhythm like a real letter "P".
   ═════════════════════════════════════════════════════════════════════ */
.nav-brand.brand-merged {
  gap: 0;
  align-items: center;        /* baseline-ish at typical font sizes */
  letter-spacing: -0.005em;
}
.nav-brand.brand-merged .nav-brand-logo {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
}
.nav-brand.brand-merged .nav-brand-logo .brand-svg {
  width: 1.05em;
  height: 1.05em;
  filter: none;
  animation: none;
  display: block;
  transform: translateY(0.04em);   /* nudge so the glyph sits on the baseline */
}
.nav-brand.brand-merged .brand-tail {
  margin-left: -0.04em;        /* tuck the U toward the P-mark */
  letter-spacing: inherit;
}

/* Subtle hover lift on the whole wordmark, no per-element flash */
.nav-brand.brand-merged:hover .brand-svg {
  filter: drop-shadow(0 0 8px oklch(0.78 0.16 184 / 0.45));
  animation: none;
  transition: filter var(--dur-3) var(--ease-out-quart);
}
@media (prefers-reduced-motion: reduce) {
  .nav-brand.brand-merged:hover .brand-svg { filter: none; }
}

/* Footer wordmark uses the same merged variant — slightly larger so the
   waveform mark sits proud of the footer copy line. */
.foot .nav-brand.brand-merged { font-size: 1.05rem; }

/* ═════════════════════════════════════════════════════════════════════
   Light-mode comprehensive overrides
   Many surface backgrounds use `oklch(1 0 0 / X)` (white at low alpha)
   which on a light page is invisible, and `oklch(0.10 250 / X)` (dark ink)
   which on a light page paints a dark box. Flip them here.
   ═════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .kicker {
  background: oklch(0 0 0 / 0.03);
  border-color: oklch(0 0 0 / 0.12);
  color: var(--text-2);
}
[data-theme="light"] .btn-ghost {
  background: oklch(0 0 0 / 0.03);
  border-color: oklch(0 0 0 / 0.12);
  color: var(--text-1);
}
[data-theme="light"] .btn-ghost:hover {
  background: oklch(0 0 0 / 0.06);
  border-color: oklch(0 0 0 / 0.18);
  color: oklch(0.40 0.13 184);
}
[data-theme="light"] .btn-primary {
  color: #051418;
}

/* KPI strip & section borders */
[data-theme="light"] .kpi-strip {
  background: oklch(0 0 0 / 0.012);
  border-top-color: oklch(0 0 0 / 0.08);
  border-bottom-color: oklch(0 0 0 / 0.08);
}
[data-theme="light"] .kpi { border-left-color: oklch(0 0 0 / 0.08); }
[data-theme="light"] .kpi-num .kpi-suffix { color: oklch(0.55 0.13 184); }

/* Section title accent — the cyan→mint shimmer is too pale on white bg.
   Re-anchor it to deeper hues so the gradient still reads. */
[data-theme="light"] .accent-grad,
[data-theme="light"] .hero-title .accent-grad {
  background: linear-gradient(135deg,
    oklch(0.42 0.14 184) 0%,
    oklch(0.55 0.16 184) 50%,
    oklch(0.42 0.14 184) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Comparison table — flip its dark glass card to a light card */
[data-theme="light"] .cmp-wrap {
  background: oklch(0.98 0.003 250 / 0.80);
  border-color: oklch(0 0 0 / 0.10);
  box-shadow: 0 8px 32px oklch(0 0 0 / 0.05);
}
[data-theme="light"] .cmp-table th,
[data-theme="light"] .cmp-table td {
  border-bottom-color: oklch(0 0 0 / 0.06);
}
[data-theme="light"] .cmp-table thead th {
  background: oklch(0 0 0 / 0.025);
  color: var(--text-3);
}
[data-theme="light"] .cmp-table thead th.is-pulse {
  background: oklch(0.78 0.16 184 / 0.14);
  color: oklch(0.35 0.14 184);
}
[data-theme="light"] .cmp-table tbody td.is-pulse {
  background: oklch(0.78 0.16 184 / 0.07);
}
[data-theme="light"] .cmp-table tbody tr:hover td,
[data-theme="light"] .cmp-table tbody tr:hover th {
  background: oklch(0 0 0 / 0.025);
}
[data-theme="light"] .cmp-table tbody tr:hover td.is-pulse {
  background: oklch(0.78 0.16 184 / 0.12);
}
[data-theme="light"] .cmp-yes { color: oklch(0.42 0.14 184); }
[data-theme="light"] .cmp-no { color: var(--text-4); }
[data-theme="light"] .cmp-partial { color: oklch(0.55 0.16 85); }

/* FAQ dividers */
[data-theme="light"] .faq-v3-item,
[data-theme="light"] .faq-v3-item:first-child {
  border-color: oklch(0 0 0 / 0.08);
}
[data-theme="light"] .faq-v3-q:hover { color: oklch(0.42 0.14 184); }
[data-theme="light"] .faq-v3-item.is-open .faq-v3-icon { border-color: oklch(0.42 0.14 184); }
[data-theme="light"] .faq-v3-item.is-open .faq-v3-icon svg { color: oklch(0.42 0.14 184); }

/* Final CTA halo — the dark halo is invisible on white */
[data-theme="light"] .final-cta::before {
  background: radial-gradient(ellipse 50% 60% at 50% 50%, oklch(0.78 0.16 184 / 0.20), transparent 70%);
}
[data-theme="light"] .dl-btn { color: #051418; }
[data-theme="light"] .dl-ring .ring-bg { stroke: oklch(0 0 0 / 0.20); }

/* Footer */
[data-theme="light"] .foot {
  border-top-color: oklch(0 0 0 / 0.08);
  background: oklch(0 0 0 / 0.012);
}
[data-theme="light"] .foot-bottom { border-top-color: oklch(0 0 0 / 0.08); }
[data-theme="light"] .foot-col h3 { color: var(--text-3); }
[data-theme="light"] .foot-col a:hover { color: oklch(0.42 0.14 184); }

/* Hero meta + checklist icons */
[data-theme="light"] .hero-meta-item svg { opacity: 0.6; }

/* Scroll progress bar — keep cyan but pick the darker stop in light mode */
[data-theme="light"] .scroll-progress {
  background: linear-gradient(135deg, oklch(0.45 0.14 184), oklch(0.55 0.16 184));
  box-shadow: 0 0 12px oklch(0.55 0.16 184 / 0.4);
}

/* ─── Long-language and RTL layout safeguards ────────────────────────
   Bigger CJK / Arabic glyphs shouldn't push the hero meta or KPI cells
   off the grid. */
.hero-title { word-break: keep-all; overflow-wrap: break-word; }
.hero-sub, .sec-sub, .feature-copy p, .faq-v3-a-inner { overflow-wrap: anywhere; }

/* RTL fixes — flip the SVG icons inside CTA buttons so the arrow points
   the right way for the reading direction. */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .hero-meta-item svg,
html[dir="rtl"] .feature-copy svg { transform: scaleX(-1); }
/* But NOT the checkmark in the meta row — that one is direction-agnostic */
html[dir="rtl"] .hero-meta-item svg { transform: none; }

/* RTL: KPI grid stays LTR by default since the numbers are LTR-tagged.
   Polylines/arrow heads in download buttons stay LTR (point downward). */
html[dir="rtl"] .kpi-num,
html[dir="rtl"] .fx-counter,
html[dir="rtl"] [data-version-display] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* CJK languages — guarantee the hero title doesn't collapse to one
   character per line on narrow screens with big clamp() font-size. */
html[lang="zh"] .hero-title,
html[lang="ja"] .hero-title,
html[lang="ko"] .hero-title { line-break: strict; }

/* ═════════════════════════════════════════════════════════════════════
   RTL — preserve centered layouts + keep KPI grid in source order
   shared.css applies `text-align: start` to h1/h2/h3/p when dir=rtl, which
   flips centered hero/CTA/section-head copy to right-aligned. Force center
   back for these layouts. Also keep the KPI grid in LTR order so the
   numbers read the same way in every language.
   ═════════════════════════════════════════════════════════════════════ */
html[dir="rtl"] .hero-v3,
html[dir="rtl"] .hero-v3 h1,
html[dir="rtl"] .hero-v3 p,
html[dir="rtl"] .hero-v3 [data-i18n],
html[dir="rtl"] .hero-v3 [data-i18n-html],
html[dir="rtl"] .hero-meta,
html[dir="rtl"] .hero-meta-item,
html[dir="rtl"] .hero-eyebrow-row,
html[dir="rtl"] .sec-head,
html[dir="rtl"] .sec-head .kicker,
html[dir="rtl"] .sec-head h2,
html[dir="rtl"] .sec-head p,
html[dir="rtl"] .sec-head [data-i18n],
html[dir="rtl"] .sec-head [data-i18n-html],
html[dir="rtl"] .final-cta,
html[dir="rtl"] .final-cta h2,
html[dir="rtl"] .final-cta p,
html[dir="rtl"] .final-cta [data-i18n],
html[dir="rtl"] .final-cta [data-i18n-html] {
  text-align: center;
}

/* Keep CTA rows centered (the flexbox is centered but flex-direction
   flips in RTL; lock it to keep button + ghost in the same visual order). */
html[dir="rtl"] .hero-cta-row { flex-direction: row; }

/* KPI strip — pin to LTR so numbers stay in source order (84+ · 3 · 9.2 · 15)
   regardless of language. Labels inside each cell still render RTL for Arabic. */
html[dir="rtl"] .kpi-grid { direction: ltr; }
html[dir="rtl"] .kpi-label { direction: rtl; text-align: left; unicode-bidi: isolate; }
html[dir="rtl"] .kpi-num   { direction: ltr; text-align: left; }
/* Logical border so the first KPI doesn't have a stray vertical line in RTL */
.kpi { text-align: start; border-inline-start: 1px solid var(--line-1); border-left: 0; padding-inline-start: var(--sp-5); padding-left: 0; }
.kpi:first-child { border-inline-start: 0; padding-inline-start: 0; }

/* Hero meta items — pin to LTR row so checkmark + label stay in order */
html[dir="rtl"] .hero-meta { flex-direction: row; }
html[dir="rtl"] .hero-meta-item { flex-direction: row; }

/* Final CTA button row — keep button centred (it's a single button) */
html[dir="rtl"] .final-cta .dl-btn { direction: ltr; }

/* ═════════════════════════════════════════════════════════════════════
   KPI borders + Arabic/CJK readability fixes
   ═════════════════════════════════════════════════════════════════════ */
/* Strengthen the divider between KPI cells (was --line-1 @ 6% white) */
.kpi {
  border-inline-start: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}
.kpi:first-child {
  border-inline-start: 0;
  border-left: 0;
}
html[dir="rtl"] .kpi-grid .kpi { border-left: 1px solid var(--line-2); border-right: 0; }
html[dir="rtl"] .kpi-grid .kpi:first-child { border-left: 0; }

[data-theme="light"] .kpi { border-inline-start-color: var(--line-3); border-left-color: var(--line-3); }
[data-theme="light"] html[dir="rtl"] .kpi-grid .kpi { border-left-color: var(--line-3); }

/* Arabic/CJK readability: kill letter-spacing (Arabic letters connect — adding
   tracking visually breaks them apart). Also disable uppercase since it's a
   no-op for non-Latin scripts and the engine still allocates space for it. */
html[lang="ar"] .kpi-label,
html[lang="ar"] .kicker,
html[lang="ar"] .feature-copy .kicker,
html[lang="ar"] .foot-col h3,
html[lang="ar"] .cmp-table thead th,
html[lang="ar"] .term-title,
html[lang="ar"] .dial-label,
html[lang="ar"] [data-i18n] {
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Instrument Sans', 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-weight: 500;
}

/* CJK languages — also reset uppercase + tracking on labels */
html[lang="zh"] .kpi-label, html[lang="zh"] .kicker, html[lang="zh"] .foot-col h3,
html[lang="ja"] .kpi-label, html[lang="ja"] .kicker, html[lang="ja"] .foot-col h3,
html[lang="ko"] .kpi-label, html[lang="ko"] .kicker, html[lang="ko"] .foot-col h3 {
  letter-spacing: 0;
  text-transform: none;
}

/* Hindi (Devanagari) — same treatment */
html[lang="hi"] .kpi-label,
html[lang="hi"] .kicker,
html[lang="hi"] .foot-col h3 {
  letter-spacing: 0;
  text-transform: none;
}

/* Make sure the .kpi-label still inherits a sensible font-size in Arabic
   (Space Mono fallback varies between systems and can render tiny). */
html[lang="ar"] .kpi-label,
html[lang="hi"] .kpi-label,
html[lang="zh"] .kpi-label,
html[lang="ja"] .kpi-label,
html[lang="ko"] .kpi-label {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.45;
}

/* ═════════════════════════════════════════════════════════════════════
   Non-Latin script vertical clearance
   Latin descenders (g, y, p) fit at line-height ~1.08, but Arabic letters
   (ع ج غ م ص), Devanagari conjuncts (Hindi), and some CJK glyphs need
   more vertical room or the bottom strokes get clipped.
   ═════════════════════════════════════════════════════════════════════ */
html[lang="ar"] .hero-title,
html[lang="hi"] .hero-title,
html[lang="ja"] .hero-title,
html[lang="zh"] .hero-title,
html[lang="ko"] .hero-title {
  line-height: 1.32;
  padding-bottom: 0.22em;
}

/* Feature row + section heading h3s — same treatment */
html[lang="ar"] .feature-copy h3,
html[lang="ar"] .sec-title,
html[lang="ar"] .sig-headline,
html[lang="hi"] .feature-copy h3,
html[lang="hi"] .sec-title,
html[lang="ja"] .feature-copy h3,
html[lang="ja"] .sec-title,
html[lang="zh"] .feature-copy h3,
html[lang="zh"] .sec-title,
html[lang="ko"] .feature-copy h3,
html[lang="ko"] .sec-title {
  line-height: 1.35;
  padding-bottom: 0.12em;
}

/* Final CTA h2 (with accent-grad span and <br>) */
html[lang="ar"] .final-cta h2,
html[lang="hi"] .final-cta h2,
html[lang="ja"] .final-cta h2,
html[lang="zh"] .final-cta h2,
html[lang="ko"] .final-cta h2 {
  line-height: 1.30;
  padding-bottom: 0.14em;
}

/* The accent-grad span uses background-clip: text — make sure its bounding
   box matches the line-height so the gradient doesn't crop the descender. */
html[lang="ar"] .accent-grad,
html[lang="ar"] .hero-title .accent-grad,
html[lang="hi"] .accent-grad,
html[lang="ja"] .accent-grad,
html[lang="zh"] .accent-grad,
html[lang="ko"] .accent-grad {
  line-height: inherit;
  padding-bottom: 0.12em;
}

/* tk-word-wrap from splitWords() — already has padding-bottom: 0.18em for
   Latin; bump for non-Latin since wrap clips with overflow:hidden */
html[lang="ar"] .hero-title .tk-word-wrap,
html[lang="hi"] .hero-title .tk-word-wrap,
html[lang="ja"] .hero-title .tk-word-wrap,
html[lang="zh"] .hero-title .tk-word-wrap,
html[lang="ko"] .hero-title .tk-word-wrap {
  padding-bottom: 0.30em;
}

/* ═════════════════════════════════════════════════════════════════════
   Hero/CTA accent-grad — non-Latin scripts
   `background-clip: text` on `display: inline-block` causes glyph descenders
   to clip when the inline-block box height < the glyph's actual extent.
   Arabic ط ج ع ص have deeper descenders than the canonical em-box assumes.
   Drop the gradient + inline-block for non-Latin; use solid mint color and
   inline display so the glyph follows the parent line metrics exactly.
   ═════════════════════════════════════════════════════════════════════ */
html[lang="ar"] .accent-grad,
html[lang="hi"] .accent-grad,
html[lang="ja"] .accent-grad,
html[lang="zh"] .accent-grad,
html[lang="ko"] .accent-grad,
html[lang="ar"] .hero-title .accent-grad,
html[lang="hi"] .hero-title .accent-grad,
html[lang="ja"] .hero-title .accent-grad,
html[lang="zh"] .hero-title .accent-grad,
html[lang="ko"] .hero-title .accent-grad {
  display: inline;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial;
  color: oklch(0.85 0.16 184);   /* solid mint — keeps brand emphasis without gradient clipping */
  padding: 0 !important;
  line-height: inherit;
  filter: drop-shadow(0 0 18px oklch(0.85 0.16 184 / 0.30));
}

/* And just to be sure the title has plenty of room for descenders */
html[lang="ar"] .hero-title {
  line-height: 1.5;
  padding-bottom: 0.4em;
}
html[lang="ar"] .final-cta h2 {
  line-height: 1.45;
  padding-bottom: 0.25em;
}

[data-theme="light"] html[lang="ar"] .accent-grad,
[data-theme="light"] html[lang="hi"] .accent-grad,
[data-theme="light"] html[lang="ja"] .accent-grad,
[data-theme="light"] html[lang="zh"] .accent-grad,
[data-theme="light"] html[lang="ko"] .accent-grad {
  color: oklch(0.48 0.14 184);
  filter: drop-shadow(0 0 6px oklch(0.55 0.16 184 / 0.20));
}

/* ═════════════════════════════════════════════════════════════════════
   KPI cells — center each cell's content horizontally
   Numbers and labels both center under each other; vertical dividers stay
   between cells. Same in every language including RTL.
   ═════════════════════════════════════════════════════════════════════ */
.kpi {
  text-align: center;
  padding-inline-start: 0;
  padding-inline-end: 0;
  padding: 0 var(--sp-3);
}
.kpi:first-child { padding-inline-start: 0; padding-left: 0; }
.kpi-num, .kpi-label { text-align: center; }

/* Override the earlier RTL rules that pinned these to text-align: left */
html[dir="rtl"] .kpi-num,
html[dir="rtl"] .kpi-label { text-align: center; }

/* Stronger dividers (in case they're still too faint in some themes) */
.kpi { border-inline-start: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.kpi:first-child { border-inline-start: 0; border-left: 0; }
html[dir="rtl"] .kpi-grid .kpi { border-left: 1px solid var(--line-2); border-right: 0; }
html[dir="rtl"] .kpi-grid .kpi:first-child { border-left: 0; }

/* ═════════════════════════════════════════════════════════════════════
   FPS Climb — signature animation in the center of the page
   The PULSE line draws in via stroke-dashoffset when section enters
   viewport. Counters tick up in parallel. Static fallback if JS off.
   ═════════════════════════════════════════════════════════════════════ */
.fps-climb {
  padding: var(--sp-10) 0;
  position: relative;
  z-index: var(--z-content);
}
.fps-climb .sec-head { margin-bottom: var(--sp-7); }
.fps-chart {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-4);
  background: oklch(0.10 0.006 250 / 0.55);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3);
  color: var(--text-1);
  overflow: hidden;
}
.fps-chart svg { width: 100%; height: auto; display: block; direction: ltr; }
/* SVG text-anchor="end" behaviour depends on inherited `direction`. In RTL pages
 * (Arabic, Hebrew) the anchor flips, causing the "PULSE · 247 FPS" label at
 * viewBox-x=780 to extend rightward past the 800-wide viewBox and get clipped.
 * Lock the chart SVG to LTR so coordinate space matches the data the labels
 * sit on. Same trick applied at the wrapping element so flex/RTL siblings
 * don't squish the chart from either side. */
html[dir="rtl"] .fps-chart, html[dir="rtl"] .fps-chart svg { direction: ltr; unicode-bidi: isolate; }

/* Line-draw animation — pre-set the dasharray to the path length and
   start at full offset (line invisible). The .is-visible class on the
   parent (added by IntersectionObserver via .fx-rise) triggers the
   stroke-dashoffset transition to 0, drawing the line in left → right. */
.fps-chart .fps-pulse {
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  transition: stroke-dashoffset 2.6s var(--ease-out-expo);
}
.fps-chart .fps-pulse-fill { opacity: 0; transition: opacity 0.8s ease-in 1.4s; }
.fps-chart .fps-pulse-label { opacity: 0; transition: opacity 0.6s ease-in 2.0s; }
.fps-chart .fps-end-dot   { opacity: 0; transform-origin: center; transition: opacity 0.4s ease 2.4s; }

.fx-rise.is-visible .fps-chart .fps-pulse,
.fps-chart.is-visible .fps-pulse,
.fx-rise.is-visible.fps-chart .fps-pulse {
  stroke-dashoffset: 0;
}
.fx-rise.is-visible .fps-chart .fps-pulse-fill,
.fx-rise.is-visible.fps-chart .fps-pulse-fill { opacity: 1; }
.fx-rise.is-visible .fps-chart .fps-pulse-label,
.fx-rise.is-visible.fps-chart .fps-pulse-label { opacity: 1; }
.fx-rise.is-visible .fps-chart .fps-end-dot,
.fx-rise.is-visible.fps-chart .fps-end-dot {
  opacity: 1;
  animation: fps-end-pulse 1.6s ease-in-out 2.4s infinite;
}
@keyframes fps-end-pulse {
  0%, 100% { r: 6; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.9)); }
  50%      { r: 8; filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), 1)); }
}

/* FPS stat trio under the chart */
.fps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  max-width: 800px;
  margin: var(--sp-7) auto 0;
}
@media (max-width: 720px) { .fps-stats { grid-template-columns: 1fr; gap: var(--sp-3); } }
.fps-stat {
  text-align: center;
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: oklch(0.10 0.006 250 / 0.40);
}
.fps-stat-num {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--c-500);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.fps-stat-label {
  font-family: 'Space Mono', 'Consolas', monospace;
  font-size: var(--tx-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Light theme overrides */
[data-theme="light"] .fps-chart {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .fps-stat {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .fps-stat-num { color: oklch(0.42 0.14 184); }
[data-theme="light"] .fps-chart .fps-pulse-label text { fill: oklch(0.42 0.14 184); }
[data-theme="light"] .fps-chart .fps-end-dot { fill: oklch(0.42 0.14 184); }

/* Reduced motion — show the line drawn fully, no fade-in animation */
@media (prefers-reduced-motion: reduce) {
  .fps-chart .fps-pulse { stroke-dashoffset: 0; transition: none; }
  .fps-chart .fps-pulse-fill,
  .fps-chart .fps-pulse-label,
  .fps-chart .fps-end-dot { opacity: 1; transition: none; }
  .fps-chart .fps-end-dot { animation: none; }
}