@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --bg: #f8fafc;
  --bg-strong: #ffffff;
  --text-main: #0b1220;
  --text-muted: #5b6b81;
  --accent: #4d8ef7;
  --accent-blue: #1d4ed8;
  --accent-blue-soft: #dbeafe;
  --accent-green: #22c55e;
  --accent-cyan: #22d3ee;
  --accent-pink: #f43f5e;
  --card-border: rgba(148, 163, 184, 0.35);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 2px 4px rgba(15, 23, 42, 0.06), 0 20px 50px rgba(15, 23, 42, 0.15);
  --radius-xl: 24px;
  --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-main);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.page-transition-enabled {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

body.page-is-leaving {
  opacity: 0.82;
  filter: saturate(0.92);
}

.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), transparent 42%),
    rgba(5, 10, 20, 0.0);
  opacity: 0;
  transition: opacity 0.42s ease, background-color 0.42s ease;
}

.page-transition-overlay.is-active {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.04), transparent 42%),
    rgba(5, 10, 20, 0.3);
}

.page-transition-overlay.is-entering {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.04), transparent 42%),
    rgba(5, 10, 20, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  body.page-transition-enabled {
    transition: none;
  }

  .page-transition-overlay {
    transition: none;
  }
}

a { text-decoration: none; color: inherit; }


/* ════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.nav.nav--scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 30px rgba(15, 23, 42, 0.08);
}
.nav.nav--dark {
  background: rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.nav.nav--dark .nav-logo,
.nav.nav--dark .nav-links a,
.nav.nav--dark .nav-toggle { color: #ffffff; }
.nav.nav--dark .nav-logo span { color: #3b82f6; }
.nav.nav--dark .nav-links a::after { background: #ffffff; }
.nav.nav--dark .nav-links.open a { color: var(--text-main); }
.nav.nav--dark .nav-links.open a::after { background: var(--text-main); }

.nav-inner {
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.4s ease;
}
.nav-logo span { color: var(--accent-blue); transition: color 0.4s ease; }
.nav-links { display: flex; gap: 28px; font-size: 0.92rem; font-weight: 500; }
.nav-links a {
  position: relative; padding-bottom: 4px;
  color: var(--text-muted); transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-main); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0; background: var(--text-main);
  border-radius: 999px; transition: width 0.25s ease-out, background 0.4s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: none; }
.nav-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: var(--text-main); transition: color 0.4s ease; }

/* Client portal entrance — a pill, so it reads as "sign in to an app"
   rather than as another content page in the nav. */
.nav-links a.nav-portal {
  padding: 7px 16px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  margin-left: 4px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.nav-links a.nav-portal::after { display: none; }   /* no underline sweep */
.nav-links a.nav-portal:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #fff;
}
.nav.nav--dark .nav-links a.nav-portal { border-color: rgba(255, 255, 255, 0.45); }
.nav.nav--dark .nav-links a.nav-portal:hover {
  background: #fff;
  border-color: #fff;
  color: #0b1220;
}
.nav.nav--dark .nav-links.open a.nav-portal { border-color: rgba(148, 163, 184, 0.5); }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin: 16px 32px 0; font-size: 0.9rem; font-weight: 600; color: var(--accent-blue); }
.back-link:hover { color: #0b1220; }


/* ════════════════════════════════════════════════
   HERO — Bold Typewriter
   ════════════════════════════════════════════════ */
.hero-new {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #ffffff; position: relative; overflow: hidden;
  padding: 120px 40px 80px;
}
.hero-new__content { text-align: center; max-width: 900px; width: 100%; }
.hero-new__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw + 1rem, 7rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  color: #0b1220; display: inline; position: relative;
}
.hero-new__cursor {
  display: inline-block; width: 4px;
  height: clamp(3.5rem, 9vw, 7.5rem);
  background: var(--accent-blue); margin-left: 4px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.7s step-end infinite;
}
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.hero-new__tagline {
  font-size: clamp(1.05rem, 1.6vw + 0.4rem, 1.35rem);
  color: var(--text-muted); font-weight: 400;
  max-width: 720px; margin: 32px auto 0; line-height: 1.65;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.hero-new__tagline.visible { opacity: 1; transform: translateY(0); }
.hero-new__location {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-muted); font-weight: 600; margin-top: 20px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.hero-new__location.visible { opacity: 1; transform: translateY(0); }
.hero-new__location-pin { color: var(--accent-blue); font-size: 0.65rem; vertical-align: middle; margin-right: 4px; }
.hero-new__cta-row {
  display: flex; gap: 16px; justify-content: center; align-items: center;
  margin-top: 40px; flex-wrap: wrap;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.hero-new__cta-row.visible { opacity: 1; transform: translateY(0); }


/* ════════════════════════════════════════════════
   HORIZONTAL SCROLL SHOWCASE
   ════════════════════════════════════════════════ */
.hscroll {
  height: 640vh;
  position: relative;
}

.hscroll__sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
}

/* ── Process page sits BEHIND the track ── */
.hscroll__under {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a0e17;
  display: flex; align-items: center; justify-content: center;
}

/* ── Track sits ON TOP, z-index 2 ──
   The panels used to be a 500vw filmstrip dragged sideways. They are now a
   stack of cards: each one slides up over the one before it, which recedes
   and dims behind it. Vertical motion matching the scroll direction reads as
   depth rather than as the page being hijacked. script.js drives it. */
.hscroll__track {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.hscroll__panel {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  /* Lifts the incoming card off the one it is covering. Static, so it costs
     nothing per frame — the compositor just moves the layer. */
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
}

/* Correct first paint before script.js runs: every card but the first waits
   below the fold, so panel 4 can't flash on top through source order. */
.hscroll__panel { transform: translate3d(0, 100%, 0); }
.hscroll__panel:first-child { transform: none; }

/* Veil over a card that has been covered. JS drives --dim from 0 → 1; a
   pseudo-element composites far cheaper than a filter on a full-screen layer. */
.hscroll__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #05070c;
  opacity: var(--dim, 0);
  pointer-events: none;
}

/* ── Text panel ("How We Help") ── */
.hscroll__panel--text {
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
}

.hscroll__title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 700; letter-spacing: -0.04em;
  color: #0b1220; text-align: center; line-height: 0.9;
  padding: 0 40px;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.hscroll__panel--text.letters-visible .hscroll__title {
  opacity: 1;
  transform: translateY(0);
}

.hscroll__word { display: inline-flex; }

.hscroll__letter {
  display: inline-block;
  font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 700;
  /* Start: invisible, pushed down */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 0.06s);
}

.hscroll__letter--lg {
  font-size: clamp(6.5rem, 16vw, 16rem);
}

/* Animate in when visible */
.hscroll__panel--text.letters-visible .hscroll__letter {
  opacity: 1;
  transform: translateY(0);
}

/* ── Image panels ── */
/* ══════════════════════════════════════════════════════════════
   SERVICE SHOWCASE — panels 2, 3, 4
   The image used to be full-bleed with a blurred sidebar dropped over
   it, so each service arrived as a whole new screen. It now sits in a
   fixed window with the copy beside it. All three panels share exactly
   the same geometry, so dissolving between them reads as one window
   whose contents change rather than three cards going past.
   Driven by layoutStack() in script.js.
   ══════════════════════════════════════════════════════════════ */
.hscroll__panel--img {
  background: #04060b;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  align-items: center;
  gap: clamp(28px, 4vw, 76px);
  padding: 0 clamp(32px, 6vw, 104px);
}

/* Ambient light behind the window, so it feels lit rather than pasted on. */
.hscroll__panel--img::before {
  content: "";
  position: absolute;
  right: -8%; top: 50%;
  width: 62%; aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(77, 142, 247, 0.18), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* The window itself. `order` puts it on the right while the image stays
   first in the DOM, so reading order and alt text are untouched. */
.hscroll__img {
  display: block;
  order: 2;
  z-index: 1;
  width: 100%;
  height: min(62vh, 560px);
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    0 48px 100px rgba(0, 0, 0, 0.68),
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  filter: brightness(0.82) saturate(1.05);
  /* Settles from a slight push-in as its panel becomes active. */
  transform: scale(1.045);
  opacity: 0;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.75s ease;
}
.hscroll__panel.bar-visible .hscroll__img {
  transform: scale(1);
  opacity: 1;
}

/* Last panel — will be scaled by JS, needs transform-origin center */
.hscroll__panel--last {
  transform-origin: center center;
  will-change: transform, border-radius;
}

/* ── Copy column, left of the window ──
   Was an absolutely-positioned blurred panel sliding in from the right.
   It is now simply the first column of the grid, rising into place. */
.hscroll__sidebar {
  position: relative;
  order: 1;
  z-index: 1;
  width: 100%; max-width: 560px;
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex; align-items: center;
  padding: 0;
  color: #ffffff;
  transform: translateY(26px);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease;
}
.hscroll__panel.bar-visible .hscroll__sidebar {
  transform: none;
  opacity: 1;
}
.hscroll__sidebar-inner { width: 100%; }
.hscroll__sidebar-eyebrow {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.4);
  font-weight: 600; display: block; margin-bottom: 16px;
}
.hscroll__sidebar-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw + 0.5rem, 2.2rem);
  font-weight: 700; margin-bottom: 16px;
  letter-spacing: -0.01em; line-height: 1.15;
}
.hscroll__sidebar-text {
  font-size: 0.95rem; line-height: 1.65;
  color: rgba(255,255,255,0.72);
  margin-bottom: 12px;
}
.hscroll__sidebar-list {
  list-style: none; padding: 0; margin: 14px 0 18px;
}
.hscroll__sidebar-list li {
  font-size: 0.88rem; color: rgba(255,255,255,0.65);
  padding: 5px 0 5px 20px; position: relative;
}

/* ── Staggered entrance ──
   Each line arrives just after the one above it, so the copy assembles
   instead of appearing all at once. Delays only apply on the way IN;
   leaving is immediate so a fast scroll never trails behind. */
