/* ============================================================
   UPSERV — Design Context v1.0
   Governing principle: Certainty in a sea of chaos.
   Three colors: #FFFFFF, #0A0A0A, #155E75
   Two typefaces: Söhne, Söhne Mono
   Global easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
   Baseline grid: 8px
   ============================================================ */

/* --- @font-face — Söhne family --- */
@font-face {
  font-family: 'Sohne';
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/TestSohne-Kraftig.otf') format('opentype');
}
@font-face {
  font-family: 'Sohne';
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/TestSohne-Buch.otf') format('opentype');
}
@font-face {
  font-family: 'SohneMono';
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/TestSohneMono-Buch.otf') format('opentype');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Three colors. Exactly three. */
  --color-white: #FFFFFF;
  --color-black: #0A0A0A;
  --color-teal: #155E75;

  /* Supporting tones */
  --color-ghost: #C4C4CC;
  --color-body: #888888;
  --color-muted: #AAAAAA;
  --color-border: rgba(0, 0, 0, 0.07);
  --color-bg: #FAFAFA;

  /* Legacy mappings — keeps non-hero sections working */
  --color-primary: #0A0A0A;
  --color-bg-dark: #141210;
  --color-bg-dark-alt: #0D0B09;
  --color-bg-light: #FAFAFA;
  --color-bg-cream: #FAFAFA;
  --color-text-light: rgba(248, 248, 248, 0.88);
  --color-text-light-secondary: rgba(248, 248, 248, 0.50);
  --color-text-dark: #0A0A0A;
  --color-text-muted: #888888;
  --color-accent: #155E75;

  /* Fonts */
  --font-display: 'Sohne', -apple-system, 'Helvetica Neue', sans-serif;
  --font-primary: 'Sohne', -apple-system, 'Helvetica Neue', sans-serif;
  --font-secondary: 'Sohne', -apple-system, 'Helvetica Neue', sans-serif;
  --font-tertiary: 'Sohne', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'SohneMono', 'SF Mono', 'Consolas', monospace;

  /* Easing */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --scrollbar-w: 0px;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-black);
  /* Persistent atmospheric gradient — extends hero environment across page,
     visible behind any section that doesn't override its own background. */
  background:
    /* Brighter teal blooms */
    radial-gradient(ellipse 70% 50% at 25% 30%, rgba(31, 143, 170, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 80% 70%, rgba(21, 94, 117, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(75, 181, 213, 0.06) 0%, transparent 70%),
    /* Deeper near-black corners for stronger contrast */
    radial-gradient(ellipse 100% 70% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.35) 100%),
    #060708;
  background-attachment: fixed;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { border: none; background: none; font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }

.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;
}

/* ============================================================
   CUSTOM CURSOR — hidden (design context: no cursor trails)
   ============================================================ */
#cursor-dot, #cursor-ring { display: none !important; }

/* ============================================================
   HEADER — Fixed frosted glass nav
   Logo left. Links centered. CTA right. Height 64px.
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 64px;
  z-index: 1000;
  /* Smoked glass slab — dark with subtle vertical density */
  background:
    linear-gradient(180deg,
      rgba(18, 22, 28, 0.72) 0%,
      rgba(10, 12, 15, 0.78) 100%);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  /* Edge lighting + contact shadow + density */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.02),
    0 8px 28px rgba(0, 0, 0, 0.35);
  padding: 0;
  color: rgba(255, 255, 255, 0.88);
}
/* No change on scroll — always frosted glass */
/* .scrolled class no longer used — nav stays frosted at all times */

.header-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: relative;
}

/* Logo — two-color wordmark */
.nav-logo {
  font-family: 'Sohne', -apple-system, 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.04em;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.logo-up {
  color: #F5F7FA;
}
.logo-serv {
  color: #4BB5D5;
}

/* Dark background context */
.site-footer .logo-up,
.ft-watermark .logo-up {
  color: #ffffff;
}
.site-footer .logo-serv,
.ft-watermark .logo-serv {
  color: #155E75;
}

/* Nav links — centered absolutely */
.header-nav-left {
  display: none; /* old split nav hidden */
}
.header-nav-right {
  display: none; /* old split nav hidden */
}

.header-nav-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-nav-center ul {
  display: flex;
  gap: 40px;
}
.header-nav-center a {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: rgba(245, 247, 250, 0.65);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 150ms ease;
}
.header-nav-center a:hover {
  color: #FFFFFF;
}

/* Right side: audit link + CTA button */
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.header-audit-link {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: #4BB5D5;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 150ms ease;
}
.header-audit-link:hover {
  color: #6BC9E3;
}
/* Header CTA — translucent dark glass, secondary hierarchy */
.header-cta {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: #F5F7FA;
  /* Lighter than primary CTA — more translucent, secondary feel */
  background:
    linear-gradient(180deg,
      rgba(38, 44, 54, 0.7) 0%,
      rgba(22, 26, 32, 0.65) 100%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  padding: 10px 22px;
  border-radius: 9px;
  text-decoration: none;
  letter-spacing: -0.01em;
  overflow: hidden;
  /* Lighter material: subtle edges + soft shadow, no teal glow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

/* Subtle teal highlight sweep on hover */
.header-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(75, 181, 213, 0.18) 50%,
    transparent 100%);
  transition: left 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.header-cta:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg,
      rgba(45, 52, 64, 0.78) 0%,
      rgba(28, 32, 40, 0.72) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 8px 22px rgba(0, 0, 0, 0.32);
}

.header-cta:hover::before {
  left: 140%;
}

/* Hamburger toggle */
.slide-out-toggle {
  display: none;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
}
.toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-black);
  border-radius: 2px;
  transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}
.slide-out-toggle.open .toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.slide-out-toggle.open .toggle-line:nth-child(2) { opacity: 0; }
.slide-out-toggle.open .toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 999px) {
  .header-container { padding: 0 24px; }
  .header-nav-center { display: none; }
  .header-actions { display: none; }
  .slide-out-toggle { display: flex; }
}

/* ============================================================
   SLIDE-OUT MENU
   ============================================================ */
.slide-out-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); z-index: 998;
  opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease);
}
.slide-out-bg.open { opacity: 1; pointer-events: all; }
.slide-out-menu {
  position: fixed; top: 0; right: 0;
  width: 320px; max-width: 85vw; height: 100%;
  background: var(--color-black); z-index: 999;
  transform: translateX(100%);
  transition: transform 800ms var(--ease);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.slide-out-menu.open { transform: translateX(0); }
.slide-out-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.slide-out-close .close-line {
  position: absolute; width: 24px; height: 2px;
  background: rgba(255, 255, 255, 0.88); border-radius: 2px;
}
.slide-out-close .close-line:first-child { transform: rotate(45deg); }
.slide-out-close .close-line:last-child { transform: rotate(-45deg); }
.slide-out-nav a {
  display: block;
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.75rem 0;
  opacity: 0.7;
  transition: opacity 400ms var(--ease);
}
.slide-out-nav a:hover { opacity: 1; }

/* ============================================================
   S01: HERO
   ============================================================ */
.nectar-sticky-row-wrap--top { padding-bottom: 400vh; }
.nectar-sticky-row-wrap--top > .landing-section {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
}

.landing-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #0A0A0A;
  z-index: -1;
  /* Glow intensifier — bumped briefly on scroll, smoothly returns to 1 */
  --bloom-glow: 1;
  display: grid;
  align-items: center;
  padding-top: 40px;
}

/* --- Neat gradient — living 3D wave field on dark cinematic base --- */
.hero-fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.45;
  mix-blend-mode: screen;
  /* Light blur preserves wave structure while smoothing pixel grain */
  filter: blur(8px);
  /* Soft falloff to corners — keeps vignette dark, body luminous */
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 45% 55%, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 120% 100% at 45% 55%, black 60%, transparent 100%);
}

/* Volumetric light masses — independent motion, different durations */
.hero-bloom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Optional scroll-glow boost — entire landing section gets a brief
   saturate + brightness lift when user scrolls. Affects all bloom
   layers via the parent without overriding each bloom's blur. */
.landing-section.scroll-bumping {
  filter: saturate(var(--bloom-glow, 1.18)) brightness(var(--bloom-bright, 1.05));
  transition: filter 800ms ease;
}

