/* ============================================================
   GROWXCEL — Terminal-inspired design system
   ============================================================ */

:root {
  --brand:       #082f73;
  --brand-mid:   #1a4fa0;
  --accent:      #4a7fd4;
  --black:       #080808;
  --dark:        #0e0e0e;
  --dark-2:      #141414;
  --dark-3:      #1c1c1c;
  --white:       #ffffff;
  --off-white:   #f3f2ef;
  --light:       #e8e8e3;
  --text-dark:   #111111;
  --text-muted:  #888888;
  --border-dark: rgba(255,255,255,0.09);
  --border-dim:  rgba(255,255,255,0.05);
  --border-light:rgba(0,0,0,0.09);
  font-family: "Inter", Arial, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  background: var(--black);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--black);
  color: var(--text-dark);
}

a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }

/* ── Canvas ─────────────────────────────────────────────── */
#signal-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

main, footer, .site-header {
  position: relative;
  z-index: 2;
}

/* ── Navigation ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 80px;
  padding: 0 clamp(20px, 4vw, 64px);
  background: rgba(8,8,8,0.92);
  border-bottom: 1px solid var(--border-dark);
  backdrop-filter: blur(20px) saturate(1.4);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: white;
}

.brand strong {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.1em;
}

nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 2.5vw, 44px);
}

nav a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  transition: color 160ms;
}

nav a:hover { color: var(--white); }

.header-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--white);
  flex-shrink: 0;
  transition: opacity 160ms;
}

.header-cta:hover { opacity: 0.82; }

/* ── Buttons ─────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 28px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 180ms, background 180ms, border-color 180ms;
  cursor: pointer;
}

.button.primary {
  color: var(--white);
  background: var(--brand);
  border: 1px solid var(--brand);
}

.button.primary:hover { background: var(--brand-mid); border-color: var(--brand-mid); }

.button.ghost {
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
}

.button.ghost:hover { border-color: rgba(255,255,255,0.56); }

/* ── Section base ─────────────────────────────────────────── */
section {
  position: relative;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 80px);
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

h2 {
  max-width: 1000px;
  margin-bottom: 20px;
  font-size: clamp(2rem, 3.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 900;
}

h3 {
  margin-bottom: 10px;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.24;
  font-weight: 800;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background: var(--black);
  overflow: hidden;
}

/* Fine dot grid */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Brand glow — centered, oversized so gradient fully fades before box edge */
.hero::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 130%;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(8,47,115,0.38) 0%,
    rgba(8,47,115,0.18) 30%,
    rgba(8,47,115,0.05) 55%,
    transparent 75%);
  pointer-events: none;
}

/* Bottom blend — only covers the very bottom edge, below the stats strip */
.hero-bottom-blend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, var(--black) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── HERO-LOCAL LOGO WATERMARK — absolute, scrolls with hero */
.hero-logo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

#hlb-ring-hero {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  opacity: 0; /* JS takes over */
  will-change: transform, opacity;
  mix-blend-mode: screen;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── GLOBAL LOGO WATERMARK — fixed behind every section ─── */
#hlb-ring-1 {
  position: fixed;
  top: 50vh;
  left: 50vw;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  opacity: 0; /* JS takes over */
  will-change: transform, opacity;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}

@media (max-width: 820px) {
  #hlb-ring-1 { display: none !important; }

  #hlb-ring-hero {
    width: 340px;
    height: 340px;
    top: 28%;
  }
}

.hero-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
  align-content: center;
  padding: 104px clamp(28px, 6vw, 96px) clamp(56px, 6vw, 88px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
}

.hero-title {
  margin: 0 0 22px;
  font-size: clamp(3.15rem, 5.6vw, 6.6rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--white);
}

.hero-line {
  display: block;
  overflow: hidden;
}

.hero-word {
  display: inline-block;
}

.hero-word.accent {
  color: var(--accent);
}

.hero-sub {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-text {
  max-width: 460px;
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  line-height: 1.78;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero product panel */
.hero-product {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  justify-self: center;
}

.product-shell {
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  background: var(--dark-2);
  overflow: hidden;
}

.product-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-dark);
}

.ptb-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.ptb-tag {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.product-metrics {
  display: grid;
}

.pm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-dim);
}

.pm-row:last-child { border-bottom: 0; }

.pml {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 5px;
}

.pmv {
  display: block;
  font-size: clamp(1.12rem, 1.8vw, 1.38rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  margin-bottom: 3px;
}

.pms {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  color: rgba(255,255,255,0.36);
}

.pm-bar {
  flex-shrink: 0;
  width: 80px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.pm-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(74,127,212,0.3));
}

.product-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

.pf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ecf6c;
  box-shadow: 0 0 8px rgba(62,207,108,0.6);
  animation: pulse-dot 2s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Hero stats strip */
.hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-dark);
}

.stat-item {
  padding: clamp(16px, 2vw, 28px) clamp(20px, 3.5vw, 52px);
  border-right: 1px solid var(--border-dark);
}

.stat-item:last-child { border-right: 0; }

.stat-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 8px;
}

.stat-num {
  font-size: clamp(1.9rem, 3vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.stat-sup {
  font-size: clamp(1.1rem, 2vw, 2.2rem);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.stat-item p {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.36);
}

/* ── Ticker Strip ─────────────────────────────────────────── */
.ticker-strip {
  overflow: hidden;
  white-space: nowrap;
  background: var(--brand);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0;
  /* Purely decorative infinite scroll — force LTR so the flex item order
     matches the physical translateX() direction in the keyframe animation,
     same fix as .cn-logo-marquee. translateX() never flips with RTL, but
     flex item order does, and that mismatch left a blank gap mid-loop. */
  direction: ltr;
}

.ticker-inner {
  display: inline-flex;
  align-items: center;
  animation: ticker-scroll 30s linear infinite;
}

.ticker-inner span {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 13px 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.ticker-inner span::after {
  content: "·";
  display: inline-block;
  margin: 0 28px;
  color: rgba(255,255,255,0.28);
  font-size: 1rem;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Proof Band ───────────────────────────────────────────── */
.proof-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
  background: var(--off-white);
  border-bottom: 1px solid var(--border-light);
}

.proof-pill {
  padding: clamp(32px, 4.5vw, 58px) clamp(24px, 3.5vw, 48px);
  border-right: 1px solid var(--border-light);
}

.proof-pill:last-child { border-right: 0; }

.proof-num {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.proof-pill strong {
  display: block;
  font-size: clamp(1.65rem, 3vw, 3.25rem);
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 4px;
}

.proof-pill p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── System Intro ─────────────────────────────────────────── */
.system-intro {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(80px, 0.18fr) 1fr minmax(240px, 0.44fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  background: var(--black);
  color: var(--white);
}

/* Fine grid texture */
.system-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-dim) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.system-index {
  display: grid;
  gap: 12px;
  color: rgba(255,255,255,0.18);
  font-size: clamp(0.95rem, 1.8vw, 2rem);
  font-weight: 900;
  position: relative;
  z-index: 1;
}

.system-index span {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.system-statement {
  position: relative;
  z-index: 1;
}

.system-statement p {
  margin-bottom: 14px;
  color: rgba(255,255,255,0.44);
  font-size: clamp(0.98rem, 1.35vw, 1.35rem);
}

.system-statement h2 {
  max-width: none;
  color: var(--white);
  font-size: clamp(2.8rem, 4.8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.026em;
}

.system-statement strong {
  display: block;
  margin-top: 28px;
  color: var(--accent);
  font-size: clamp(1.15rem, 2.25vw, 2.55rem);
  letter-spacing: 0.14em;
  font-weight: 900;
}

.system-points {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.system-points li {
  padding: 14px 0;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: clamp(0.86rem, 1.1vw, 1rem);
  line-height: 1.6;
  position: relative;
}

/* No ::before dot — SVG .li-check handles the visual marker */
.system-points li::before {
  content: none;
}

/* ── Difference Cards — Aceternity-style animated gradient border ── */
.diff-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

/* Outer wrapper — carries the animated gradient as a 2px "border" */
.diff-card-border {
  position: relative;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, #FFD600, #005E96, #4a7fd4, #001C43, #FFD600);
  background-size: 300% 300%;
  animation: diff-gradient 5s ease infinite;
  /* Ensure children fill the wrapper so gradient only shows as border ring */
  display: flex;
  flex-direction: column;
}

.diff-card-border > * {
  flex: 1;
  min-height: 0;
}

/* Soft ambient glow — kept but subtle, doesn't bleed between stacked cards */
.diff-card-border::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(255,214,0,0.15), rgba(0,94,150,0.12), rgba(74,127,212,0.10));
  background-size: 300% 300%;
  animation: diff-gradient 5s ease infinite;
  filter: blur(6px);
  z-index: -1;
  opacity: 0.50;
}

/* Inner card — white background fills the wrapper leaving only the 2px gradient visible */
.diff-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes diff-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.diff-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #001C43;
}

.diff-card p {
  font-size: 0.9rem;
  color: rgba(0,28,67,0.62);
  line-height: 1.65;
  margin: 0;
}

/* ── Method Steps ─────────────────────────────────────────── */
.method-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 860px;
  margin: 48px auto 0;
  padding: 0 24px;
}

.method-step {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ms-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: rgba(0,94,150,0.08);
  border-radius: 4px;
  padding: 3px 8px;
  align-self: flex-start;
}

.method-step strong {
  font-size: 1rem;
  font-weight: 800;
  color: #001C43;
  line-height: 1.25;
}

.method-step p {
  font-size: 0.88rem;
  color: rgba(0,28,67,0.60);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 600px) {
  .method-steps {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
}

/* ── Platform ─────────────────────────────────────────────── */
.platform {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(380px, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  background: var(--off-white);
}

.platform .section-copy h2 { color: var(--text-dark); }

.section-copy.narrow { max-width: 940px; }

.section-copy p { color: var(--text-muted); line-height: 1.72; }

.system-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
}

.system-board article {
  padding: 30px;
  background: var(--white);
  min-height: 220px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  transition: background 200ms;
}

.system-board article:hover { background: #fafaf8; }
.system-board article:nth-child(2n) { border-right: 0; }
.system-board article:nth-child(3),
.system-board article:nth-child(4) { border-bottom: 0; }

.system-board span {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 44px;
  text-transform: uppercase;
}

.system-board h3 { color: var(--text-dark); }
.system-board p  { color: var(--text-muted); font-size: 0.9rem; line-height: 1.68; }

/* mini visuals */
.mini-visual {
  position: relative;
  height: 90px;
  margin: -14px 0 20px;
  border-radius: 10px;
  background: var(--off-white);
  overflow: hidden;
}

.mini-visual i { position: absolute; display: block; }

.cost-map i {
  width: 24px; height: 24px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 20px rgba(8,47,115,0.08);
}
.cost-map i:nth-child(1) { left: 14px; top: 14px; }
.cost-map i:nth-child(2) { left: 72px; top: 22px; }
.cost-map i:nth-child(3) { left: 44px; top: 54px; }
.cost-map i:nth-child(4) {
  left: 32px; top: 40px;
  width: 60px; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--brand));
}

.pricing-curve i {
  bottom: 14px; width: 14px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}
.pricing-curve i:nth-child(1) { left: 18px; height: 28px; }
.pricing-curve i:nth-child(2) { left: 44px; height: 46px; }
.pricing-curve i:nth-child(3) { left: 70px; height: 64px; }

.erp-bridge i {
  top: 22px; width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--white);
}
.erp-bridge i:nth-child(1) { left: 14px; }
.erp-bridge i:nth-child(2) { right: 14px; }
.erp-bridge i:nth-child(3) {
  left: 52px; right: 52px; top: 40px;
  width: auto; height: 3px;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.report-screen i {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.report-screen i:nth-child(1) { left: 18px; top: 20px; width: 70%; height: 6px; }
.report-screen i:nth-child(2) { left: 18px; top: 40px; width: 48%; height: 6px; }
.report-screen i:nth-child(3) { left: 18px; top: 60px; width: 60%; height: 6px; }

/* ── Services ─────────────────────────────────────────────── */
.services { background: var(--white); }

.services .section-copy h2 { color: var(--text-dark); }
.services .section-copy p  { color: var(--text-muted); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 64px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--border-light);
}

.service-grid article {
  padding: 32px;
  background: var(--white);
  min-height: 270px;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  transition: background 200ms;
}

.service-grid article:hover { background: #fafaf8; }
.service-grid article:nth-child(3n) { border-right: 0; }
.service-grid article:nth-child(4),
.service-grid article:nth-child(5),
.service-grid article:nth-child(6) { border-bottom: 0; }

.service-grid b {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 48px;
}

.service-grid h3 {
  color: var(--text-dark);
  font-size: clamp(1rem, 1.12vw, 1.1rem);
  line-height: 1.25;
}
.service-grid p  { color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; }

/* service visuals */
.service-visual {
  position: relative;
  height: 80px;
  margin: 0 0 22px;
  border-radius: 10px;
  background: var(--off-white);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.service-visual i { position: absolute; display: block; }

.sv-bars i {
  bottom: 14px; width: 11%;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}
.sv-bars i:nth-child(1) { left: 10%; height: 30px; }
.sv-bars i:nth-child(2) { left: 28%; height: 50px; }
.sv-bars i:nth-child(3) { left: 46%; height: 36px; }
.sv-bars i:nth-child(4) { left: 64%; height: 62px; }
.sv-bars i:nth-child(5) { left: 82%; height: 44px; }

.sv-flow i {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(74,127,212,0.4);
}
.sv-flow i:nth-child(1) { left: 14px; top: 27px; }
.sv-flow i:nth-child(2) { left: 62px; top: 14px; }
.sv-flow i:nth-child(3) { left: 110px; top: 38px; }
.sv-flow i:nth-child(4) {
  left: 40px; top: 40px;
  width: 90px; height: 3px;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.sv-report i {
  left: 16px; height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.sv-report i:nth-child(1) { top: 18px; width: 70%; }
.sv-report i:nth-child(2) { top: 36px; width: 48%; }
.sv-report i:nth-child(3) { top: 54px; width: 62%; }
.sv-report i:nth-child(4) {
  left: auto; right: 14px; top: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 72%, rgba(8,47,115,0.1) 72% 100%);
}

.sv-ledger i {
  left: 16px; right: 16px;
  height: 8px; border-radius: 999px;
  background: rgba(8,47,115,0.1);
}
.sv-ledger i:nth-child(1) { top: 22px; }
.sv-ledger i:nth-child(2) { top: 42px; width: 55%; right: auto; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.sv-ledger i:nth-child(3) { top: 62px; width: 72%; right: auto; }

.sv-budget i {
  bottom: 14px; width: 14px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
  border-radius: 4px 4px 2px 2px;
}
.sv-budget i:nth-child(1) { left: 18px; height: 22px; }
.sv-budget i:nth-child(2) { left: 44px; height: 38px; }
.sv-budget i:nth-child(3) { left: 70px; height: 54px; }
.sv-budget i:nth-child(4) { left: 96px; height: 70px; }

.sv-erp i {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--white);
  border: 1px solid var(--border-light);
}
.sv-erp i:nth-child(1) { left: 18px; top: 18px; }
.sv-erp i:nth-child(2) { right: 18px; top: 18px; }
.sv-erp i:nth-child(3) { left: 50%; top: 48px; transform: translateX(-50%); }
.sv-erp i:nth-child(4) {
  left: 36px; right: 36px; top: 36px;
  width: auto; height: 3px;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* ── Impact Lab ───────────────────────────────────────────── */
.impact-lab {
  background: var(--dark);
  color: var(--white);
}

.impact-lab .section-copy h2 { color: var(--white); }
.impact-lab .section-copy p  { color: rgba(255,255,255,0.5); }

.impact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 0.75fr;
  gap: 0;
  margin-top: 64px;
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  overflow: hidden;
  background: var(--border-dark);
}

.impact-card {
  padding: 28px;
  background: var(--dark-2);
  min-height: 280px;
  border-right: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

.impact-card:nth-child(3n) { border-right: 0; }
.impact-card:last-child, .impact-card.wide { border-bottom: 0; }
.impact-card.wide { grid-row: span 2; }

.impact-card h3 {
  color: var(--white);
  margin-top: 20px;
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  line-height: 1.25;
}

.impact-card p {
  color: rgba(255,255,255,0.5);
  font-size: 0.88rem;
  line-height: 1.68;
}

.impact-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.36);
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  align-items: stretch;
  gap: 0;
}

.ba-panel {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.94);
  color: var(--text-dark);
}

.ba-panel strong {
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  font-weight: 900;
  line-height: 1.05;
}

.ba-panel small {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.5;
}

.ba-panel.danger { box-shadow: inset 0 0 0 1px rgba(220,60,60,0.12); }
.ba-panel.success { box-shadow: inset 0 0 0 1px rgba(74,127,212,0.2); }

.ba-arrow {
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.1), var(--accent));
  position: relative;
}

.ba-arrow::after {
  content: "";
  display: block;
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

.leak-chart, .gain-chart {
  height: 140px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--off-white);
}

.leak-chart i, .gain-chart i {
  flex: 1;
  border-radius: 999px 999px 4px 4px;
}

.leak-chart i { background: linear-gradient(180deg, #ff6060, #8a1e1e); }
.leak-chart i:nth-child(1) { height: 70%; }
.leak-chart i:nth-child(2) { height: 36%; }
.leak-chart i:nth-child(3) { height: 82%; }
.leak-chart i:nth-child(4) { height: 50%; }

.gain-chart i { background: linear-gradient(180deg, var(--accent), var(--brand)); }
.gain-chart i:nth-child(1) { height: 40%; }
.gain-chart i:nth-child(2) { height: 56%; }
.gain-chart i:nth-child(3) { height: 74%; }
.gain-chart i:nth-child(4) { height: 90%; }

/* Dial */
.dial {
  --angle: calc(var(--p) * 3.6deg);
  width: min(160px, 55vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 var(--angle), rgba(255,255,255,0.08) var(--angle) 360deg);
}

.dial::before {
  content: "";
  position: absolute;
  width: min(118px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dark-2);
}

.dial span {
  position: relative;
  color: var(--white);
  font-size: 1.9rem;
  font-weight: 900;
}

/* Node map / decision stack */
.node-map, .decision-stack {
  position: relative;
  height: 140px;
  border-radius: 10px;
  background:
    linear-gradient(var(--border-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-dim) 1px, transparent 1px),
    rgba(255,255,255,0.03);
  background-size: 24px 24px;
  overflow: hidden;
}

.node-map i, .decision-stack i { position: absolute; display: block; }

.node-map i {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 20px rgba(74,127,212,0.4);
}
.node-map i:nth-child(1) { left: 18px; top: 60px; }
.node-map i:nth-child(2) { left: 70px; top: 26px; }
.node-map i:nth-child(3) { right: 36px; top: 62px; }
.node-map i:nth-child(4) { left: 90px; bottom: 24px; }
.node-map i:nth-child(5) {
  left: 42px; right: 50px; top: 72px;
  width: auto; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.18));
}

.decision-stack i {
  left: 20px; right: 20px;
  height: 30px; border-radius: 10px;
  background: rgba(255,255,255,0.88);
}
.decision-stack i:nth-child(1) { top: 22px; }
.decision-stack i:nth-child(2) { top: 62px; right: 48px; }
.decision-stack i:nth-child(3) {
  top: 100px; right: 76px;
  background: linear-gradient(90deg, var(--accent), var(--brand-mid));
}

/* ── Clients ──────────────────────────────────────────────── */
.clients {
  min-height: auto;
  padding: clamp(80px, 10vw, 130px) clamp(20px, 5vw, 80px);
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}

/* ── orbit layout ── */
.cn-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 580px;
  padding: 0;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.cn-copy {
  max-width: 480px;
  position: relative;
  z-index: 2;
}

.cn-copy h2 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 16px;
}

.cn-copy p {
  color: rgba(255,255,255,0.48);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 40px;
}

.cn-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.cn-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cn-stat strong {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -0.02em;
}

.cn-stat span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

/* ── orbit ── */
.cn-orbit {
  position: relative;
  width: 540px;
  height: 540px;
  flex-shrink: 0;
  justify-self: center;
  /* Purely decorative — force LTR so left/top percentage positioning and
     rotate()/translateX() math for the center badge and orbiting nodes
     stays identical to the English layout regardless of page direction. */
  direction: ltr;
}

.cn-orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mid) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--white);
  z-index: 10;
  box-shadow: 0 0 0 8px rgba(0,94,150,0.15), 0 0 0 16px rgba(0,94,150,0.07);
}