.hscroll__panel--img .hscroll__sidebar-eyebrow,
.hscroll__panel--img .hscroll__sidebar-title,
.hscroll__panel--img .hscroll__sidebar-text,
.hscroll__panel--img .hscroll__sidebar-list li,
.hscroll__panel--img .hscroll__sidebar-link {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.hscroll__panel--img.bar-visible .hscroll__sidebar-eyebrow,
.hscroll__panel--img.bar-visible .hscroll__sidebar-title,
.hscroll__panel--img.bar-visible .hscroll__sidebar-text,
.hscroll__panel--img.bar-visible .hscroll__sidebar-list li,
.hscroll__panel--img.bar-visible .hscroll__sidebar-link {
  opacity: 1;
  transform: none;
}
.hscroll__panel--img.bar-visible .hscroll__sidebar-eyebrow      { transition-delay: 0.06s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-title        { transition-delay: 0.12s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-text         { transition-delay: 0.18s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-text + .hscroll__sidebar-text { transition-delay: 0.23s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-list li:nth-child(1) { transition-delay: 0.28s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-list li:nth-child(2) { transition-delay: 0.33s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-list li:nth-child(3) { transition-delay: 0.38s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-list li:nth-child(4) { transition-delay: 0.43s; }
.hscroll__panel--img.bar-visible .hscroll__sidebar-link         { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
  .hscroll__panel--img .hscroll__sidebar-eyebrow,
  .hscroll__panel--img .hscroll__sidebar-title,
  .hscroll__panel--img .hscroll__sidebar-text,
  .hscroll__panel--img .hscroll__sidebar-list li,
  .hscroll__panel--img .hscroll__sidebar-link,
  .hscroll__img,
  .hscroll__sidebar {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
.hscroll__sidebar-list li::before {
  content: "→"; position: absolute; left: 0;
  color: #4d8ef7; font-weight: 600;
}
.hscroll__sidebar-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 0.92rem; font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, gap 0.25s ease;
}
.hscroll__sidebar-link:hover { border-color: #fff; gap: 12px; }


/* ════════════════════════════════════════════════
   PROCESS PAGE — Infographic Redesign
   ════════════════════════════════════════════════ */

/* ── Scroll-driven reveal ── */
.process-page__header,
.process-tl__step,
.process-page__footer {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-page__header.step-visible,
.process-tl__step.step-visible,
.process-page__footer.step-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page container ── */
.process-page {
  position: relative;
  width: 100%; max-width: 1200px;
  padding: 36px 48px 28px;
  color: #ffffff;
  z-index: 2;
  overflow: hidden;
}

/* ── Ambient orbs ── */
.pinf-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.pinf-orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(77,142,247,0.10) 0%, transparent 65%);
  top: -180px; left: -120px;
  filter: blur(40px);
}
.pinf-orb--2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(77,142,247,0.07) 0%, transparent 65%);
  bottom: -100px; right: -80px;
  filter: blur(40px);
}
.pinf-orb--3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(77,142,247,0.08) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(60px);
}

/* ── Header ── */
.process-page__header {
  text-align: center;
  margin-bottom: 28px;
  position: relative; z-index: 2;
}
.pinf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.24em; color: #4d8ef7; font-weight: 700;
  padding: 5px 14px 5px 10px;
  border: 1px solid rgba(77,142,247,0.3);
  border-radius: 999px;
  margin-bottom: 14px;
}
.pinf-eyebrow__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #4d8ef7;
  box-shadow: 0 0 6px #4d8ef7;
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}
.pinf-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw + 0.4rem, 2.6rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.025em;
  color: #ffffff;
}
.pinf-heading em { font-style: normal; color: #4d8ef7; }
.pinf-subhead {
  font-size: 0.88rem; color: rgba(255,255,255,0.4);
  margin-top: 8px; letter-spacing: 0.01em;
}

/* ── Infographic grid: 4 cards + 3 connectors ── */
.pinf-grid {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  gap: 0;
  align-items: center;
  position: relative; z-index: 2;
}

/* ── Connector ── */
.pinf-connector {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pinf-connector__line {
  width: 1px; height: 32px;
  background: linear-gradient(180deg, transparent, rgba(77,142,247,0.35), transparent);
}
.pinf-connector__chevron {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(77,142,247,0.25);
  background: rgba(77,142,247,0.06);
}
.pinf-connector__chevron svg { width: 8px; height: 8px; }

/* ── Card — Double Bezel ── */
.pinf-card { position: relative; }

.pinf-card__shell {
  background: rgba(77,142,247,0.05);
  border: 1px solid rgba(77,142,247,0.18);
  border-radius: 20px;
  padding: 2px;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-tl__step.step-visible .pinf-card__shell {
  border-color: rgba(77,142,247,0.35);
  box-shadow: 0 0 28px rgba(77,142,247,0.07), inset 0 1px 0 rgba(255,255,255,0.04);
}

.pinf-card__inner {
  background: rgba(8, 12, 24, 0.88);
  border-radius: 18px;
  padding: 20px 18px 16px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

/* Ghost number */
.pinf-card__ghost {
  position: absolute; top: -8px; right: 2px;
  font-family: var(--font-display);
  font-size: 4.5rem; font-weight: 800; line-height: 1;
  color: rgba(77,142,247,0.05);
  pointer-events: none; user-select: none;
  transition: color 0.5s ease;
}
.process-tl__step.step-visible .pinf-card__ghost {
  color: rgba(77,142,247,0.09);
}

/* Icon */
.pinf-card__icon-wrap {
  position: relative; width: 48px; height: 48px; margin-bottom: 14px;
}
.pinf-card__icon-glow {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(77,142,247,0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.process-tl__step.step-visible .pinf-card__icon-glow { opacity: 1; }

.pinf-card__icon {
  position: relative; width: 48px; height: 48px; border-radius: 14px;
  background: rgba(77,142,247,0.08);
  border: 1px solid rgba(77,142,247,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.process-tl__step.step-visible .pinf-card__icon {
  border-color: rgba(77,142,247,0.45);
  background: rgba(77,142,247,0.12);
}
.pinf-card__icon svg { width: 22px; height: 22px; }

/* Day label */
.pinf-card__day {
  font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.22em; color: #4d8ef7; font-weight: 700;
  margin-bottom: 6px;
}

/* Title */
.pinf-card__title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; color: #ffffff;
  margin-bottom: 8px; line-height: 1.2;
}

/* Description */
.pinf-card__desc {
  font-size: 0.8rem; line-height: 1.62;
  color: rgba(255,255,255,0.45);
  margin-bottom: 12px;
}

/* Tags */
.pinf-card__tags {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.pinf-tag {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(77,142,247,0.08);
  border: 1px solid rgba(77,142,247,0.18);
  color: rgba(255,255,255,0.5);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.process-tl__step.step-visible .pinf-tag {
  color: rgba(255,255,255,0.7);
  border-color: rgba(77,142,247,0.3);
}
.pinf-tag--accent {
  color: #4d8ef7 !important;
  border-color: rgba(77,142,247,0.5) !important;
  background: rgba(77,142,247,0.12) !important;
}

/* Bottom fill bar */
.pinf-card__bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #4d8ef7 50%, transparent 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.process-tl__step.step-visible .pinf-card__bar { transform: scaleX(1); }

/* ── Footer ── */
.process-page__footer {
  margin-top: 20px;
  position: relative; z-index: 2;
}
.pinf-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  gap: 20px; flex-wrap: wrap;
}
.pinf-footer__text {
  font-size: 0.88rem; color: rgba(255,255,255,0.45);
}
.pinf-blue { color: #4d8ef7; }

/* CTA — Button in button */
.pinf-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: #4d8ef7; color: #ffffff;
  border: none; border-radius: 999px;
  padding: 10px 12px 10px 20px;
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 24px rgba(77,142,247,0.35);
}
.pinf-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(77,142,247,0.5);
}
.pinf-cta__pill {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease;
}
.pinf-cta:hover .pinf-cta__pill {
  transform: translateX(2px);
  background: rgba(255,255,255,0.26);
}
.txt-blue { color: #4d8ef7; }
.btn-primary--light {
  background: #4d8ef7;
  box-shadow: 0 8px 30px rgba(77,142,247,0.3);
}
.btn-primary--light:hover {
  box-shadow: 0 14px 40px rgba(77,142,247,0.45);
}


/* ════════════════════════════════════════════════
   BUTTONS (shared)
   ════════════════════════════════════════════════ */
.btn-primary {
  border-radius: 999px; padding: 14px 28px;
  font-size: 0.95rem; font-weight: 600; border: none; cursor: pointer;
  background: #0b1220; color: #ffffff;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 30px rgba(11,18,32,0.2);
}
.btn-primary span.arrow { font-size: 1.1rem; transition: transform 0.25s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(11,18,32,0.3); }
.btn-primary:hover span.arrow { transform: translateX(3px); }

.btn-ghost {
  border-radius: 999px; padding: 13px 26px;
  font-size: 0.92rem; font-weight: 500;
  border: 1.5px solid rgba(11,18,32,0.2);
  background: transparent; color: var(--text-main);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.btn-ghost:hover { border-color: #0b1220; transform: translateY(-2px); }


/* ════════════════════════════════════════════════
   SHARED LAYOUT (other pages)
   ════════════════════════════════════════════════ */
.section { width: 100%; padding: 72px 32px; }
.section-tight-top { padding-top: 40px; }
.section-tight-bottom { padding-bottom: 40px; }
.section-header { margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
.section-header-centered { align-items: center; text-align: center; }
.section-header-centered .section-title, .section-header-centered .section-subtitle { margin-left: auto; margin-right: auto; }
.contact-title { font-family: var(--font-display); font-size: clamp(2.4rem,3.4vw + 1.1rem,3.6rem); font-weight: 700; text-align: center; }
.contact-subtitle { font-size: 1.05rem; color: var(--text-muted); text-align: center; max-width: 720px; }
.contact-body { max-width: 720px; margin: 0 auto; text-align: center; }
.contact-heading { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; }
.contact-details { font-size: 1rem; color: var(--text-main); }
.contact-link { color: var(--accent-blue); font-weight: 600; }
.contact-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 12px; }
.contact-chip { border: 1px solid var(--card-border); background: var(--bg-strong); padding: 6px 10px; border-radius: 999px; font-size: 0.85rem; }
.contact-text { font-size: 1.02rem; font-weight: 600; color: var(--text-main); margin-top: 12px; }
.how-work-title { font-family: var(--font-display); font-size: clamp(2.6rem,3.8vw + 1.2rem,4rem); font-weight: 700; text-align: center; }
.how-work-subtitle { font-size: 1.05rem; color: var(--text-muted); text-align: center; margin-top: 4px; }
.how-work-note { font-size: 1.05rem; font-weight: 600; text-align: center; margin-top: 28px; color: var(--text-main); }
.eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-blue); font-weight: 600; }
.eyebrow-center { text-align: center; font-weight: 900; color: #1f6feb; font-size: 2.4rem; letter-spacing: 0.02em; font-family: var(--font-display); text-transform: none; }
.eyebrow-heading { font-size: 1.35rem; letter-spacing: 0.06em; font-weight: 700; color: #1f6feb; font-family: var(--font-display); text-transform: none; }
.section-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; }
.section-subtitle { font-size: 0.98rem; color: var(--text-muted); max-width: 520px; }
.section-subtitle-strong { margin-top: 24px; color: #0b1220; font-weight: 600; max-width: 720px; text-align: center; margin-left: auto; margin-right: auto; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
.card { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--card-border); padding: 20px 18px; background: var(--bg-strong); overflow: hidden; cursor: default; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid transparent; background: linear-gradient(135deg,rgba(37,99,235,0),rgba(34,197,94,0)); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; transition: background 0.25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(37,99,235,0.2); }
.card:hover::before { background: linear-gradient(135deg,rgba(37,99,235,0.9),rgba(34,197,94,0.9)); }
.card-icon { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.4); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.2rem; background: radial-gradient(circle at top left,rgba(219,234,254,0.9),#fff); overflow: hidden; }
.card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-ai { color: #1d4ed8; background: radial-gradient(circle at top left,#dbeafe,#fff); }
.icon-bot { color: #7c3aed; background: radial-gradient(circle at top left,#ede9fe,#fff); }
.icon-adv { color: #ea580c; background: radial-gradient(circle at top left,#ffedd5,#fff); }
.icon-web { color: #0f766e; background: radial-gradient(circle at top left,#ccfbf1,#fff); }
.icon-voice { color: #be123c; background: radial-gradient(circle at top left,#ffe4e6,#fff); }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.card-text { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 10px; }
.card-link { font-size: 0.86rem; color: var(--accent-blue); display: inline-flex; align-items: center; gap: 6px; }
.split { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 40px; align-items: flex-start; }
.about-image { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-xl); border: 1px solid rgba(148,163,184,0.3); box-shadow: var(--shadow-soft); }
.how-work-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; }
.flow-card { background: var(--bg-strong); border: 1px solid var(--card-border); border-radius: 20px; padding: 18px 16px; box-shadow: var(--shadow-soft); text-align: center; }
.flow-icon { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 1.2rem; background: radial-gradient(circle at top left,rgba(219,234,254,0.9),#fff); border: 1px solid rgba(148,163,184,0.4); }
.flow-text { font-size: 0.92rem; color: var(--text-main); }
.flow-arrow { font-size: 1.4rem; color: var(--accent-blue); font-weight: 600; }
.process-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 18px; }
.process-title-heading { font-family: var(--font-display); font-size: clamp(2.4rem,3.2vw + 1rem,3.4rem); font-weight: 700; text-align: center; }
.process-subtitle { font-size: 1.05rem; color: var(--text-muted); text-align: center; margin-top: 4px; }
.process-step { background: var(--bg-strong); border: 1px solid var(--card-border); border-radius: 18px; padding: 16px 14px; box-shadow: var(--shadow-soft); text-align: center; }
.process-icon { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; font-size: 1.1rem; background: radial-gradient(circle at top left,rgba(219,234,254,0.9),#fff); border: 1px solid rgba(148,163,184,0.4); }
.process-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.process-text { font-size: 0.86rem; color: var(--text-muted); }
.process-arrow { font-size: 1.3rem; color: var(--accent-blue); font-weight: 600; }
ul.clean-list { list-style: none; padding-left: 0; }
ul.clean-list li { margin-bottom: 6px; font-size: 0.92rem; }
ul.check-list { list-style: none; padding-left: 0; }
ul.check-list li { margin-bottom: 8px; font-size: 0.92rem; }
ul.check-list li::before { content: "-"; margin-right: 8px; color: var(--accent-green); }
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-group { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
label { font-size: 0.85rem; color: var(--text-muted); }
input, textarea { border-radius: 999px; border: 1px solid var(--card-border); padding: 10px 12px; font-size: 0.9rem; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; background: #fff; }
textarea { border-radius: 16px; min-height: 120px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 1px rgba(37,99,235,0.25); }
.chat-page { padding: 24px 32px 0; min-height: calc(100vh - 160px); }
.chat-panel { max-width: 100%; margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; display: flex; flex-direction: column; min-height: calc(100vh - 240px); }
.chat-messages { padding: 12px 0 24px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; background: transparent; }
.chat-bubble { max-width: 78%; padding: 12px 14px; border-radius: 16px; font-size: 0.95rem; line-height: 1.5; box-shadow: 0 10px 22px rgba(15,23,42,0.08); }
.chat-bubble.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(148,163,184,0.35); }
.chat-bubble.user { align-self: flex-end; background: linear-gradient(135deg,var(--accent-blue),var(--accent-cyan)); color: #fff; }
.chat-input { display: flex; gap: 10px; padding: 14px; border-top: 1px solid rgba(148,163,184,0.35); background: #fff; position: sticky; bottom: 0; }
.chat-input input { flex: 1; }
.chat-bubble.typing { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.chat-bubble.typing .dot { width: 8px; height: 8px; border-radius: 999px; background: #94a3b8; animation: typing-bounce 1.1s infinite ease-in-out; }
.chat-bubble.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-bubble.typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce { 0%,80%,100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-6px); opacity: 1; } }

/* Old hero (other pages) */
.hero { width: 100%; margin: 0; padding: 96px 32px 80px; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 40px; align-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg,rgba(29,78,216,0.08),rgba(34,211,238,0.08)); min-height: 100vh; }
.hero::before { content: ""; position: absolute; inset: 0; background: url("images/hero-ai-automation-cape-town.webp") center/cover no-repeat; opacity: 0.76; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(248,250,252,0.6),rgba(248,250,252,0.15)); z-index: 1; }
.hero > * { position: relative; z-index: 2; }
.hero .reveal:first-child { margin-top: -18px; }
.hero-title { font-family: var(--font-display); font-size: clamp(2.1rem,3.1vw + 1.3rem,3rem); font-weight: 700; line-height: 1.05; margin-bottom: 14px; }
.hero-title span.gradient { background: none; color: #0b1220; }
.hero-text { font-size: 0.98rem; color: var(--text-muted); max-width: 520px; margin-bottom: 24px; }
.hero-lead { font-size: 1.15rem; color: #0b1220; font-weight: 600; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }


/* About page */
.section-copy { font-size: 1rem; line-height: 1.75; max-width: 720px; margin: 0 auto; }
.about-page {
  background:
    radial-gradient(circle at top left, rgba(34,211,238,0.08), transparent 26%),
    linear-gradient(180deg, #f6f9fc 0%, #ffffff 18%, #f8fafc 100%);
}
.about-shell {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.about-hero {
  position: relative;
  min-height: 100vh;
  padding: 136px 0 88px;
  overflow: hidden;
}
.about-hero__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(6px);
  pointer-events: none;
  transition: transform 0.25s ease-out;
}
.about-hero__orb--one {
  width: 420px;
  height: 420px;
  top: 8%;
  left: -120px;
  background: radial-gradient(circle, rgba(59,130,246,0.18), rgba(59,130,246,0.02) 70%);
  transform: translate3d(0, calc(var(--about-hero-progress, 0) * -90px), 0);
}
.about-hero__orb--two {
  width: 360px;
  height: 360px;
  right: -80px;
  bottom: 10%;
  background: radial-gradient(circle, rgba(34,211,238,0.16), rgba(34,211,238,0.02) 72%);
  transform: translate3d(0, calc(var(--about-hero-progress, 0) * 70px), 0);
}
.about-hero__grid {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.about-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.about-hero__eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-blue);
  font-weight: 700;
  margin-bottom: 18px;
}
.about-hero__headline {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-height: clamp(5rem, 9vw, 7.8rem);
}
.about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7vw, 6.9rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: #0b1220;
  display: inline;
}
.about-hero__cursor {
  height: clamp(3rem, 6vw, 5.8rem);
  width: 5px;
  margin-left: 0;
}
.about-hero__tagline {
  max-width: 680px;
  margin: 28px 0 0;
  font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.22rem);
}
.about-hero__location {
  margin-top: 22px;
  text-align: left;
}
.about-hero__meta-sep {
  color: rgba(100,116,139,0.55);
  margin: 0 8px;
  font-size: 0.55rem;
  vertical-align: middle;
}
.about-hero__cta {
  justify-content: flex-start;
}
.about-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.about-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(18px);
  font-size: 0.84rem;
  font-weight: 600;
  color: #0f172a;
  box-shadow: 0 18px 45px rgba(15,23,42,0.08);
}
.about-signal::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
}

.about-hero__panel {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(148,163,184,0.18);
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(241,245,249,0.72)),
    radial-gradient(circle at top right, rgba(59,130,246,0.18), transparent 35%);
  box-shadow: 0 28px 70px rgba(15,23,42,0.14);
  backdrop-filter: blur(22px);
}
.about-hero__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.about-mini-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
}
.about-mini-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,18,32,0.05);
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 700;
}
.about-hero__stack {
  display: grid;
  gap: 14px;
}
.about-mini-card {
  position: relative;
  border-radius: 24px;
  padding: 22px 20px 20px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(148,163,184,0.18);
  overflow: hidden;
}
.about-mini-card::after {
  content: "";
  position: absolute;
  inset: auto 20px 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,0.45), rgba(59,130,246,0));
}
.about-mini-card--accent {
  background: linear-gradient(135deg, #0b1220, #111f35);
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}
.about-mini-card--accent p,
.about-mini-card--accent .about-mini-card__number { color: rgba(255,255,255,0.72); }
.about-mini-card__number {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.about-mini-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 8px;
}
.about-mini-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.about-story {
  padding-top: 28px;
}
.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 54px;
  align-items: center;
}
.about-story__visual {
  position: relative;
}
.about-story__image-wrap {
  position: relative;
  padding: 28px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.14), transparent 32%),
    linear-gradient(180deg, #edf4fb 0%, #ffffff 100%);
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow: 0 24px 60px rgba(15,23,42,0.08);
}
.about-story__image {
  max-width: 100%;
  border-radius: 26px;
}
.about-story__badge {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(11,18,32,0.82);
  color: #fff;
  backdrop-filter: blur(16px);
}
.about-story__badge-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.6);
}
.about-story__body {
  max-width: 640px;
}
.about-story__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.8vw + 0.9rem, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 14px 0 18px;
}
.about-story__copy {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.about-story__quote {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(239,246,255,0.86));
  box-shadow: 0 18px 40px rgba(15,23,42,0.08);
}
.about-story__quote p {
  font-size: 1rem;
  color: #0f172a;
  font-weight: 600;
  line-height: 1.8;
}

.about-metrics .about-shell {
  width: min(1200px, calc(100% - 64px));
}

.about-journey {
  padding: 106px 0;
  background:
    radial-gradient(circle at 10% 18%, rgba(219,234,254,0.7), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.about-journey__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw + 1rem, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.about-journey__subtitle {
  max-width: 760px;
}
.about-journey__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1fr);
  gap: 42px;
  margin-top: 54px;
  align-items: start;
}
.about-journey__visual {
  position: sticky;
  top: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6px;
  gap: 16px;
  align-items: stretch;
}
.about-journey__visual-stack {
  position: relative;
  min-height: 480px;
}
.about-journey-card {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  color: #fff;
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition: opacity 0.55s ease, transform 0.55s ease;
  box-shadow: 0 26px 60px rgba(15,23,42,0.2);
}
.about-journey-card:nth-child(1) {
  background:
    linear-gradient(180deg, rgba(11,18,32,0.12), rgba(11,18,32,0.82)),
    url("images/business-website-design-cape-town.webp") center/cover no-repeat;
}
.about-journey-card:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(8,8,8,0.08), rgba(8,8,8,0.82)),
    url("images/ai-automation-cape-town.webp") center/cover no-repeat;
}
.about-journey-card:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(11,18,32,0.16), rgba(11,18,32,0.82)),
    url("images/ai-chatbot-voice-agent-cape-town.webp") center/cover no-repeat;
}
.about-journey-card:nth-child(4) {
  background:
    linear-gradient(135deg, rgba(11,18,32,0.92), rgba(15,23,42,0.75)),
    radial-gradient(circle at top right, rgba(34,211,238,0.22), transparent 28%);
}
.about-journey-card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.about-journey-card__eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.72);
  font-weight: 700;
}
.about-journey-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.2rem);
  line-height: 1.05;
}
.about-journey-card__copy {
  max-width: 30ch;
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.84);
}
.about-journey-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.about-journey-card__chips span {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.78rem;
  font-weight: 700;
}
.about-journey__meter {
  position: relative;
  --journey-progress: 0.25;
  height: 100%;
  min-height: 480px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  overflow: hidden;
}
.about-journey__meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--journey-progress, 0.25) * 100%);
  border-radius: inherit;
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-blue));
  transition: height 0.45s ease, width 0.45s ease;
}
.about-journey__steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.about-journey-step {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  padding: 30px;
  min-height: 320px;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 14px 40px rgba(15,23,42,0.05);
  opacity: 0.48;
  transform: translateX(0);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.about-journey-step.is-active {
  opacity: 1;
  transform: translateX(10px);
  border-color: rgba(59,130,246,0.28);
  box-shadow: 0 24px 55px rgba(15,23,42,0.08);
}
.about-journey-step__index {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: rgba(59,130,246,0.42);
}
.about-journey-step__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-journey-step__label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-blue);
  font-weight: 700;
  margin-bottom: 12px;
}
.about-journey-step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.1vw + 1.2rem, 2.2rem);
  line-height: 1.08;
  margin-bottom: 14px;
}
.about-journey-step p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.8;
}
.about-journey-step__result {
  margin-top: 20px;
  display: inline-flex;
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(29,78,216,0.08);
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 700;
}