/* Bloom 1: Cold Teal focal — left-center, drifts behind headline area */
.hero-bloom--left {
  width: 900px;
  height: 900px;
  left: -240px;
  top: 24%;
  /* Focal light source — bigger, brighter core, clearly trackable */
  background:
    radial-gradient(circle,
      rgba(150, 225, 245, 0.28) 0%,
      rgba(31, 143, 170, 0.55) 14%,
      rgba(21, 94, 117, 0.20) 40%,
      transparent 70%);
  /* Reduced blur — focal motion is the most visible bloom */
  filter: blur(38px);
  mix-blend-mode: screen;
  animation: bloomDriftA 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* Bloom 2: Wide blue-teal ambient band — right side, slow drift + slight rotation.
   Also breathes in saturation (color breathing) via layered animations. */
.hero-bloom--right {
  width: 1100px;
  height: 600px;
  right: -300px;
  top: 15%;
  background: radial-gradient(ellipse, rgba(64, 165, 195, 0.18) 0%, rgba(31, 143, 170, 0.08) 40%, transparent 70%);
  filter: blur(90px);
  mix-blend-mode: screen;
  /* Dual animation — position drift + color breathing on different timings */
  animation:
    bloomDriftB 12s ease-in-out infinite alternate,
    colorBreathe 19s ease-in-out infinite;
}

/* Color breathing — subtle saturation + brightness pulse, keeps palette but shifts intensity */
@keyframes colorBreathe {
  0%, 100% { filter: blur(90px) saturate(0.85) brightness(0.9); }
  50%      { filter: blur(90px) saturate(1.20) brightness(1.1); }
}

/* Bloom 3: Card halo — embeds card in environment, breathing motion */
.hero-bloom--card {
  width: 600px;
  height: 600px;
  right: 5%;
  top: calc(50% - 300px);
  background: radial-gradient(circle, rgba(245, 247, 250, 0.06) 0%, rgba(31, 143, 170, 0.12) 30%, transparent 60%);
  filter: blur(60px);
  mix-blend-mode: screen;
  animation: bloomBreathe 11s ease-in-out infinite alternate;
}

/* Bloom 7: Second active light near card — independent path, different timing */
.hero-bloom--card2 {
  width: 480px;
  height: 480px;
  right: 18%;
  top: calc(50% - 100px);
  background: radial-gradient(circle, rgba(120, 200, 220, 0.14) 0%, rgba(31, 143, 170, 0.18) 25%, rgba(21, 94, 117, 0.06) 50%, transparent 70%);
  filter: blur(70px);
  mix-blend-mode: screen;
  animation: bloomDriftE 13s linear infinite;
}

/* Bloom 4: Upper wash — slow horizontal drift across top */
.hero-bloom--upper {
  width: 800px;
  height: 600px;
  left: 25%;
  top: -250px;
  /* Deep indigo blue — secondary depth color above the hero */
  background: radial-gradient(ellipse, rgba(55, 85, 175, 0.22) 0%, rgba(30, 58, 138, 0.10) 40%, transparent 70%);
  filter: blur(80px);
  mix-blend-mode: screen;
  /* Dual animation — drift + rare expansion "super-burst" every 37s */
  animation:
    bloomDriftC 14s ease-in-out infinite alternate,
    superExpand 37s ease-in-out infinite;
}

/* Super-expand — rare, soft, dramatic scale-up that settles back.
   Like the system taking a deep breath every ~37s. */
@keyframes superExpand {
  0%, 85%, 100% { filter: blur(80px) brightness(1); }
  92%           { filter: blur(60px) brightness(1.35); }
  96%           { filter: blur(70px) brightness(1.15); }
}

/* Bloom 5: Lower drifting accent — rises slowly, fades in/out */
.hero-bloom--lower {
  width: 550px;
  height: 550px;
  left: calc(50% - 275px);
  bottom: -200px;
  /* Blue-teal hybrid — depth transition from indigo to teal at the base */
  background: radial-gradient(circle, rgba(45, 75, 155, 0.20) 0%, rgba(31, 143, 170, 0.10) 35%, transparent 65%);
  filter: blur(75px);
  mix-blend-mode: screen;
  animation: bloomDriftD 10s linear infinite;
}

/* CARRIER LAYER — bright, low-blur, fast horizontal sweep.
   This is the layer the eye can clearly track. Sweeps left→right
   across the headline area, scaling up at midpoint and dimming at edges. */
.hero-bloom--carrier {
  width: 320px;
  height: 320px;
  left: -160px;
  top: 38%;
  background: radial-gradient(circle,
    rgba(150, 225, 245, 0.42) 0%,
    rgba(75, 200, 235, 0.28) 25%,
    rgba(31, 143, 170, 0.08) 55%,
    transparent 75%);
  /* Significantly less blur than other layers — sharper trackable form */
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: carrierSweep 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes carrierSweep {
  0% {
    transform: translate3d(0, 0, 0) scale(0.85);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  35% {
    transform: translate3d(280px, -30px, 0) scale(1.08);
    opacity: 1;
  }
  60% {
    transform: translate3d(560px, -10px, 0) scale(1.18);
    opacity: 1;
  }
  85% {
    transform: translate3d(820px, 40px, 0) scale(1.05);
    opacity: 0.45;
  }
  100% {
    transform: translate3d(960px, 60px, 0) scale(0.9);
    opacity: 0;
  }
}

/* Bloom 6: Soft diagonal light streak — wide, very low opacity, slow drift.
   Provides a constant gentle directional flow across the hero. */
.hero-bloom--band {
  position: absolute;
  width: 160vw;
  height: 220px;
  left: -30vw;
  top: 38%;
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(75, 165, 195, 0.04) 30%,
    rgba(120, 200, 220, 0.07) 50%,
    rgba(75, 165, 195, 0.04) 70%,
    transparent 100%);
  filter: blur(60px);
  mix-blend-mode: screen;
  will-change: transform;
  /* Dual animation — positional drift + micro brightness flicker */
  animation:
    bandDrift 18s linear infinite,
    microFlicker 7s ease-in-out infinite;
}

@keyframes bandDrift {
  0%   { transform: translate3d(-60px, 0, 0) rotate(-2deg); opacity: 0.9; }
  50%  { transform: translate3d(90px, -18px, 0) rotate(1deg); opacity: 1; }
  100% { transform: translate3d(-60px, 0, 0) rotate(-2deg); opacity: 0.9; }
}

/* Micro flicker — almost imperceptible brightness variation */
@keyframes microFlicker {
  0%, 100% { filter: blur(60px) brightness(1); }
  22%      { filter: blur(60px) brightness(1.08); }
  44%      { filter: blur(60px) brightness(0.95); }
  68%      { filter: blur(60px) brightness(1.06); }
  84%      { filter: blur(60px) brightness(0.98); }
}

/* Independent motion paths — bigger amplitudes (+40%), bigger breathing.
   Slight directional shift each cycle prevents obvious looping. */
@keyframes bloomDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  33%  { transform: translate3d(110px, -50px, 0) scale(1.15); opacity: 0.92; }
  66%  { transform: translate3d(220px, -90px, 0) scale(1.22); opacity: 0.82; }
  100% { transform: translate3d(95px, 100px, 0) scale(1.08); opacity: 0.96; }
}

@keyframes bloomDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: 0.55; }
  35%  { transform: translate3d(-120px, 70px, 0) scale(1.12) rotate(3deg); opacity: 1; }
  70%  { transform: translate3d(-60px, 100px, 0) scale(1.16) rotate(1deg); opacity: 0.7; }
  100% { transform: translate3d(70px, -55px, 0) scale(1.20) rotate(-2deg); opacity: 0.95; }
}

@keyframes bloomBreathe {
  0%   { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0.6; }
  50%  { transform: translate3d(70px, -28px, 0) scale(1.22); opacity: 1; }
  100% { transform: translate3d(-55px, 45px, 0) scale(1.0); opacity: 0.65; }
}

@keyframes bloomDriftC {
  /* Consistent rightward drift with vertical wobble */
  0%   { transform: translate3d(-110px, 0, 0) scale(1); opacity: 0.85; }
  35%  { transform: translate3d(20px, 45px, 0) scale(1.13); opacity: 1; }
  70%  { transform: translate3d(160px, 20px, 0) scale(1.10); opacity: 0.96; }
  100% { transform: translate3d(220px, -25px, 0) scale(1.06); opacity: 0.88; }
}

/* Orbital — clockwise elliptical motion (rising lower bloom) */
@keyframes bloomDriftD {
  0%   { transform: translate3d(-90px, 0, 0) scale(1); opacity: 0.85; }
  25%  { transform: translate3d(0, -100px, 0) scale(1.14); opacity: 1; }
  50%  { transform: translate3d(110px, 0, 0) scale(1.20); opacity: 0.95; }
  75%  { transform: translate3d(0, 100px, 0) scale(1.10); opacity: 0.88; }
  100% { transform: translate3d(-90px, 0, 0) scale(1); opacity: 0.85; }
}