.cn-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.12);
}

.cn-ring-1 {
  width: 160px; height: 160px;
  margin: -80px 0 0 -80px;
}

.cn-ring-2 {
  width: 310px; height: 310px;
  margin: -155px 0 0 -155px;
}

.cn-ring-3 {
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
}

.cn-node-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.cn-node {
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(255,255,255,0.18);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,0.35);
  flex-shrink: 0;
}

.cn-node img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  display: block;
}

.cn-logo-marquee {
  grid-column: 1 / -1;
  margin-top: 48px;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  /* Purely decorative infinite scroll — force LTR so the flex item order
     matches the physical translateX() direction in the keyframe animation.
     translateX() never flips with RTL, but flex item order does, and that
     mismatch is what left blank gaps mid-loop under dir="rtl". */
  direction: ltr;
}

.cn-logo-marquee .cn-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 18px;
  animation: cn-marquee 60s linear infinite;
}

.cn-logo-marquee:hover .cn-logo-track {
  animation-play-state: paused;
}

.cn-logo-chip {
  flex-shrink: 0;
  width: 128px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cn-logo-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

.cn-logo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.25s ease;
}

.cn-logo-chip:hover img {
  filter: grayscale(0) opacity(1);
}

@keyframes cn-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .cn-wrap {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 60px;
  }
  .cn-logo-marquee {
    margin-top: 32px;
  }
  .cn-logo-marquee .cn-logo-track {
    gap: 12px;
    animation-duration: 40s;
  }
  .cn-logo-chip {
    width: 96px;
    height: 72px;
    border-radius: 10px;
  }
  .cn-logo-chip img {
    padding: 12px;
  }
  .cn-orbit {
    width: 440px;
    height: 440px;
    margin: 0 auto;
    justify-self: center;
  }
  .cn-ring-1 { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .cn-ring-2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .cn-ring-3 { width: 350px; height: 350px; margin: -175px 0 0 -175px; }
}

@media (max-width: 560px) {
  .cn-orbit {
    width: 100%;
    height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .cn-orbit::-webkit-scrollbar { display: none; }
  .cn-orbit-center {
    position: static;
    transform: none;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }
  .cn-ring { display: contents; }
  .cn-node-wrap {
    position: static;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    transform: none !important;
    scroll-snap-align: start;
  }
  .cn-node {
    position: static;
    transform: none;
    width: 52px;
    height: 52px;
  }
  .cn-node img { padding: 4px; }
}

/* ── Method ───────────────────────────────────────────────── */
.method { background: var(--off-white); }

.method .section-copy h2 { color: var(--text-dark); }

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--border-light);
}

.timeline article {
  padding: 28px;
  background: var(--white);
  min-height: 260px;
  border-right: 1px solid var(--border-light);
  transition: background 200ms;
}

.timeline article:last-child { border-right: 0; }
.timeline article:hover { background: #fafaf8; }

.timeline b {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}

.timeline p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.step-visual {
  position: relative;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: var(--off-white);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.step-visual i { position: absolute; display: block; }

.step-visual.scan i { border-radius: 999px; }
.step-visual.scan i:nth-child(1) {
  left: 20px; top: 22px;
  width: 52px; height: 52px;
  border: 3px solid var(--brand);
  background: transparent;
}
.step-visual.scan i:nth-child(2) {
  left: 62px; top: 62px;
  width: 30px; height: 3px;
  transform: rotate(42deg);
  background: var(--brand);
}
.step-visual.scan i:nth-child(3) {
  right: 20px; top: 26px;
  width: 52px; height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  box-shadow: 0 18px 0 rgba(8,47,115,0.14), 0 36px 0 rgba(8,47,115,0.08);
}

.step-visual.blueprint i {
  width: 38px; height: 28px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border-light);
}
.step-visual.blueprint i:nth-child(1) { left: 18px; top: 20px; }
.step-visual.blueprint i:nth-child(2) { right: 18px; top: 20px; }
.step-visual.blueprint i:nth-child(3) {
  left: 52px; right: 52px; top: 60px;
  width: auto; height: 4px; border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.step-visual.deploy i {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}
.step-visual.deploy i:nth-child(1) { left: 22px; top: 36px; }
.step-visual.deploy i:nth-child(2) { left: 50%; top: 36px; transform: translateX(-50%); }
.step-visual.deploy i:nth-child(3) { right: 22px; top: 36px; }

.step-visual.scale i {
  bottom: 16px; width: 14px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}
.step-visual.scale i:nth-child(1) { left: 26px; height: 28px; }
.step-visual.scale i:nth-child(2) { left: 56px; height: 46px; }
.step-visual.scale i:nth-child(3) { left: 86px; height: 66px; }

/* ── Founder ──────────────────────────────────────────────── */
.founder {
  display: grid;
  grid-template-columns: minmax(280px, 0.52fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
  background: var(--white);
}

.portrait-wrap {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-copy h2 { color: var(--text-dark); }
.founder-copy p  { color: var(--text-muted); line-height: 1.72; max-width: 560px; }

.linkedin-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 22px;
  padding: 0 18px 0 12px;
  border: 1px solid rgba(8, 47, 115, 0.16);
  border-radius: 999px;
  color: var(--brand);
  background: var(--white);
  box-shadow: 0 16px 48px rgba(8, 47, 115, 0.08);
  font-size: 0.88rem;
  font-weight: 900;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.linkedin-button:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 155, 255, 0.48);
  box-shadow: 0 22px 58px rgba(8, 47, 115, 0.14);
}

.linkedin-button span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--white);
  background: #0a66c2;
  font-weight: 950;
  font-size: 0.94rem;
}

.founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.founder-links .linkedin-button,
.founder-links .linktree-button {
  margin-top: 22px;
}