.about-principles {
  padding-top: 20px;
  padding-bottom: 112px;
}
.about-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.about-principle-card {
  position: relative;
  padding: 30px 24px 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(219,234,254,0.9), transparent 28%),
    #ffffff;
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow: 0 18px 40px rgba(15,23,42,0.06);
  overflow: hidden;
}
.about-principle-card__ghost {
  position: absolute;
  right: 20px;
  top: 18px;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(59,130,246,0.08);
}
.about-principle-card h3 {
  font-family: var(--font-display);
  font-size: 1.34rem;
  line-height: 1.1;
  margin-bottom: 10px;
  max-width: 16ch;
}
.about-principle-card p {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 32ch;
}

.about-close {
  padding: 0 0 104px;
}
.about-close__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 34px;
  align-items: center;
  padding: 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(34,211,238,0.16), transparent 28%),
    linear-gradient(135deg, #071019 0%, #0b1220 60%, #102039 100%);
  color: #fff;
  box-shadow: 0 28px 70px rgba(15,23,42,0.22);
}
.about-close__copy .eyebrow {
  color: rgba(147,197,253,0.92);
}
.about-close__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.4vw + 1.1rem, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 14px 0 14px;
}
.about-close__copy p {
  max-width: 36ch;
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
}
.about-close__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.about-close__ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.about-close__ghost:hover {
  border-color: rgba(255,255,255,0.5);
}
.about-close__note {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  max-width: 32ch;
}


/* ════════════════════════════════════════════════
   SERVICES PAGE — Hero
   ════════════════════════════════════════════════ */