/* Orbital — counter-clockwise figure-8 around card area */
@keyframes bloomDriftE {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  20%  { transform: translate3d(70px, -55px, 0) scale(1.10); opacity: 1; }
  40%  { transform: translate3d(0, -90px, 0) scale(1.16); opacity: 0.95; }
  60%  { transform: translate3d(-70px, -55px, 0) scale(1.10); opacity: 0.92; }
  80%  { transform: translate3d(0, 60px, 0) scale(1.14); opacity: 0.96; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
}

/* ============================================================
   CURSOR GLOW — follows the mouse with subtle lerp, desktop only.
   Reads --cursor-x/--cursor-y CSS variables updated by JS.
   Adds responsive personality without positional shifts of other layers.
   ============================================================ */
.hero-cursor-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(120, 210, 235, 0.18) 0%,
    rgba(31, 143, 170, 0.10) 35%,
    transparent 65%);
  filter: blur(40px);
  mix-blend-mode: screen;
  /* Position set by JS via inline style on transform; smooth lerp via transition */
  transform: translate3d(var(--cursor-x, -9999px), var(--cursor-y, -9999px), 0);
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 400ms ease;
  opacity: 0;
  will-change: transform, opacity;
}

.landing-section.has-cursor .hero-cursor-glow {
  opacity: 1;
}

/* Mobile: disable cursor glow (no hover on touch) */
@media (max-width: 768px) {
  .hero-cursor-glow { display: none !important; }
}

/* ============================================================
   BURST EVENTS — sparse cinematic pulses, like the system "noticing"
   3 burst zones at different positions, each with long pause + brief flash.
   Coprime durations so they never align — composition has visible "events".
   ============================================================ */
.hero-burst {
  position: absolute;
  width: 360px;
  height: 360px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: opacity, transform;
}

.hero-burst--a {
  left: 32%;
  top: 38%;
  background: radial-gradient(circle, rgba(120, 215, 240, 0.55) 0%, rgba(31, 143, 170, 0.30) 35%, transparent 65%);
  animation: burstPulse 11s ease-out infinite;
  animation-delay: -2s;
}

.hero-burst--b {
  width: 300px;
  height: 300px;
  right: 18%;
  top: 28%;
  background: radial-gradient(circle, rgba(75, 200, 235, 0.60) 0%, rgba(31, 143, 170, 0.32) 35%, transparent 65%);
  animation: burstPulse 13s ease-out infinite;
  animation-delay: -7s;
}

.hero-burst--c {
  width: 420px;
  height: 420px;
  left: 55%;
  bottom: 18%;
  /* Deep blue burst — adds blue rhythm to the cinematic pulse events */
  background: radial-gradient(circle, rgba(85, 120, 200, 0.55) 0%, rgba(30, 58, 138, 0.24) 38%, transparent 65%);
  animation: burstPulse 16s ease-out infinite;
  animation-delay: -4s;
}

/* Burst keyframe — shorter quiet phase, brighter flash, perceptible echo */
@keyframes burstPulse {
  0%, 60%, 100% {
    opacity: 0;
    transform: scale(0.7);
  }
  68% {
    /* Peak flash */
    opacity: 1;
    transform: scale(1.18);
  }
  76% {
    /* Soft echo */
    opacity: 0.55;
    transform: scale(1.34);
  }
  88% {
    /* Decay */
    opacity: 0.18;
    transform: scale(1.44);
  }
}

/* Reduced-motion: disable all bloom and burst animations */
@media (prefers-reduced-motion: reduce) {
  .hero-bloom,
  .hero-burst { animation: none !important; }
  .hero-burst { opacity: 0 !important; }
}

/* ============================================================
   MOBILE GRADIENT ENHANCEMENT (≤768px)
   Goal: clearly visible + alive while keeping dark cinematic feel.
   - Focal teal bloom centered behind headline + card
   - Increased contrast (deeper edges, brighter focal)
   - Reduced blur on focal/carrier (sharper trackable motion)
   - Larger translate amplitude
   - Vertical shaping: dark top, bright middle, dark bottom
   - Subtle saturation boost
   ============================================================ */
@media (max-width: 768px) {
  /* Stronger global saturation + brightness lift — teal reads ~25% richer */
  .landing-section {
    filter: saturate(1.28) brightness(1.06);
  }

  /* 1. FOCAL teal bloom — 2x intensity. Center core nearly white-teal,
        broad teal mantle. Largest visual presence behind headline + card. */
  .hero-bloom--left {
    width: 640px;
    height: 640px;
    left: calc(50% - 320px);
    top: 16%;
    background: radial-gradient(circle,
      rgba(190, 245, 255, 0.78) 0%,
      rgba(75, 200, 235, 0.95) 18%,
      rgba(31, 143, 170, 0.55) 38%,
      rgba(21, 94, 117, 0.22) 55%,
      transparent 75%);
    filter: blur(24px);
    animation: bloomDriftAMobile 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  }

  /* 2. Right ambient — doubled opacity, pulled inward */
  .hero-bloom--right {
    width: 760px;
    height: 520px;
    right: -160px;
    top: 26%;
    background: radial-gradient(ellipse, rgba(95, 200, 225, 0.42) 0%, rgba(31, 143, 170, 0.22) 40%, transparent 72%);
    filter: blur(75px);
  }

  /* 3. Card halo — stronger glow over card area */
  .hero-bloom--card {
    width: 500px;
    height: 500px;
    right: calc(50% - 250px);
    top: 46%;
    background: radial-gradient(circle, rgba(245, 247, 250, 0.18) 0%, rgba(31, 143, 170, 0.38) 30%, transparent 62%);
  }

  /* 4. Card2 secondary halo — boosted */
  .hero-bloom--card2 {
    width: 400px;
    height: 400px;
    right: calc(50% - 200px);
    top: 54%;
    background: radial-gradient(circle, rgba(160, 225, 240, 0.36) 0%, rgba(31, 143, 170, 0.42) 25%, rgba(21, 94, 117, 0.18) 50%, transparent 72%);
  }

  /* 5. Lower bloom — boosted blue-teal hybrid */
  .hero-bloom--lower {
    width: 520px;
    height: 520px;
    left: calc(50% - 260px);
    bottom: -120px;
    background: radial-gradient(circle, rgba(60, 100, 185, 0.46) 0%, rgba(31, 143, 170, 0.26) 35%, transparent 68%);
  }

  /* 6. Carrier — much brighter trackable sweep */
  .hero-bloom--carrier {
    width: 280px;
    height: 280px;
    left: -140px;
    top: 30%;
    background: radial-gradient(circle,
      rgba(195, 245, 255, 0.92) 0%,
      rgba(95, 215, 245, 0.65) 25%,
      rgba(31, 143, 170, 0.22) 55%,
      transparent 78%);
    filter: blur(18px);
    animation: carrierSweepMobile 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  /* 7. Mobile-specific keyframes — wider translate range + scale breathing */
  @keyframes bloomDriftAMobile {
    0% {
      transform: translate3d(-40px, -30px, 0) scale(0.92);
      opacity: 0.85;
    }
    50% {
      transform: translate3d(20px, 10px, 0) scale(1.12);
      opacity: 1;
    }
    100% {
      transform: translate3d(50px, -20px, 0) scale(1.02);
      opacity: 0.9;
    }
  }

  @keyframes carrierSweepMobile {
    0% {
      transform: translate3d(0, 0, 0) scale(0.8);
      opacity: 0;
    }
    12% {
      opacity: 0.65;
    }
    35% {
      transform: translate3d(160px, -20px, 0) scale(1.10);
      opacity: 1;
    }
    60% {
      transform: translate3d(340px, 10px, 0) scale(1.22);
      opacity: 1;
    }
    85% {
      transform: translate3d(500px, 50px, 0) scale(1.05);
      opacity: 0.45;
    }
    100% {
      transform: translate3d(620px, 70px, 0) scale(0.88);
      opacity: 0;
    }
  }

  /* 8. Vertical shaping — looser middle so the stronger blooms can breathe;
        edges still dark for cinematic framing. */
  .hero-overlay {
    background:
      /* center vignette — pushed further out so brighter blooms read */
      radial-gradient(ellipse 140% 100% at 50% 45%, transparent 50%, rgba(6, 7, 8, 0.50) 100%),
      /* top + bottom darkening */
      linear-gradient(180deg,
        rgba(4, 6, 10, 0.72) 0%,
        rgba(6, 8, 12, 0.10) 22%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0) 60%,
        rgba(6, 8, 12, 0.28) 82%,
        rgba(4, 6, 10, 0.78) 100%);
  }

  /* 9. Scroll-bumping — stronger glow lift on mobile scroll */
  .landing-section.scroll-bumping {
    filter: saturate(1.55) brightness(1.18);
  }
}

/* Vignette + subtle dark behind pill zone for contrast */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Subtle dark zone behind pill area (mid-right gap) so pills stand out */
    radial-gradient(ellipse 22% 50% at 56% 50%, rgba(0, 0, 0, 0.18) 0%, transparent 70%),
    /* Center vignette */
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 30%, rgba(10, 10, 10, 0.55) 95%),
    /* Top + bottom edge darkening */
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.5) 0%,
      rgba(10, 10, 10, 0) 20%,
      rgba(10, 10, 10, 0) 80%,
      rgba(10, 10, 10, 0.6) 100%);
}

