/* ==========================================================================
   NB Webdesigns — Rønne, Bornholm
   Design tokens + base + components
   Bold modern agency: near-black canvas, indigo→cyan gradient, glass cards
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Color — bright, professional canvas + blue/cyan gradient accent.
     Nav, hero, footer and dark CTA bands intentionally stay on the old
     dark palette (re-declared locally) for contrast/punch; everything
     else reads light and trustworthy. */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F6FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F4F9;
  --color-text: #12151C;
  --color-text-muted: #4A515F;
  --color-text-soft: #6B7280;
  --color-primary: #05060A;
  --color-primary-soft: #10121A;
  --color-accent: #2F6FED;
  --color-accent-dark: #1E4FC7;
  --color-accent-light: #8AB4FF;
  --color-cyan: #34E0D6;
  --color-lime: #CBFF5E;
  --color-accent-tint: rgba(47, 111, 237, 0.1);
  --color-border: rgba(18, 21, 28, 0.08);
  --color-line: rgba(18, 21, 28, 0.14);
  --color-on-primary: #F3F4F6;
  --color-on-accent: #07060F;
  --color-success: #1E9E5A;
  --color-danger: #D64545;

  --gradient-primary: linear-gradient(135deg, #2F6FED 0%, #34E0D6 100%);
  --gradient-text: linear-gradient(100deg, #1E4FC7 0%, #2F6FED 45%, #12A79C 100%);

  /* Type */
  --font-display: 'Manrope', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing (8px rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 780px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 550ms;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(47, 111, 237, 0.28), 0 24px 60px -12px rgba(47, 111, 237, 0.38);

  --z-nav: 100;
  --z-overlay: 200;
}

/* Dark chrome — nav, hero, page-hero, footer, dark CTA bands and the
   browser-frame mockup keep the old dark-theme token values, scoped
   locally, so every descendant rule that already reads var(--color-text)
   etc. renders correctly without being touched individually. Every page
   starts on this same dark tone; only the body content below is light. */
.hero,
.page-hero,
.nav,
.footer,
.section--dark,
.browser-frame {
  --color-text: #F3F4F6;
  --color-text-muted: #C6CCD6;
  --color-text-soft: #939AA6;
  --color-border: rgba(243, 244, 246, 0.16);
  --color-line: rgba(243, 244, 246, 0.26);
  --color-surface: #232733;
  --color-surface-2: #2B303D;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
svg { display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-primary);
  display: inline-block;
}

h1 { font-size: clamp(2.6rem, 5vw + 1rem, 4.75rem); }
/* Accented capitals (É) sit tighter than the -0.02em heading tracking
   expects at display sizes, crowding the following letter — nudge clear. */
.char-kern { margin-right: 0.08em; }
h2 { font-size: clamp(2rem, 3vw + 1rem, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.4vw + 1rem, 1.75rem); }
h4 { font-size: 1.125rem; }

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(1.05rem, 1vw + 0.8rem, 1.3rem);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 46ch;
}

p { color: var(--color-text-muted); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
  position: relative;
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-5); }
}

.section { padding-block: var(--space-7); position: relative; }
@media (max-width: 767px) {
  .section { padding-block: var(--space-6); }
}
.section--tight { padding-block: var(--space-6); }
.section--alt { background: var(--color-bg-alt); }
.section--dark {
  background: var(--color-primary);
  color: var(--color-text);
}
.section--dark p { color: rgba(243, 244, 246, 0.68); }
.section--dark h2, .section--dark h3 { color: var(--color-text); }

.section-head {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-5);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--space-2); }

/* ---------- Decorative blobs ---------- */
.blob-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.blob-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
}
.blob-bg span:nth-child(1) { width: 480px; height: 480px; background: var(--color-accent); top: -160px; left: -120px; animation: blobFloat 16s var(--ease-in-out) infinite; }
.blob-bg span:nth-child(2) { width: 420px; height: 420px; background: var(--color-cyan); bottom: -180px; right: -100px; opacity: 0.18; animation: blobFloat 20s var(--ease-in-out) infinite reverse; }
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .blob-bg span { animation: none; }
}

/* Cursor-reactive spotlight — glows softly where the pointer is, only in the
   hero/page-hero light areas. JS toggles .is-active and sets --mx/--my. */
.blob-bg__cursor {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 20%), rgba(138, 180, 255, 0.24), rgba(52, 224, 214, 0.12) 40%, transparent 68%);
  mix-blend-mode: screen;
}
.blob-bg.is-active .blob-bg__cursor { opacity: 1; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .blob-bg__cursor { display: none; }
}