.linktree-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px 0 12px;
  border: 1px solid rgba(8, 47, 115, 0.16);
  border-radius: 999px;
  color: var(--brand);
  background: var(--white);
  box-shadow: 0 16px 48px rgba(8, 47, 115, 0.08);
  font-size: 0.88rem;
  font-weight: 900;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.linktree-button:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 155, 255, 0.48);
  box-shadow: 0 22px 58px rgba(8, 47, 115, 0.14);
}

.linktree-button span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #43e660;
  color: #0a2e0f;
}

.linktree-button span svg { width: 15px; height: 15px; }

.credibility-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 680px;
  margin-top: 26px;
}

.credibility-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--brand);
  background: linear-gradient(180deg, var(--white), var(--bg-soft));
  font-size: 0.78rem;
  font-weight: 800;
}

.founder-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 36px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}

.founder-stats div {
  padding: 20px 24px;
  border-right: 1px solid var(--border-light);
}

/* Even columns have no right border */
.founder-stats div:nth-child(even) { border-right: 0; }
/* Bottom row gets a top border */
.founder-stats div:nth-child(n+3) { border-top: 1px solid var(--border-light); }
/* Legacy last-child rule no longer needed */
.founder-stats div:last-child { border-right: 0; }

.founder-stats strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 6px;
}

.founder-stats span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Contact ──────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(340px, 1.2fr);
  align-items: start;
  gap: clamp(36px, 5vw, 72px);
  background: var(--black);
  color: var(--white);
}

.contact-left h2 { color: var(--white); }
.contact-left p  { color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 440px; }

/* Contact info block (replaces card on left side) */
.contact-info-block {
  display: grid;
  gap: 0;
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 28px;
}

.contact-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-dark);
  font-size: 0.86rem;
}

.contact-info-row:last-child { border-bottom: 0; }

.contact-info-row a {
  color: rgba(255,255,255,0.72);
  font-weight: 700;
  transition: color 160ms;
}

.contact-info-row a:hover { color: var(--accent); }

/* Tappable phone links — inherit look, no underline */
a.ct-phone {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.contact-info-row span:last-child {
  color: rgba(255,255,255,0.56);
  text-align: right;
}

.ci-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-card {
  display: grid;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dark-2);
}

.contact-link {
  display: block;
  padding: 18px 22px;
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--white);
  border-bottom: 1px solid var(--border-dark);
  transition: color 160ms;
}

.contact-link:hover { color: var(--accent); }

.contact-divider {
  height: 1px;
  background: var(--border-dark);
}

.contact-detail {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-dark);
  font-size: 0.84rem;
}

.contact-detail:last-child { border-bottom: 0; }

.cd-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: 2px;
}

.contact-detail span:last-child {
  color: rgba(255,255,255,0.56);
  text-align: right;
}

/* ── Contact Form ─────────────────────────────────────────── */
.contact-form-wrap {
  position: relative;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: 28px;
  background: var(--dark-2);
  border: 1px solid var(--border-dark);
  border-radius: 14px;
}

.cf-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cf-field label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.44);
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--dark-3);
  border: 1px solid var(--border-dark);
  border-radius: 7px;
  color: var(--white);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  outline: none;
  transition: border-color 180ms, background 180ms;
  appearance: none;
  -webkit-appearance: none;
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: rgba(255,255,255,0.2);
}

.cf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.cf-field select option {
  background: var(--dark-3);
  color: var(--white);
}

.cf-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: var(--accent);
  background: rgba(74, 127, 212, 0.06);
}

.cf-field input.error,
.cf-field select.error,
.cf-field textarea.error {
  border-color: #ef4444;
}

.cf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border: none;
  border-radius: 7px;
  background: var(--brand);
  color: var(--white);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms, transform 120ms;
  margin-top: 4px;
}

.cf-submit:hover { background: var(--brand-mid); }
.cf-submit:active { transform: scale(0.98); }

.cf-submit-arrow {
  font-size: 1rem;
  transition: transform 180ms;
}

.cf-submit:hover .cf-submit-arrow { transform: translateX(4px); }

/* Success state */
.cf-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 28px;
  background: var(--dark-2);
  border: 1px solid rgba(62,207,108,0.2);
  border-radius: 14px;
}

.cf-success.visible {
  display: flex;
}

.cf-success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(62,207,108,0.12);
  color: #3ecf6c;
  font-size: 1.4rem;
  font-weight: 900;
  border: 1px solid rgba(62,207,108,0.3);
}

.cf-success h3 {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0;
}

.cf-success p {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
  max-width: 400px;
}

/* ── Vision 2030 Alignment Section (Saudi Arabia page) ───── */
.v30-section {
  padding: clamp(80px,10vw,130px) clamp(20px,5vw,80px);
  background: #f5f6f8;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.v30-header { max-width: 680px; }

.v30-badge {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid rgba(22,79,164,0.28);
  background: rgba(22,79,164,0.06);
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #164fa4;
  margin-bottom: 22px;
}

.v30-header h2 {
  font-size: clamp(2rem,4vw,3.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #001c43;
  margin-bottom: 18px;
}

.v30-header p {
  font-size: clamp(15px,1.2vw,17px);
  color: rgba(0,28,67,0.64);
  line-height: 1.75;
}

.v30-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,28,67,0.14);
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
}

.v30-row {
  display: grid;
  grid-template-columns: 220px 56px 1fr;
  align-items: center;
  padding: 32px 36px;
  border-bottom: 1px solid rgba(0,28,67,0.12);
  transition: background 200ms;
}

.v30-row:last-child { border-bottom: 0; }
.v30-row:hover { background: #f0f6ff; }

.v30-pillar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 20px;
  border-right: 1px solid rgba(0,28,67,0.12);
}

.v30-pillar-tag {
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #164fa4;
}

.v30-pillar strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: #001c43;
  line-height: 1.3;
}

.v30-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(22,79,164,0.42);
  font-size: 1.1rem;
}

.v30-response { padding-left: 4px; }

.v30-response h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #001c43;
  margin: 0 0 8px;
  line-height: 1.3;
}

.v30-response p {
  font-size: 0.84rem;
  color: rgba(0,28,67,0.62);
  line-height: 1.75;
  margin: 0;
  max-width: 560px;
}

@media (max-width: 820px) {
  .v30-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 24px;
  }
  .v30-pillar {
    border-right: none;
    border-bottom: 1px solid rgba(0,28,67,0.12);
    padding-right: 0;
    padding-bottom: 14px;
  }
  .v30-sep { display: none; }
}

/* ── Progressive Form ─────────────────────────────────────── */
.pf-form {
  position: relative;
  background: var(--dark-2);
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  min-height: 440px;
}

.pf-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.pf-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.pf-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 20%;
}

.pf-counter {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* Steps */
.pf-step {
  display: none;
  flex-direction: column;
  flex: 1;
  animation: pfSlideIn 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.pf-step.active { display: flex; }

@keyframes pfSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.pf-step.going-back {
  animation-name: pfSlideInBack;
}

@keyframes pfSlideInBack {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.pf-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.pf-question {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 6px;
  line-height: 1.3;
}

.pf-hint {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  margin: 0 0 20px;
  line-height: 1.6;
}

/* Chip groups */
.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.pf-chips--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pf-chips--col {
  flex-direction: column;
  flex-wrap: nowrap;
}

.pf-chip {
  padding: 11px 16px;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.62);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
  text-align: left;
  line-height: 1.3;
}

.pf-chip:hover {
  border-color: rgba(0,94,150,0.6);
  color: var(--white);
}

.pf-chip.selected {
  border-color: var(--accent);
  background: rgba(0,94,150,0.2);
  color: var(--white);
  font-weight: 700;
}

/* Text field step */
.pf-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

/* Nav */
.pf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
}

.pf-back {
  background: none;
  border: none;
  color: rgba(255,255,255,0.32);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms;
  padding: 0;
  letter-spacing: 0.02em;
}

.pf-back:hover { color: rgba(255,255,255,0.65); }
.pf-back.hidden { visibility: hidden; pointer-events: none; }

.pf-next {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: none;
  border-radius: 7px;
  background: var(--brand);
  color: var(--white);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, opacity 160ms;
}

.pf-next:hover:not(:disabled) { background: var(--brand-mid); }
.pf-next:disabled { opacity: 0.35; cursor: not-allowed; }

/* WhatsApp link in success */
.pf-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 12px 20px;
  border: 1px solid rgba(37,211,102,0.3);
  border-radius: 8px;
  background: rgba(37,211,102,0.07);
  color: #25d366;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms, border-color 160ms;
}

.pf-whatsapp:hover {
  background: rgba(37,211,102,0.14);
  border-color: rgba(37,211,102,0.5);
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px clamp(20px, 5vw, 80px);
  background: var(--black);
  border-top: 1px solid var(--border-dark);
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--white);
}

.footer-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.28);
  font-weight: 600;
}

.footer-copy {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.24);
  font-weight: 600;
}

.footer-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--border-dark);
}

.footer-powered span {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.3);
}

.footer-powered a {
  display: flex;
  align-items: center;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.footer-powered a:hover {
  opacity: 0.95;
}

.footer-powered img {
  height: 13px;
  width: auto;
  object-fit: contain;
}

/* ── Loading state ────────────────────────────────────────── */
.section-reveal,
.timeline article {
  opacity: 1;
  visibility: visible;
}

body.loading .hero-word {
  transform: translateY(110%);
}

body.loading .hero-sub,
body.loading .hero-kicker {
  opacity: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-product {
    max-width: 480px;
    transform: none;
    justify-self: start;
  }

  .platform,
  .founder,
  .contact {
    grid-template-columns: 1fr;
  }

  .system-intro {
    grid-template-columns: minmax(60px, 0.14fr) 1fr minmax(200px, 0.4fr);
  }

  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impact-card.wide { grid-row: auto; }
  .before-after { grid-template-columns: 1fr; }

  .ba-arrow {
    height: 36px;
    width: 2px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), var(--accent));
  }

  .ba-arrow::after {
    right: auto;
    left: 50%;
    bottom: -1px;
    top: auto;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* ── Mobile hamburger + drawer ─────────────────────────── */
.ham-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.ham-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.ham-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham-btn.open span:nth-child(2) { opacity: 0; }
.ham-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: rgba(4,4,12,0.97);
  backdrop-filter: blur(20px);
  flex-direction: column;
  padding: 32px clamp(20px,5vw,40px);
  gap: 0;
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.mobile-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-drawer a {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.mobile-drawer a:last-child { border-bottom: none; }
.mobile-drawer a:hover,
.mobile-drawer a.active { color: var(--white); }
.mobile-drawer .mob-cta {
  margin-top: 28px;
  display: inline-block;
  background: #FFD600;
  color: #001C43;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  border-bottom: none;
}

.lang-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  user-select: none;
}

.mobile-lang-disabled {
  display: block;
  padding: 14px 0;
  color: rgba(255,255,255,0.38);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 820px) {
  nav { display: none; }
  .ham-btn { display: flex; }
  .mobile-drawer { display: flex; }
  /* Hide desktop-only header items on mobile — they live in the drawer */
  .header-cta { display: none; }
  .lang-toggle { display: none; }
  /* Push hamburger to far right since nav flex:1 is gone */
  .header-right { margin-left: auto; }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .hero-title {
    font-size: clamp(3.2rem, 11vw, 5.6rem);
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid var(--border-dark);
  }

  .proof-band,
  .system-board,
  .service-grid,
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-grid article:nth-child(3n) { border-right: 1px solid var(--border-light); }
  .service-grid article:nth-child(2n) { border-right: 0; }
  .service-grid article:nth-child(3),
  .service-grid article:nth-child(4) { border-bottom: 1px solid var(--border-light); }
  .service-grid article:nth-child(5),
  .service-grid article:nth-child(6) { border-bottom: 0; }

  .timeline article:nth-child(2) { border-right: 0; }
  .timeline article:nth-child(1),
  .timeline article:nth-child(2) {
    border-bottom: 1px solid var(--border-light);
  }
  .timeline article:nth-child(3),
  .timeline article:nth-child(4) {
    border-bottom: 0;
  }

  .system-statement h2 {
    font-size: clamp(2.9rem, 10vw, 5.25rem);
  }

  .system-intro {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .system-index {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    font-size: 0.9rem;
  }

  .system-index span { padding-bottom: 8px; }

  .impact-grid {
    grid-template-columns: 1fr;
  }

  .impact-card:nth-child(n) { border-right: 0; }
}

@media (max-width: 560px) {
  section { padding: 64px 16px; }

  .hero-grid { padding: 110px 16px 48px; }

  .hero-title {
    font-size: clamp(2.75rem, 13vw, 3.95rem);
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-band,
  .system-board,
  .service-grid,
  .timeline,
  .founder-stats {
    grid-template-columns: 1fr;
  }

  .proof-pill,
  .system-board article,
  .service-grid article,
  .timeline article {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .proof-pill:last-child,
  .system-board article:last-child,
  .service-grid article:last-child,
  .timeline article:last-child {
    border-bottom: 0 !important;
  }

  .founder-stats div { border-right: 0 !important; border-bottom: 1px solid var(--border-light); }
  .founder-stats div:last-child { border-bottom: 0; }

  .clients {
    min-height: auto;
    padding: 64px 16px;
  }

  .cn-orbit {
    margin: 0 auto;
  }

  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .contact {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   NEW VISUAL COMPONENTS
   ============================================================ */

/* ── Shared: mini-visual base (system board) ─────────────── */
.mini-visual {
  position: relative;
  height: 108px;
  margin: -14px 0 20px;
  border-radius: 10px;
  background: var(--off-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 6px 14px;
  gap: 0;
}

/* ── mv-costmap: Cost Architecture visual ──────────────────── */
.mv-costmap { gap: 4px; }

.cm-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  max-height: 18px;
}

.cm-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 44px;
  margin-bottom: 0 !important;
}

.cm-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(8,47,115,0.12);
  overflow: hidden;
  position: relative;
}

.cm-bar::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0; bottom: 0;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-mid), var(--accent));
}

.cm-row.cm-total .cm-label { color: var(--accent); font-weight: 800; }
.cm-row.cm-total .cm-bar::after { background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* ── mv-pricing: Pricing Logic visual ─────────────────────── */
.mv-pricing { justify-content: stretch; padding: 8px 14px; gap: 0; }

.pr-stack {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

.pr-row {
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px;
  flex: 1;
}

.pr-price {
  background: linear-gradient(90deg, rgba(74,127,212,0.18), rgba(74,127,212,0.08));
  color: var(--accent);
  justify-content: flex-end;
}

.pr-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0.6;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.28);
  border-left: 2px dashed rgba(74,127,212,0.3);
  border-right: 2px dashed rgba(74,127,212,0.3);
  margin: 2px 16px;
}

.pr-cost {
  background: linear-gradient(90deg, rgba(220,60,60,0.14), rgba(220,60,60,0.06));
  color: rgba(180,40,40,0.7);
}

/* ── mv-erp: ERP Readiness checklist ──────────────────────── */
.mv-erp { gap: 3px; }

.mv-erp span, .mv-costmap span, .mv-dashboard span, .mv-pricing span {
  color: inherit !important;
  margin-bottom: 0 !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  font-size: inherit !important;
}

.erp-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.04em;
  flex: 1;
  max-height: 18px;
}