/* Text anchor: stronger dark band behind headline + subtle teal aura */
.hero-grid__text::before {
  content: '';
  position: absolute;
  width: 820px;
  height: 760px;
  left: -160px;
  top: 50%;
  transform: translateY(-50%);
  /* Deeper vertical darkening focused on headline band +
     subtle teal aura, very soft and diffused */
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(4, 6, 10, 0.5) 30%,
      rgba(4, 6, 10, 0.62) 50%,
      rgba(4, 6, 10, 0.5) 70%,
      transparent 100%),
    radial-gradient(ellipse 70% 55% at 35% 50%,
      rgba(31, 143, 170, 0.12) 0%,
      transparent 70%);
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}
/* Remove Neat watermark */
.landing-section a[href*="neat"] {
  display: none !important;
}

/* --- Mesh ambient glows: tuned for dark cinematic base --- */
.landing-section::before {
  content: '';
  position: absolute;
  width: 900px;
  height: 900px;
  top: -300px;
  right: -250px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 143, 170, 0.18) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
}

.landing-section::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  bottom: -150px;
  left: 0%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 94, 117, 0.12) 0%, transparent 65%);
  filter: blur(100px);
  pointer-events: none;
}

/* --- Dot grid overlay (inverted for dark bg) --- */
.landing-section .hero-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
}

/* ---- Hero layout: 60/40 grid ---- */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60fr 40fr;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  height: 100%;
}

.hero-grid__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  max-width: 720px;
  padding-right: 60px;
  padding-top: 0;
  z-index: 2;
  /* Shift text block up ~6vh for stronger top-of-fold authority */
  transform: translateY(-6vh);
}

/* ---- Mono tag ---- */
.hero-mono-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 800ms ease 100ms forwards;
}
.hero-mono-tag__line {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-teal);
  flex-shrink: 0;
}
.hero-mono-tag__text {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* ---- Headline: three lines, same size, different colors ---- */
.hero-stitch-headline {
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-bottom: 24px;
  max-width: 660px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 800ms ease 200ms forwards;
}

.hs-line {
  display: block;
  font-weight: 600;
}

.hs-line.hs-kicker {
  color: #F5F7FA;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 1em;
  margin-bottom: 0;
}

.hs-line.hs-bold {
  font-weight: 600;
  color: #F5F7FA;
  letter-spacing: -0.04em;
  text-shadow: 0 0 80px rgba(31, 143, 170, 0.20);
}

.hs-line.hs-accent {
  /* Subtle confident continuation — narrower, lighter, tightly tucked
     below the main headline */
  margin-top: 8px;
  font-weight: 400;
  font-style: normal;
  color: rgba(245, 247, 250, 0.5);
  opacity: 1;
  letter-spacing: -0.03em;
  font-size: 0.62em;
  line-height: 1.15;
  white-space: nowrap;
  max-width: 80%;
}

/* ---- Subhead ---- */
.hero-supporting {
  display: block;
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0;
  border-left: none;
  max-width: 380px;
  background: none;
  box-shadow: none;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 800ms ease 300ms forwards;
}

.hero-supporting-label {
  display: none;
}

.hero-supporting-copy {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(245, 247, 250, 0.55);
  letter-spacing: -0.01em;
  max-width: 380px;
}

/* ---- CTA row ---- */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 800ms ease 400ms forwards;
}