/* Magnetic button wrapper */
[data-magnetic] { will-change: transform; }

/* Tilt cards — subtle 3D tilt following the cursor, driven by JS */
[data-tilt] { will-change: transform; }
@media (pointer: coarse) {
  [data-tilt] { transform: none !important; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  min-height: 48px;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
}
.btn--primary:hover { box-shadow: var(--shadow-glow), 0 8px 24px rgba(47, 111, 237,0.35); transform: translateY(-2px); }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { display: none; }
}

.btn--dark {
  background: #10121A;
  color: #F3F4F6;
  border: 1px solid rgba(243, 244, 246, 0.16);
}
.btn--dark:hover { background: #2B303D; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--color-on-primary);
  border: 1px solid rgba(243, 244, 246, 0.28);
}
.btn--ghost:hover { background: rgba(243, 244, 246, 0.08); border-color: rgba(243, 244, 246, 0.5); }

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-line);
}
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

.btn--sm { padding: 0.7em 1.4em; font-size: 0.875rem; min-height: 40px; }

.btn--icon-move svg { transition: transform var(--dur-base) var(--ease-out); }
.btn--icon-move:hover svg { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-3);
  transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
}
/* Once scrolled past the dark hero/page-hero into the light body content,
   the nav becomes a light glass bar with dark text on every page. */
.nav.is-scrolled {
  --color-text: #12151C;
  --color-text-muted: #4A515F;
  --color-text-soft: #6B7280;
  padding-block: var(--space-1);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-border);
}
/* The mobile menu overlay is always light, so its own close icon must stay
   dark even while the nav bar behind it is in its --on-dark state. */
.nav__toggle.is-open span { background: #12151C; }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
@media (max-width: 560px) {
  .brand small { display: none; }
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .nav__links { display: flex; }
}
.nav__link {
  position: relative;
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding-block: 0.3em;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-primary);
  transition: right var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--color-text); }
.nav__link:hover::after, .nav__link.is-active::after { right: 0; }
.nav__link.is-active { color: var(--color-text); font-weight: 600; }

.nav__cta { display: none; }
@media (min-width: 900px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px) { .nav__toggle { display: none; } }
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-in-out), opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-in-out), opacity var(--dur-slow) var(--ease-out), visibility 0s;
}
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.mobile-menu__links a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 600;
}
.mobile-menu__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.mobile-menu__meta a:hover { color: var(--color-accent-dark); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 7rem;
  overflow: hidden;
  background: #12151C;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; }
}
.hero__inner {
  width: 100%;
  padding-block: var(--space-6);
  color: var(--color-text);
}
.hero .eyebrow { color: var(--color-accent-light); }
.hero h1 {
  color: #fff;
  margin-top: var(--space-2);
  max-width: 18ch;
}
.hero__lede {
  margin-top: var(--space-3);
  max-width: 48ch;
  font-size: clamp(1.05rem, 1vw + 0.8rem, 1.3rem);
  color: rgba(243, 244, 246, 0.78);
}
.hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hero__scroll {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-3);
  display: none;
  align-items: center;
  gap: 0.6em;
  color: rgba(243, 244, 246, 0.6);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1;
}
@media (min-width: 768px) {
  .hero__scroll { display: flex; right: var(--space-5); }
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: rgba(243, 244, 246, 0.3);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--color-cyan);
  animation: scrollLine 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; top: 0; }
}

/* ---------- Hero showcase (real portfolio screenshot, framed + tilted) ---------- */
.hero__showcase {
  position: relative;
  isolation: isolate;
  will-change: transform;
}
.browser-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg), 0 0 80px -20px rgba(47, 111, 237, 0.45);
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1em;
  background: var(--color-surface-2);
}
.browser-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-color, #888);
  flex-shrink: 0;
}
.browser-frame__url {
  margin-left: var(--space-2);
  padding: 0.3em 1em;
  border-radius: 999px;
  background: rgba(243, 244, 246, 0.06);
  font-size: 0.75rem;
  color: var(--color-text-soft);
}
.browser-frame img { width: 100%; height: auto; display: block; }