.erp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.erp-ok .erp-dot   { background: #3ecf6c; box-shadow: 0 0 6px rgba(62,207,108,0.5); }
.erp-warn .erp-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.5); }

.erp-status {
  margin-left: auto;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.erp-ok .erp-status   { color: #3ecf6c; }
.erp-warn .erp-status { color: #f59e0b; }

/* ── mv-dashboard: Executive Reporting ────────────────────── */
.mv-dashboard { gap: 0; padding: 0; justify-content: stretch; }

.dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: 8px;
  flex: 1;
}

.dash-row:last-child { border-bottom: 0; }

.dash-label {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dash-val {
  font-size: 0.7rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dash-up   .dash-val { color: #3ecf6c; }
.dash-down .dash-val { color: #ef4444; }

.dash-alert {
  background: rgba(239,68,68,0.06);
}

.dash-alert .dash-label { color: rgba(180,40,40,0.8); font-weight: 800; }
.dash-alert .dash-val   { font-size: 0.56rem; color: rgba(180,40,40,0.7); }

/* ── sv-waterfall: Strategic Costing ──────────────────────── */
.service-visual {
  height: 90px;
  margin: 0 0 22px;
  border-radius: 10px;
  background: var(--off-white);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.sv-waterfall {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
}

.sv-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sv-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 46px;
  flex-shrink: 0;
}

.sv-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.07);
  overflow: hidden;
}

.sv-fill {
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: rgba(8,47,115,0.25);
}

.sv-fill.sv-loss { background: rgba(220,60,60,0.4); }
.sv-fill.sv-gain { background: linear-gradient(90deg, var(--accent), var(--brand)); }

.sv-val {
  font-size: 0.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.sv-val.sv-red  { color: rgba(200,50,50,0.7); }
.sv-val.sv-blue { color: var(--accent); }

.sv-row.sv-highlight .sv-label { color: var(--accent); font-weight: 800; }

/* ── sv-pipeline: Purchasing & Inventory ──────────────────── */
.sv-pipeline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px 6px;
  gap: 6px;
}

.pipe-flow {
  display: flex;
  align-items: center;
  gap: 0;
}

.pipe-node {
  flex-shrink: 0;
  padding: 4px 7px;
  border-radius: 5px;
  background: white;
  border: 1px solid var(--border-light);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.pipe-seg {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pipe-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--border-light), var(--accent), var(--border-light));
}

.pipe-leak {
  position: absolute;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pipe-leak span {
  font-size: 0.48rem;
  font-weight: 800;
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.pipe-label {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ── sv-datarows: Periodic Reports ────────────────────────── */
.sv-datarows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: 8px;
  flex: 1;
}

.dr-row:last-child { border-bottom: 0; }

.dr-name {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dr-val {
  font-size: 0.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.dr-val.dr-up   { color: #3ecf6c; }
.dr-val.dr-down { color: #ef4444; }

.dr-row.dr-warn .dr-name { color: rgba(239,68,68,0.7); }

.dr-row.dr-action {
  background: rgba(8,47,115,0.05);
}

.dr-row.dr-action .dr-name {
  color: var(--brand);
  font-weight: 800;
}

.dr-badge {
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  background: var(--brand);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ── sv-compare: Management Accounting ────────────────────── */
.sv-compare {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
}

.cmp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmp-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 40px;
  flex-shrink: 0;
}

.cmp-label.cmp-red { color: #ef4444; }

.cmp-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.07);
  overflow: hidden;
}

.cmp-fill {
  height: 100%;
  width: var(--w);
  border-radius: 999px;
}

.cmp-fill.cmp-target { background: rgba(8,47,115,0.25); }
.cmp-fill.cmp-actual { background: linear-gradient(90deg, var(--accent), var(--brand-mid)); }
.cmp-fill.cmp-gap    { background: rgba(239,68,68,0.5); }

.cmp-pct {
  font-size: 0.5rem;
  font-weight: 800;
  color: #ef4444;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── sv-cascade: Operational Budgets ──────────────────────── */
.sv-cascade {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
}

.casc-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.casc-row span {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 56px;
  flex-shrink: 0;
}

.casc-bar {
  height: 5px;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--brand));
}

.casc-row.casc-root span { color: var(--brand); font-weight: 800; }
.casc-row.casc-root .casc-bar { background: linear-gradient(90deg, var(--brand), var(--accent)); }

.casc-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid rgba(8,47,115,0.15);
  margin-left: 6px;
}

.casc-children .casc-bar {
  background: linear-gradient(90deg, rgba(74,127,212,0.5), rgba(74,127,212,0.2));
}

/* ── sv-erp-flow: ERP Before → After ──────────────────────── */
.sv-erp-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
}

.erpf-before,
.erpf-after {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.erpf-box {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.1);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.erpf-note {
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.25);
}

.erpf-arrow {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 900;
  flex-shrink: 0;
}

.erpf-hub {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: white;
  box-shadow: 0 4px 16px rgba(8,47,115,0.3);
}

.erpf-after .erpf-note { color: var(--accent); }

/* ============================================================
   IMPACT LAB — Redesigned
   ============================================================ */

/* Section header */
.impact-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
}

.impact-header h2 { color: var(--white); max-width: 820px; }

/* Before / After row */
.impact-ba-row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: stretch;
  gap: 0;
  border-radius: 16px;
  background: transparent;
}

/* spacing moved here so margin doesn't expose gradient inside the wrapper */
.diff-card-border:has(.impact-ba-row) {
  margin-bottom: 16px;
}

.ba-panel-new {
  padding: 28px 28px 40px;
  background: var(--dark-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ba-panel-new.danger  {
  border-right: 1px solid var(--border-dark);
  border-radius: 14px 0 0 14px;
}
.ba-panel-new.success {
  border-left: 1px solid var(--border-dark);
  border-radius: 0 14px 14px 0;
}

.bapn-tag {
  display: inline-flex;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  align-self: flex-start;
}

.danger  .bapn-tag { color: rgba(239,68,68,0.9); background: rgba(239,68,68,0.1); }
.success .bapn-tag { color: var(--accent);        background: rgba(74,127,212,0.12); }

.ba-panel-new strong {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--white);
}

.ba-panel-new small {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.6;
  margin-top: auto;
}

/* Charts inside panels (reuse existing .leak-chart / .gain-chart) */
.ba-panel-new .leak-chart,
.ba-panel-new .gain-chart {
  height: 120px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.ba-center-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent);
  background: var(--dark-3);
}

/* ── Before / After — redesigned two-card layout ──────── */
.ba-redesign-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-bottom: 16px;
}

.ba2-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  background: var(--dark-2);
  border-radius: 16px;
}

.ba2-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}

.ba2-tag--danger  { color: rgba(239,68,68,0.9);  background: rgba(239,68,68,0.1); }
.ba2-tag--success { color: var(--accent);          background: rgba(74,127,212,0.12); }

.ba2-headline {
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--white);
  margin: 0;
}

.ba2-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ba2-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--white) 62%, transparent);
  line-height: 1.55;
}

.ba2-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 1px;
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}

.ba2-list--danger li::before {
  background-color: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='2' x2='8' y2='8' stroke='rgba(239,68,68,0.9)' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='8' y1='2' x2='2' y2='8' stroke='rgba(239,68,68,0.9)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ba2-list--success li::before {
  background-color: rgba(74,127,212,0.1);
  border: 1px solid rgba(74,127,212,0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='1.5,5.5 4,8 8.5,2' stroke='%234a7fd4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.ba2-chart-block {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ba2-chart-block .leak-chart,
.ba2-chart-block .gain-chart {
  height: 90px;
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
}

.ba2-caption {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--white) 38%, transparent);
  line-height: 1.55;
  margin: 0;
}

/* Arrow divider */
.ba2-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
}

.ba2-arrow-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dark-3);
  border: 2.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  box-shadow: 0 0 20px rgba(0,94,150,0.18);
  flex-shrink: 0;
}

/* On desktop the arrow points right; on mobile it points down (SVG default) */
@media (min-width: 901px) {
  .ba2-arrow-svg {
    transform: rotate(-90deg);
  }
}

.ba2-arrow-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 30%, transparent);
}

/* Mobile — stack vertically */
@media (max-width: 900px) {
  .ba-redesign-row {
    grid-template-columns: 1fr;
  }
  .ba2-arrow {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 16px 0;
    gap: 8px;
  }
  .ba2-arrow-svg {
    /* already points down — no rotation needed on mobile */
  }
}

/* Metric cards row */
.impact-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.imr-card {
  padding: 28px;
  background: var(--dark-2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.imr-card h3 {
  color: var(--white);
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 10px;
}

.imr-card p {
  color: rgba(255,255,255,0.48);
  font-size: 0.86rem;
  line-height: 1.68;
  margin: 0;
}

/* Card 01: 78% stat block */
.imr-stat-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-dark);
}

.imr-big {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.imr-sublabel {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.36);
  max-width: 100px;
  line-height: 1.4;
}

/* Card 02: ERP connection visual */
.imr-erp-vis {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-dark);
}

.imrv-before,
.imrv-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.imrv-box {
  width: 100%;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

.imrv-hub {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: white;
  box-shadow: 0 4px 20px rgba(74,127,212,0.4);
}

.imrv-check {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #3ecf6c;
}

.imrv-note {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-top: 4px;
}

.imrv-arrow {
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent);
  flex-shrink: 0;
}

/* Card 03: Report visual */
.imr-report-vis {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-dark);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-dark);
}

.imrr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-dark);
  gap: 8px;
}

.imrr-divider {
  height: 1px;
  background: var(--border-dark);
}

.imrr-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.imrr-val {
  font-size: 0.7rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.imrr-val.up   { color: #3ecf6c; }
.imrr-val.down { color: #ef4444; }

.imrr-row.warn { background: rgba(239,68,68,0.05); }
.imrr-row.warn .imrr-label { color: rgba(239,68,68,0.7); }

.imrr-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(74,127,212,0.08);
  gap: 8px;
}

.imrr-action span:first-child {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.imrr-badge {
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  background: var(--brand-mid);
  padding: 2px 7px;
  border-radius: 3px;
}

/* Responsive: impact section */
@media (max-width: 900px) {
  .impact-ba-row { grid-template-columns: 1fr; }
  .ba-center-arrow {
    height: 32px;
    font-size: 0;
    transform: none;
  }
  .ba-center-arrow::after {
    content: '↓';
    font-size: 1rem;
    font-weight: 900;
    color: var(--accent);
  }
  .impact-metrics-row { grid-template-columns: 1fr; gap: 12px; }
  .ba-panel-new.danger  { border-right: 0; border-bottom: 1px solid var(--border-dark); border-radius: 14px 14px 0 0; }
  .ba-panel-new.success { border-left: 0;  border-top: 1px solid var(--border-dark); border-radius: 0 0 14px 14px; }
}

@media (max-width: 560px) {
  .impact-ba-row { border-radius: 10px; }
}

/* ============================================================
   METHOD — Upgraded step visuals
   ============================================================ */

/* Shared step-visual base override for new visuals */
.sv-diagnose,
.sv-blueprint-new,
.sv-deploy-new,
.sv-scale-new {
  position: relative;
  height: 110px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: var(--off-white);
  border: 1px solid var(--border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px 14px;
}

/* ── 01 Diagnose: scan findings ────────────────────────────── */
.diag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-height: 22px;
}

.diag-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 54px;
  flex-shrink: 0;
  white-space: nowrap;
}

.diag-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.07);
  overflow: hidden;
}