/* ---- Primary CTA: deep charcoal with teal ambient glow ---- */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #F5F7FA;
  /* Subtle inner gradient — top slightly lighter for tactile depth */
  background:
    linear-gradient(180deg,
      #1A1D24 0%,
      #0F1115 100%);
  border: none;
  border-radius: 14px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  /* Layered: top edge highlight + bottom density + inner stroke +
     teal ambient glow + contact + float */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(31, 143, 170, 0.12),
    0 0 24px rgba(31, 143, 170, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.45);
  transition: background 250ms ease, box-shadow 250ms ease, transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-cta__label {
  white-space: nowrap;
}

.hero-cta__icon {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  color: #4BB5D5;
  transition: transform 150ms ease, opacity 150ms ease;
}

/* Hover — clear lift, brighter teal glow */
.hero-cta:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(180deg,
      #1F232C 0%,
      #12151A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(31, 143, 170, 0.22),
    0 0 40px rgba(31, 143, 170, 0.32),
    0 4px 8px rgba(0, 0, 0, 0.5),
    0 16px 44px rgba(0, 0, 0, 0.55);
}
.hero-cta:hover .hero-cta__icon {
  transform: translateX(3px);
  opacity: 0.95;
}

/* Click animation */
.hero-cta.pressing {
  transform: scale(0.97);
  transition-duration: 100ms;
}
.hero-cta.pressing .hero-cta__icon {
  transform: translateX(3px);
  opacity: 1;
  transition-duration: 100ms;
}

/* Release */
.hero-cta.releasing {
  transform: scale(1);
  transition-duration: 300ms;
}

/* Focus */
.hero-cta:focus-visible {
  outline: 2px solid rgba(21, 94, 117, 0.4);
  outline-offset: 3px;
}

/* Ghost link */
.hero-ghost-link {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.hero-ghost-link:hover {
  color: var(--color-black);
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta, .hero-cta__icon {
    transition: none !important;
  }
  .hero-mono-tag, .hero-stitch-headline,
  .hero-supporting, .hero-cta-group,
  .hero-social-proof {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Scroll line indicator — removed ---- */
.hero-scroll-line {
  display: none;
}

/* ---- Social proof row ---- */
.hero-social-proof {
  display: flex;
  align-items: center;
  opacity: 0;
  animation: fadeUp 800ms ease 500ms forwards;
}

.hero-avatars {
  display: flex;
  flex-shrink: 0;
}

.hero-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0;
}

.hero-social-text {
  margin-left: 22px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  color: #BBB;
  letter-spacing: -0.01em;
}
.hero-social-text strong {
  color: #777;
  font-weight: 600;
}

/* ---- Hero entrance keyframes ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Hero entrance — disable JS-driven .hero-part animation ---- */
.hero-part {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-part.visible {
  opacity: 1;
  transform: none;
}

/* ---- Hero responsive ---- */
@media (max-width: 999px) {
  .hero-grid {
    padding: 64px 40px 80px 40px;
  }
  .hero-grid__text {
    padding-right: 32px;
  }
  .hero-stitch-headline {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  /* Nav — INITIAL state: highly transparent glass, blends into hero */
  .site-header {
    height: 52px;
    background:
      linear-gradient(180deg,
        rgba(20, 24, 30, 0.10) 0%,
        rgba(10, 12, 15, 0.14) 100%);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    /* Minimal shadow — almost floating */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 1px 6px rgba(0, 0, 0, 0.06);
    transition:
      background 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      backdrop-filter 350ms ease,
      -webkit-backdrop-filter 350ms ease,
      border-bottom-color 350ms ease,
      box-shadow 350ms ease;
  }

  /* Nav — SCROLLED state: opaque smoked glass, functional contrast */
  .site-header.scrolled {
    background:
      linear-gradient(180deg,
        rgba(18, 22, 28, 0.72) 0%,
        rgba(10, 12, 15, 0.78) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 6px 22px rgba(0, 0, 0, 0.28);
  }
  .header-container {
    padding: 0 18px !important;
    height: 52px;
  }
  .slide-out-toggle {
    right: 18px;
  }
  .slide-out-toggle .toggle-line {
    background: rgba(245, 247, 250, 0.92);
  }

  /* Hero grid — symmetric horizontal padding for breathing room around card */
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 80px 0 16px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  .hero-grid__text {
    text-align: center;
    align-items: center;
    max-width: 100%;
    padding: 0 24px;
    transform: none;
  }
  /* Card container — no transform, full width to allow card centering */
  .hero-transform {
    width: 100% !important;
  }

  /* Slightly stronger anchor behind text on mobile for contrast */
  .hero-grid__text::before {
    width: 480px;
    height: 320px;
    left: 50%;
    transform: translate(-50%, -50%);
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(6, 8, 12, 0.45) 35%,
        rgba(6, 8, 12, 0.55) 50%,
        rgba(6, 8, 12, 0.45) 65%,
        transparent 100%),
      radial-gradient(ellipse 65% 50% at 50% 50%,
        rgba(31, 143, 170, 0.12) 0%,
        transparent 70%);
    filter: blur(60px);
  }

  /* Headline — comfortable leading, tightened gap below */
  .hero-stitch-headline {
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
    text-align: center;
    max-width: 100%;
  }
  .hs-line { padding: 0; }

  /* Secondary line — tucked tighter to main */
  .hs-line.hs-accent {
    font-size: 0.7em;
    color: rgba(245, 247, 250, 0.45);
    margin-top: 4px;
    letter-spacing: -0.025em;
    line-height: 1.18;
  }

  /* Paragraph — narrower, fewer lines, comfortable */
  .hero-supporting {
    max-width: 280px;
    text-align: center;
    margin-bottom: 18px;
  }
  .hero-supporting-copy {
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 100%;
    text-align: center;
  }

  /* CTA — slightly less vertical, still prominent, modest gap to card */
  .hero-cta-group {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 22px;
  }
  .hero-cta {
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 600;
    width: auto;
    display: inline-flex;
  }
  .hero-cta:active {
    transform: scale(0.98);
    transition-duration: 100ms;
  }

  /* Card — mobile-specific: redesigned proportions, not scaled.
     Natural sizing, 86% viewport width, simplified content. */
  .hero-transform {
    transform: none !important;
    transform-origin: top center !important;
    align-items: flex-start !important;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    animation: fadeUp 800ms ease 500ms forwards;
  }
  .browser-card {
    max-width: 71vw !important;
    width: 71vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Premium floating shadow — softer + larger spread on mobile */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 14px 32px rgba(0, 0, 0, 0.28),
      0 40px 72px rgba(0, 0, 0, 0.36),
      0 70px 120px rgba(0, 0, 0, 0.24),
      0 90px 140px -20px rgba(31, 143, 170, 0.20) !important;
  }

  /* Mobile card content simplification — show only essentials */
  .bc-desc { display: none !important; }
  .bc-rating { display: none !important; }

  /* Compact meta — single horizontal row of two chips */
  .bc-meta {
    margin: 8px 12px 0 !important;
    background: transparent !important;
    gap: 6px !important;
  }
  .bc-meta-col {
    background: rgba(21, 94, 117, 0.06) !important;
    border: 1px solid rgba(21, 94, 117, 0.10) !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
  }
  .bc-meta-val { font-size: 6.5px !important; }
  .bc-meta-key { font-size: 5.5px !important; }

  /* Tighter internal padding — clean not cramped */
  .bc-chrome {
    padding: 7px 12px;
  }
  .bc-site-nav {
    padding: 6px 14px;
  }

  /* Shorter landscape crop for hero image */
  .bc-hero-img {
    margin-top: 8px !important;
    height: 110px !important;
  }
  .bc-hero-img img {
    height: 110px !important;
  }

  /* Category tag — slightly tighter */
  .bc-category {
    padding: 8px 14px 0 !important;
  }

  /* Title — short, max 2 lines, smaller font */
  .bc-title {
    padding: 4px 14px 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* CTA — compact placement */
  .bc-cta-row {
    padding: 10px 14px 14px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bc-cta-btn {
    font-size: 8.5px !important;
    padding: 7px 14px !important;
  }

  /* Force final-state visibility on mobile — no scroll-stage reveal needed.
     The card shows its full output state immediately for mobile users. */
  .bc-hero-img img { filter: grayscale(0%) !important; }
  .bc-site-nav .bc-brand { font-weight: 600 !important; color: #0A0A0A !important; }
  .bc-site-nav .bc-nav-link { color: #555 !important; }
  .bc-site-nav .bc-nav-book {
    font-weight: 600 !important;
    color: #fff !important;
    background: #0A0A0A !important;
  }
  .bc-category {
    opacity: 1 !important;
    transform: none !important;
  }
  .bc-pulse { animation: pulseDot 3s ease-in-out infinite !important; }
  .bc-title {
    font-weight: 600 !important;
    color: #0A0A0A !important;
  }
  .bc-meta {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-social-proof {
    flex-direction: column;
    gap: 8px;
  }
  .hero-social-text {
    margin-left: 0;
    text-align: center;
  }
  .hero-scroll-line { display: none; }

  /* Re-time entry animations on mobile (slightly tighter stagger) */
  .hero-stitch-headline {
    animation: fadeUp 800ms ease 100ms forwards;
  }
  .hero-supporting {
    animation: fadeUp 800ms ease 200ms forwards;
  }
  .hero-cta-group {
    animation: fadeUp 800ms ease 250ms forwards;
  }
}

/* ============================================================
   HERO PIN WRAP — replaces old nectar-sticky-row-wrap
   Transparent — body's fixed atmospheric gradient shows through.
   ============================================================ */
.hero-pin-wrap {
  position: relative;
  background: transparent;
}

/* Old sticky-row-wrap overrides — neutralize */
.nectar-sticky-row-wrap--top { padding-bottom: 0; }
.nectar-sticky-row-wrap--top > .landing-section {
  position: relative;
  top: auto;
  left: auto;
}

/* ============================================================
   BROWSER CARD — Scroll-triggered website transformation
   ============================================================ */

.hero-transform {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Slightly smaller + shifted right so headline remains dominant */
  transform: scale(0.95) translateX(3%);
  transform-origin: center;
  /* Clip only the right edge; allow left annotations + bottom pill */
  clip-path: inset(-80px 0 -80px -160px);
}


/* --- Browser card container --- */
.browser-card {
  width: 90%;
  max-width: 420px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Wider shadow spread + subtle teal bottom reflection — the system "output" */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 16px rgba(0, 0, 0, 0.18),
    0 24px 56px rgba(0, 0, 0, 0.32),
    0 56px 100px rgba(0, 0, 0, 0.22),
    0 60px 80px -20px rgba(31, 143, 170, 0.18);
  transition: box-shadow 800ms ease;
}

.browser-card.stage-5 {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 28px 64px rgba(0, 0, 0, 0.36),
    0 64px 110px rgba(0, 0, 0, 0.26),
    0 70px 100px -20px rgba(31, 143, 170, 0.30),
    0 90px 130px -30px rgba(75, 181, 213, 0.18);
}

/* --- Browser chrome --- */
.bc-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(245, 245, 247, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.bc-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.bc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.bc-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  color: #bbb;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 4px 10px;
  text-align: center;
}

/* --- Body --- */
.bc-body {
  padding: 0;
}

/* --- Site nav --- */
.bc-site-nav {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.bc-brand {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  color: #ccc;
  letter-spacing: -0.02em;
  transition: color 600ms ease, font-weight 600ms ease;
}

.bc-brand-sub {
  font-weight: 400;
  color: #aaa;
  letter-spacing: 0.02em;
  font-size: 0.85em;
}

.bc-nav-links {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.bc-nav-link {
  font-family: var(--font-primary);
  font-size: 7px;
  font-weight: 400;
  color: #ccc;
  transition: color 600ms ease;
}

.bc-nav-book {
  font-family: var(--font-display);
  font-size: 7px;
  font-weight: 400;
  color: #ccc;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: transparent;
  transition: color 600ms ease, background 600ms ease, font-weight 600ms ease;
}

/* Stage 2: nav restructures */
.bc-site-nav.s2 .bc-brand {
  font-weight: 600;
  color: #0A0A0A;
}
.bc-site-nav.s2 .bc-nav-link {
  color: #555;
}
.bc-site-nav.s2 .bc-nav-book {
  font-weight: 600;
  color: #fff;
  background: #0A0A0A;
}

/* --- Hero image --- */
.bc-hero-img {
  width: calc(100% - 24px);
  margin: 10px auto 0;
  border-radius: 6px;
  overflow: hidden;
  height: 200px;
}

.bc-hero-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 50% 5% !important;
  display: block;
  border-radius: 0;
  filter: grayscale(100%);
  transition: filter 800ms ease;
}

.bc-hero-img.s1 img {
  filter: grayscale(0%);
}

/* --- Category tag --- */
.bc-category {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.bc-category.s3 {
  opacity: 1;
  transform: translateY(0);
}

.bc-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #155E75;
  flex-shrink: 0;
}

.bc-pulse.active {
  animation: pulseDot 3s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

.bc-category-text {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #155E75;
}

/* --- Title --- */
.bc-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: #999;
  padding: 8px 16px 0;
  margin: 0;
  letter-spacing: -0.02em;
  transition: font-weight 600ms ease, color 600ms ease, font-size 600ms ease;
}

.bc-title.s3 {
  font-weight: 600;
  color: #0A0A0A;
  font-size: 13px;
}

/* --- Description --- */
.bc-desc {
  font-family: var(--font-primary);
  font-size: 8px;
  font-weight: 400;
  line-height: 1.6;
  color: transparent;
  padding: 4px 16px 0;
  margin: 0;
  transition: color 600ms ease;
}

.bc-desc.s3 {
  color: #888;
}

/* --- Meta grid --- */
.bc-meta {
  display: flex;
  gap: 1px;
  margin: 10px 12px 0;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.bc-meta.s4 {
  opacity: 1;
  transform: translateY(0);
}

.bc-meta-col {
  flex: 1;
  background: rgba(250, 250, 250, 0.8);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bc-meta-val {
  font-family: var(--font-primary);
  font-size: 7px;
  font-weight: 500;
  color: #2A2E40;
}

.bc-meta-key {
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 400;
  color: #999;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- CTA row --- */
.bc-cta-row {
  padding: 10px 16px 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.bc-cta-row.s4 {
  opacity: 1;
  transform: translateY(0);
}

.bc-cta-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  color: #fff;
  background: #0A0A0A;
  padding: 6px 14px;
  border-radius: 4px;
  letter-spacing: 0;
}

/* --- Rating --- */
.bc-rating {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 400;
  color: #aaa;
  padding: 8px 16px 14px;
  opacity: 0;
  transition: opacity 600ms ease;
}

.bc-rating.s5 {
  opacity: 1;
}

/* --- Annotations --- */
.bc-annotation {
  position: absolute;
  left: -120px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Reduced vertical, expanded horizontal padding */
  padding: 6px 18px;
  /* Darker neural capsule */
  background:
    linear-gradient(180deg,
      rgba(14, 17, 22, 0.84) 0%,
      rgba(8, 10, 13, 0.80) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  /* Inner top highlight + soft outer teal glow + contact + float */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(31, 143, 170, 0.05),
    0 0 22px rgba(31, 143, 170, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

/* Independent drift per pill — different durations + negative delays */
.bc-annotation.is-drifting {
  animation: pillDrift 9s ease-in-out infinite;
}
.bc-annotation[data-stage="1"].is-drifting { animation-duration: 8.5s; animation-delay: -1.2s; }
.bc-annotation[data-stage="2"].is-drifting { animation-duration: 9.7s; animation-delay: -0.4s; }
.bc-annotation[data-stage="3"].is-drifting { animation-duration: 8.2s; animation-delay: -2.8s; }
.bc-annotation[data-stage="4"].is-drifting { animation-duration: 10.3s; animation-delay: -1.6s; }
.bc-annotation[data-stage="5"].is-drifting { animation-duration: 9.1s; animation-delay: -3.5s; }

@keyframes pillDrift {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(1.5px, -1.8px, 0); }
  66%  { transform: translate3d(-1.2px, 1.5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* .visible class removed — annotations use inline styles from JS */

.bc-ann-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4BB5D5;
  flex-shrink: 0;
  /* Active status indicator — enhanced glow */
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.55),
    0 0 6px rgba(75, 181, 213, 0.95),
    0 0 14px rgba(75, 181, 213, 0.55),
    0 0 26px rgba(75, 181, 213, 0.28);
  animation: annDotPulse 2.4s ease-in-out infinite;
}

/* Stagger pulse timing so dots don't sync */
.bc-annotation[data-stage="1"] .bc-ann-dot { animation-delay: 0s; animation-duration: 2.4s; }
.bc-annotation[data-stage="2"] .bc-ann-dot { animation-delay: -0.5s; animation-duration: 2.7s; }
.bc-annotation[data-stage="3"] .bc-ann-dot { animation-delay: -1.1s; animation-duration: 2.2s; }
.bc-annotation[data-stage="4"] .bc-ann-dot { animation-delay: -1.7s; animation-duration: 2.9s; }
.bc-annotation[data-stage="5"] .bc-ann-dot { animation-delay: -2.2s; animation-duration: 2.5s; }

@keyframes annDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.88); }
}

.bc-ann-text {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  color: rgba(245, 247, 250, 0.85);
  letter-spacing: 0.04em;
}

/* --- Recommended pill --- */
.bc-recommended {
  position: absolute;
  /* Closer to card */
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  display: flex;
  align-items: center;
  gap: 8px;
  /* Final system output — slightly more presence */
  padding: 10px 20px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(246, 249, 252, 0.93) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  /* Stronger layered shadow — premium output indicator */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 20px 48px rgba(16, 185, 129, 0.14);
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
  white-space: nowrap;
  pointer-events: none;
}

.bc-recommended.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bc-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  /* Enhanced active glow — system output indicator */
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
    0 0 6px rgba(16, 185, 129, 0.95),
    0 0 14px rgba(16, 185, 129, 0.55),
    0 0 28px rgba(16, 185, 129, 0.3);
  animation: recDotPulse 2.6s ease-in-out infinite;
}

@keyframes recDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.88); }
}

.bc-rec-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #0F1115;
  letter-spacing: 0.04em;
}

/* --- Mobile: show final state only --- */
@media (max-width: 768px) {
  .hero-transform {
    justify-content: center;
  }
  .browser-card {
    width: 100%;
    max-width: 320px;
  }
  /* Hide annotation pills and recommended on mobile */
  .bc-annotation { display: none !important; }
  .bc-recommended { display: none !important; }
}


/* Breathing orbs + Ken Burns */
.hero-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0; filter: blur(40px);
}
.hero-orb--saffron {
  width: 70vw; height: 70vw; top: -20%; right: -10%;
  background: radial-gradient(circle, rgba(212,124,47,0.32) 0%, rgba(212,124,47,0.12) 40%, transparent 65%);
  animation: saffron-breathe 8s var(--ease) infinite, saffron-ken 15s var(--ease) infinite alternate;
}
.hero-orb--jade {
  width: 55vw; height: 55vw; bottom: -15%; left: -8%;
  background: radial-gradient(circle, rgba(61,140,114,0.18) 0%, rgba(61,140,114,0.06) 40%, transparent 65%);
  animation: jade-breathe 10s var(--ease) infinite, jade-ken 18s var(--ease) infinite alternate;
  animation-delay: -4s, -6s;
}
@keyframes saffron-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.85; }
  33% { transform: scale(1.2) translate(-4%, 3%); opacity: 1; }
  66% { transform: scale(0.88) translate(4%, -2%); opacity: 0.7; }
}
@keyframes jade-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.75; }
  40% { transform: scale(1.25) translate(4%, -4%); opacity: 1; }
  70% { transform: scale(0.85) translate(-3%, 3%); opacity: 0.6; }
}
@keyframes saffron-ken { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
@keyframes jade-ken { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }

.landing-section > .row-bg-overlay { display: none; }

.landing-content {
  position: relative; z-index: 2;
  width: 100%; text-align: center;
  padding: 0 5%;
}

/* Legacy hero styles — neutralized. All hero styles are now in the hero section above. */

/* 5. Scroll indicator — single pulsing line */
.scroll-down-wrap {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%); z-index: 100;
  width: 1px; height: 48px;
  background: #141210;
  animation: scrollPulse 2.5s var(--ease) infinite;
}
.scroll-down-wrap * { display: none; }
@keyframes scrollPulse {
  0%, 100% { opacity: 0.12; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.28; transform: translateX(-50%) translateY(6px); }
}
@media (max-height: 630px) { .scroll-down-wrap { display: none; } }

/* Legacy split-heading (kept for non-hero sections) */
.split-heading-row { overflow: hidden; padding: 0.02em 0; }
.split-heading-row.left-offset { padding-left: 12vw; }
@media (max-width: 690px) { .split-heading-row.left-offset { padding-left: 5vw; } }
.nectar-split-heading h1 {
  font-family: var(--font-primary); font-weight: 700;
  font-size: 7vw; line-height: 1.0; letter-spacing: -0.03em;
  color: var(--color-text-dark);
  transform: translateY(120%); opacity: 0;
  transition: transform 800ms var(--ease), opacity 800ms var(--ease);
}
@media (max-width: 999px) { .nectar-split-heading h1 { font-size: 9vw; } }
@media (max-width: 690px) { .nectar-split-heading h1 { font-size: 11vw; } }
.nectar-split-heading.revealed h1 { transform: translateY(0); opacity: 1; }
[data-text-effect="twist-bottom-2"] h1 {
  transform: translateY(120%) rotateX(-25deg); transform-origin: 50% 100%;
}
[data-text-effect="twist-bottom-2"].revealed h1 { transform: translateY(0) rotateX(0); }

/* Spacer */
.spacer-50 { height: 0; position: relative; z-index: 1; display: none; }

/* ============================================================
   S02: CLIP-PATH REVEAL
   ============================================================ */
.clip-reveal-section { background: transparent; padding: 0; position: relative; z-index: 1; }
.clip-reveal-inner { position: relative; overflow: hidden; }
.clip-reveal-inner .row-bg-wrap {
  position: absolute; inset: 0;
  clip-path: inset(15% 25% 15% 25% round 50px);
  z-index: 1; overflow: hidden;
}
.clip-reveal-column { position: relative; padding: 29% 0; z-index: 0; }
@media (max-width: 999px) { .clip-reveal-column { padding: 50% 0; } }
@media (max-width: 690px) { .clip-reveal-column { padding: 85% 0; } }
.clip-reveal-inner .row-bg { position: absolute; inset: 0; background-color: transparent; }
.clip-bg-image { position: absolute; inset: 0; transform: scale(1.3); transform-origin: center center; }
.clip-bg-image img {
  /* Lighten blend: image's pure-black areas drop out, revealing body gradient.
     Website thumbnails (lighter) stay visible. */
  mix-blend-mode: lighten;
}
.clip-overlay { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.25); }
.clip-gradient-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(0deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0) 100%); pointer-events: none; }

/* ============================================================
   S03: HERO TEXT
   ============================================================ */
.hero-text-section {
  background: #0A0A0A; position: relative;
  overflow: hidden; z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* S3 two-column grid */
.s3-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 80px;
  align-items: center;
  width: 100%;
  padding: 64px 80px 80px 80px;
}
@media (max-width: 999px) {
  .s3-grid { grid-template-columns: 1fr; gap: 48px; padding: 60px 40px; }
}
@media (max-width: 690px) {
  .s3-grid { padding: 48px 24px; gap: 36px; }
}

/* S3 headline */
.s3-headline h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 52px; line-height: 1.15;
  letter-spacing: -0.04em; max-width: 720px;
  color: rgba(230, 232, 240, 0.88);
}
@media (max-width: 690px) { .s3-headline h2 { font-size: 36px; } }