.svcs-hero {
  min-height: 88vh;
  background: #070b14;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 40px 100px;
  position: relative;
  overflow: hidden;
}
.svcs-hero__orb-1 {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 700px; height: 700px;
  top: -200px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(77,142,247,0.12) 0%, transparent 65%);
  filter: blur(60px);
}
.svcs-hero__orb-2 {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 400px; height: 400px;
  bottom: -100px; right: 10%;
  background: radial-gradient(circle, rgba(124,58,237,0.10) 0%, transparent 65%);
  filter: blur(60px);
}
.svcs-hero__inner { position: relative; z-index: 2; max-width: 860px; }
.svcs-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.24em; color: #4d8ef7; font-weight: 700;
  padding: 5px 16px 5px 12px;
  border: 1px solid rgba(77,142,247,0.3);
  border-radius: 999px;
  margin-bottom: 24px;
}
.svcs-hero__eyebrow-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #4d8ef7; box-shadow: 0 0 6px #4d8ef7;
  animation: dot-pulse 2s ease-in-out infinite;
}
.svcs-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw + 0.5rem, 5.2rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.05;
  color: #ffffff;
  margin-bottom: 20px;
}
.svcs-hero__title em { font-style: normal; color: #4d8ef7; }
.svcs-hero__subtitle {
  font-size: clamp(1rem, 1.4vw + 0.4rem, 1.2rem);
  color: rgba(255,255,255,0.5);
  max-width: 560px; margin: 0 auto 40px;
  line-height: 1.7;
}
.svcs-hero__cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* ── Service cards grid ── */
.svcs-section { padding: 80px 40px 80px; background: #f8fafc; }
.svcs-section__header { text-align: center; margin-bottom: 56px; }
.svcs-section__label {
  font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent-blue); font-weight: 700;
  display: block; margin-bottom: 12px;
}
.svcs-section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw + 0.5rem, 3.2rem);
  font-weight: 700; letter-spacing: -0.03em; color: #0b1220;
}
.svcs-section__sub {
  font-size: 1rem; color: var(--text-muted);
  max-width: 520px; margin: 12px auto 0; line-height: 1.7;
}
.svcs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.svcs-grid .svcs-card:nth-child(4),
.svcs-grid .svcs-card:nth-child(5) {
  /* last 2 cards — handled in a centered row via a wrapper trick */
}
.svcs-card {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,0.22);
  background: #ffffff;
  padding: 32px 28px 28px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s ease;
  box-shadow: 0 4px 20px rgba(15,23,42,0.06);
}
.svcs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(15,23,42,0.12);
  border-color: rgba(77,142,247,0.3);
}
.svcs-card__num {
  font-family: var(--font-display);
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(148,163,184,0.6);
  margin-bottom: 20px;
}
.svcs-card__icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 1.4rem;
}
.svcs-card__icon--web   { background: rgba(13,148,136,0.1);  color: #0d9488; }
.svcs-card__icon--auto  { background: rgba(29,78,216,0.1);   color: #1d4ed8; }
.svcs-card__icon--bot   { background: rgba(124,58,237,0.1);  color: #7c3aed; }
.svcs-card__icon--voice { background: rgba(190,18,60,0.1);   color: #be123c; }
.svcs-card__icon--consult { background: rgba(217,119,6,0.1); color: #d97706; }
.svcs-card__accent-line {
  position: absolute; top: 0; left: 28px; right: 28px; height: 2px;
  border-radius: 0 0 999px 999px;
}
.svcs-card__accent-line--web   { background: linear-gradient(90deg, transparent, #0d9488, transparent); }
.svcs-card__accent-line--auto  { background: linear-gradient(90deg, transparent, #1d4ed8, transparent); }
.svcs-card__accent-line--bot   { background: linear-gradient(90deg, transparent, #7c3aed, transparent); }
.svcs-card__accent-line--voice { background: linear-gradient(90deg, transparent, #be123c, transparent); }
.svcs-card__accent-line--consult { background: linear-gradient(90deg, transparent, #d97706, transparent); }
.svcs-card__title {
  font-family: var(--font-display);
  font-size: 1.18rem; font-weight: 700;
  color: #0b1220; margin-bottom: 10px; line-height: 1.2;
}
.svcs-card__text {
  font-size: 0.92rem; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 18px;
}
.svcs-card__list {
  list-style: none; padding: 0; margin: 0 0 22px;
}
.svcs-card__list li {
  font-size: 0.86rem; color: #475569;
  padding: 4px 0 4px 18px; position: relative;
}
.svcs-card__list li::before {
  content: "→"; position: absolute; left: 0;
  color: #4d8ef7; font-weight: 600; font-size: 0.8rem;
}
.svcs-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; font-weight: 700;
  color: var(--accent-blue);
  border-bottom: 1px solid rgba(29,78,216,0.25);
  padding-bottom: 1px;
  transition: gap 0.2s ease, border-color 0.2s ease;
}
.svcs-card__link:hover { gap: 10px; border-color: var(--accent-blue); }

/* Last 2 cards centered row */
.svcs-grid-row2 {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1200px; margin: 20px auto 0;
}
.svcs-grid-row2 .svcs-card { width: calc(33.333% + 10px); max-width: 380px; }

/* ── Trust Band ── */
.svcs-trust {
  background: #070b14;
  padding: 64px 40px;
}
.svcs-trust__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.svcs-trust__item {}
.svcs-trust__stat {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700; color: #4d8ef7;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.svcs-trust__label {
  font-size: 0.88rem; color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* ── Services Process ── */
.svcs-process { padding: 80px 40px; background: #ffffff; }
.svcs-process__header { text-align: center; margin-bottom: 48px; }
.svcs-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 900px; margin: 0 auto;
  position: relative;
}
.svcs-process__grid::before {
  content: "";
  position: absolute;
  top: 28px; left: calc(12.5% + 12px); right: calc(12.5% + 12px);
  height: 1px;
  background: linear-gradient(90deg, #1d4ed8 0%, #7c3aed 50%, #be123c 100%);
  opacity: 0.2;
}
.svcs-process__step { text-align: center; padding: 0 12px; }
.svcs-process__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #4d8ef7);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800;
  color: #fff; margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(77,142,247,0.35);
  position: relative; z-index: 1;
}
.svcs-process__step-title {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700; color: #0b1220; margin-bottom: 6px;
}
.svcs-process__step-text {
  font-size: 0.84rem; color: var(--text-muted); line-height: 1.55;
}

/* ── Services CTA ── */
.svcs-cta {
  padding: 80px 40px;
  background: linear-gradient(135deg, #070b14 0%, #0f1728 60%, #111f35 100%);
  text-align: center;
  position: relative; overflow: hidden;
}
.svcs-cta__orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 600px; height: 600px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(77,142,247,0.1) 0%, transparent 70%);
  filter: blur(60px);
}
.svcs-cta__inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
.svcs-cta__label {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: rgba(77,142,247,0.9); font-weight: 700;
  display: block; margin-bottom: 16px;
}
.svcs-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw + 0.5rem, 3.4rem);
  font-weight: 700; letter-spacing: -0.035em; color: #ffffff;
  line-height: 1.08; margin-bottom: 16px;
}
.svcs-cta__text {
  font-size: 1rem; color: rgba(255,255,255,0.55);
  line-height: 1.7; margin-bottom: 36px;
}
.svcs-cta__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-blue {
  border-radius: 999px; padding: 14px 28px;
  font-size: 0.95rem; font-weight: 600; border: none; cursor: pointer;
  background: #4d8ef7; color: #ffffff;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 30px rgba(77,142,247,0.35);
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(77,142,247,0.5); }
.btn-white-ghost {
  border-radius: 999px; padding: 13px 26px;
  font-size: 0.92rem; font-weight: 500;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: transparent; color: #ffffff;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.btn-white-ghost:hover { border-color: rgba(255,255,255,0.55); transform: translateY(-2px); }


/* ════════════════════════════════════════════════
   SERVICE SUB-PAGE — Shared
   ════════════════════════════════════════════════ */
.svc-hero {
  min-height: 72vh;
  background: #070b14;
  padding: 120px 40px 80px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.svc-hero__orb-1, .svc-hero__orb-2 {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);
}
.svc-hero__orb-1 {
  width: 600px; height: 600px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(77,142,247,0.14) 0%, transparent 65%);
}
.svc-hero__orb-2 {
  width: 400px; height: 400px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(124,58,237,0.10) 0%, transparent 65%);
}
.svc-hero__inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px; align-items: center;
}
.svc-hero__copy {}
.svc-hero__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; color: rgba(77,142,247,0.8);
  margin-bottom: 24px;
  transition: color 0.2s ease;
}
.svc-hero__back:hover { color: #4d8ef7; }
.svc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.67rem; text-transform: uppercase;
  letter-spacing: 0.24em; font-weight: 700;
  padding: 4px 14px 4px 10px;
  border-radius: 999px; margin-bottom: 22px;
}
.svc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw + 0.5rem, 5rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.0;
  color: #ffffff; margin-bottom: 20px;
}
.svc-hero__subtitle {
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.15rem);
  color: rgba(255,255,255,0.55);
  line-height: 1.75; max-width: 560px; margin-bottom: 32px;
}
.svc-hero__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.svc-hero__chip {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.7);
}
.svc-hero__visual {
  width: 200px; flex-shrink: 0;
}
.svc-hero__icon-large {
  width: 160px; height: 160px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  position: relative; overflow: hidden;
}
.svc-hero__icon-large::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at top left, rgba(77,142,247,0.18), transparent 60%);
}

/* ── Content section ── */
.svc-content { padding: 80px 40px; background: #f8fafc; }
.svc-content__inner { max-width: 1200px; margin: 0 auto; }
.svc-content__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px; align-items: flex-start;
}
.svc-content__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem);
  font-weight: 700; color: #0b1220;
  letter-spacing: -0.03em; margin-bottom: 8px;
}
.svc-content__lead {
  font-size: 1rem; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 24px;
}
.svc-content__subh {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; color: #0b1220;
  margin: 24px 0 10px;
}
.svc-feature-list {
  list-style: none; padding: 0; margin: 0;
}
.svc-feature-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.15);
  font-size: 0.93rem; color: #334155;
  line-height: 1.55;
}
.svc-feature-list li:last-child { border-bottom: none; }
.svc-feature-list__icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(29,78,216,0.1);
  border: 1px solid rgba(29,78,216,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  font-size: 0.65rem; color: #1d4ed8;
}

/* ── Summary Card ── */
.svc-summary-card {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 28px;
  padding: 32px 28px;
  box-shadow: 0 18px 50px rgba(15,23,42,0.09);
  position: sticky; top: 100px;
}
.svc-summary-card__eyebrow {
  font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.2em; font-weight: 700;
  color: var(--accent-blue); margin-bottom: 12px; display: block;
}
.svc-summary-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700; color: #0b1220;
  margin-bottom: 18px; line-height: 1.2;
}
.svc-summary-card__list {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.svc-summary-card__list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(148,163,184,0.12);
  font-size: 0.9rem; color: #475569; line-height: 1.5;
}
.svc-summary-card__list li:last-child { border-bottom: none; }
.svc-summary-card__list li::before {
  content: "✓"; color: #22c55e; font-weight: 700;
  font-size: 0.85rem; flex-shrink: 0; margin-top: 1px;
}

/* ── Dark use-cases band ── */
.svc-usecases {
  padding: 72px 40px;
  background: #0a0e17;
}
.svc-usecases__inner { max-width: 1200px; margin: 0 auto; }
.svc-usecases__header { margin-bottom: 40px; }
.svc-usecases__eyebrow {
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.22em; color: #4d8ef7; font-weight: 700;
  display: block; margin-bottom: 10px;
}
.svc-usecases__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.5vw + 0.5rem, 2.8rem);
  font-weight: 700; color: #ffffff;
  letter-spacing: -0.03em; line-height: 1.1;
}
.svc-usecases__sub {
  font-size: 1rem; color: rgba(255,255,255,0.45);
  margin-top: 10px; max-width: 480px; line-height: 1.65;
}
.svc-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.svc-usecase-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 24px 20px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.svc-usecase-card:hover {
  border-color: rgba(77,142,247,0.25);
  background: rgba(77,142,247,0.04);
}
.svc-usecase-card__num {
  font-family: var(--font-display);
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #4d8ef7; margin-bottom: 12px;
}
.svc-usecase-card__title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; color: #ffffff;
  margin-bottom: 8px; line-height: 1.2;
}
.svc-usecase-card__text {
  font-size: 0.87rem; color: rgba(255,255,255,0.45);
  line-height: 1.65;
}