.diag-fill {
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(239,68,68,0.7), rgba(239,68,68,0.3));
}

.diag-tag {
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ef4444;
  background: rgba(239,68,68,0.08);
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── 02 Design: system blueprint ───────────────────────────── */
.sv-blueprint-new {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
}

.bp-nodes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.bp-node {
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(8,47,115,0.08);
  border: 1px solid rgba(8,47,115,0.12);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.bp-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  height: 80%;
  gap: 6px;
  padding: 0 4px;
}

.bp-line {
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(8,47,115,0.3), var(--accent));
  position: relative;
}

.bp-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
}

.bp-hub {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
  box-shadow: 0 4px 16px rgba(8,47,115,0.25);
}

/* ── 03 Deploy: progress checklist ─────────────────────────── */
.dep-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  max-height: 24px;
}

.dep-icon {
  font-size: 0.64rem;
  font-weight: 900;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.dep-row > span:nth-child(2) {
  flex: 1;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.dep-status {
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

.dep-done .dep-icon   { color: #3ecf6c; }
.dep-done .dep-status { color: #3ecf6c; background: rgba(62,207,108,0.1); }
.dep-done > span:nth-child(2) { color: var(--text-dark); }

.dep-active .dep-icon   { color: var(--accent); }
.dep-active .dep-status { color: var(--accent); background: rgba(74,127,212,0.1); }
.dep-active > span:nth-child(2) { color: var(--brand); font-weight: 800; }

/* ── 04 Scale: regional growth ─────────────────────────────── */
.sv-scale-new {
  justify-content: center;
  gap: 6px;
}

.scl-row {
  display: flex;
  align-items: center;
  gap: 7px;
  max-height: 20px;
}

.scl-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 36px;
  flex-shrink: 0;
}

.scl-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.07);
  overflow: hidden;
}

.scl-fill {
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.scl-growth {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

.scl-arrow {
  font-size: 0.75rem;
  font-weight: 900;
  color: #3ecf6c;
}

.scl-growth span:last-child {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Contact form responsive ──────────────────────────────── */
@media (max-width: 640px) {
  .cf-row-2 {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 20px 16px;
  }
}

/* ============================================================
   DESIGN UPGRADE — Fonts · Cursor · Interactions · Polish
   Space Grotesk (headings) + Inter (body)
   ============================================================ */

/* ── Design tokens — extend root ────────────────────────────── */
:root {
  --font-heading:    "Space Grotesk", Arial, sans-serif;
  --font-body:       "Inter", Arial, sans-serif;
  /* Arabic equivalents — modern, blocky/geometric character matching the EN pair */
  --font-ar-display: "Noto Kufi Arabic", Arial, sans-serif;
  --font-ar-body:    "Almarai", Arial, sans-serif;
  --accent-bright:  #7ab0f5;
  --accent-glow:    rgba(74,127,212,0.10);
  --accent-border:  rgba(74,127,212,0.28);
  --card-lift:      0 12px 40px rgba(0,0,0,0.10);
  --card-lift-dark: 0 12px 40px rgba(8,47,115,0.20);
}

/* ── Arabic language support ─────────────────────────────────── */
/* Apply to any element with lang="ar" or dir="rtl"              */
[lang="ar"], [dir="rtl"] {
  font-family: var(--font-ar-body);
  direction: rtl;
  text-align: right;
}

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[lang="ar"] .hero-title, [lang="ar"] .hero-word,
[lang="ar"] .proof-pill strong, [lang="ar"] .stat-num,
[lang="ar"] .pmv, [lang="ar"] .bp-hub, [lang="ar"] .imr-big,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--font-ar-display) !important;
  font-weight: 800;
}

/* ── Global font application ─────────────────────────────────── */
body,
nav, p, li, label, input, select, textarea,
.eyebrow, .stat-item p, .pml, .pms, .ptb-label,
.section-copy p, .hero-text, .system-points li,
.proof-pill p, .service-grid p, .system-board p,
.imr-card p, .timeline article > p,
.founder-copy p, .credibility-strip span,
.cf-field label, .ticker-inner span,
.contact-info-row a, .contact-info-row span {
  font-family: var(--font-body);
}

/* Arabic pages — the above list targets specific elements, which otherwise
   beats plain inheritance from the [lang="ar"]/[dir="rtl"] rule above.
   Re-assert the Arabic body font here so nav/labels/lists etc. don't
   silently fall through to Inter (no Arabic glyph support = broken shaping). */
[dir="rtl"] body,
[dir="rtl"] nav, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] span, [dir="rtl"] a,
[dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button {
  font-family: var(--font-ar-body) !important;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero-title, [dir="rtl"] .hero-word,
[dir="rtl"] .proof-pill strong, [dir="rtl"] .stat-num,
[dir="rtl"] .pmv, [dir="rtl"] .bp-hub, [dir="rtl"] .imr-big {
  font-family: var(--font-ar-display) !important;
}

/* Letter-spacing/uppercase tracking is a Latin-only convention (used all over
   this site for nav, buttons, badges, eyebrows). Applied to Arabic script it
   pushes joined letter clusters apart and reads as broken/disconnected text. */
[dir="rtl"] * {
  letter-spacing: normal !important;
  text-transform: none !important;
}

h1, h2, h3, h4,
.hero-title, .hero-word,
.proof-pill strong,
.stat-num,
.system-statement h2,
.brand strong,
.service-grid h3, .system-board h3,
.imr-card h3, .timeline article b,
.founder-copy h2, .contact-left h2,
.pmv, .bp-hub, .section-copy h2,
.imr-big {
  font-family: var(--font-heading);
}

/* ── Typography fine-tuning ──────────────────────────────────── */
h2 {
  letter-spacing: -0.03em;
}

h3 {
  letter-spacing: -0.015em;
}

.hero-title {
  letter-spacing: -0.045em;
}

.system-statement h2 {
  letter-spacing: -0.04em;
}

/* Stats: tighter, more impactful */
.stat-num {
  letter-spacing: -0.04em;
  font-weight: 800;
}

/* Proof pill word — more punch */
.proof-pill strong {
  letter-spacing: -0.03em;
}

/* ── Eyebrow label — accent line prefix ──────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
  border-radius: 999px;
  transition: width 300ms ease;
}

/* Wider line on hover of parent section */
section:hover .eyebrow::before {
  width: 36px;
}

/* ── Navigation — animated underline ────────────────────────── */
nav a {
  position: relative;
  padding-bottom: 3px;
  transition: color 180ms ease;
}

nav a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

nav a:hover::after { transform: scaleX(1); }

/* ── Header CTA — font upgrade ───────────────────────────────── */
.header-cta {
  font-family: var(--font-body);
  letter-spacing: 0.11em;
  transition: opacity 160ms, transform 160ms;
}

.header-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── Buttons — shimmer + arrow + lift ───────────────────────── */
.button {
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on primary */
.button.primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.button.primary:hover::after { left: 170%; }

.button.primary:hover {
  background: var(--brand-mid);
  border-color: var(--brand-mid);
  transform: translateY(-1px);
}

/* Ghost — accent on hover */
.button.ghost:hover {
  border-color: rgba(74,127,212,0.55);
  color: var(--accent-bright);
  transform: translateY(-1px);
}

/* Add transition for transform */
.button {
  transition: opacity 180ms, background 200ms, border-color 200ms, transform 180ms, color 180ms;
}

/* ── Hero — more dramatic background glow ────────────────────── */
.hero::after {
  background:
    radial-gradient(ellipse 60% 55% at 72% 35%, rgba(8,47,115,0.55), transparent 65%),
    radial-gradient(ellipse 40% 40% at 25% 75%, rgba(74,127,212,0.06), transparent 60%);
}

/* Hero product panel — elevated glow */
.product-shell {
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--border-dark),
    0 20px 60px rgba(8,47,115,0.30),
    0 4px 16px rgba(0,0,0,0.45);
  transition: box-shadow 400ms ease;
}

.product-shell:hover {
  box-shadow:
    0 0 0 1px rgba(74,127,212,0.32),
    0 28px 80px rgba(8,47,115,0.40),
    0 4px 20px rgba(0,0,0,0.5);
}

/* Animated progress bars in product panel */
.pm-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

/* ── Proof band — hover lift ─────────────────────────────────── */
.proof-pill {
  transition: background 220ms ease;
}

.proof-pill:hover { background: #eae9e4; }

/* ── System board cards — lift on hover ──────────────────────── */
.system-board article {
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  cursor: default;
}

.system-board article:hover {
  background: #fefefe;
  transform: translateY(-2px);
  box-shadow: var(--card-lift);
  position: relative;
  z-index: 1;
}

/* ── Service grid cards — lift + inset accent line on hover ──── */
.service-grid article {
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  cursor: default;
}

.service-grid article:hover {
  background: #fff;
  transform: translateY(-2px);
  /* left inset accent + elevation — no layout shift */
  box-shadow: inset 2px 0 0 var(--accent), var(--card-lift);
  position: relative;
  z-index: 1;
}

/* ── Impact lab (dark) cards — blue glow border ──────────────── */
.imr-card {
  transition: background 240ms ease, border-color 240ms ease;
  cursor: default;
}

.imr-card:hover {
  background: var(--accent-glow);
  border-color: var(--accent-border);
}

/* Before/After panels */
.ba-panel-new {
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.ba-panel-new:hover { transform: translateY(-2px); }

/* ── Method timeline — hover border glow ────────────────────── */
.timeline article {
  transition: border-color 240ms ease, background 240ms ease;
}

.timeline article:hover {
  border-color: rgba(74,127,212,0.22);
}

/* ── Logo track articles ─────────────────────────────────────── */
.logo-track article {
  transition: border-color 240ms ease, transform 240ms ease, background 240ms ease;
}

.logo-track article:hover {
  border-color: var(--accent-border);
  transform: translateY(-3px);
  background: rgba(255,255,255,0.04);
}

/* ── Founder section — photo subtle zoom ────────────────────── */
.portrait-wrap {
  overflow: hidden;
  border-radius: 12px;
}

.portrait-wrap img {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portrait-wrap:hover img { transform: scale(1.03); }

/* LinkedIn button — lift */
.linkedin-button {
  transition: background 200ms, color 200ms, transform 180ms, box-shadow 180ms;
}

.linkedin-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(10,102,194,0.25);
}

/* ── Contact form — better focus states ──────────────────────── */
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(74,127,212,0.12);
  background: rgba(74,127,212,0.02);
}

/* Submit button — shimmer */
.cf-submit {
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  transition: background 200ms, transform 180ms;
}

.cf-submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.cf-submit:hover::after { left: 170%; }
.cf-submit:hover { transform: translateY(-1px); }

/* ── Ticker strip — slightly more visible ────────────────────── */
.ticker-inner span {
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.8);
}

/* ── Custom Cursor — single ring, direct follow ──────────────── */
@media (pointer: fine) {
  html, body, *, *::before, *::after {
    cursor: none !important;
  }
  /* Small inline text links — the logo ring fully covers them, so keep a real pointer cursor here */
  .footer-copy a, .pf-privacy a, .proof-note a, .visual-disclaimer a {
    cursor: pointer !important;
  }
}

.cursor-dot { display: none; }

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: url('assets/cursor-logo.png') center/contain no-repeat;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 180ms ease, height 180ms ease, opacity 200ms ease;
}

body.cursor-hover .cursor-ring {
  width: 52px; height: 52px;
}
body.cursor-clicking .cursor-ring {
  width: 26px; height: 26px;
  opacity: 0.7;
}

@media (pointer: coarse) {
  .cursor-ring { display: none; }
}

/* ── Accessibility — reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
  nav a::after { display: none; }
  .button.primary::after,
  .cf-submit::after { display: none; }
  .portrait-wrap img { transition: none; }
  .product-shell { transition: none; }
}

@media (prefers-reduced-motion: reduce) and (pointer: fine) {
  html, body, *, *::before, *::after { cursor: auto !important; }
  a, button, [role="button"] { cursor: pointer !important; }
  input, textarea { cursor: text !important; }
}

.hero-eyebrow {
  margin-bottom: 18px;
  color: var(--accent-bright);
}

.section-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border-light);
}

.section-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.pf-privacy {
  margin: 14px 0 0;
  color: rgba(255,255,255,0.38);
  font-size: 0.68rem;
  line-height: 1.5;
}

.proof-note,
.visual-disclaimer {
  max-width: 720px;
  margin-top: 18px;
  color: rgba(255,255,255,0.56);
  font-size: 0.78rem;
  line-height: 1.6;
}

.page-header .proof-note {
  margin-left: auto;
  margin-right: auto;
}

.services > .visual-disclaimer,
.platform > .visual-disclaimer {
  margin: 0 auto 22px;
  padding: 0 24px;
  text-align: center;
  color: rgba(8,22,45,0.58);
}

.proof-note a,
.visual-disclaimer a,
.footer-copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-header {
  min-height: 54vh;
}

.privacy-content {
  padding: 90px max(24px, 8vw) 120px;
  background: #f5f6f8;
}

.privacy-copy {
  max-width: 760px;
  margin: 0 auto;
  color: #08162d;
}

.privacy-copy h2 {
  margin: 44px 0 12px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.privacy-copy p {
  color: rgba(8,22,45,0.72);
  font-size: 1rem;
  line-height: 1.75;
}

.privacy-copy a {
  color: #164fa4;
}

.privacy-updated {
  font-size: 0.78rem !important;
  text-transform: uppercase;
}

/* Unified precision-panel language */
:root {
  --panel-radius: 8px;
  --panel-inner-radius: 7px;
  --panel-border: rgba(8, 22, 45, 0.14);
  --panel-hover: rgba(8, 22, 45, 0.025);
  --panel-shadow: 0 10px 28px rgba(8, 22, 45, 0.07);
}

.platform > .visual-disclaimer {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: center;
  margin-top: 26px;
  margin-bottom: 0;
}

.section-links {
  width: 100%;
  max-width: 760px;
  margin: 28px auto 0;
  justify-content: center;
  text-align: center;
}

.system-board,
.service-grid,
.compare-table-wrap,
.contact-form-wrap,
.pf-form,
.v30-grid,
.founder-stats,
.ss-stats-grid,
.proof-band,
.client-card {
  border-radius: var(--panel-radius) !important;
  border-color: var(--panel-border) !important;
  box-shadow: none !important;
}

.system-board article,
.service-grid article {
  transition: background 180ms ease, box-shadow 180ms ease !important;
}

.system-board article:hover,
.service-grid article:hover {
  background: var(--panel-hover) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 22, 45, 0.04);
}

.client-card:hover {
  background: #082f73 !important;
  border-color: rgba(111, 163, 239, 0.72) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0, 18, 48, 0.22) !important;
}

.mini-visual,
.service-visual,
.product-shell,
.contact-info-block,
.contact-info-row {
  border-radius: 6px !important;
}

.diff-card-border {
  padding: 1px !important;
  border-radius: var(--panel-radius) !important;
  background: var(--panel-border) !important;
  background-size: auto !important;
  animation: none !important;
  box-shadow: none !important;
}

.diff-card-border::after {
  display: none !important;
}

.diff-card-border > *,
.diff-card,
.method-step,
.testi-card,
.ba2-card,
.imr-card,
.cs-track-clip {
  border-radius: var(--panel-inner-radius) !important;
}

.testi-card:hover,
.diff-card-border:hover {
  transform: translateY(-2px);
  box-shadow: var(--panel-shadow) !important;
}

.diff-label,
.method-num,
.service-grid b,
.system-board > article > span,
.v30-pillar-tag {
  letter-spacing: 0.12em !important;
}


.pf-privacy a { color: rgba(255,255,255,0.68); }

/* ============================================================
   FINANCE ANIMATIONS — Trend line · Bars · Scanner · Cursor
   ============================================================ */


/* ── Hero trend line — SVG path draw animation ───────────────── */
.hero-trendline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(120px, 18vw, 220px);
  pointer-events: none;
  z-index: 1;
}