/* S3 body */
.s3-body {
  margin-top: 24px; max-width: 480px;
  margin-bottom: 0;
}
.s3-body p {
  font-family: var(--font-primary); font-size: 17px;
  font-weight: 400; line-height: 1.9;
  color: rgba(230, 232, 240, 0.45);
  margin-bottom: 0;
}
@media (max-width: 690px) { .s3-body p { font-size: 15px; } }

/* S3 scroll reveal */
.s3-reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.s3-reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   TERMINAL DEMO
   ============================================================ */
.s3-right { max-width: 520px; width: 100%; }
@media (max-width: 999px) { .s3-right { max-width: 100%; } }

.terminal {
  background: #0D0D0D;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.terminal-bar {
  background: #111111;
  padding: 13px 18px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.terminal-bar-left { display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #3D1F1F; }
.dot-yellow { background: #3D3219; }
.dot-green { background: #2A2520; }
.terminal-label {
  font-size: 11px; color: #4A4540;
  margin-left: 6px; letter-spacing: 0.3px;
}
.terminal-badge {
  font-size: 9px; color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px; text-transform: uppercase;
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  padding: 3px 8px; border-radius: 3px;
}

.terminal-body { padding: 22px 22px 26px; }

.terminal-search {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 18px;
  border-bottom: 0.5px solid #1E1B18;
  margin-bottom: 18px;
}
.terminal-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.terminal-icon-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.terminal-query {
  font-size: 13px; color: rgba(230,232,240,0.5);
  flex: 1; min-height: 18px;
}
.terminal-query .typed {
  color: rgba(230,232,240,0.85); font-weight: 500;
  font-style: normal;
}
.terminal-query .cursor {
  display: inline-block; width: 7px; height: 13px;
  background: rgba(230,232,240,0.4);
  margin-left: 1px; vertical-align: middle;
  animation: blink 0.85s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.terminal-section-label {
  font-size: 9px; color: #4A4540;
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 12px; opacity: 0;
  transition: opacity 400ms var(--ease);
}
.terminal-section-label.show { opacity: 1; }

.terminal-result {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 0;
  border-bottom: 0.5px solid #191614;
  opacity: 0; transform: translateY(6px);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}
.terminal-result.show { opacity: 1; transform: translateY(0); }

.result-num {
  font-size: 11px; color: #3A3530;
  font-weight: 600; min-width: 14px;
  padding-top: 2px;
}
.result-name {
  font-size: 13px; color: rgba(230,232,240,0.85);
  font-weight: 500; margin-bottom: 3px;
}
.result-desc {
  font-size: 11px; color: #4A4540; line-height: 1.5;
}
.result-status {
  display: flex; align-items: center; gap: 4px;
  margin-top: 5px;
  font-size: 10px; color: rgba(255, 255, 255, 0.4);
}
.status-check {
  font-size: 10px; color: rgba(255, 255, 255, 0.4);
}

.terminal-missing {
  position: relative;
  margin-top: 16px;
  padding: 20px;
  background: #ffffff;
  border: none;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.terminal-missing.show { opacity: 1; }

.missing-pulse {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #155E75;
  animation: missingPulse 2s ease-in-out infinite;
}
@keyframes missingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

.missing-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  color: #155E75;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 10px;
}
.missing-not-rec {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.missing-body {
  font-family: var(--font-primary);
  font-size: 11px;
  color: #888888;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* 6. Section reveals */
[data-animation="fade-in-from-bottom"] {
  opacity: 0; transform: translateY(40px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
[data-animation="fade-in-from-bottom"].in-view { opacity: 1; transform: translateY(0); }

/* Section reveal wrapper */
.section-reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.section-reveal.visible { opacity: 1; transform: translateY(0); }
/* Stagger children */
.section-reveal .stagger-1 { transition-delay: 0ms; }
.section-reveal .stagger-2 { transition-delay: 150ms; }
.section-reveal .stagger-3 { transition-delay: 300ms; }
.section-reveal .stagger-4 { transition-delay: 500ms; }

/* ============================================================
   S04: INDUSTRY CARDS — full-bleed simple cards
   ============================================================ */
.industry-cards {
  background: #0A0A0A;
  padding: 0;
  position: relative;
  z-index: 10;
}

.industry-card {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0A0A0A;
}

.industry-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.industry-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.industry-card__content {
  position: absolute;
  inset: 0;
  padding: 52px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}

.industry-tag {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #155E75;
  padding-left: 32px;
  display: inline-block;
  align-self: flex-start;
}
.industry-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: #155E75;
}

.industry-body {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  max-width: 420px;
  margin: 0;
  margin-bottom: 80px;
}

.marquee-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 18s linear infinite;
}

.marquee-text {
  font-family: 'Sohne', -apple-system, 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .industry-card__content {
    padding: 52px 24px;
  }
  .industry-body {
    font-size: 14px;
    max-width: 100%;
    margin-bottom: 60px;
  }
  .marquee-text {
    font-size: 48px;
  }
  .marquee-track {
    animation-duration: 14s;
  }
}

/* ============================================================
   S05: TRUSTED BY
   ============================================================ */
.trusted-section {
  position: relative; padding: 120px 0;
  background: #0A0A0A; overflow: hidden; z-index: 3;
  min-height: 50vh; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-light);
}
.trusted-content { position: relative; z-index: 2; text-align: center; padding: 0 5%; }
.nectar-rotating-words-title h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 64px; line-height: 1.2; letter-spacing: -0.04em; color: rgba(230,232,240,0.88); display: block;
}
@media (max-width: 768px) { .nectar-rotating-words-title h3 { font-size: 36px; } }
/* Accent line (line 5: "Not anymore.") */
.text-wrap--accent span { color: #155E75; }
.dynamic-words { display: inline-block; position: relative; vertical-align: bottom; }
.text-wrap {
  display: inline-block; position: absolute; left: 0;
  opacity: 0; transform: translateY(100%);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  white-space: nowrap;
}
.text-wrap.active { position: relative; opacity: 1; transform: translateY(0); }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section {
  background: #FAFAFA;
  position: relative;
  z-index: 100;
}

.pricing-intro {
  padding: 120px 80px 80px;
}

.pricing-mono-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.pricing-mono-tag__line {
  display: block;
  width: 20px;
  height: 1px;
  background: #155E75;
}
.pricing-mono-tag__text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #155E75;
}

.pricing-headline {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: #0A0A0A;
  margin: 0 0 24px;
}

.pricing-subhead {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  color: #888;
  line-height: 1.65;
  letter-spacing: -0.01em;
  max-width: 560px;
  margin: 0;
}

/* Cards grid */
.pricing-grid {
  margin: 0 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  overflow: hidden;
}

.pricing-card {
  background: #FAFAFA;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
}

.pricing-card--featured {
  background: #0A0A0A;
}

/* Popular indicator */
.pricing-popular {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: #155E75;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.pricing-popular-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #155E75;
}

/* Plan label */
.pricing-plan-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #aaa;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 32px;
  display: block;
}
.pricing-card--featured .pricing-plan-label {
  color: rgba(255, 255, 255, 0.3);
}

/* Price */
.pricing-price {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #0A0A0A;
  line-height: 1;
}
.pricing-card--featured .pricing-price {
  color: #ffffff;
}

/* Setup + monthly */
.pricing-setup {
  font-family: var(--font-primary);
  font-size: 12px;
  color: #aaa;
  margin-bottom: 6px;
  display: block;
}
.pricing-card--featured .pricing-setup {
  color: rgba(255, 255, 255, 0.3);
}

.pricing-monthly {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #155E75;
  margin-bottom: 40px;
  display: block;
}
.pricing-card--featured .pricing-monthly {
  color: #4BADC5;
}

/* Divider */
.pricing-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.07);
  margin-bottom: 32px;
}
.pricing-card--featured .pricing-divider {
  background: rgba(255, 255, 255, 0.08);
}

/* Features */
.pricing-features {
  flex: 1;
  margin-bottom: 24px;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-primary);
  font-size: 13px;
  color: #555;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.pricing-card--featured .pricing-feature {
  color: rgba(255, 255, 255, 0.6);
}

.pricing-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(21, 94, 117, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pricing-card--featured .pricing-check {
  background: rgba(255, 255, 255, 0.08);
}

/* AI feature box */
.pricing-ai-box {
  padding: 14px 16px;
  background: rgba(21, 94, 117, 0.06);
  border: 1px solid rgba(21, 94, 117, 0.12);
  border-radius: 8px;
  margin-bottom: 32px;
}
.pricing-ai-box--dark {
  background: rgba(21, 94, 117, 0.2);
  border-color: rgba(21, 94, 117, 0.4);
}

.pricing-ai-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  color: #155E75;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pricing-ai-text {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px;
  color: #444;
  line-height: 1.5;
}
.pricing-card--featured .pricing-ai-text {
  color: rgba(255, 255, 255, 0.7);
}

/* CTA */
.pricing-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #0A0A0A;
  transition: background 150ms ease, border-color 150ms ease;
}
.pricing-cta:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.2);
}
.pricing-cta--featured {
  background: #155E75;
  border: none;
  color: #ffffff;
}
.pricing-cta--featured:hover {
  background: #0E4352;
}