/* ---------- Hero slides — live carousel through real pages of the site ---------- */
.hero__slides {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10.2;
}
.hero__slide-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.hero__slide-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---------- Live embedded demo (real, browsable client site) ---------- */
.live-demo { max-width: 1000px; margin-inline: auto; text-align: center; }
.browser-frame--demo iframe {
  width: 100%;
  height: 75vh;
  min-height: 480px;
  max-height: 760px;
  border: 0;
  display: block;
  background: #fff;
}
.hero__showcase-tag {
  position: absolute;
  bottom: -1rem;
  right: -0.5rem;
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hero__showcase-tag { right: 0; font-size: 0.72rem; }
}
/* Page hero (interior pages) */
.page-hero {
  padding-top: 9.5rem;
  padding-bottom: var(--space-6);
  background: #12151C;
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow { color: var(--color-accent-light); }
.page-hero h1 { color: var(--color-text); margin-top: var(--space-2); }
.page-hero__grid {
  display: grid;
  gap: var(--space-4);
  align-items: end;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .page-hero__grid { grid-template-columns: 1.3fr 1fr; }
}
.breadcrumb {
  display: flex;
  gap: 0.5em;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}
.breadcrumb a:hover { color: var(--color-accent-light); }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid rgba(18, 21, 28, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: 0 2px 8px rgba(18, 21, 28, 0.05), 0 12px 28px -16px rgba(18, 21, 28, 0.12);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 8px rgba(18, 21, 28, 0.05), var(--shadow-lg);
  border-color: rgba(47, 111, 237, 0.3);
}

.card--glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(18, 21, 28, 0.1);
}

.service-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover .service-card__icon {
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  transform: rotate(-6deg) scale(1.05);
}
.service-card h3 { margin-bottom: 0.5em; }
.service-card p { font-size: 0.95rem; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.card:hover .service-card__link svg { transform: translateX(4px); }

/* ---------- Bento grid ---------- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); }
  .bento__item--wide { grid-column: span 2; }
  .bento__item--tall { grid-row: span 2; }
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Stats ---------- */
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.stat__label {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(243, 244, 246, 0.6);
  margin-top: 0.4em;
}

/* ---------- Split section (image + text) ---------- */
.split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .split--reverse .split__media { order: 2; }
}
/* No overflow:hidden here — the badge is deliberately positioned to overlap
   outside this box (see .split__media-badge), so clipping would cut it off.
   The rounded-corner clip instead lives on the media element itself below. */
.split__media { position: relative; aspect-ratio: 4/5; }
/* For website screenshots (wide/landscape) rather than portrait photos —
   forcing a 16:9 screenshot into a 4:5 box crops away most of the page. */
.split__media--wide { aspect-ratio: 16/9; }
.split__media img,
.split__media .media-ph,
.split__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(18, 21, 28, 0.1);
  box-shadow: 0 12px 32px -12px rgba(18, 21, 28, 0.18);
}
.split__media--wide img,
.split__media--wide iframe { background: var(--color-bg); }
/* Screenshots contain real UI text — cropping it with object-fit:cover can
   cut words off mid-line. Show the full screenshot uncropped instead. */
.split__media--wide img { object-fit: contain; }
.split__media-badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--color-primary-soft);
  border: 1px solid rgba(243, 244, 246, 0.16);
  color: #F3F4F6;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 220px;
}
@media (max-width: 480px) {
  .split__media-badge { left: 0.5rem; bottom: -1rem; padding: var(--space-2); }
}
.split__media-badge strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.split__media-badge span { font-size: 0.8rem; color: rgba(243,244,246,0.7); }

.check-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  color: var(--color-text);
  font-weight: 500;
}
.check-list svg { flex-shrink: 0; color: var(--color-cyan); margin-top: 0.15em; }

/* ---------- Process / steps ---------- */
.process { counter-reset: step; }
.process__item {
  position: relative;
  padding-left: 4.5rem;
  min-height: 3.5rem;
}
.process__item + .process__item { margin-top: var(--space-4); }
.process__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
}
.process__item h4 { margin-bottom: 0.3em; }

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimonial__stars { display: flex; gap: 2px; color: var(--color-lime); margin-bottom: var(--space-2); }
.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-text);
  flex-grow: 1;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.testimonial__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial__author strong { display: block; font-size: 0.9rem; }
.testimonial__author span { font-size: 0.8rem; color: var(--color-text-soft); }