.trend-line {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: draw-trend 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

.trend-area {
  opacity: 0;
  animation: fade-area 3s ease 1.2s forwards;
}

.trend-dot {
  opacity: 0;
  animation: pop-dot 0.4s ease 3.2s forwards;
}

.trend-dot-ring {
  opacity: 0;
  animation: pop-ring 0.6s ease 3.3s forwards;
}

@keyframes draw-trend {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-area {
  to { opacity: 1; }
}

@keyframes pop-dot {
  0%   { opacity: 0; r: 0; }
  60%  { opacity: 1; r: 5px; }
  100% { opacity: 0.9; r: 4px; }
}

@keyframes pop-ring {
  0%   { opacity: 0; r: 4px; }
  100% { opacity: 0.5; r: 12px; }
}

/* Pulse the end dot after it appears */
.trend-dot-ring {
  transform-origin: 1440px 2px;
  animation: pop-ring 0.6s ease 3.3s forwards,
             ring-pulse 2.4s ease-in-out 3.9s infinite;
}

@keyframes ring-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.4); }
}

/* ── Product panel — scanner line (runs 3× then stops — skill: no infinite decorative) */
.product-shell { overflow: hidden; }

.product-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(74,127,212,0.0) 10%,
    rgba(74,127,212,0.6) 50%,
    rgba(74,127,212,0.0) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  /* 3 scans × 5s = 15s, then stops (iteration-count: 3) */
  animation: panel-scan 5s cubic-bezier(0.4, 0, 0.6, 1) 1.5s 3;
}

@keyframes panel-scan {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  92%  { opacity: 0.5; }
  100% { top: 100%; opacity: 0; }
}

/* ── Hero accent word — gradient shimmer (2 passes then settles — skill: no infinite decorative) */
.hero-word.accent {
  background: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent-bright) 40%,
    var(--accent) 80%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: accent-shimmer 3s ease-in-out 1s 2; /* 2 passes, then solid accent */
}

@keyframes accent-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Bar chart fill animations ───────────────────────────────── */
/* All chart bars start at 0 — JS adds .bars-live to trigger */
.sv-fill,
.cm-bar,
.diag-fill,
.scl-fill,
.cmp-fill,
.casc-bar {
  width: 0 !important;
  transition: none;
}

/* When section is in view — bars animate to their target --w */
.bars-live .sv-fill,
.bars-live .cm-bar,
.bars-live .diag-fill,
.bars-live .scl-fill,
.bars-live .cmp-fill,
.bars-live .casc-bar {
  width: var(--w) !important;
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Product panel bars (use inline width, not --w) */
.pm-fill {
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Live data dot — enhanced pulse ─────────────────────────── */
.pf-dot {
  animation: live-pulse 1.8s ease-in-out infinite !important;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(62,207,108,0.6);  opacity: 1;   }
  50%       { box-shadow: 0 0 16px rgba(62,207,108,0.9); opacity: 0.6; }
}

/* ── Impact metrics — subtle glow on big numbers ─────────────── */
.imr-big {
  animation: stat-glow 4s ease-in-out infinite;
}

@keyframes stat-glow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 40px rgba(74,127,212,0.25); }
}

/* ── Ticker — slightly faster & louder ──────────────────────── */
.ticker-inner {
  animation: ticker-scroll 22s linear infinite !important;
}

/* ── Counter number — flash before settle ───────────────────── */
@keyframes counter-live {
  0%   { color: var(--white); }
  20%  { color: var(--accent-bright); }
  100% { color: var(--white); }
}

/* ── ERP / flow arrows — subtle directional cue, not distracting ── */
.imrv-arrow,
.erpf-arrow,
.ba-center-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: arrow-nudge 2.4s ease-in-out 1s 3; /* 3× then stops */
}

@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0);   opacity: 0.6; }
  50%       { transform: translateX(4px); opacity: 1;   }
}

/* ── Section number index — stagger fade in ──────────────────── */
.system-index span {
  opacity: 0;
  transform: translateY(8px);
  animation: index-in 0.4s ease forwards;
}
.system-index span:nth-child(1) { animation-delay: 0.1s; }
.system-index span:nth-child(2) { animation-delay: 0.2s; }
.system-index span:nth-child(3) { animation-delay: 0.3s; }
.system-index span:nth-child(4) { animation-delay: 0.4s; }
.system-index span:nth-child(5) { animation-delay: 0.5s; }
.system-index span:nth-child(6) { animation-delay: 0.6s; }

@keyframes index-in {
  to { opacity: 1; transform: none; }
}

/* ── Proof band — number count-up shimmer ───────────────────── */
.proof-pill strong {
  transition: color 300ms;
}

.proof-pill:hover strong {
  color: var(--accent);
}

/* ── Service / Platform card number badge — glow ────────────── */
.service-grid b,
.system-board > article > span {
  transition: color 200ms, text-shadow 200ms;
}

.service-grid article:hover b,
.system-board article:hover > span {
  text-shadow: 0 0 12px rgba(74,127,212,0.5);
}

/* ── Candlestick / data line — decorative rule on dark sections  */
[data-theme="dark"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(74,127,212,0.18) 20%,
    rgba(74,127,212,0.36) 50%,
    rgba(74,127,212,0.18) 80%,
    transparent
  );
  pointer-events: none;
}

/* Don't double the hero glow */
.hero::after {
  background:
    radial-gradient(ellipse 60% 55% at 72% 35%, rgba(8,47,115,0.55), transparent 65%),
    radial-gradient(ellipse 40% 40% at 25% 75%, rgba(74,127,212,0.06), transparent 60%) !important;
  height: 75% !important;
  bottom: auto;
}

/* ============================================================
   SKILL-DRIVEN UPGRADE PASS 2 — Typography · Comparison · Nav · A11y
   ============================================================ */

/* ── Two-font hierarchy: Space Grotesk (headings) + Inter (body) ── */

/* All headings including hero — Space Grotesk: consistent, structured, enterprise */
h1, h2, h3,
.hero-title, .hero-word,
.section-copy h2,
.service-grid h3,
.system-board h3,
.imr-card h3,
.timeline article b,
.founder-copy h2,
.contact-left h2,
.testi-header h2,
.compare-header h2,
.system-statement h2,
.proof-pill strong,
.imr-big {
  font-family: var(--font-heading) !important;
}

/* Body / data — Inter */
body, p, li, span, label,
input, select, textarea, button,
nav, .eyebrow,
.stat-item p, .pml, .pms,
.section-copy p, .hero-text {
  font-family: var(--font-body);
}

/* ── Tighten transitions to 150-200ms per flat design spec ── */
.button,
nav a,
.service-grid article,
.system-board article,
.imr-card,
.testi-card,
.proof-pill,
.header-cta,
.logo-track article {
  transition-duration: 180ms !important;
}

/* ── Skip link — accessibility ────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--accent);
  color: white;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 0;
}

/* ── Active nav state (JS adds .nav-active class) ─────────── */
nav a.nav-active {
  color: var(--white) !important;
}

nav a.nav-active::after {
  transform: scaleX(1) !important;
  background: var(--accent);
}

/* ── Focus rings — visible but styled ───────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Touch target minimum 44px (skill) ───────────────────────── */
.button,
.header-cta,
.cf-submit {
  min-height: 44px;
}

nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── Chart color alignment (skill: green=gains, red=losses, blue=neutral) ── */
/* Skill spec: Increases #4CAF50, Decreases #F44336, Neutral #2196F3 */
/* We map to our existing semantics but boost saturation slightly */
.sv-fill.sv-gain    { background: linear-gradient(90deg, #3ecf6c, #22c55e); }
.sv-fill.sv-loss    { background: linear-gradient(90deg, #ef4444, #f87171); }
.dr-val.dr-up       { color: #22c55e; }
.dr-val.dr-down     { color: #ef4444; }
.dash-val           { }
.dash-row.dash-up .dash-val   { color: #22c55e; }
.dash-row.dash-down .dash-val { color: #ef4444; }
.imrr-val.up        { color: #22c55e; }
.imrr-val.down      { color: #ef4444; }

/* ── Comparison Table (skill: 35% higher conversion) ─────────── */
.compare-section {
  background: var(--black);
  color: var(--white);
}

.compare-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-dim) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.compare-header {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.compare-header h2 { color: var(--white); }
.compare-header p  { color: rgba(255,255,255,0.52); line-height: 1.7; margin: 0; }

.compare-table-wrap {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border-dark);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  min-width: 560px;
}

/* Header row */
.compare-table thead tr {
  background: var(--dark-2);
  border-bottom: 1px solid var(--border-dark);
}

.compare-table th {
  padding: 18px 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.44);
  text-align: center;
}

.compare-table th.ct-feature-col {
  text-align: left;
  width: 42%;
}

/* Growxcel column — highlighted per skill spec */
.compare-table .ct-growxcel {
  background: rgba(74,127,212,0.06);
  border-left: 1px solid rgba(74,127,212,0.2);
  border-right: 1px solid rgba(74,127,212,0.2);
}

.compare-table th.ct-growxcel {
  color: var(--accent);
  background: rgba(74,127,212,0.1);
}

.ct-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* Body rows */
.compare-table tbody tr {
  border-bottom: 1px solid var(--border-dim);
  transition: background 160ms ease;
}

.compare-table tbody tr:last-child { border-bottom: 0; }
.compare-table tbody tr:hover { background: rgba(255,255,255,0.025); }

.compare-table td {
  padding: 16px 20px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.64);
  text-align: center;
  vertical-align: middle;
}

.compare-table td:first-child {
  text-align: left;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}

[dir="rtl"] .compare-table th.ct-feature-col,
[dir="rtl"] .compare-table td:first-child {
  text-align: right;
}

/* Skill: checkmarks green, X red, partial muted */
.ct-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  font-size: 0.72rem;
  font-weight: 900;
}

.ct-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239,68,68,0.08);
  color: rgba(239,68,68,0.6);
  font-size: 0.8rem;
  font-weight: 700;
}

.ct-partial {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.32);
  font-style: italic;
}

/* CTA below table */
.compare-cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 48px);
  flex-wrap: wrap;
}

.compare-cta p {
  margin: 0;
  color: rgba(255,255,255,0.44);
  font-size: 0.84rem;
}

/* Responsive table — card layout on mobile */
@media (max-width: 760px) {
  .compare-table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .compare-table { display: block; min-width: 0; width: 100%; }
  .compare-table thead { display: none; }
  .compare-table tbody { display: flex; flex-direction: column; gap: 8px; }

  .compare-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
    background: var(--dark-2);
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    padding: 14px 14px 12px;
    transition: none;
  }
  .compare-table tbody tr:hover { background: var(--dark-2); }

  /* Feature name — spans full width, top row */
  .compare-table tbody td:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-dark);
    line-height: 1.4;
  }

  [dir="rtl"] .compare-table tbody td:first-child {
    text-align: right;
  }

  /* Icon cells — bottom row, 3 equal columns */
  .compare-table tbody td:nth-child(2),
  .compare-table tbody td:nth-child(3),
  .compare-table tbody td:nth-child(4) {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px 2px;
    border: none;
    background: transparent;
    text-align: center;
  }

  .compare-table tbody td:nth-child(2) { grid-column: 1; border-right: 1px solid var(--border-dark); }
  .compare-table tbody td:nth-child(3) { grid-column: 2; border-right: 1px solid var(--border-dark); }
  .compare-table tbody td:nth-child(4) { grid-column: 3; }

  /* Column labels via pseudo-elements */
  .compare-table tbody td:nth-child(2)::before {
    content: 'GROWXCEL';
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--accent);
  }
  .compare-table tbody td:nth-child(3)::before {
    content: 'ACCOUNTANT';
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.28);
  }
  .compare-table tbody td:nth-child(4)::before {
    content: 'CONSULTANT';
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.28);
  }
}