/* Mini FAQ */
.pricing-mini-faq {
  padding: 80px 80px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 80px 80px 0;
}
.pricing-mini-faq__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #0A0A0A;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.pricing-mini-faq__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 13px;
  color: #555;
  letter-spacing: -0.01em;
  transition: color 150ms ease;
}
.pricing-mini-faq__row:hover {
  color: #0A0A0A;
}
.pricing-mini-faq__arrow {
  color: #ccc;
  font-size: 11px;
}

/* Scroll reveal */
.pricing-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.pricing-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
  .pricing-intro {
    padding: 80px 24px 48px;
  }
  .pricing-headline {
    font-size: 44px;
  }
  .pricing-subhead {
    font-size: 14px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    margin: 0 24px;
  }
  .pricing-card {
    padding: 40px 24px;
  }
  .pricing-mini-faq {
    padding: 48px 24px;
    margin: 48px 24px 0;
  }
}

/* ============================================================
   S06: FAQ
   ============================================================ */
.faq-section {
  background: #FAFAFA; position: relative; z-index: 100;
}
.faq-container {
  max-width: 100%; margin: 0; padding: 120px 80px;
}
@media (max-width: 690px) { .faq-container { padding: 60px 24px; } }

.faq-title {
  font-family: var(--font-display); font-size: 48px; font-weight: 600;
  color: #0A0A0A; letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: 40px; text-align: left; padding-left: 0;
}
@media (max-width: 690px) { .faq-title { font-size: 28px; margin-bottom: 40px; } }