/* ── Sub-page CTA ── */
.svc-cta {
  padding: 80px 40px;
  background: linear-gradient(135deg, #0b1220 0%, #0f2040 100%);
  text-align: center;
  position: relative; overflow: hidden;
}
.svc-cta__glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 500px; height: 500px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(77,142,247,0.15) 0%, transparent 70%);
  filter: blur(50px);
}
.svc-cta__inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }
.svc-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw + 0.5rem, 3rem);
  font-weight: 700; color: #ffffff;
  letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 14px;
}
.svc-cta__text {
  font-size: 1rem; color: rgba(255,255,255,0.5);
  line-height: 1.7; margin-bottom: 32px;
}
.svc-cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Responsive for service pages */
@media (max-width: 900px) {
  .svcs-grid { grid-template-columns: repeat(2, 1fr); }
  .svcs-grid-row2 { flex-direction: column; align-items: stretch; }
  .svcs-grid-row2 .svcs-card { width: 100%; max-width: 100%; }
  .svcs-trust__inner { grid-template-columns: repeat(2, 1fr); }
  .svcs-process__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .svcs-process__grid::before { display: none; }
  .svc-hero__inner { grid-template-columns: 1fr; }
  .svc-hero__visual { display: none; }
  .svc-content__grid { grid-template-columns: 1fr; }
  .svc-summary-card { position: static; }
  .svc-usecase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .svcs-hero { padding: 120px 24px 72px; }
  .svcs-section, .svcs-process, .svcs-cta, .svcs-trust { padding-left: 20px; padding-right: 20px; }
  .svcs-grid { grid-template-columns: 1fr; }
  .svcs-trust__inner { grid-template-columns: 1fr 1fr; }
  .svcs-process__grid { grid-template-columns: 1fr; }
  .svc-hero { padding: 100px 20px 60px; }
  .svc-content, .svc-usecases, .svc-cta { padding: 56px 20px; }
  .svc-usecase-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
.footer { border-top: 1px solid rgba(148,163,184,0.35); padding: 18px 20px 26px; font-size: 0.8rem; }
.footer-inner { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-links { display: flex; flex-direction: column; gap: 6px; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer a { color: var(--text-muted); font-weight: 600; }
.footer a:hover { color: var(--accent-blue); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.reveal-visible { opacity: 1; transform: translateY(0); }
.reveal-left { transform: translateX(-40px); }
.reveal-left.reveal-visible { transform: translateX(0); }
.reveal-right { transform: translateX(40px); }
.reveal-right.reveal-visible { transform: translateX(0); }


/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 800px) {

  /* ══════════════════════════════════════════════════════════════
     MOBILE: the horizontal scroll-jack becomes a vertical stack.

     On a phone the pinned track slid five 100vw panels sideways over
     ~12 viewport-heights of scroll. Because each panel's sidebar is
     absolutely positioned inside a panel that is only ever partly on
     screen mid-transition, body copy was being clipped off both edges
     — the "System Automations" and "Chatbots & Voice Agents" text was
     literally unreadable.

     Every panel is now a normal full-width block in document order.
     Identical markup, identical copy, identical headings — the only
     change is that they stack down instead of sliding across, and the
     process page that used to hide *behind* the track now simply
     follows it. script.js detects this breakpoint and leaves all
     transforms alone.
     ══════════════════════════════════════════════════════════════ */
  .hscroll { height: auto; }

  .hscroll__sticky {
    position: static;
    height: auto;
    overflow: visible;
    /* flex purely so `order` can restore the desktop narrative below */
    display: flex;
    flex-direction: column;
  }

  /* In the DOM the process page comes FIRST (on desktop it sits behind the
     track and is revealed last). Stacked, that would show "From audit to
     launch" before "What we do". `order` puts it back at the end visually
     while leaving the DOM — and therefore the heading order search engines
     read — completely untouched. */
  .hscroll__under {
    position: static;
    inset: auto;
    display: block;
    order: 2;
  }

  .hscroll__track {
    position: static;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    transform: none !important;
    will-change: auto;
    order: 1;
  }

  /* Undo the desktop card stack: here the panels are plain stacked blocks. */
  .hscroll__panel {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none;
    will-change: auto;
  }
  .hscroll__panel::after { display: none; }

  /* Intro panel keeps a full screen — it's the section's title card. */
  .hscroll__panel--text {
    min-height: 62svh;
    padding: 72px 0;
  }

  /* Image + copy become a stacked pair instead of a window-and-column. */
  .hscroll__panel--img {
    display: block;
    padding: 0;
    background: #04060b;
  }
  .hscroll__panel--img::before { display: none; }   /* no ambient glow */
  .hscroll__img {
    width: 100%;
    height: 46svh;
    object-fit: cover;
    /* Undo the desktop window framing and its entrance animation. */
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
    opacity: 1 !important;
    transition: none;
    filter: brightness(0.78);
  }
  /* The staggered copy entrance is a desktop affordance; stacked, it would
     leave text invisible because bar-visible is applied on load. */
  .hscroll__panel--img .hscroll__sidebar-eyebrow,
  .hscroll__panel--img .hscroll__sidebar-title,
  .hscroll__panel--img .hscroll__sidebar-text,
  .hscroll__panel--img .hscroll__sidebar-list li,
  .hscroll__panel--img .hscroll__sidebar-link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .hscroll__sidebar {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 30px 22px 40px;
    background: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Was animated in by a JS class; in the stack it's simply always there. */
    transform: none !important;
    opacity: 1 !important;
    transition: none;
    overflow: visible;
  }

  /* The last panel was scaled/faded away by JS to reveal the process
     page behind it. Stacked, it's just the last block. */
  .hscroll__panel--last {
    transform: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    will-change: auto;
  }

  /* Process page follows the panels rather than sitting behind them. */
  .process-page__header,
  .process-tl__step,
  .process-page__footer {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Nav ── */
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; position: absolute; top: 56px; right: 16px;
    padding: 14px 20px; background: #fff; border-radius: 20px;
    border: 1px solid rgba(148,163,184,0.4); flex-direction: column;
    gap: 14px; box-shadow: 0 18px 45px rgba(15,23,42,0.18); z-index: 200;
  }
  .nav-inner, .section, .footer-inner { padding-left: 20px; padding-right: 20px; }
  .back-link { margin-left: 20px; margin-right: 20px; }

  /* ── Hero ── */
  .hero-new { padding: 110px 24px 56px; min-height: 100svh; }
  .hero-new__title { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-new__cursor { height: clamp(2.5rem, 12vw, 4rem); }
  .hero-new__tagline { font-size: 1rem; margin-top: 24px; }
  .hero-new__cta-row { flex-direction: column; align-items: stretch; }
  .hero-new__cta-row .btn-primary,
  .hero-new__cta-row .btn-ghost { justify-content: center; width: 100%; }

  /* ── Old hero (other pages) ── */
  .hero { grid-template-columns: minmax(0,1fr); padding: 64px 16px 52px; min-height: auto; }
  .hero-title { transform: none; }
  .hero::before { background-position: 70% center; opacity: 0.58; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { justify-content: center; width: 100%; }

  /* ── Shared ── */
  .split { grid-template-columns: minmax(0,1fr); }
  .how-work-flow { grid-template-columns: 1fr; gap: 12px; }
  .flow-arrow { transform: rotate(90deg); justify-self: center; }
  .process-flow { grid-template-columns: 1fr; gap: 12px; }
  .process-arrow { transform: rotate(90deg); justify-self: center; }
  .about-image { max-width: 100%; }
  .flow-card, .process-step { width: 100%; }
  .section-tight-top { padding-top: 28px; }
  .section-tight-bottom { padding-bottom: 28px; }


  /* ── HOW WE HELP title: smaller on mobile, same animation ── */
  .hscroll__title {
    font-size: clamp(3.2rem, 14vw, 6rem);
    padding: 0 16px;
  }

  /* Sidebars are laid out by the vertical-stack block above — these used
     to pin them to the bottom 58% of a pinned panel, which is what forced
     the copy into a cramped, inner-scrolling box. */
  .hscroll__sidebar-title { font-size: 1.3rem; }
  .hscroll__sidebar-text { font-size: 0.88rem; }
  .hscroll__sidebar-list li { font-size: 0.84rem; }

  /* ════════════════════════════════════════════
     PROCESS PAGE — Mobile infographic layout
     ════════════════════════════════════════════ */
  .process-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    padding: 24px 16px 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hscroll__under {
    align-items: stretch !important;
  }
  .process-page__header { margin-bottom: 20px !important; }
  .pinf-heading { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; line-height: 1.2 !important; }
  .pinf-subhead { font-size: 0.8rem; }

  /* Step cards: single column, no connectors */
  .pinf-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .pinf-connector { display: none !important; }

  /* Card inner: icon left, content right */
  .pinf-card__inner {
    min-height: auto !important;
    padding: 18px 16px 14px !important;
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 0 14px;
    align-items: start;
  }
  .pinf-card__ghost { display: none !important; }
  .pinf-card__icon-wrap {
    grid-column: 1; grid-row: 1 / 3;
    margin-bottom: 0;
    align-self: start;
  }
  .pinf-card__day   { grid-column: 2; grid-row: 1; margin-bottom: 2px; }
  .pinf-card__title { grid-column: 2; grid-row: 2; margin-bottom: 8px; font-size: 1rem; }
  .pinf-card__desc  { grid-column: 1 / 3; grid-row: 3; font-size: 0.8rem; margin-bottom: 8px; }
  .pinf-card__tags  { grid-column: 1 / 3; grid-row: 4; }

  /* Footer */
  .process-page__footer { margin-top: 16px !important; }
  .pinf-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .pinf-footer__text { font-size: 0.83rem; }
  .pinf-cta {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 12px 12px 12px 20px !important;
  }

  /* Orbs: reduce for mobile GPU */
  .pinf-orb--1 { width: 200px; height: 200px; top: -60px; left: -60px; }
  .pinf-orb--2 { display: none; }
  .pinf-orb--3 { display: none; }
}

/* ════════════════════════════════════════
   iPHONE SCROLL SECTION
════════════════════════════════════════ */
.iphone-scroll-section {
  height: 420vh;
  position: relative;
  background: #080808;
}
.iphone-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6vw;
  padding: 0 6%;
  overflow: hidden;
}
.iphone-scroll-right {
  max-width: 440px;
  flex: 1;
}
.iphone-scroll-intro {
  margin-bottom: 2rem;
}
.iphone-scroll-intro h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0.4rem 0 0.75rem;
}
.iphone-scroll-intro p {
  color: rgba(255,255,255,0.5);
  font-size: 0.95rem;
  line-height: 1.7;
}
.iphone-step-panels {
  position: relative;
  min-height: 280px;
}
.iphone-step-panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  color: #fff;
}
.iphone-step-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.step-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #e8501a);
  display: block;
  margin-bottom: 0.5rem;
}
.iphone-step-panel h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.iphone-step-panel p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1rem;
}
.iphone-step-panel .check-list li {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
}
.iphone-step-panel .check-list li::before {
  color: var(--accent, #e8501a);
}
.iphone-scroll-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.iphone-wrap {
  width: 260px;
  height: 540px;
  background: linear-gradient(145deg,#2a2a2a 0%,#1a1a1a 40%,#111 100%);
  border-radius: 48px;
  position: relative;
  box-shadow:
    0 0 0 1px #444,
    0 0 0 2.5px #222,
    inset 0 0 0 1px #555,
    inset 0 2px 4px rgba(255,255,255,0.07),
    0 40px 80px rgba(0,0,0,0.7),
    0 20px 40px rgba(0,0,0,0.5);
}
.iphone-power-btn {
  position: absolute;
  right: -3px; top: 130px;
  width: 3px; height: 66px;
  background: linear-gradient(to right,#1a1a1a,#2e2e2e);
  border-radius: 2px;
  box-shadow: -1px 0 0 #555;
}
.iphone-silent-btn {
  position: absolute;
  left: -3px; top: 68px;
  width: 3px; height: 26px;
  background: linear-gradient(to left,#1a1a1a,#2e2e2e);
  border-radius: 2px;
  box-shadow: 1px 0 0 #555;
}
.iphone-vol-btn {
  position: absolute;
  left: -3px;
  width: 3px;
  background: linear-gradient(to left,#1a1a1a,#2e2e2e);
  border-radius: 2px;
  box-shadow: 1px 0 0 #555;
}
.iphone-vol-up { top: 108px; height: 56px; }
.iphone-vol-down { top: 176px; height: 56px; }
.iphone-screen-wrap {
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border-radius: 40px;
  overflow: hidden;
  background: #000;
}
.iphone-screen {
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
}
.iphone-screen-panels {
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.iphone-panel {
  width: 240px;
  height: 520px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ip-dynamic-island {
  width: 90px; height: 28px;
  background: #000;
  border-radius: 18px;
  margin: 12px auto 0;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px #1a1a1a;
  position: relative; z-index: 5;
}
.ip-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 18px 3px;
  flex-shrink: 0;
}
.ip-time { font-size: 12px; font-weight: 600; color: #fff; font-family: -apple-system,sans-serif; }
.ip-battery {
  width: 20px; height: 10px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 3px;
  position: relative; padding: 1.5px;
}
.ip-battery::before {
  content:'';
  display:block;
  width:75%; height:100%;
  background:#fff; border-radius:1px;
}
.ip-home-bar {
  width: 90px; height: 4px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
  margin: 6px auto;
  flex-shrink: 0;
}
.ip-home { background: #0a0a12; }
.ip-wallpaper {
  flex: 1;
  background: linear-gradient(160deg,#1a0533 0%,#0d1b4b 50%,#0a2a1a 100%);
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.ip-lock-time { font-size: 48px; font-weight: 200; color: #fff; text-align: center; margin-top: 8px; line-height: 1; font-family: -apple-system,sans-serif; }
.ip-lock-date { font-size: 13px; color: rgba(255,255,255,0.7); text-align: center; margin-top: 3px; font-family: -apple-system,sans-serif; }
.ip-app-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 14px 8px; margin-top: auto; }
.ip-app-wrap { display: flex; flex-direction: column; align-items: center; }
.ip-app-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ip-app-label { font-size: 8px; color: rgba(255,255,255,0.8); text-align: center; margin-top: 3px; font-family: -apple-system,sans-serif; }
.ip-dock { background: rgba(255,255,255,0.13); border-radius: 20px; padding: 8px 12px; display: flex; gap: 12px; margin: 0 6px 6px; justify-content: center; }
.ip-app-header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-shrink: 0; border-bottom: 0.5px solid #222; }
.ip-back { font-size: 11px; color: #3b82f6; font-family: -apple-system,sans-serif; }
.ip-app-title { font-size: 13px; font-weight: 600; color: #fff; font-family: -apple-system,sans-serif; }
.ip-discovery { background: #0d1117; }
.ip-cal-body { flex: 1; padding: 14px; overflow: hidden; }
.ip-cal-heading { font-size: 14px; font-weight: 700; color: #fff; font-family: -apple-system,sans-serif; margin-bottom: 3px; }
.ip-cal-sub { font-size: 10px; color: #8b949e; font-family: -apple-system,sans-serif; margin-bottom: 14px; }
.ip-cal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.ip-cal-slot { background: #21262d; border: 0.5px solid #30363d; border-radius: 8px; padding: 8px; font-size: 10px; color: #ccc; font-family: -apple-system,sans-serif; text-align: center; }
.ip-cal-slot.active { background: #3b82f6; border-color: #3b82f6; color: #fff; font-weight: 600; }
.ip-cal-confirm { background: #3b82f6; color: #fff; border-radius: 10px; padding: 10px; text-align: center; font-size: 11px; font-weight: 600; font-family: -apple-system,sans-serif; margin-bottom: 10px; }
.ip-cal-note { font-size: 9px; color: #6e7681; font-family: -apple-system,sans-serif; text-align: center; line-height: 1.5; }
.ip-strategy { background: #0d1117; }
.ip-notes-body { flex: 1; padding: 12px 14px; overflow: hidden; }
.ip-notes-title { font-size: 13px; font-weight: 700; color: #fff; font-family: -apple-system,sans-serif; margin-bottom: 2px; }
.ip-notes-date { font-size: 9px; color: #6e7681; font-family: -apple-system,sans-serif; margin-bottom: 10px; }
.ip-notes-section { font-size: 10px; font-weight: 700; color: #3b82f6; font-family: -apple-system,sans-serif; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.ip-notes-item { font-size: 10px; color: #ccc; font-family: -apple-system,sans-serif; padding: 3px 0; line-height: 1.4; }
.ip-build { background: #0d1117; }
.ip-chat-header { background: #161b22; padding: 8px 14px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; border-bottom: 0.5px solid #21262d; }
.ip-chat-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#6e40c9,#3b82f6); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 600; flex-shrink: 0; }
.ip-chat-name { font-size: 11px; font-weight: 600; color: #fff; font-family: -apple-system,sans-serif; }
.ip-chat-status { font-size: 9px; color: #3fb950; font-family: -apple-system,sans-serif; }
.ip-chat-messages { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ip-msg-wrap { display: flex; }
.ip-msg-in { justify-content: flex-start; }
.ip-msg-out { justify-content: flex-end; }
.ip-msg { max-width: 78%; padding: 7px 10px; border-radius: 14px; font-size: 10px; line-height: 1.45; font-family: -apple-system,sans-serif; }
.ip-msg-in .ip-msg { background: #21262d; color: #e6edf3; border-bottom-left-radius: 4px; }
.ip-msg-out .ip-msg { background: #3b82f6; color: #fff; border-bottom-right-radius: 4px; }
.ip-chat-input-bar { background: #161b22; padding: 7px 10px; display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ip-chat-input { flex: 1; background: #21262d; border-radius: 16px; padding: 6px 10px; font-size: 10px; color: #8b949e; font-family: -apple-system,sans-serif; }
.ip-chat-send { width: 26px; height: 26px; border-radius: 50%; background: #3b82f6; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.ip-launch { background: #050510; }
.ip-launch-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.ip-launch-icon { font-size: 40px; margin-bottom: 12px; }
.ip-launch-heading { font-size: 22px; font-weight: 700; color: #fff; font-family: -apple-system,sans-serif; margin-bottom: 6px; }
.ip-launch-sub { font-size: 10px; color: rgba(255,255,255,0.5); font-family: -apple-system,sans-serif; line-height: 1.5; margin-bottom: 16px; }
.ip-launch-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.ip-launch-stat { background: rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; text-align: center; }
.ip-launch-num { font-size: 20px; font-weight: 700; color: #fff; font-family: -apple-system,sans-serif; }
.ip-launch-label { font-size: 9px; color: rgba(255,255,255,0.4); font-family: -apple-system,sans-serif; margin-top: 2px; }
.ip-launch-note { font-size: 9px; color: rgba(255,255,255,0.3); font-family: -apple-system,sans-serif; margin-bottom: 14px; }
.ip-launch-cta { background: #3b82f6; color: #fff; border-radius: 10px; padding: 10px 20px; font-size: 11px; font-weight: 600; font-family: -apple-system,sans-serif; }
.ip-support { background: #0d1117; }
.ip-dash-body { flex: 1; padding: 12px 14px; overflow: hidden; }
.ip-dash-month { font-size: 11px; font-weight: 600; color: #fff; font-family: -apple-system,sans-serif; margin-bottom: 10px; }
.ip-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.ip-dash-card { background: #21262d; border-radius: 10px; padding: 10px; border: 0.5px solid #30363d; }
.ip-dash-num { font-size: 18px; font-weight: 700; color: #fff; font-family: -apple-system,sans-serif; }
.ip-dash-label { font-size: 9px; color: #6e7681; font-family: -apple-system,sans-serif; margin-top: 2px; }
.ip-dash-section { font-size: 10px; font-weight: 700; color: #3b82f6; font-family: -apple-system,sans-serif; margin: 8px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.ip-dash-item { font-size: 10px; color: #ccc; font-family: -apple-system,sans-serif; padding: 3px 0; }
.iphone-progress-dots { display: flex; flex-direction: column; gap: 8px; }
.ip-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.3s ease; }
.ip-dot.active { background: #fff; height: 18px; border-radius: 3px; }

/* ════════════════════════════════════════
   DASHBOARD SECTION
════════════════════════════════════════ */
/* ── Container base ── */
.container {
  width: min(1160px, calc(100% - 3rem));
  margin: 0 auto;
}

.dashboard-section {
  background: #080808;
  padding: 6rem 0;
  border-top: 0.5px solid #1a1a1a;
}
.dashboard-section .section-title { color: #fff; }
.dashboard-section .section-copy { color: rgba(255,255,255,0.5); }
.dashboard-section .eyebrow { color: var(--accent, #e8501a); }
.dashboard-header { text-align: center; margin-bottom: 3rem; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 16px;
  margin-bottom: 3rem;
}
.dash-stat-card {
  background: #111;
  border: 0.5px solid #222;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  transition: border-color 0.3s ease;
}
.dash-stat-card:hover { border-color: #444; }
.dash-stat-num {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.dash-stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.3rem;
}
.dash-stat-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}
.dashboard-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem;
  background: #111;
  border-radius: 16px;
  border: 0.5px solid #222;
}
.flow-node {
  background: #1a1a1a;
  border: 0.5px solid #333;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.flow-node-ai { border-color: #3b82f6; color: #3b82f6; }
.flow-node-accent { border-color: var(--accent,#e8501a); color: var(--accent,#e8501a); }
.flow-arrow { color: rgba(255,255,255,0.2); font-size: 1.2rem; }

/* ════════════════════════════════════════
   OUTCOME HORIZONTAL SCROLL
════════════════════════════════════════ */
.outcome-hscroll {
  /* tall enough for 3 card transitions + exit */
  height: 300vh;
  position: relative;
  background: #fff;
}

.outcome-hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

/* Header — fades in once, stays put */
.outcome-hscroll__header {
  text-align: center;
  padding: 0 5%;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  flex-shrink: 0;
}
.outcome-hscroll__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Track — the sliding rail */
.outcome-hscroll__track {
  display: flex;
  gap: 2rem;
  padding: 0 5%;
  will-change: transform;
  align-items: center;
}

/* Individual cards */
.outcome-hcard {
  flex: 0 0 min(860px, 90vw);
  background: #f8f8f6;
  border-radius: 20px;
  overflow: hidden;
  border: 0.5px solid #e8e8e8;
  will-change: transform, opacity;
}

.outcome-card-inner { display: flex; align-items: center; min-height: 320px; }
.outcome-card-inner--reverse { flex-direction: row-reverse; }
.outcome-card-screen {
  flex: 0 0 45%;
  height: 320px;
  overflow: hidden;
  background: #0d1117;
  display: flex;
  flex-direction: column;
}
.outcome-card-screen--dark { background: #080808; }
.outcome-card-screen--light { background: #fff; border-right: 0.5px solid #e8e8e8; }
.outcome-card-body { flex: 1; padding: 2.5rem; }
.outcome-card-body h3 { font-size: 1.4rem; font-weight: 700; margin: 0.4rem 0 0.75rem; }
.outcome-card-body p { font-size: 0.9rem; line-height: 1.75; color: #555; }
.outcome-chat-header { background: #161b22; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 10px; color: #8b949e; font-family: -apple-system,sans-serif; flex-shrink: 0; }
.outcome-chat-dot { width: 7px; height: 7px; border-radius: 50%; }
.outcome-chat-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.outcome-msg { max-width: 80%; padding: 8px 11px; border-radius: 14px; font-size: 11px; line-height: 1.45; font-family: -apple-system,sans-serif; }
.outcome-msg-in { background: #21262d; color: #e6edf3; align-self: flex-start; border-bottom-left-radius: 4px; }
.outcome-msg-out { background: #3b82f6; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.outcome-flow-title { font-size: 10px; font-weight: 600; color: #3b82f6; font-family: -apple-system,sans-serif; padding: 12px 16px 8px; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; }
.outcome-flow-steps { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.outcome-flow-step { font-size: 11px; font-family: -apple-system,sans-serif; padding: 8px 12px; border-radius: 8px; }
.outcome-flow-step.done { background: rgba(63,185,80,0.1); color: #3fb950; }
.outcome-flow-step.active { background: rgba(59,130,246,0.15); color: #3b82f6; }
.outcome-flow-step.pending { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.3); }
.outcome-web-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid #e8e8e8; flex-shrink: 0; }
.outcome-web-dots { display: flex; gap: 5px; }
.outcome-web-dots span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.outcome-web-url { font-size: 10px; color: #888; font-family: -apple-system,sans-serif; background: #f0f0f0; padding: 3px 10px; border-radius: 6px; flex: 1; text-align: center; }
.outcome-web-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.outcome-web-logo { font-size: 22px; font-weight: 800; color: #000; font-family: -apple-system,sans-serif; }
.outcome-web-logo span { color: var(--accent,#e8501a); }
.outcome-web-tagline { font-size: 11px; color: #888; font-family: -apple-system,sans-serif; }
.outcome-web-btn { background: #000; color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 11px; font-weight: 600; font-family: -apple-system,sans-serif; }

/* Progress dots */
.outcome-hscroll__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding-top: 1.5rem;
  flex-shrink: 0;
}
.outcome-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  transition: background 0.3s, width 0.3s;
}
.outcome-dot--active {
  background: var(--accent,#e8501a);
  width: 18px;
  border-radius: 3px;
}

/* ════════════════════════════════════════
   CTA RISE SECTION
════════════════════════════════════════ */
.cta-rise {
  position: relative;
  min-height: 100vh;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Particle canvas fills the section */
.cta-rise__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cta-rise__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 5%;
  max-width: 680px;
  /* Start off-screen below — JS will drive this */
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.9s ease;
}
.cta-rise__content.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Radial glow behind the content */
.cta-rise__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.cta-rise__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3b82f6;
  margin-bottom: 1.2rem;
  padding: 0.35em 0.9em;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 20px;
  background: rgba(59,130,246,0.07);
}

.cta-rise__heading {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.cta-rise__heading em {
  font-style: normal;
  background: linear-gradient(90deg, #3b82f6, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-rise__sub {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  margin: 0 0 2.5rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-rise__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.95em 2em;
  border-radius: 100px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 40px rgba(59,130,246,0.35), 0 4px 16px rgba(0,0,0,0.4);
}
.cta-rise__btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 60px rgba(59,130,246,0.5), 0 6px 24px rgba(0,0,0,0.5);
}
.cta-rise__btn-arrow {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  padding: 0.25em;
}

.cta-rise__note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.04em;
}

/* ── Outcome mobile ── */
/* ════════════════════════════════════════
   MOBILE — 768px
════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Outcome horizontal scroll → stacked cards ── */
  .outcome-hscroll {
    height: auto;
  }
  .outcome-hscroll__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    padding: 4rem 0 3rem;
    justify-content: flex-start;
  }
  .outcome-hscroll__header {
    opacity: 1;
    transform: none;
    margin-bottom: 2rem;
    padding: 0 1.25rem;
  }
  .outcome-hscroll__track {
    flex-direction: column;
    transform: none !important;
    gap: 1.25rem;
    padding: 0 1.25rem;
  }
  .outcome-hcard {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .outcome-card-inner,
  .outcome-card-inner--reverse { flex-direction: column; }
  .outcome-card-screen { flex: none; width: 100%; height: 200px; }
  .outcome-hscroll__dots { display: none; }

  /* ── Dashboard ── */
  .dashboard-flow { gap: 8px; }
  .flow-node { white-space: normal; text-align: center; font-size: 0.78rem; }
  .flow-arrow { display: none; }

  /* ══════════════════════════════════════════
     iPhone carousel — MOBILE sticky scroll
     Big centered phone, text below, sticky.
     Scroll → step advances (phone + text swap).
  ══════════════════════════════════════════ */
  .iphone-scroll-section {
    /* Tall enough for 5 steps × scroll distance */
    height: 380vh;
    background:
      radial-gradient(circle at 50% 8%, rgba(59,130,246,0.18), transparent 38%),
      linear-gradient(180deg, #050505 0%, #080808 100%);
  }

  .iphone-scroll-sticky {
    /* Re-enable sticky: phone + text pinned while user scrolls */
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    /* padding-top clears the fixed navbar (~52px) with extra breathing room */
    padding: 58px 20px 12px;
    overflow: hidden;
  }

  /* Phone container — just centers the phone horizontally.
     No height or overflow tricks needed because zoom (below) shrinks
     both the visual AND the layout box simultaneously. */
  .iphone-scroll-left {
    position: relative;
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    text-align: center;
  }

  /* Subtle glow under the phone */
  .iphone-scroll-left::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 28px;
    background: radial-gradient(ellipse at center, rgba(59,130,246,0.5) 0%, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
  }

  /* zoom shrinks the element AND its layout footprint — no transform hacks needed.
     position:relative is preserved so absolute children (screen, buttons) still work. */
  .iphone-wrap {
    zoom: 0.63;
    margin: 0 auto;
  }

  /* Progress dots — horizontal row below text */
  .iphone-progress-dots {
    position: static;
    flex-direction: row;
    gap: 7px;
    margin-top: 0.75rem;
    transform: none;
  }
  .ip-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
  }
  .ip-dot.active {
    background: #fff;
    width: 18px;
    height: 6px;
    border-radius: 3px;
  }

  /* Right panel — text below phone */
  .iphone-scroll-right {
    order: 2;
    width: 100%;
    max-width: 360px;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0.5rem;
  }

  /* Hide the intro heading/paragraph (too much text with phone showing) */
  .iphone-scroll-intro {
    display: none;
  }

  /* Step panels stack as absolute — only active one shows */
  .iphone-step-panels {
    position: relative;
    width: 100%;
    min-height: 160px;
    display: block; /* back to absolute stacking */
  }

  .iphone-step-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: 0;
    display: block;
    justify-content: unset;
    color: #fff;
    text-align: center;
  }

  .iphone-step-panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .step-tag {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.4rem;
    display: block;
    text-align: center;
  }
  .iphone-step-panel h3 {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
    margin-bottom: 0.45rem;
    line-height: 1.2;
  }
  .iphone-step-panel p {
    font-size: 0.84rem;
    line-height: 1.6;
    margin-bottom: 0.6rem;
    color: rgba(255,255,255,0.58);
  }
  .iphone-step-panel .check-list {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
    gap: 0;
  }
  .iphone-step-panel .check-list li {
    font-size: 0.79rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
    color: rgba(255,255,255,0.55);
  }
}

@media (max-width: 960px) {
  .about-shell,
  .about-hero__grid,
  .about-metrics .about-shell {
    width: min(100% - 40px, 1200px);
  }

  .about-hero__grid,
  .about-story__grid,
  .about-journey__grid,
  .about-close__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-hero {
    min-height: auto;
    padding: 120px 0 64px;
  }

  .about-hero__copy {
    order: 1;
  }

  .about-hero__panel {
    order: 2;
  }

  .about-journey__visual {
    position: relative;
    top: auto;
  }

  .about-journey__visual-stack,
  .about-journey__meter {
    min-height: 420px;
  }

  .about-principles__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .about-shell,
  .about-hero__grid,
  .about-metrics .about-shell {
    width: calc(100% - 32px);
  }

  .about-hero {
    padding: 108px 0 54px;
  }

  .about-hero__headline {
    min-height: auto;
  }

  .about-hero__title {
    font-size: clamp(2.9rem, 12vw, 4.4rem);
  }

  .about-hero__location {
    line-height: 1.9;
  }

  .about-hero__meta-sep {
    display: none;
  }

  .about-hero__signals {
    gap: 10px;
  }

  .about-signal {
    width: 100%;
    justify-content: center;
  }

  .about-hero__panel,
  .about-story__image-wrap,
  .about-close__panel {
    padding: 20px;
    border-radius: 26px;
  }

  .about-story__badge {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .about-story__title,
  .about-journey__title,
  .about-close__copy h2 {
    line-height: 1.06;
  }

  .about-journey {
    padding: 80px 0;
  }

  .about-journey__visual {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-journey__visual-stack,
  .about-journey__meter {
    min-height: 360px;
  }

  .about-journey__meter {
    height: 6px;
    min-height: 6px;
    width: 100%;
  }

  .about-journey__meter-fill {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: calc(var(--journey-progress, 0.25) * 100%);
    height: 100%;
  }

  .about-journey-step {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 24px 22px;
  }

  .about-journey-step.is-active {
    transform: translateX(0);
  }

  .about-close {
    padding-bottom: 80px;
  }

  .about-close__actions {
    align-items: stretch;
  }

  .about-close__actions .btn-primary,
  .about-close__actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════
   COMPREHENSIVE MOBILE OVERHAUL
   Applies to all sections not covered above
════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Container tighter on mobile ── */
  .container { width: 100%; padding: 0 1.25rem; }

  /* ── Dashboard section ── */
  .dashboard-section { padding: 4rem 0; }
  .dashboard-section .container { padding: 0 1.25rem; }
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
  }
  .dash-stat-num { font-size: 2.2rem; }
  .dash-stat-label { font-size: 0.78rem; }
  .dash-stat-sub { font-size: 0.72rem; }
  .dash-stat-card { padding: 1.25rem 1rem; }
  .dashboard-header { margin-bottom: 2rem; }
  .dashboard-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 1.25rem;
  }
  .flow-node { white-space: normal; text-align: center; font-size: 0.75rem; padding: 8px 10px; }
  .flow-arrow { display: none; }
  /* Make the last flow node span full width */
  .flow-node:last-child { grid-column: 1 / -1; }

  /* ── CTA Rise section ── */
  .cta-rise { min-height: auto; padding: 5rem 0; }
  .cta-rise__content { padding: 2rem 1.5rem; }
  .cta-rise__heading { font-size: clamp(1.75rem, 8vw, 2.8rem); }
  .cta-rise__sub { font-size: 0.9rem; }
  .cta-rise__btn { font-size: 0.9rem; padding: 0.9em 1.6em; }
  .cta-rise__glow { width: 300px; height: 200px; }

  /* ── Section headings ── */
  .section-title { font-size: 1.6rem; }

  /* ── Footer ── */
  .footer-inner {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1.25rem 2rem;
  }
  .footer-links, .footer-contact { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }

  /* ── Outcome card body tighter ── */
  .outcome-card-body { padding: 1.5rem 1.25rem; }
  .outcome-card-body h3 { font-size: 1.2rem; }

  /* ── AIOS panel — mobile single column ── */
  .aios-panel {
    grid-template-columns: 1fr;
    padding: 60px 6vw;
    align-items: flex-start;
    overflow-y: auto;
  }
  .aios-right { display: none; }
  .aios-ch { font-size: clamp(3rem, 14vw, 5.5rem); }

  /* ── Horizontal showcase hscroll — stacked vertically at this width,
     so it takes its natural content height (see the 800px block). ── */
  .hscroll__sidebar { padding: 26px 18px 34px; }
  .hscroll__sidebar-title { font-size: 1.15rem; }
  .hscroll__sidebar-text { font-size: 0.84rem; }
  .hscroll__sidebar-list { margin: 10px 0 12px; }
  .hscroll__sidebar-list li { font-size: 0.82rem; }

  /* ── Reveal defaults ── */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.reveal-visible { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════
   SMALL PHONES — 480px
════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Nav ── */
  .nav-inner { padding: 14px 16px; }

  /* ── Hero ── */
  .hero-new { padding: 100px 16px 52px; }
  .hero-new__title { font-size: clamp(2.1rem, 12.5vw, 3.2rem); }
  .hero-new__cursor { height: clamp(2.2rem, 14vw, 3.4rem); }
  .hero-new__tagline { font-size: 0.95rem; margin-top: 20px; }
  .hero-new__cta-row { gap: 10px; margin-top: 28px; }
  .hero-new__cta-row .btn-primary,
  .hero-new__cta-row .btn-ghost { padding: 13px 20px; font-size: 0.88rem; }

  /* ── Horizontal showcase ── */
  .hscroll__title { font-size: clamp(2.8rem, 17vw, 5rem); }
  .hscroll__sidebar { padding: 24px 16px 30px; }

  /* ── Process infographic ── */
  .process-page { padding: 20px 14px 18px !important; }
  .pinf-heading { font-size: clamp(1.3rem, 7vw, 1.9rem) !important; }
  .pinf-card__inner { padding: 14px 12px 12px !important; }
  .pinf-card__title { font-size: 0.92rem; }
  .pinf-card__desc { font-size: 0.76rem; }

  /* ── iPhone carousel — small phones ── */
  .iphone-scroll-section { height: 360vh; }
  .iphone-scroll-sticky { padding: 54px 16px 10px; }
  /* zoom 0.60: layout = 156×324px — perfectly sized, no clipping */
  .iphone-wrap { zoom: 0.60; }
  .iphone-step-panel h3 { font-size: clamp(1rem, 5.5vw, 1.25rem); }
  .iphone-step-panel p { font-size: 0.8rem; }
  .iphone-step-panel .check-list li { font-size: 0.75rem; }

  /* ── Dashboard stats ── */
  .dashboard-section { padding: 3rem 0; }
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .dash-stat-num { font-size: 1.9rem; }
  .dash-stat-card { padding: 1rem 0.85rem; }
  .dashboard-flow { padding: 1rem; gap: 6px; }
  .flow-node { font-size: 0.72rem; padding: 6px 8px; }

  /* ── Outcome cards ── */
  .outcome-hscroll__sticky { padding: 3rem 0 2.5rem; }
  .outcome-hscroll__header { padding: 0 1rem; }
  .outcome-hscroll__header .section-title { font-size: 1.4rem; }
  .outcome-hscroll__track { padding: 0 1rem; gap: 1rem; }
  .outcome-card-screen { height: 180px; }
  .outcome-card-body { padding: 1.25rem 1rem; }
  .outcome-card-body h3 { font-size: 1.1rem; }
  .outcome-card-body p { font-size: 0.84rem; }

  /* ── CTA Rise ── */
  .cta-rise { padding: 4rem 0; }
  .cta-rise__content { padding: 1.5rem 1rem; }
  .cta-rise__heading { font-size: clamp(1.55rem, 9vw, 2.2rem); }
  .cta-rise__sub { font-size: 0.84rem; }
  .cta-rise__btn {
    width: 100%;
    justify-content: center;
    font-size: 0.88rem;
    padding: 1em 1.4em;
  }
  .cta-rise__note { font-size: 0.74rem; }

  /* ── Footer ── */
  .footer { padding: 14px 16px 24px; }
  .footer-inner { gap: 1.25rem; }

  /* ── Section titles ── */
  .section-title { font-size: 1.45rem; }
  .eyebrow { font-size: 0.7rem; }
}

/* ════════════════════════════════════════════════
   TABLET — 769px to 1024px
   Fills the gap between mobile and full desktop
════════════════════════════════════════════════ */
@media (min-width: 801px) and (max-width: 1024px) {

  /* ── Hero ── */
  .hero-new { padding: 120px 40px 64px; }
  .hero-new__title { font-size: clamp(3rem, 7.5vw, 4.6rem); }
  .hero-new__tagline { font-size: 1rem; max-width: 600px; }
  .hero-new__cta-row { flex-wrap: wrap; gap: 12px; }

  /* ── hscroll at tablet widths ──
     The copy used to be an overlay pinned to the right, so it needed an
     explicit width. It's a grid column now: fixing its width squashes the
     text rather than helping. Rebalance the columns instead of the box. */
  .hscroll { height: 560vh; }
  .hscroll__panel--img {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    gap: clamp(20px, 3vw, 44px);
    padding: 0 clamp(24px, 4vw, 52px);
  }
  .hscroll__sidebar {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .hscroll__img { height: min(52vh, 430px); }
  .hscroll__sidebar-title { font-size: 1.2rem; }
  .hscroll__sidebar-text { font-size: 0.88rem; }
  .hscroll__sidebar-list li { font-size: 0.84rem; }

  /* ── AIOS panel ── */
  .aios-panel {
    padding: 5vh 4vw 4vh 5vw;
    gap: 3vw;
  }
  .aios-ch { font-size: clamp(2.8rem, 6vw, 5.5rem); }
  .aios-frame-outer { max-width: 360px; }

  /* ── Dashboard grid: 2-col on tablet ── */
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .dash-stat-num { font-size: 2.4rem; }

  /* ── Dashboard flow: wrap nicely ── */
  .dashboard-flow { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .flow-node { white-space: normal; text-align: center; font-size: 0.82rem; }

  /* ── Areas served grid ── */
  #areas-served .dashboard-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Outcome cards ── */
  .outcome-card-inner { flex-direction: column; }
  .outcome-card-inner--reverse { flex-direction: column; }
  .outcome-card-screen { flex: none; width: 100%; height: 220px; }

  /* ── iPhone scroll section ── */
  .iphone-scroll-sticky { gap: 4vw; padding: 0 4%; }
  .iphone-wrap { zoom: 0.82; }
  .iphone-scroll-intro h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }

  /* ── Process infographic: 2 cols on tablet ── */
  .pinf-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .pinf-connector:nth-child(even) { display: none !important; }
  .pinf-card__inner { min-height: auto !important; padding: 20px 18px 16px !important; }

  /* ── CTA Rise ── */
  .cta-rise__content { padding: 3.5rem 2.5rem; }
  .cta-rise__heading { font-size: clamp(2rem, 5vw, 3rem); }

  /* ── Footer ── */
  .footer-inner { gap: 2rem; }
  .footer-links, .footer-contact { gap: 8px 20px; }

  /* ── Section padding tighter ── */
  .section { padding-left: 32px; padding-right: 32px; }
  .container { padding: 0 2rem; }
  .section-title { font-size: 1.9rem; }
}

/* ── Related Services Strip ── */
.svc-related {
  padding: 2rem 0 0;
}
.svc-related__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.svc-related__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  margin: 0;
}
.svc-related__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-related__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,0.12);
  background: rgba(11,18,32,0.03);
  font-size: 0.84rem;
  font-weight: 600;
  color: #0b1220;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.svc-related__link:hover {
  border-color: rgba(11,18,32,0.28);
  background: rgba(11,18,32,0.07);
  text-decoration: none;
}


/* ════════════════════════════════════════════════
   PREMIUM POLISH LAYER
   Global refinements — sits last so it wins the cascade.
   ════════════════════════════════════════════════ */

/* Brand text selection */
::selection { background: rgba(29, 78, 216, 0.16); color: #0b1220; }

/* Visible, elegant keyboard focus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Balanced, tighter headings across the whole site */
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.02em; }

/* Refined thin scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); }

/* Primary button — subtle inner highlight + press state */
.btn-primary {
  background: linear-gradient(180deg, #1a2334 0%, #0b1220 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 2px rgba(11, 18, 32, 0.2), 0 10px 30px rgba(11, 18, 32, 0.22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(11, 18, 32, 0.2), 0 16px 40px rgba(11, 18, 32, 0.3);
}
.btn-primary:active { transform: translateY(0); transition-duration: 0.1s; }

/* Ghost button — soft fill on hover, not just a border change */
.btn-ghost { transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.btn-ghost:hover { background: rgba(11, 18, 32, 0.04); }
.btn-ghost:active { transform: translateY(0); transition-duration: 0.1s; }

/* Nav — brand-blue underline, slightly crisper logo tracking */
.nav-links a::after { background: var(--accent-blue); }
.nav-links a:hover, .nav-links a.active { color: #0b1220; }
.nav-logo { letter-spacing: 0.1em; }

/* Cursor affordance on anything clickable */
a, button, [onclick], .nav-toggle { cursor: pointer; }

/* Images never distort */
img { max-width: 100%; height: auto; }

/* Hero — faint radial wash behind the typewriter so white isn't flat */
.hero-new {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(29, 78, 216, 0.05), transparent 65%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(34, 211, 238, 0.045), transparent 60%),
    #ffffff;
}
.hero-new__location { color: #47556b; }
.hero-new__location-pin { animation: pin-pulse 2.6s ease-in-out infinite; }
@keyframes pin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Motion discipline */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}




/* ════════════════════════════════════════════════
   TECH STACK STRIP — "Powered by"
   Pure-black slab carrying the shared .aurora light, so it flows
   continuously out of the hero above and into the horizontal-scroll
   section below with no visible seam at either boundary.
   Logos sit in mono at rest, hit brand colour on hover.
   ════════════════════════════════════════════════ */
.stack {
  position: relative;
  isolation: isolate;
  padding: 130px 0 130px;
  overflow: hidden;
  background: #000000;
}

/* ══════════════════════════════════════════════════════════════
   AURORA — the shared black-with-drifting-blue-light background.
   Used by the hero, the "What we do" panel and the Powered-by
   section so the top third of the page reads as one surface.
   Three blobs on the compositor: transform only, never layout or
   paint. Drop <div class="aurora" aria-hidden="true"><i></i></div>
   as the first child of any position:relative, overflow:hidden
   section, and give that section's content position:relative.
   ══════════════════════════════════════════════════════════════ */
.aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  /* Each section clips its own blobs at its edges, so a blob sitting near
     a boundary got sliced flat and you saw a hard horizontal seam where
     one section's glow stopped dead and the next one's black began.
     Fading the whole field out top and bottom means every aurora reaches
     the boundary as true #000 — so neighbouring dark sections dissolve
     into each other instead of butting up. */
  -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.55) 7%, #000 20%,
      #000 80%, rgba(0,0,0,0.55) 93%, transparent 100%);
  mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.55) 7%, #000 20%,
      #000 80%, rgba(0,0,0,0.55) 93%, transparent 100%);
}
.aurora::before,
.aurora::after,
.aurora > i {
  content: ""; position: absolute; display: block;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* deep blue, drifts across the upper left */
.aurora::before {
  width: 68vw; height: 46vw; left: -14vw; top: -12vw;
  background: radial-gradient(closest-side, rgba(29, 78, 216, 0.34), rgba(29, 78, 216, 0) 100%);
  animation: stack-drift-a 26s ease-in-out infinite alternate;
}
/* cyan, drifts across the lower right */
.aurora::after {
  width: 58vw; height: 40vw; right: -12vw; bottom: -14vw;
  background: radial-gradient(closest-side, rgba(34, 211, 238, 0.20), rgba(34, 211, 238, 0) 100%);
  animation: stack-drift-b 32s ease-in-out infinite alternate;
}
/* brighter core that crosses the middle */
.aurora > i {
  width: 46vw; height: 30vw; left: 26vw; top: 22%;
  background: radial-gradient(closest-side, rgba(77, 142, 247, 0.22), rgba(77, 142, 247, 0) 100%);
  animation: stack-drift-c 22s ease-in-out infinite alternate;
}

@keyframes stack-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(22vw, 14vh, 0) scale(1.18); }
}
@keyframes stack-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-20vw, -12vh, 0) scale(1); }
}
@keyframes stack-drift-c {
  from { transform: translate3d(-10vw, 6vh, 0) scale(0.92); }
  to   { transform: translate3d(14vw, -8vh, 0) scale(1.14); }
}

/* Fine dot grid, faded out toward the edges */
.stack__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
}

/* Pure black top and bottom — no white ramp. The section reads as one
   solid black slab with the blue light moving inside it. */

.stack > *:not(.aurora):not(.stack__grid) { position: relative; z-index: 3; }

/* ── Header ── */
.stack__head {
  max-width: 820px;
  margin: 0 auto 62px;
  padding: 0 24px;
  text-align: center;
}

.stack__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: #cfe0ff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  padding: 8px 18px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.stack__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16), 0 0 12px rgba(34, 197, 94, 0.8);
}

.stack__title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw + 0.5rem, 2.9rem);
  font-weight: 600; letter-spacing: -0.04em; line-height: 1.13;
  color: #ffffff;
}
.stack__title em {
  font-style: normal;
  background: linear-gradient(100deg, #7cb0ff 0%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.stack__sub {
  margin: 16px auto 0; max-width: 580px;
  font-size: 1rem; line-height: 1.72;
  color: rgba(255, 255, 255, 0.52);
}

/* ── Marquee rails ── */
.stack__rail {
  position: relative;
  padding: 10px 0;
  /* Not a plain fade at the edges — an eased curve that peaks at dead
     centre. Because the section is pure black, dropping the mask's alpha
     blends the chip toward black, so logos visibly LIGHT UP as they cross
     the middle of the rail and dim away again. Pure CSS, no JS, and it
     costs nothing because the mask is static while the track moves. */
  --edge: linear-gradient(90deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0.15) 8%,
      rgba(0,0,0,0.45) 20%,
      rgba(0,0,0,0.80) 34%,
      rgba(0,0,0,1)    50%,
      rgba(0,0,0,0.80) 66%,
      rgba(0,0,0,0.45) 80%,
      rgba(0,0,0,0.15) 92%,
      rgba(0,0,0,0)    100%);
  -webkit-mask-image: var(--edge);
  mask-image: var(--edge);
}
.stack__rail + .stack__rail { margin-top: 4px; }

/* Soft pool of light under the centre of each rail, so the spotlight
   reads as illumination rather than as a fade. */
.stack__rail::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 34% 130% at 50% 50%,
              rgba(77, 142, 247, 0.10), rgba(77, 142, 247, 0) 70%);
}
.stack__rail > * { position: relative; z-index: 1; }

/* The track holds ONE group in the markup; script.js clones it enough
   times to overflow the screen and then sets --stack-shift (one group's
   width) plus a duration matched to a shared px/sec speed. Until that
   runs the row just sits still — a fine no-JS fallback. */
.stack__track {
  display: flex; width: max-content;
  will-change: transform;
}
.stack__rail.is-ready .stack__track {
  animation: stack-marquee var(--stack-dur, 40s) linear infinite;
}
.stack__rail.is-ready .stack__track--reverse { animation-name: stack-marquee-rev; }

/* Was `.stack:hover` — pointing anywhere in the section froze BOTH rows
   at once, which read as a glitch. Now only the row under the cursor
   slows, and it eases rather than snapping to a dead stop. */
.stack__rail:hover .stack__track,
.stack__rail:focus-within .stack__track { animation-play-state: paused; }
.stack__track { transition: opacity 0.4s ease; }

@keyframes stack-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--stack-shift, 50%)), 0, 0); }
}
@keyframes stack-marquee-rev {
  from { transform: translate3d(calc(-1 * var(--stack-shift, 50%)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.stack__group {
  display: flex; align-items: center;
  gap: 18px; padding-right: 18px;
  flex: 0 0 auto;
}

/* ── Logo chip ── */
.stack__item {
  --brand: #ffffff;
  display: inline-flex; align-items: center; gap: 12px;
  flex: 0 0 auto;
  padding: 14px 24px 14px 20px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.stack__item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.stack__logo {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: block;
  fill: currentColor;
  color: rgba(255, 255, 255, 0.52);
  transition: color 0.4s ease, filter 0.4s ease;
}
.stack__item:hover .stack__logo {
  color: var(--brand);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 45%, transparent));
}

.stack__name {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.6); white-space: nowrap;
  transition: color 0.4s ease;
}
.stack__item:hover .stack__name { color: #ffffff; }

/* Sprite holder — never rendered */
.stack__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Honesty line ── */
.stack__note {
  margin: 60px auto 0; max-width: 640px; padding: 0 24px;
  text-align: center;
  font-size: 0.9rem; line-height: 1.75;
  color: rgba(255, 255, 255, 0.36);
}
.stack__note strong { color: rgba(255, 255, 255, 0.72); font-weight: 600; }

@media (max-width: 700px) {
  .stack { padding: 92px 0 92px; }
  /* Only ~2 chips fit on a phone rail, so the desktop spotlight curve
     would leave almost everything dimmed. Widen the bright plateau. */
  .stack__rail {
    --edge: linear-gradient(90deg,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0.5)  10%,
        rgba(0,0,0,1)    32%,
        rgba(0,0,0,1)    68%,
        rgba(0,0,0,0.5)  90%,
        rgba(0,0,0,0)    100%);
  }
  .stack__rail::before { display: none; }
  .stack__head { margin-bottom: 44px; }
  .stack__item { padding: 10px 16px 10px 13px; gap: 10px; }
  .stack__logo { width: 19px; height: 19px; flex-basis: 19px; }
  .stack__name { font-size: 0.9rem; }
  .stack__note { margin-top: 42px; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before,
  .aurora::after,
  .aurora > i { animation: none !important; }
  .stack__track { animation: none !important; transform: none !important; }
  .stack__rail {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
    scrollbar-width: none;
  }
  .stack__rail::-webkit-scrollbar { display: none; }
}

/* ── Security & data-handling band ──
   Sits under the logo marquee inside .stack. Every claim here maps to
   something actually enforced in client-portal/supabase/schema.sql or
   to the providers' own terms — keep it that way. */
.stack__div {
  max-width: 1120px;
  margin: 66px auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent);
}

.stack__sec { max-width: 1120px; margin: 0 auto; padding: 46px 24px 0; }

.stack__sec-label {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.46);
  margin-bottom: 34px;
}
.stack__sec-label svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--accent-green); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.stack__sec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stack__sec-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.022);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.stack__sec-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.stack__sec-ico {
  width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px;
  fill: none; stroke: rgba(124, 176, 255, 0.85); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.35s ease;
}
.stack__sec-item:hover .stack__sec-ico { stroke: var(--accent-cyan); }

.stack__sec-text { min-width: 0; }
.stack__sec-text b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.94rem; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.35;
}
.stack__sec-text span {
  display: block; margin-top: 5px;
  font-size: 0.82rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.42);
}

/* Certification provenance — deliberately worded as inherited, not held. */
.stack__fine {
  margin: 26px auto 0; max-width: 780px; padding: 0 24px;
  text-align: center;
  font-size: 0.78rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 1000px) {
  .stack__sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stack__sec-grid { grid-template-columns: 1fr; gap: 10px; }
  .stack__div { margin-top: 48px; }
  .stack__sec { padding-top: 36px; }
  .stack__sec-label { margin-bottom: 26px; }
  .stack__sec-item { padding: 15px 15px 15px 14px; }
}

/* ── Aurora: per-section tuning ──────────────────────────────────
   Same light, different framing. The hero gets a taller, calmer
   field; the "What we do" panel a tighter one behind the wordmark. */
.aurora--hero::before { width: 78vw; height: 58vw; left: -20vw; top: -18vw; }
.aurora--hero::after  { width: 66vw; height: 46vw; right: -16vw; bottom: -20vw; }
.aurora--hero > i     { width: 52vw; height: 34vw; left: 24vw; top: 16%; }

.aurora--panel::before { width: 62vw; height: 44vw; left: -16vw; top: -16vw; }
.aurora--panel::after  { width: 54vw; height: 38vw; right: -14vw; bottom: -16vw; }
.aurora--panel > i     { width: 44vw; height: 30vw; left: 28vw; top: 20%; }

/* Stop the blobs animating while their section is far off screen.
   script.js adds/removes .aurora-idle via IntersectionObserver. */
.aurora-idle::before,
.aurora-idle::after,
.aurora-idle > i { animation-play-state: paused; }

/* Content has to sit above the light. */
.hero-new__content { position: relative; z-index: 2; }
.hscroll__panel--text .hscroll__title { position: relative; z-index: 2; }

/* The hero already had its own faint radial wash from the light-theme
   days; the aurora replaces it so both sections match exactly. */
.hero-new { background: #000000; }
.hscroll__panel--text { background: #000000; }