/* ── Testimonials section ─────────────────────────────────────── */
.testimonials {
  background: var(--off-white);
  border-top: 1px solid var(--border-light);
}

.testi-header {
  max-width: 820px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.testi-header h2 { color: var(--text-dark); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testi-card {
  background: var(--white);
  padding: 36px 32px 28px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.testi-card:hover {
  background: #fefefe;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
  position: relative;
  z-index: 1;
}

.testi-quote-mark {
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--accent);
  opacity: 0.4;
  font-weight: 900;
  user-select: none;
}

.testi-text {
  flex: 1;
  font-size: clamp(0.88rem, 1vw, 0.96rem);
  line-height: 1.75;
  color: #444;
  margin: 0;
  font-style: italic;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.testi-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: white;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testi-author > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.testi-author strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-body);
}

.testi-author span {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.testi-metric {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(74,127,212,0.08);
  border: 1px solid rgba(74,127,212,0.18);
  border-radius: 4px;
  padding: 4px 8px;
  white-space: nowrap;
  margin-left: auto;
}

/* Responsive testimonials */
@media (max-width: 900px) {
  .testi-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Reduced motion guard ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .trend-line, .trend-area, .trend-dot, .trend-dot-ring,
  .product-scan-line,
  .hero-word.accent,
  .sv-fill, .cm-bar, .diag-fill, .scl-fill, .cmp-fill, .casc-bar,
  .imr-big, .pf-dot, .ticker-inner {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    width: var(--w, 100%) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   HERO V2 — Enterprise Gateway × Trust & Authority × Hero-Centric
   (skill: command bar, editorial headline, floating badges, glow ring)
   ══════════════════════════════════════════════════════════ */

/* ── Command bar — Bloomberg-style status strip ───────────── */
.hero-command-bar {
  position: relative;
  z-index: 3;
  margin-top: 80px; /* clear fixed header */
  border-bottom: 1px solid rgba(74,127,212,0.14);
  background: rgba(8,8,8,0.6);
  backdrop-filter: blur(4px);
}

.hcb-inner {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: 9px clamp(28px, 6vw, 96px);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  font-family: var(--font-body);
}

.hcb-live {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #22c55e;
}

.hcb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.8);
  animation: pulse-hcb 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-hcb {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.7); }
}

.hcb-div {
  width: 1px;
  height: 10px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.hcb-item {
  white-space: nowrap;
}

.hcb-right {
  margin-left: auto;
  color: var(--accent);
  opacity: 0.7;
  white-space: nowrap;
}

/* ── Hero grid — reduce top padding now that command bar gives clearance ── */
.hero-grid {
  padding-top: clamp(32px, 4vw, 52px) !important;
}

/* ── Hero headline — Space Grotesk 700 ── */
.hero-title,
.hero-title .hero-word,
.hero-title .hero-line span {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.hero-title {
  font-size: clamp(2.9rem, 10vw, 5.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 28px !important;
}

/* "Our" line — same scale as the headline, dimmed */
.hero-line-pre {
  margin-bottom: 0;
}

.hero-line-pre .hero-word {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  color: var(--white) !important;
}

/* ── Trust proof line below CTAs ─────────────────────────── */
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  font-family: var(--font-body);
}

.hero-trust-icon {
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
}

/* ── Hero product — position relative for badge overlay ─── */
.hero-product {
  position: relative !important;
}

/* ── Floating metric badges — skill: metric pulse animations ── */
.hero-float-badge {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(10,10,12,0.92);
  border: 1px solid rgba(74,127,212,0.32);
  border-radius: 10px;
  backdrop-filter: blur(14px);
  cursor: default;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.hero-float-badge:hover {
  border-color: rgba(74,127,212,0.6);
  box-shadow: 0 0 24px rgba(74,127,212,0.15);
}

.hfb-1 {
  top: -64px;
  left: -10px;
  animation: badge-float-a 4.5s ease-in-out infinite;
}

.hfb-2 {
  bottom: -64px;
  right: -10px;
  animation: badge-float-b 4.5s ease-in-out infinite;
}

@keyframes badge-float-a {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-7px); }
}

@keyframes badge-float-b {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(7px);  }
}

.hero-float-badge strong {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 800;
  color: #fff;
  font-family: var(--font-heading);
  line-height: 1;
}

.hero-float-badge span {
  display: block;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 3px;
  font-family: var(--font-body);
}

.hero-float-badge svg {
  flex-shrink: 0;
}

/* ── Radial glow ring behind product panel ───────────────── */
.product-glow-ring {
  position: absolute;
  inset: -28px;
  background: radial-gradient(ellipse at center,
    rgba(74,127,212,0.22) 0%,
    rgba(74,127,212,0.06) 45%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure product-shell sits above the glow */
.hero-product .product-shell {
  position: relative;
  z-index: 1;
}

/* ── Stats strip — add a subtle label above each number ───── */
.stat-item p {
  letter-spacing: 0.18em !important;
}

/* On mobile, hide badges + simplify command bar */
@media (max-width: 768px) {
  .hero-float-badge { display: none; }
  .hcb-item { display: none; }
  .hcb-right { display: none; }
  .hcb-div { display: none; }
  .hero-command-bar .hcb-inner { gap: 10px; }
}

@media (max-width: 560px) {
  .hero-command-bar { display: none; }
  /* 80px fixed nav + 24px breathing room */
  .hero-grid { padding-top: 104px !important; }
}

/* ── Lucide Icons (skill: icons.csv — no-emoji-icons rule) ───── */

/* Proof band pill icons */
.pill-icon {
  display: block;
  color: var(--accent);
  margin-bottom: 8px;
  opacity: 0.85;
}

/* Service card heading icons */
.svc-icon {
  display: inline-block;
  vertical-align: middle;
  color: var(--accent);
  margin-right: 7px;
  margin-bottom: 2px;
  opacity: 0.9;
  flex-shrink: 0;
}

/* Method timeline step icons */
.step-icon {
  display: inline-block;
  vertical-align: middle;
  color: var(--accent);
  margin-right: 6px;
  opacity: 0.8;
}

/* System points check icons */
.hero-word {
  font-weight: 700 !important;
}

.system-points li {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}
.li-check {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
  opacity: 0.75;
}

/* Contact info label icons */
.ci-icon {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 5px;
  margin-bottom: 1px;
  opacity: 0.6;
}

/* Comparison table SVG icons */
.ct-yes {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-yes svg {
  color: #22c55e;
}
.ct-no {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-no svg {
  color: rgba(255, 80, 80, 0.65);
}

/* Footer globe icon */
.footer-globe {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-bottom: 1px;
  opacity: 0.5;
}

/* ============================================================
   CLIENT-SUPPLIED CONTENT MODULES
   ============================================================ */
.outcomes-section,
.kpi-map,
.purpose-section,
.leadership-section,
.portfolio-section,
.ksa-proof {
  background: var(--off-white);
  border-top: 1px solid var(--border-light);
}

.outcome-grid,
.kpi-map-grid,
.sector-system-grid,
.ksa-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(32px, 5vw, 64px);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.outcome-grid article,
.kpi-map-grid article,
.sector-system-grid article,
.ksa-proof-grid article {
  min-width: 0;
  padding: clamp(24px, 3vw, 42px);
  background: var(--white);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.outcome-grid article:last-child,
.ksa-proof-grid article:last-child { border-right: 0; }

.outcome-grid strong,
.ksa-proof-grid strong {
  display: block;
  color: var(--brand);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.95;
}

.outcome-grid article > span,
.ksa-proof-grid article > span,
.kpi-map-grid article > span {
  display: block;
  margin: 10px 0 24px;
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.outcome-grid h3,
.kpi-map-grid h3,
.sector-system-grid h3,
.ksa-proof-grid h3 { font-size: 1rem; color: var(--text-dark); }

.outcome-grid p,
.kpi-map-grid p,
.sector-system-grid p,
.ksa-proof-grid p { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.65; }

.kpi-map { background: var(--white); }
.kpi-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-map-grid article:nth-child(3n) { border-right: 0; }
.kpi-map-grid strong { display: block; color: var(--brand); font-size: 1.1rem; margin-bottom: 10px; }

.sector-system { background: #eef4fb; border-top: 1px solid rgba(0,46,94,0.12); }
.sector-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sector-system-grid article:nth-child(3n) { border-right: 0; }
.sector-system-grid b { display: block; margin-bottom: 28px; color: var(--accent); font-size: 0.7rem; letter-spacing: 0.1em; }

.delivery-lifecycle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(38px, 5vw, 64px);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}

.lifecycle-step {
  position: relative;
  min-width: 0;
  min-height: 430px;
  padding: clamp(24px, 3vw, 38px);
  background: var(--white);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}
.lifecycle-step:nth-child(3n) { border-right: 0; }
.lifecycle-step:nth-child(n+4) { border-bottom: 0; }
.lifecycle-step--final { background: var(--brand); }

.lc-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lc-num { color: var(--accent); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 800; }
.lc-phase { color: var(--text-muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.lifecycle-step--final .lc-num { color: var(--yellow); }
.lifecycle-step--final .lc-phase { color: rgba(255,255,255,0.5); }

.lifecycle-step h3 { margin: 24px 0 10px; color: var(--brand); font-size: clamp(1.08rem, 1.5vw, 1.32rem); }
.lifecycle-step > p { margin: 0 0 28px; color: var(--text-muted); font-size: 0.84rem; line-height: 1.65; }
.lifecycle-step--final h3 { color: var(--white); }
.lifecycle-step--final > p { color: rgba(255,255,255,0.62); }

.lc-signal,
.lc-blueprint,
.lc-progress,
.lc-rollout,
.lc-erp,
.lc-rhythm {
  height: 94px;
  margin-top: 34px;
  border: 1px solid rgba(0,94,150,0.12);
  border-radius: 6px;
  background: #f5f8fc;
  overflow: hidden;
}

.lc-signal { position: relative; display: grid; align-content: center; gap: 9px; padding: 18px; }
.lc-signal i { display: block; height: 4px; border-radius: 2px; background: rgba(0,94,150,0.14); }
.lc-signal i:nth-child(1) { width: 82%; }
.lc-signal i:nth-child(2) { width: 58%; }
.lc-signal i:nth-child(3) { width: 70%; }
.lc-signal b { position: absolute; top: 10px; right: 12px; color: var(--accent); font-size: 0.58rem; text-transform: uppercase; }

.lc-blueprint { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 8px; padding: 16px; }
.lc-blueprint span { display: grid; place-items: center; min-height: 42px; border: 1px solid rgba(0,94,150,0.2); color: var(--brand); font-size: 0.62rem; font-weight: 800; }

.lc-progress { display: flex; align-items: flex-end; gap: 8px; padding: 18px; }
.lc-progress span { flex: 1; background: var(--accent); opacity: 0.28; }
.lc-progress span:nth-child(1) { height: 30%; }
.lc-progress span:nth-child(2) { height: 48%; }
.lc-progress span:nth-child(3) { height: 68%; }
.lc-progress span:nth-child(4) { height: 90%; opacity: 0.9; }

.lc-rollout,
.lc-rhythm { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; }
.lc-rollout span,
.lc-rhythm span { color: var(--brand); font-size: 0.62rem; font-weight: 800; text-align: center; }
.lc-rollout i,
.lc-rhythm i { width: 22px; height: 1px; background: rgba(0,94,150,0.35); }

.lc-erp { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 12px; }
.lc-erp span { color: var(--text-muted); font-size: 0.54rem; font-weight: 700; text-align: center; }
.lc-erp b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: var(--white); font-size: 0.65rem; }

.lifecycle-step--final .lc-rhythm { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); }
.lifecycle-step--final .lc-rhythm span { color: var(--white); }
.lifecycle-step--final .lc-rhythm i { background: var(--yellow); }

.lc-output { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-light); }
.lc-output span { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.lc-output strong { color: var(--brand); font-size: 0.78rem; }
.lifecycle-step--final .lc-output { border-color: rgba(255,255,255,0.14); }
.lifecycle-step--final .lc-output span { color: rgba(255,255,255,0.42); }
.lifecycle-step--final .lc-output strong { color: var(--yellow); }

.method-assurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border-light);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.method-assurance span { padding: 16px; border-right: 1px solid var(--border-light); background: #eef4fb; color: var(--brand); font-size: 0.66rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.method-assurance span:last-child { border-right: 0; }

.purpose-section { display: grid; grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.5fr); gap: clamp(30px, 6vw, 90px); }
.purpose-intro h2 { max-width: 480px; }
.purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
.purpose-grid article { padding: clamp(28px, 4vw, 52px); background: var(--white); }
.purpose-grid article + article { border-left: 1px solid var(--border-light); }
.purpose-grid span { color: var(--accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.purpose-grid h3 { margin: 30px 0 18px; color: var(--brand); font-size: clamp(1.1rem, 1.7vw, 1.55rem); line-height: 1.35; }
.purpose-grid p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; }

.leadership-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 5vw, 60px); }
.leader-card { display: flex; flex-direction: column; min-height: 220px; padding: 22px; background: var(--white); border: 1px solid var(--border-light); border-radius: 8px; }
.leader-card--primary { background: var(--brand); }
.leader-initial { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: auto; border: 1px solid rgba(0,94,150,0.28); border-radius: 50%; color: var(--brand); font-size: 0.72rem; font-weight: 800; }
.leader-card--primary .leader-initial { border-color: rgba(255,255,255,0.28); color: var(--white); }
.leader-card h3 { margin: 32px 0 8px; color: var(--text-dark); font-size: 1rem; }
.leader-card p { margin: 0; color: var(--text-muted); font-size: 0.76rem; line-height: 1.5; }
.leader-card--primary h3 { color: var(--white); }
.leader-card--primary p { color: rgba(255,255,255,0.62); }

.alliances-section { background: var(--white); border-top: 1px solid var(--border-light); }
.alliance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; margin-top: clamp(32px, 5vw, 60px); }
.alliance-grid article { padding: 20px; border-right: 1px solid var(--border-light); background: var(--white); }
.alliance-grid article:last-child { border-right: 0; }
.alliance-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.alliance-grid span { display: block; margin-top: 12px; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; text-align: center; text-transform: uppercase; }

.portfolio-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-top: 1px solid var(--border-light); }
.portfolio-group:first-of-type { margin-top: clamp(32px, 5vw, 60px); }
.portfolio-label { padding: 22px 18px 22px 0; }
.portfolio-label span { display: block; color: var(--accent); font-size: 0.66rem; font-weight: 800; margin-bottom: 8px; }
.portfolio-label strong { color: var(--brand); font-size: 0.88rem; }
.portfolio-logos { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-left: 1px solid var(--border-light); }
.portfolio-logos img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--white); border-right: 1px solid var(--border-light); }
.portfolio-logos--single { grid-template-columns: minmax(90px, 130px); }

.ksa-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ksa-proof .text-link { display: inline-flex; gap: 10px; margin-top: 30px; color: var(--brand); font-weight: 800; font-size: 0.8rem; }

.phone-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; max-width: 320px; }
.phone-list--card { justify-content: flex-end; }