/* Level 1 — Category */
.faq-category { border-bottom: 0.5px solid rgba(0, 0, 0, 0.08); }
.faq-category.open { border-bottom-color: #155E75; }
.cat-header {
  padding: 24px 0; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer;
  font-family: var(--font-display); font-size: 14px;
  font-weight: 600; color: #0A0A0A; letter-spacing: -0.02em;
  transition: color 300ms ease, background 200ms ease;
  border: none; background: none; width: 100%; text-align: left;
}
.cat-header:hover { background: rgba(21, 94, 117, 0.03); }
.faq-category.open .cat-header { color: #155E75; }

.cat-icon {
  font-size: 18px; color: #999; flex-shrink: 0;
  transition: color 300ms ease;
}
.cat-icon::after { content: '+'; }
.faq-category.open .cat-icon { color: #155E75; }
.faq-category.open .cat-icon::after { content: '−'; }

.cat-body {
  max-height: 0; overflow: hidden;
  transition: max-height 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-category.open .cat-body { max-height: 4000px; }

/* Level 2 — Subcategory (hidden — two-level structure) */
.faq-sub { border-bottom: none; }
.sub-header { display: none; }
.sub-body { max-height: none; overflow: visible; }
.faq-sub.open .sub-body { max-height: none; }

/* Questions — directly under category */
.faq-question { border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); }
.q-header {
  padding: 16px 0 16px 24px; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer;
  font-family: var(--font-primary); font-size: 15px;
  font-weight: 400; color: #0A0A0A; letter-spacing: -0.01em;
  transition: color 300ms ease, background 200ms ease;
  border: none; background: none; width: 100%; text-align: left;
}
.q-header:hover, .faq-question.open .q-header { color: #0A0A0A; background: rgba(21, 94, 117, 0.03); }
.q-chevron {
  font-size: 12px; color: #ccc; transition: transform 300ms ease, color 300ms ease; flex-shrink: 0;
}
.faq-question.open .q-chevron { transform: rotate(90deg); color: #155E75; }

/* Answer */
.q-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-question.open .q-answer { max-height: 2000px; }
.q-answer-inner {
  padding: 20px 0 24px 24px;
  font-family: var(--font-primary); font-size: 15px;
  font-weight: 400; color: #666666; line-height: 1.7;
  letter-spacing: -0.01em;
  max-width: 100%;
  width: 100%;
  background: transparent;
  border-left: 2px solid #155E75;
  margin-left: 24px; margin-bottom: 4px;
  border-radius: 0;
}
@media (max-width: 690px) {
  .q-header { padding-left: 16px; }
  .q-answer-inner { padding: 16px 16px 20px 16px; margin-left: 16px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0A0A0A; color: var(--color-text-light);
  position: relative; z-index: 200;
}

.footer-inner-v2 { padding: 80px 48px 0; max-width: 1200px; margin: 0 auto; }
@media (max-width: 690px) { .footer-inner-v2 { padding: 60px 24px 0; } }

.footer-grid-v2 {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 768px) { .footer-grid-v2 { grid-template-columns: 1fr 1fr; } .ft-col-newsletter { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid-v2 { grid-template-columns: 1fr; } }

.ft-heading {
  font-family: var(--font-mono); font-size: 9px; font-weight: 400;
  letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.3); text-transform: uppercase;
  margin-bottom: 16px;
}
.ft-col ul { margin-bottom: 0; }
.ft-col li { margin-bottom: 8px; }
.ft-col a {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: #9B9189; text-decoration: none;
  transition: color 300ms ease;
}
.ft-col a:hover { color: #F4F1EC; }
.ft-legal-links { margin-top: 20px; }

/* Newsletter */
.ft-newsletter-sub {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: #6B6560; line-height: 1.7; margin-bottom: 20px;
}
.ft-input-wrap {
  display: flex; border-radius: 3px; overflow: hidden;
}
.ft-input-wrap input {
  flex: 1; height: 48px; padding: 0 16px;
  background: #1E1B18; border: 0.5px solid #2A2520;
  border-right: none; border-radius: 3px 0 0 3px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: #9B9189; outline: none;
  transition: border-color 300ms ease;
}
.ft-input-wrap input::placeholder { color: #4A4540; }
.ft-input-wrap input:focus { border-color: #155E75; }
.ft-submit {
  width: 48px; height: 48px;
  background: #155E75; color: #ffffff;
  border: none; border-radius: 0 3px 3px 0;
  font-size: 16px; cursor: pointer;
  transition: background 300ms ease;
  display: flex; align-items: center; justify-content: center;
}
.ft-submit:hover { background: #0E4352; }

/* Bottom bar */
.ft-bottom-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0; margin-top: 48px;
  border-top: 0.5px solid #2A2520;
}
.ft-copyright, .ft-entity {
  font-family: 'Inter', sans-serif; font-size: 11px; color: #4A4540;
}
@media (max-width: 690px) {
  .ft-bottom-bar { flex-direction: column; gap: 8px; text-align: center; }
}

/* Watermark */
.ft-watermark {
  text-align: center; padding: 40px 0 20px; overflow: hidden;
}
.ft-watermark .logo-up,
.ft-watermark .logo-serv {
  font-family: 'Sohne', -apple-system, 'Helvetica Neue', sans-serif; font-weight: 900;
  font-size: clamp(4rem, 12vw, 10rem); letter-spacing: -0.03em;
  user-select: none; line-height: 1;
  color: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   GLOBAL UTILITIES
   ============================================================ */
.fade-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }

/* ============================================================
   LENIS
   ============================================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ============================================================
   MOBILE — 768px and under
   ============================================================ */
@media (max-width: 768px) {
  /* General overflow prevention */
  html, body { overflow-x: clip; max-width: 100vw; }
  /* Prevent horizontal scroll using clip (preserves sticky) */
  .landing-section, .hero-text-section,
  .trusted-section, .faq-section, .site-footer {
    max-width: 100vw; overflow-x: clip;
  }
  /* Hero mobile — handled in 690px breakpoint above */
  .header-container { padding: 0 24px; height: 56px; }

  /* FAQ — lighter weights on mobile */
  .faq-title { font-weight: 600 !important; font-size: 28px !important; }

  /* Rotating text — prevent overflow */
  .nectar-rotating-words-title h3 { font-size: 36px !important; }
  .text-wrap { white-space: normal !important; }
  .trusted-content { padding: 0 24px; width: 100%; overflow: hidden; text-align: center; }
  .trusted-section { overflow: hidden; }
}