/* ---------- Light section (white breathing room amid the dark theme) ---------- */
.section--light {
  background: #F4F6FA;
  color: #12151C;
}
.section--light .eyebrow { color: var(--color-accent-dark); }
.section--light h2,
.section--light h3 { color: #12151C; }
.section--light p,
.section--light .lede { color: #4A515F; }
.testimonial--light {
  background: #FFFFFF;
  border-color: rgba(18, 21, 28, 0.08);
  box-shadow: 0 24px 60px -24px rgba(18, 21, 28, 0.18);
}
.testimonial--light .testimonial__stars { color: var(--color-accent); }
.testimonial--light .testimonial__quote { color: #12151C; }
.testimonial--light .testimonial__author { border-top-color: rgba(18, 21, 28, 0.08); }
.testimonial--light .testimonial__author span { color: #6B7280; }

/* ---------- Trust strip ---------- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
}
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}
.trust-strip__item svg { color: var(--color-cyan); flex-shrink: 0; }

/* ---------- Gallery / Portfolio ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.filter-btn {
  padding: 0.55em 1.2em;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-text); }
.filter-btn.is-active { background: var(--gradient-primary); border-color: transparent; color: var(--color-on-accent); }

.gallery { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-3); }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/5;
  cursor: pointer;
  border: 1px solid rgba(18, 21, 28, 0.1);
  box-shadow: 0 8px 24px -14px rgba(18, 21, 28, 0.18);
}
/* For website screenshots (wide/landscape) rather than portrait photos */
.gallery__item--wide {
  aspect-ratio: 16/9;
  background: var(--color-bg);
}
.gallery__item img,
.gallery__item .media-ph {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Screenshots contain real UI text — cropping it with object-fit:cover can
   cut words off mid-line. Show the full screenshot uncropped instead. */
.gallery__item--wide img { object-fit: contain; }
.gallery__item:hover img,
.gallery__item:hover .media-ph { transform: scale(1.08); }
.gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,8,11,0) 40%, rgba(7,8,11,0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.gallery__item:hover .gallery__overlay { opacity: 1; }
.gallery__overlay .tag {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 0.3em;
}
.gallery__overlay h4 { color: #fff; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(5, 6, 10, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); }
.lightbox__panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.lightbox.is-open .lightbox__panel { transform: translateY(0) scale(1); }
.lightbox__media { aspect-ratio: 16/9; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.lightbox__media img,
.lightbox__media .media-ph { width: 100%; height: 100%; object-fit: cover; }
.lightbox__body { padding: var(--space-4); }
.lightbox__body .tag { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cyan); font-weight: 600; }
.lightbox__body h3 { margin-block: 0.4em 0.6em; }
.lightbox__close {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(5,6,10,0.5);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.lightbox__close:hover { background: rgba(5,6,10,0.75); }
.lightbox__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.lightbox__meta div span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-soft); margin-bottom: 0.2em; }
.lightbox__meta div strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid rgba(18, 21, 28, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 2px 8px rgba(18, 21, 28, 0.05), 0 12px 28px -16px rgba(18, 21, 28, 0.12);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pricing-card:hover { transform: translateY(-6px); border-color: rgba(47, 111, 237,0.3); box-shadow: 0 2px 8px rgba(18, 21, 28, 0.05), var(--shadow-lg); }
.pricing-card--featured {
  border-color: transparent;
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              var(--gradient-primary) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-glow);
}
@media (min-width: 900px) {
  .pricing-card--featured { transform: scale(1.035); }
  .pricing-card--featured:hover { transform: scale(1.035) translateY(-6px); }
}
.pricing-card__badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4em 1em;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-card__name { font-size: 1.2rem; margin-bottom: 0.3em; }
.pricing-card__desc { font-size: 0.9rem; margin-bottom: var(--space-3); }
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin-bottom: 0.2em;
}
.pricing-card__price .amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-text);
}
.pricing-card__price .unit { font-size: 0.9rem; color: var(--color-text-soft); }
.pricing-card__setup { font-size: 0.85rem; color: var(--color-text-soft); margin-bottom: var(--space-3); }
.pricing-card .check-list { flex-grow: 1; margin-bottom: var(--space-4); }
.pricing-card .check-list svg { color: var(--color-cyan); }
.pricing-card .btn { width: 100%; }

/* ---------- FAQ (accordion) ---------- */
.faq { border-bottom: 1px solid var(--color-border); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-3);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  flex-shrink: 0; width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.faq[open] summary .plus { transform: rotate(45deg); background: var(--gradient-primary); border-color: transparent; color: var(--color-on-accent); }
.faq__content { padding-bottom: var(--space-3); max-width: 68ch; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: var(--space-3); }
.form-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: var(--color-text);
}
label .req { color: var(--color-accent-dark); margin-left: 0.2em; }

.input, textarea, select.input {
  width: 100%;
  padding: 0.85em 1em;
  min-height: 48px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder, textarea::placeholder { color: var(--color-text-soft); }
.input:focus, textarea:focus, select.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}
textarea { min-height: 130px; resize: vertical; }
.helper-text { font-size: 0.8rem; color: var(--color-text-soft); margin-top: 0.4em; }
.field-error { font-size: 0.8rem; color: var(--color-danger); margin-top: 0.4em; display: none; }
.form-group.has-error .input,
.form-group.has-error textarea { border-color: var(--color-danger); }
.form-group.has-error .field-error { display: block; }

.form-status {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.form-status.is-success { display: block; background: rgba(127, 224, 160, 0.1); color: #A3EFBB; border: 1px solid rgba(127, 224, 160, 0.3); }
.form-status.is-error { display: block; background: rgba(241, 149, 141, 0.1); color: #F1958D; border: 1px solid rgba(241, 149, 141, 0.3); }

/* ---------- Footer ---------- */
.footer {
  background: var(--color-primary);
  color: rgba(243, 244, 246, 0.7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
.footer h4 { color: var(--color-text); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; margin-bottom: var(--space-2); }
.footer .brand { color: var(--color-text); }
.footer .brand small { color: rgba(243,244,246,0.5); }
.footer p { color: rgba(243,244,246,0.6); }
.footer__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(243,244,246,0.1);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer__links { display: flex; flex-direction: column; gap: 0.7em; }
.footer__links a { font-size: 0.9rem; transition: color var(--dur-fast) var(--ease-out); }
.footer__links a:hover { color: var(--color-accent-light); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3);
  font-size: 0.8rem;
  color: rgba(243,244,246,0.45);
}
.social-row { display: flex; gap: 0.7em; }
.social-row a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(243,244,246,0.18);
  border-radius: 50%;
  transition: all var(--dur-fast) var(--ease-out);
}
.social-row a:hover { background: var(--gradient-primary); border-color: transparent; color: var(--color-on-accent); }

/* ---------- Scroll reveal ---------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
[data-reveal-group] > * { transition-delay: calc(var(--stagger-i, 0) * 80ms); }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--color-border); border: none; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
  font-size: 0.8rem;
  font-weight: 600;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--color-primary-soft);
  color: var(--color-text);
  padding: 0.8em 1.2em;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.back-to-top {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--dur-base) var(--ease-out);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gradient-primary); color: var(--color-on-accent); border-color: transparent; }

/* Sticky mobile CTA bar */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem var(--space-3);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  background: rgba(5, 6, 10, 0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
}
.mobile-cta-bar .btn { flex: 1; }
@media (min-width: 900px) { .mobile-cta-bar { display: none; } }
@media (max-width: 899px) {
  body { padding-bottom: 76px; }
  /* Keep hero content clear of the fixed mobile CTA bar at the bottom.
     Content here can wrap to several lines on narrow phones, pushing the
     action buttons down far enough to land behind the bar on first load —
     trim the space above/around them so that can't happen. */
  .hero { min-height: calc(100dvh - 76px); padding-top: 4.75rem; }
  .hero__lede { margin-top: var(--space-2); }
  .hero__actions { margin-top: var(--space-3); }
}

/* Marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-2);
}
.marquee__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: marquee 24s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text-soft);
  white-space: nowrap;
}
.marquee__track span.dot { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; overflow-x: auto; }
}

/* Map */
.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16/10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Utility animation classes used by JS */
.fade-in-up { opacity: 0; transform: translateY(20px); }

/* ---------- Placeholder media (SVG grain + gradient) ---------- */
.media-ph {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-image:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(135deg, var(--g1, #14161F), var(--g2, #1E2130));
}
.media-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.media-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%);
}
.media-ph svg.media-ph__icon {
  position: relative;
  z-index: 1;
  width: 30%;
  max-width: 84px;
  height: auto;
  color: rgba(243, 244, 246, 0.35);
}

/* ---------- Stat panel (pairs with text columns that have no photo) ---------- */
.split__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(18, 21, 28, 0.1);
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(47, 111, 237, 0.12), transparent 60%),
    var(--color-surface);
  box-shadow: 0 2px 8px rgba(18, 21, 28, 0.05), 0 12px 28px -16px rgba(18, 21, 28, 0.12);
  min-height: 320px;
}
.split__stat-num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.split__stat-label {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 32ch;
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-progress__bar { transition: width 0.1s linear; }
}