@media (max-width: 1000px) {
  .outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome-grid article:nth-child(2n) { border-right: 0; }
  .leadership-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .outcome-grid,
  .kpi-map-grid,
  .sector-system-grid,
  .ksa-proof-grid,
  .purpose-grid,
  .alliance-grid { grid-template-columns: 1fr; }
  .outcome-grid article,
  .kpi-map-grid article,
  .sector-system-grid article,
  .ksa-proof-grid article,
  .alliance-grid article { border-right: 0; }
  .purpose-section { grid-template-columns: 1fr; }
  .purpose-grid article + article { border-left: 0; border-top: 1px solid var(--border-light); }
  .leadership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifecycle-step:nth-child(n) { border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
  .lifecycle-step:nth-child(2n) { border-right: 0; }
  .lifecycle-step:nth-child(n+5) { border-bottom: 0; }
  .portfolio-group { grid-template-columns: 1fr; }
  .portfolio-label { padding: 18px 0 12px; }
  .portfolio-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; }
  .phone-list { justify-content: flex-start; max-width: none; }
}

@media (max-width: 480px) {
  .leadership-grid { grid-template-columns: 1fr; }
  .leader-card { min-height: 180px; }
  .portfolio-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .delivery-lifecycle { grid-template-columns: 1fr; }
  .lifecycle-step { min-height: 390px; border-right: 0 !important; border-bottom: 1px solid var(--border-light) !important; }
  .lifecycle-step:last-child { border-bottom: 0 !important; }
  .method-assurance { grid-template-columns: 1fr; }
  .method-assurance span { border-right: 0; border-bottom: 1px solid var(--border-light); }
  .method-assurance span:last-child { border-bottom: 0; }
}

/* ── Arabic RTL: final letter-spacing/uppercase reset ──────────────
   Placed last so it beats every other !important tracking rule in
   this file (buttons, badges, labels, hero headline, stat labels,
   etc.) that was designed for Latin uppercase text. Arabic script
   must never receive artificial letter-spacing. ─────────────────── */
html[dir="rtl"] *,
html[lang="ar"][dir="rtl"] * {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ── Arabic RTL: final font-family fix ──────────────────────────────
   Placed absolute last, with boosted specificity (html + two attribute
   selectors), so it beats every other same-specificity !important rule
   in this file — including nested selectors like ".hero-title .hero-word"
   that were forcing the Latin heading font (no Arabic glyphs) back onto
   the actual visible text inside headings. ─────────────────────────── */
html[lang="ar"][dir="rtl"] h1,
html[lang="ar"][dir="rtl"] h2,
html[lang="ar"][dir="rtl"] h3,
html[lang="ar"][dir="rtl"] h4,
html[lang="ar"][dir="rtl"] .hero-title,
html[lang="ar"][dir="rtl"] .hero-title .hero-word,
html[lang="ar"][dir="rtl"] .hero-title .hero-line span,
html[lang="ar"][dir="rtl"] .hero-word,
html[lang="ar"][dir="rtl"] .hero-line-pre .hero-word,
html[lang="ar"][dir="rtl"] .proof-pill strong,
html[lang="ar"][dir="rtl"] .stat-num,
html[lang="ar"][dir="rtl"] .pmv,
html[lang="ar"][dir="rtl"] .bp-hub,
html[lang="ar"][dir="rtl"] .imr-big {
  font-family: var(--font-ar-display) !important;
}

html[lang="ar"][dir="rtl"] body,
html[lang="ar"][dir="rtl"] nav,
html[lang="ar"][dir="rtl"] p,
html[lang="ar"][dir="rtl"] li,
html[lang="ar"][dir="rtl"] span,
html[lang="ar"][dir="rtl"] a,
html[lang="ar"][dir="rtl"] label,
html[lang="ar"][dir="rtl"] input,
html[lang="ar"][dir="rtl"] select,
html[lang="ar"][dir="rtl"] textarea,
html[lang="ar"][dir="rtl"] button {
  font-family: var(--font-ar-body) !important;
}

/* ── Arabic RTL: hero line-height fix ────────────────────────────────
   .hero-line uses overflow:hidden as a slide-reveal mask, sized to the
   Latin hero font's tight line-height (1.05). Noto Kufi Arabic has
   taller diacritic dots/ascenders that don't fit that box and were
   getting clipped top and bottom. Give Arabic hero text more vertical
   room so nothing is cropped. ───────────────────────────────────────── */
html[lang="ar"][dir="rtl"] .hero-title {
  font-size: clamp(2.2rem, 3.6vw, 3.6rem) !important;
  line-height: 1.22 !important;
}
html[lang="ar"][dir="rtl"] .hero-line-pre .hero-word {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important;
  line-height: 1.22 !important;
}
html[lang="ar"][dir="rtl"] .hero-line {
  margin-block: 0.06em;
  padding-bottom: 0.18em;
}

/* ── Arabic RTL: heading line-height, site-wide ───────────────────────
   Same root cause as the hero-title fix above: every heading in this
   file is tuned to a tight Latin line-height (h2 is line-height:1, h1
   has no override at all). Noto Kufi Arabic's diacritic dots/ascenders
   don't fit that box, so any heading that wraps to 2+ lines (section
   titles, card headings, page headers) gets lines crowding or touching
   each other. Applies to every h1-h4 in Arabic, not just the hero. ── */
html[lang="ar"][dir="rtl"] h1,
html[lang="ar"][dir="rtl"] h2,
html[lang="ar"][dir="rtl"] h3,
html[lang="ar"][dir="rtl"] h4 {
  line-height: 1.38 !important;
}

/* ── Arabic RTL: blueprint diagram arrows point into the hub ─────────
   .sv-blueprint-new is a flex row (nodes, lines, hub in DOM order). In
   RTL the row visually reverses, putting the hub ("المعادلة") on the
   left instead of the right — but .bp-line::after's arrowhead is
   pinned with a physical `right: 0`, so it stayed on the nodes' side
   and now points away from the hub instead of into it. Move the
   arrowhead to the hub-adjacent end and mirror its chevron shape, and
   flip the line's brightness gradient to still intensify toward the
   hub. ────────────────────────────────────────────────────────────── */
html[lang="ar"][dir="rtl"] .bp-line {
  background: linear-gradient(90deg, var(--accent), rgba(8,47,115,0.3)) !important;
}
html[lang="ar"][dir="rtl"] .bp-line::after {
  right: auto !important;
  left: 0 !important;
  border-right: none !important;
  border-top: 1.5px solid var(--accent) !important;
  border-left: 1.5px solid var(--accent) !important;
  transform: translateY(-50%) rotate(-45deg) !important;
}

/* ── Arabic RTL: footer "Powered by" stays left-to-right ──────────────
   The logo credit reads as an English lockup ("Powered by [logo]") even
   on Arabic pages, so keep it LTR — otherwise RTL flex-reverses the row
   and the logo ends up before the text instead of after it. */
html[lang="ar"][dir="rtl"] .footer-powered {
  direction: ltr;
}

/* ── Arabic RTL: strategic-costing bar chart no longer clips ──────────
   .sv-waterfall IS the .service-visual box, fixed at 90px with
   overflow:hidden. Its EN row labels ("Revenue", "COGS", "Overhead",
   "Margin") are single short words that fit .sv-label's 46px column on
   one line. The Arabic translations ("تكلفة البضاعة",
   "المصروفات العامة") are longer phrases that wrap to 2 lines there,
   pushing the 4-row chart past 90px tall — the bottom row ("الهامش")
   was getting clipped. Widen the label column so fewer labels wrap,
   and let the box grow to fit whatever still does. ───────────────── */
html[lang="ar"][dir="rtl"] .sv-waterfall {
  height: auto !important;
  min-height: 90px;
}
html[lang="ar"][dir="rtl"] .sv-waterfall .sv-label {
  width: 68px;
}

/* ── Arabic RTL: before/after arrow points the right way ──────────────
   .ba2-arrow-svg's desktop rotate(-90deg) turns the down-arrow to point
   right, matching the "قبل" (before) card DOM-first / "بعد" (after)
   card DOM-last order under LTR (before on the left, after on the
   right, arrow pointing right). RTL grid-reverses that row — before
   ends up on the right, after on the left — but the rotation is a
   physical value that never flipped with it, so the arrow kept
   pointing right, away from "بعد" instead of into it. */
@media (min-width: 901px) {
  html[lang="ar"][dir="rtl"] .ba2-arrow-svg {
    transform: rotate(90deg);
  }
}

/* ── Arabic RTL: phone numbers keep LTR digit order ───────────────────
   "+966 501 240 393" etc. are plain text sitting inside an RTL
   paragraph. Without an explicit direction, the browser's bidi
   algorithm treats the space-separated groups as part of the
   surrounding RTL run and reorders them (groups AND the leading "+"
   end up read right-to-left), even though the digits within each
   group are untouched. Phone numbers are always written left-to-right
   regardless of page language, so force it. */
html[lang="ar"][dir="rtl"] .ct-phone {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── Arabic RTL: case-study carousel arrows swap sides ─────────────────
   #csPrev/#csNext are pinned with physical left/right offsets, matching
   LTR (prev on the left pointing back, next on the right pointing
   forward). Under RTL the track now advances the opposite physical
   direction (see initCsCarousel in script.js), so the buttons need to
   swap sides too — next on the left, prev on the right — with their
   chevrons mirrored to keep pointing the way the content actually
   moves. */
html[lang="ar"][dir="rtl"] #csPrev.cs-side-btn {
  left: auto !important;
  right: -22px !important;
}
html[lang="ar"][dir="rtl"] #csNext.cs-side-btn {
  right: auto !important;
  left: -22px !important;
}
html[lang="ar"][dir="rtl"] #csPrev.cs-side-btn svg,
html[lang="ar"][dir="rtl"] #csNext.cs-side-btn svg {
  transform: scaleX(-1);
}