/* ============================================================
   NuvaMed — Animated Landing v3
   Ocean teal + mint. Calm, premium, clinical.
   ============================================================ */

:root {
  /* Brand — extended ramps from MediFlow */
  --primary-900: #052d3f;
  --primary-800: #073d54;
  --primary-700: #0a4e6b;
  --primary-600: #095d7e;
  --primary-500: #0b7ea5;
  --primary-400: #2e9abf;
  --primary-300: #5ab5d4;
  --primary-200: #9dd2e6;
  --primary-100: #c8e6f2;
  --primary-50:  #e3f3fa;

  --secondary-900: #0a5c4d;
  --secondary-800: #0d6b5a;
  --secondary-700: #107a67;
  --secondary-600: #14967f;
  --secondary-500: #17b89b;
  --secondary-400: #3dc9a8;
  --secondary-300: #7ddbc4;
  --secondary-200: #c3f0e2;
  --secondary-100: #d8f5e9;
  --secondary-50:  #e2fcd6;

  --neutral-900: #0F1724;
  --neutral-800: #1C2A3D;
  --neutral-700: #2D3E52;
  --neutral-600: #4A5C6F;
  --neutral-500: #6B7D8E;
  --neutral-400: #8E9DAB;
  --neutral-300: #B4C0CB;
  --neutral-200: #D4DCE3;
  --neutral-100: #EAF0F4;
  --neutral-50:  #F5F8FA;

  --success: #10B981; --success-bg: #ECFDF5;
  --warning: #F59E0B; --warning-bg: #FFFBEB;
  --error:   #EF4444; --error-bg:   #FEF2F2;
  --info:    #095d7e; --info-bg:    #e8f6f7;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;
  --space-11:80px; --space-12:96px; --space-13:128px; --space-14:160px;

  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:20px; --radius-3xl:32px; --radius-full:9999px;

  --shadow-xs: 0 1px 2px rgba(9,93,126,0.04);
  --shadow-sm: 0 1px 3px rgba(9,93,126,0.06), 0 1px 2px rgba(9,93,126,0.04);
  --shadow-md: 0 4px 6px -1px rgba(9,93,126,0.06), 0 2px 4px -2px rgba(9,93,126,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(9,93,126,0.06), 0 4px 6px -4px rgba(9,93,126,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(9,93,126,0.08), 0 8px 10px -6px rgba(9,93,126,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(9,93,126,0.16);
  --shadow-glow: 0 0 60px rgba(20,150,127,0.18);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 160ms;
  --duration-normal: 280ms;
  --duration-slow: 480ms;
  --duration-slower: 800ms;

  --page-max: 1240px;
  --page-gutter: clamp(20px, 5vw, 72px);

  /* Animation intensity — set by Tweaks (0..1) */
  --motion: 1;
}

* , *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:16px }
body {
  font-family: var(--font-body);
  color: var(--neutral-900);
  background:
    radial-gradient(ellipse 100% 50% at 50% 0%, rgba(20,150,127,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 100% 30%, rgba(9,93,126,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 70%, rgba(61,201,168,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #FAFCFD 0%, #F4F8FA 100%);
  background-attachment: fixed;
  line-height: 1.6;
  overflow-x: hidden;
  font-feature-settings: "cv02","cv03","cv04","cv11","ss01";
  letter-spacing: -0.011em;
}
img, video { max-width:100%; display:block }
a { color:inherit; text-decoration:none }

.page { max-width: var(--page-max); margin:0 auto; padding: 0 var(--page-gutter); position:relative }
.mono { font-family: var(--font-mono) }

/* ====== BUTTONS ====== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-size:14px; font-weight:500;
  padding: 10px 20px; border-radius: var(--radius-md); border:none; cursor:pointer;
  transition: transform var(--duration-normal) var(--ease-out-quart),
              background var(--duration-normal) var(--ease-out-quart),
              box-shadow var(--duration-normal) var(--ease-out-quart),
              color var(--duration-normal) var(--ease-out-quart);
  text-decoration:none; line-height:1.4; position:relative; overflow:hidden;
}
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--radius-lg) }
.btn-primary {
  background: var(--primary-600); color:#fff;
  box-shadow: 0 1px 2px rgba(9,93,126,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-primary:hover { background: var(--primary-500); transform: translateY(calc(-1px * var(--motion))); box-shadow: 0 8px 24px rgba(9,93,126,0.25), inset 0 1px 0 rgba(255,255,255,0.08) }
.btn-primary:active { transform: scale(0.97) }
.btn-outline { background:transparent; color: var(--primary-600); box-shadow: inset 0 0 0 1.5px var(--neutral-200) }
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--primary-600); transform: translateY(calc(-1px * var(--motion))) }
.btn-on-dark { background:#fff; color: var(--primary-700); box-shadow: 0 1px 2px rgba(0,0,0,.15) }
.btn-on-dark:hover { background: var(--neutral-50); transform: translateY(calc(-1px * var(--motion))); box-shadow: 0 8px 24px rgba(0,0,0,.25) }
.btn-outline-dark { background:transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3) }
.btn-outline-dark:hover { box-shadow: inset 0 0 0 1.5px var(--secondary-400); color: var(--secondary-300); transform: translateY(calc(-1px * var(--motion))) }
.btn:focus-visible { outline: 3px solid rgba(20,150,127,.4); outline-offset:2px }

/* Magnetic shine sweep */
.btn::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease-out-quart);
  pointer-events:none;
}
.btn-primary:hover::after, .btn-on-dark:hover::after { transform: translateX(100%) }

/* ====== BADGES ====== */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius: var(--radius-full); font-size:12px; font-weight:500 }
.badge-primary { background: var(--primary-50); color: var(--primary-700) }
.badge-secondary { background: var(--secondary-50); color: var(--secondary-800) }
.badge-success { background: var(--success-bg); color:#065F46 }
.badge-warning { background: var(--warning-bg); color:#92400E }
.badge-neutral { background: var(--neutral-100); color: var(--neutral-600) }

/* ====== CARD ====== */
.card {
  background:#fff; border:1px solid var(--neutral-100); border-radius: var(--radius-xl);
  padding: var(--space-7);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              border-color var(--duration-slow) var(--ease-out-expo),
              box-shadow var(--duration-slow) var(--ease-out-expo);
  position:relative; overflow:hidden;
}
.card:hover {
  border-color: var(--primary-100);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(20,150,127,0.08);
  transform: translateY(calc(-3px * var(--motion)));
}
/* Subtle hover-only glow for cards */
.card.glow { transition: transform var(--duration-slow) var(--ease-out-expo), border-color var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo) }
.card.glow:hover { box-shadow: var(--shadow-xl), 0 0 60px rgba(20,150,127,0.10); border-color: var(--secondary-300) }

/* ====== SECTIONS ====== */
.section { padding: var(--space-13) 0; border-bottom: 1px solid var(--neutral-100); position:relative; background: transparent }
.section-gradient {
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.7;
  background: radial-gradient(ellipse 60% 40% at 80% 50%, rgba(20,150,127,0.04) 0%, transparent 70%);
}
.section-label {
  font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--secondary-700); margin-bottom: var(--space-4); display:inline-flex; align-items:center; gap:10px;
}
.section-label::before {
  content:''; width:24px; height:1px; background: var(--secondary-600); border-radius:2px;
}
.section-title {
  font-family: var(--font-body); font-size: clamp(34px, 5.2vw, 60px); font-weight:600;
  line-height:1.05; letter-spacing:-0.04em; color: var(--neutral-900);
  margin-bottom: var(--space-5); text-wrap: balance;
}
.section-title em {
  font-style:normal;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.section-desc { font-size:18px; line-height:1.65; color: var(--neutral-600); max-width: 640px; margin-bottom: var(--space-9); text-wrap:pretty; font-weight: 400 }
.sec-head { max-width: 720px; margin-bottom: var(--space-10) }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) }
.grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5) }

/* ====== NAV ====== */
.ds-nav {
  position: sticky; top:0; z-index:100;
  background: rgba(250,251,252,0.72);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid transparent;
  padding: 0 var(--page-gutter);
  transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.ds-nav.scrolled {
  background: rgba(250,251,252,0.92);
  border-bottom-color: var(--neutral-100);
  box-shadow: var(--shadow-sm);
}
.ds-nav-inner { max-width: var(--page-max); margin:0 auto; display:flex; align-items:center; height:64px; gap: var(--space-7) }
.nav-logo { font-size:16px; font-weight:700; color: var(--primary-600); display:flex; align-items:center; gap:9px; margin-right:auto }
.nav-logo svg { transition: transform var(--duration-slow) var(--ease-spring) }
.nav-logo:hover svg { transform: rotate(-8deg) scale(1.05) }
.nav-links { display:flex; align-items:center; gap: var(--space-7) }
.nav-links a { font-size:13px; font-weight:500; color: var(--neutral-500); white-space:nowrap; padding: var(--space-2) 0; position:relative; transition: color var(--duration-normal) ease }
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1.5px;
  background: var(--primary-600); transform: scaleX(0); transform-origin: center;
  transition: transform var(--duration-normal) var(--ease-out-quart);
}
.nav-links a:hover { color: var(--neutral-900) }
.nav-links a:hover::after { transform: scaleX(1) }
.nav-tail { display:flex; align-items:center; gap: var(--space-5) }
.nav-tail .portal { font-size:13px; font-weight:500; color: var(--neutral-500); transition: color var(--duration-normal) ease }
.nav-tail .portal:hover { color: var(--neutral-900) }
.menu-btn { display:none; background:none; border:0; color: var(--neutral-700); cursor:pointer; padding:8px }

/* ====== TIME SHOWCASE (Pillar 01) ====== */
.time-showcase {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--space-9);
  align-items: center;
  max-width: 1120px;
  margin: var(--space-10) auto 0;
}
.time-showcase .browser-frame {
  box-shadow:
    0 50px 100px -30px rgba(9,93,126,0.25),
    0 30px 60px -40px rgba(9,93,126,0.15),
    0 0 0 1px rgba(9,93,126,0.06),
    0 0 80px rgba(20,150,127,0.08);
}
.time-showcase .browser-stage { aspect-ratio: 16/9 }
.time-caption .mono {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--secondary-700);
  padding: 6px 12px;
  background: var(--secondary-50);
  border: 1px solid rgba(20,150,127,0.18);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.time-caption .mono::before {
  content:''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--secondary-500);
  box-shadow: 0 0 0 4px rgba(23,184,155,0.18);
}
.time-caption h4 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600; line-height: 1.2;
  letter-spacing: -.025em; color: var(--neutral-900);
  margin-bottom: var(--space-4); text-wrap: balance;
}
.time-caption h4 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.time-caption p {
  font-size: 16px; line-height: 1.6; color: var(--neutral-600);
  max-width: 32ch; text-wrap: pretty;
}
@media (max-width: 1000px) {
  .time-showcase { grid-template-columns: 1fr; gap: var(--space-7) }
  .time-caption p { max-width: none }
}
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, #0a4e6b 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 80% 30%, #0d6b5a 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 100%, #073d54 0%, transparent 70%),
    linear-gradient(180deg, #052d3f 0%, #073d54 50%, #052d3f 100%);
  padding: var(--space-13) 0 var(--space-12);
  isolation: isolate;
}
.hero-mesh {
  position:absolute; inset:0; z-index:-1; opacity: calc(0.85 * var(--motion) + 0.15);
  background:
    radial-gradient(ellipse 80% 60% at 70% 10%, rgba(61,201,168,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 20% 50%, rgba(20,150,127,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 90% 50% at 50% 110%, rgba(9,93,126,0.5) 0%, transparent 60%);
}
.hero-grid-overlay {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 0%, transparent 85%);
}
.hero-orbs { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.hero-orb {
  position:absolute; border-radius:50%;
  filter: blur(110px);
  opacity: calc(0.45 * var(--motion));
  will-change: transform;
}
.hero-orb.a { width:520px; height:520px; top:-12%; left:-8%; background: var(--secondary-600); animation: floatA 22s ease-in-out infinite }
.hero-orb.b { width:420px; height:420px; top:30%; right:-12%; background: var(--primary-400); animation: floatB 26s ease-in-out infinite }
.hero-orb.c { width:340px; height:340px; bottom:-18%; left:40%; background: var(--secondary-400); animation: floatC 30s ease-in-out infinite }
@keyframes floatA {
  0%, 100% { transform: translate(0,0) scale(1) }
  50% { transform: translate(80px, 50px) scale(1.08) }
}
@keyframes floatB {
  0%, 100% { transform: translate(0,0) scale(1) }
  50% { transform: translate(-60px, 40px) scale(0.96) }
}
@keyframes floatC {
  0%, 100% { transform: translate(0,0) scale(1) }
  50% { transform: translate(50px, -60px) scale(1.04) }
}

.hero-content { position:relative; z-index:1 }
.hero-intro {
  max-width: 880px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:10px; padding: 6px 16px 6px 12px;
  background: rgba(20,150,127,0.08); border: 1px solid rgba(20,150,127,0.22);
  border-radius: var(--radius-full); font-size:13px; font-weight:500;
  color: var(--secondary-300); margin-bottom: var(--space-7);
  backdrop-filter: blur(10px);
}
.hero-badge .dot {
  width:7px; height:7px; background: var(--secondary-400); border-radius:50%;
  box-shadow: 0 0 0 4px rgba(61,201,168,0.18);
}

.hero h1 {
  font-size: clamp(44px, 7vw, 92px); font-weight:600; line-height:1.0;
  letter-spacing:-0.045em; color:#fff; margin-bottom: var(--space-6);
  text-wrap:balance; max-width: 14ch;
}
.hero h1 em {
  font-style:normal; font-weight: 500;
  background: linear-gradient(135deg, #7ddbc4 0%, #5ab5d4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Re-apply gradient to child word spans created by word-reveal animation
   (background-clip:text does not propagate to nested elements) */
.hero h1 em .w {
  background: linear-gradient(135deg, #7ddbc4 0%, #5ab5d4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .lead {
  font-size: clamp(18px, 1.5vw, 22px); font-weight:400; color: var(--neutral-300);
  max-width: 56ch; line-height:1.55; margin-bottom: var(--space-8);
  text-wrap: pretty;
}
.hero-cta { display:flex; gap: var(--space-4); flex-wrap:wrap; justify-content: center; margin-bottom: var(--space-8) }
.trust { display:flex; flex-wrap:wrap; justify-content:center; gap: 10px 28px; font-family: var(--font-mono); font-size:12px; color: var(--neutral-400); letter-spacing:.04em }
.trust span { display:inline-flex; align-items:center; gap:8px }
.trust span::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--secondary-400) }

/* Hero word-by-word reveal */
.word-reveal .w { display:inline-block; opacity:0; transform: translateY(0.35em); animation: wordIn 0.9s var(--ease-out-expo) forwards }
@keyframes wordIn { to { opacity:1; transform: translateY(0) } }

/* ====== HERO CINEMATIC VIDEO ====== */
.hero-showcase {
  position: relative;
  max-width: 1120px;
  margin: var(--space-10) auto 0;
  padding: 0 var(--space-4);
}
.browser-frame {
  background: #fff; border-radius: var(--radius-2xl);
  box-shadow:
    0 80px 160px -40px rgba(0,0,0,.6),
    0 50px 100px -50px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 120px rgba(20,150,127,0.18);
  overflow:hidden;
  transform: translateY(0);
  transition: transform 1200ms var(--ease-out-expo);
}
.hero-showcase:hover .browser-frame { transform: translateY(-4px) }

.browser-chrome {
  height: 44px; background: linear-gradient(180deg, #f7f8fa, #ecf0f4);
  display:flex; align-items:center; padding: 0 16px; gap:10px;
  border-bottom: 1px solid var(--neutral-100);
}
.browser-dots { display:flex; gap:7px }
.browser-dots span { width:12px; height:12px; border-radius:50%; background:#ddd }
.browser-dots span:nth-child(1) { background: #ff5f57 }
.browser-dots span:nth-child(2) { background: #febc2e }
.browser-dots span:nth-child(3) { background: #28c840 }
.browser-url {
  flex:1; max-width: 360px; margin: 0 auto; height: 26px;
  background: #fff; border:1px solid var(--neutral-100); border-radius: 6px;
  display:flex; align-items:center; justify-content:center; gap:6px; padding: 0 12px;
  font-family: var(--font-mono); font-size: 12px; color: var(--neutral-500);
}
.browser-url svg { color: var(--secondary-600); flex:none }
.browser-stage {
  position: relative; aspect-ratio: 16/9; background: var(--primary-900);
  overflow:hidden;
}
.browser-stage video {
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
  filter: contrast(1.08) brightness(1.05) saturate(1.06);
}
.browser-stage::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 60%, rgba(5,45,63,0.35) 100%);
  pointer-events:none;
}
/* Corner mask to hide watermark */
.browser-stage::before {
  content:''; position:absolute; bottom:0; right:0;
  width: 26%; height: 22%;
  background: radial-gradient(ellipse at bottom right, var(--primary-900) 25%, rgba(5,45,63,0.85) 55%, transparent 90%);
  pointer-events:none; z-index:1;
}

/* Floating mini-cards layered around the video */
.float-card {
  position:absolute; background:#fff; border-radius: var(--radius-lg);
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.06);
  padding: 14px 16px;
  display:flex; align-items:center; gap:12px;
  animation: bobble 8s ease-in-out infinite;
  z-index:2;
  min-width: 200px;
}
.float-card .ic {
  width: 36px; height:36px; border-radius: var(--radius-md);
  display:grid; place-items:center; flex:none;
}
.float-card b { font-size:13px; font-weight:600; color: var(--neutral-900); display:block; line-height:1.2 }
.float-card span { font-size:11px; color: var(--neutral-500); font-family: var(--font-mono) }

.float-a { top: -3%; left:-4%; animation-delay: 0s }
.float-b { bottom: -5%; right:-3%; animation-delay: 2s }

@keyframes bobble {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(calc(-12px * var(--motion))) }
}

/* ====== AUTHORITY BAND ====== */
.band { background: linear-gradient(135deg, rgba(216,245,233,0.7) 0%, rgba(195,240,226,0.5) 50%, rgba(227,243,250,0.7) 100%); border-bottom: 1px solid var(--neutral-100); position:relative; overflow:hidden }
.band::before {
  content:''; position:absolute; right:-5%; top:-30%; width: 420px; height:420px;
  background: radial-gradient(circle, rgba(20,150,127,0.14) 0%, transparent 70%);
  pointer-events:none;
}
.band::after {
  content:''; position:absolute; left:-10%; bottom:-40%; width: 380px; height:380px;
  background: radial-gradient(circle, rgba(9,93,126,0.10) 0%, transparent 70%);
  pointer-events:none;
}
.band .page { display:flex; align-items:center; gap: var(--space-8); flex-wrap:wrap; padding-top: var(--space-10); padding-bottom: var(--space-10) }
.band .b-txt { flex:1; min-width:300px }
.band h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight:700; letter-spacing:-.02em; color: var(--neutral-900); margin: var(--space-3) 0 var(--space-2); line-height:1.25; text-wrap:balance }
.band h3 em { font-style:normal; color: var(--primary-600) }
.band p { font-size:14.5px; color: var(--neutral-600); max-width: 60ch; text-wrap:pretty }
.band .b-tags { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start }

/* ====== STAT GRID ====== */
.stats { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5) }
.stat {
  background:#fff; border:1px solid var(--neutral-100); border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo), border-color var(--duration-slow) var(--ease-out-expo);
  position:relative; overflow:hidden;
}
.stat:hover { transform: translateY(calc(-3px * var(--motion))); box-shadow: var(--shadow-lg); border-color: var(--primary-100) }
.stat .ic-wrap {
  width:44px; height:44px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%);
  display:grid; place-items:center; color: var(--primary-600);
  margin-bottom: var(--space-4);
  box-shadow: inset 0 0 0 1px rgba(9,93,126,0.06);
  transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) ease;
}
.stat:hover .ic-wrap { transform: scale(1.08) rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(20,150,127,0.2), 0 8px 24px rgba(20,150,127,0.12) }
.stat .big {
  font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height:1;
  letter-spacing:-.03em;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.note { font-family: var(--font-mono); font-size: 11.5px; color: var(--neutral-400); margin-top: var(--space-6); line-height:1.5 }
.note a { color: var(--primary-600) }
.kicker { font-size: clamp(20px, 2.6vw, 28px); font-weight:600; letter-spacing:-.02em; color: var(--neutral-900); max-width: 30ch; margin-top: var(--space-8); line-height:1.3 }
.kicker em { font-style:normal; color: var(--primary-600) }

/* ====== SPLIT FEATURE ====== */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items:center }
.feat-list { display:flex; flex-direction:column; gap: var(--space-5); margin-top: var(--space-4) }
.feat { display:flex; gap: var(--space-4); align-items:flex-start; padding: var(--space-3); margin: calc(-1 * var(--space-3)); border-radius: var(--radius-lg); transition: background var(--duration-slow) var(--ease-out-expo) }
.feat:hover { background: var(--neutral-50) }
.feat .ic {
  flex:none; width:44px; height:44px; border-radius: var(--radius-lg);
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--primary-50), var(--secondary-50));
  color: var(--primary-600);
  transition: transform var(--duration-slow) var(--ease-spring);
}
.feat:hover .ic { transform: rotate(-6deg) scale(1.08) }
.feat h4 { font-size:17px; font-weight:600; color: var(--neutral-900); margin-bottom:4px }
.feat p { font-size:14.5px; color: var(--neutral-600); line-height:1.55; text-wrap:pretty }

/* ====== APP MOCK ====== */
.mock {
  background:#fff; border:1px solid var(--neutral-100); border-radius: var(--radius-2xl);
  padding: var(--space-6); box-shadow: var(--shadow-xl);
  position:relative;
}
.mock.tilt-r { transform: rotate(1.2deg) }
.mock.tilt-l { transform: rotate(-1.2deg) }

.mk-top { display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--neutral-100) }
.mk-top b { font-size:14px; color: var(--neutral-900); font-weight:600 }
.mk-top .badge { font-family: var(--font-mono); font-size:10px; letter-spacing:.08em }

/* Portal item streaming */
.pm-item {
  display:flex; align-items:center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--neutral-50);
  opacity:0; transform: translateX(-12px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}
.pm-item.in { opacity:1; transform: translateX(0) }
.pm-item:last-child { border:0 }
.pm-dot { width:9px; height:9px; border-radius:50%; flex:none; box-shadow: 0 0 0 3px rgba(255,255,255,1), 0 0 0 4px currentColor }
.pm-item b { font-size:13.5px; font-weight:600; color: var(--neutral-900); display:block }
.pm-item p { font-size:12px; color: var(--neutral-500) }
.pm-item .when { margin-left:auto; font-family: var(--font-mono); font-size:10.5px; color: var(--neutral-400) }

/* SOAP typing animation */
.soap-box {
  background: var(--neutral-50); border:1px solid var(--neutral-100); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  position:relative; overflow:hidden;
}
.soap-box h4 { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--neutral-500); margin-bottom: var(--space-2) }
.soap-box .typed { font-size:13px; color: var(--neutral-800); line-height:1.55; min-height:1.55em }
.soap-box .caret {
  display:inline-block; width:2px; height:1em; background: var(--primary-600);
  vertical-align: text-bottom; margin-left:1px; animation: blink 1s steps(2,end) infinite;
}
@keyframes blink { 50% { opacity:0 } }
.soap-box.done .caret { display:none }

.mk-foot { font-family: var(--font-mono); font-size:11px; color: var(--neutral-400); text-align:center; margin-top: var(--space-4); display:flex; align-items:center; justify-content:center; gap:8px }
.mk-foot .live-dot { width:6px; height:6px; border-radius:50%; background: var(--secondary-500); box-shadow: 0 0 0 4px rgba(23,184,155,0.18) }

/* ====== HERO MINI APP CARD (right-rail summary) ====== */
.app-card {
  background:#fff; border:1px solid var(--neutral-100); border-radius: var(--radius-2xl);
  padding: var(--space-5); box-shadow: var(--shadow-2xl);
}
.ac-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-4) }
.ac-time { font-family: var(--font-mono); font-size:11px; color: var(--neutral-400) }
.ac-patient { font-size:16px; font-weight:600; color: var(--neutral-900) }
.ac-rut { font-family: var(--font-mono); font-size:11px; color: var(--neutral-400); margin-bottom: var(--space-3) }
.ac-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom: var(--space-4) }
.ac-summary { font-size:13px; color: var(--neutral-700); line-height:1.55; background: var(--info-bg); border-left: 3px solid var(--primary-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4) }
.ac-row { display:flex; gap: var(--space-3) }
.ac-box { flex:1; background: var(--neutral-50); border:1px solid var(--neutral-100); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4) }
.ac-box h4 { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--neutral-500); margin-bottom: var(--space-2) }
.ac-med { display:flex; justify-content:space-between; font-size:12.5px; color: var(--neutral-800); margin-bottom:5px }
.ac-med span { font-family: var(--font-mono); font-size:10.5px; color: var(--neutral-400) }
.ac-warn { font-size:11px; color:#92400E; margin-top: var(--space-2); line-height:1.4 }
.ac-score { display:flex; align-items:baseline; gap:6px }
.ac-score b { font-size:28px; font-weight:700; color: var(--primary-600); line-height:1; font-variant-numeric: tabular-nums }
.ac-score small { font-size:11px; color: var(--neutral-500) }

/* ====== STEPS / HOW IT WORKS ====== */
.step { position:relative; overflow:hidden }
.step .sn {
  font-size: 72px; font-weight:700; line-height:.8;
  background: linear-gradient(135deg, var(--primary-100), var(--secondary-100));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position:absolute; top: var(--space-4); right: var(--space-5);
  font-variant-numeric: tabular-nums;
}
.step h4 { font-size:19px; font-weight:600; color: var(--neutral-900); margin: var(--space-4) 0 var(--space-2); position:relative }
.step p { font-size:14.5px; color: var(--neutral-600); position:relative; line-height:1.6; text-wrap:pretty }
.step .step-bar {
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background: linear-gradient(90deg, var(--primary-500), var(--secondary-500));
  transform: scaleX(0); transform-origin:left;
  transition: transform 700ms var(--ease-out-expo);
}
.step.in .step-bar { transform: scaleX(1) }

/* ====== LAWS ====== */
.law { position:relative }
.law h4 { font-size:17px; font-weight:600; color: var(--neutral-900); margin-bottom:2px }
.law .sub { font-family: var(--font-mono); font-size:11px; color: var(--neutral-400); margin-bottom: var(--space-3) }
.law p { font-size:13.5px; color: var(--neutral-600); line-height:1.55; text-wrap:pretty }
.law .badge { margin-bottom: var(--space-4) }

/* ====== ROI ====== */
.roi-item { border-top: 2px solid var(--primary-500); padding-top: var(--space-5); position:relative }
.roi-item::before {
  content:''; position:absolute; left:0; top:-2px; width:0; height:2px;
  background: var(--secondary-500);
  transition: width 900ms var(--ease-out-expo);
}
.roi-item.in::before { width: 60% }
.roi-item .big { font-size:42px; font-weight:700; color: var(--neutral-900); line-height:1; letter-spacing:-.03em }
.roi-item .small { font-family: var(--font-mono); font-size:11px; color: var(--neutral-400); letter-spacing:.05em; margin: var(--space-2) 0 var(--space-3); text-transform:uppercase }
.roi-item p { font-size:14px; color: var(--neutral-600); line-height:1.6; text-wrap:pretty }

/* ====== TESTIMONIAL VIDEO ====== */
/* ====== TESTIMONIAL VIDEO ====== */
.proof { display:flex; flex-direction:column; gap: var(--space-8); align-items:stretch; max-width:1120px; margin: 0 auto }
.video-card {
  position:relative; border-radius: var(--radius-2xl); overflow:hidden;
  background: var(--primary-900); aspect-ratio: 16/9;
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,.5),
    0 30px 60px -40px rgba(0,0,0,.4),
    0 0 0 1px rgba(9,93,126,0.08),
    0 0 100px rgba(20,150,127,0.12);
  cursor:pointer;
}
.video-card video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: contrast(1.08) brightness(1.05) saturate(1.06);
}
/* Corner mask to hide watermark */
.video-card::before {
  content:''; position:absolute; bottom:0; right:0;
  width: 22%; height: 18%;
  background: radial-gradient(ellipse at bottom right, var(--primary-900) 25%, rgba(5,45,63,0.85) 55%, transparent 90%);
  pointer-events:none; z-index:1;
}
.video-card .vc-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(5,45,63,0.55) 75%, rgba(5,45,63,0.95) 100%),
    linear-gradient(90deg, rgba(5,45,63,0.45) 0%, transparent 50%);
  display:flex; align-items:flex-end; padding: var(--space-9);
  z-index:2; transition: opacity var(--duration-slow) ease;
}
.video-card.playing .vc-overlay { opacity:0; pointer-events:none }
.video-card .vc-text { color:#fff }
.video-card .vc-text h4 { font-size: 28px; font-weight:500; margin-bottom:8px; letter-spacing:-.02em; text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3) }
.video-card .vc-text p { font-size: 14px; color: var(--neutral-200); letter-spacing:.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.5) }
.video-card .play-btn {
  position:absolute; top:50%; left:50%;
  width:108px; height:108px; border-radius:50%; background:#fff;
  display:grid; place-items:center;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  cursor:pointer; border:none;
  z-index:3;
  transition: transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) ease;
}
.video-card .play-btn::before {
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border: 1.5px solid rgba(255,255,255,0.22);
}
.video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 28px 80px rgba(0,0,0,.5) }
.video-card.playing .play-btn { opacity:0; pointer-events:none }

.quotes { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) }
.quote {
  padding: var(--space-7); background:#fff; border:1px solid var(--neutral-100);
  border-radius: var(--radius-xl); transition: all var(--duration-slow) var(--ease-out-expo);
}
.quote:hover { transform: translateY(calc(-3px * var(--motion))); box-shadow: var(--shadow-lg); border-color: var(--primary-100) }
.quote p { font-size:18px; font-weight:500; color: var(--neutral-900); line-height:1.5; margin-bottom: var(--space-5); letter-spacing:-.01em; text-wrap:pretty }
.quote .who { display:flex; align-items:center; gap:12px }
.quote .av { width:42px; height:42px; border-radius:50%; background: linear-gradient(135deg, var(--primary-600), var(--secondary-600)); flex:none; display:grid; place-items:center; color:#fff; font-weight:600; font-size:14px }
.quote .who b { font-size:13.5px; font-weight:600; color: var(--neutral-900); display:block }
.quote .who span { font-size:12px; color: var(--neutral-500) }

/* ====== INERTIA ====== */
.inertia { text-align:center;
  background:
    radial-gradient(ellipse 60% 60% at 20% 20%, rgba(20,150,127,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 80%, rgba(9,93,126,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #e3f3fa 0%, #d8f5e9 100%);
  border:1px solid var(--primary-100); border-radius: var(--radius-3xl); padding: var(--space-12) var(--space-7); position:relative; overflow:hidden }
.inertia::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(20,150,127,0.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(9,93,126,0.10), transparent 50%);
}
.inertia > * { position:relative }
.inertia h2 { font-size: clamp(28px, 4vw, 44px); font-weight:700; letter-spacing:-.03em; color: var(--neutral-900); margin-bottom: var(--space-4); text-wrap:balance }
.inertia h2 em { font-style:normal; color: var(--primary-600) }
.inertia p { font-size:18px; color: var(--neutral-700); max-width: 56ch; margin: 0 auto }
.inertia .small { font-family: var(--font-mono); font-size:13px; color: var(--secondary-700); letter-spacing:.03em; margin-top: var(--space-5) }

/* ====== PRICING ====== */
.price-intro { text-align:center; max-width: 60ch; margin: 0 auto var(--space-10) }
.price-intro .section-title { margin-left:auto; margin-right:auto }
.price-intro .section-desc { margin: 0 auto }
.price-intro .section-label { justify-content:center; display:inline-flex }
.plans { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items:start }
.plan { position:relative; display:flex; flex-direction:column; overflow: visible }
.plan.feature { border-color: var(--primary-200); box-shadow: var(--shadow-lg) }
.plan.feature::after {
  content:''; position:absolute; inset:0; border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1.5px var(--primary-300); pointer-events:none;
}
.plan.feature::before {
  content:''; position:absolute; inset:-1px; border-radius: var(--radius-xl); z-index:-1;
  background: linear-gradient(135deg, rgba(20,150,127,0.5), rgba(9,93,126,0.5));
  opacity:.4;
}
.plan .flag.plus { background: linear-gradient(135deg, var(--primary-700), var(--secondary-700)); }
.plan .flag {
  position:absolute; top: -12px; left: var(--space-6);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform: uppercase;
  background: var(--primary-600); color:#fff;
  padding: 5px 14px; border-radius: var(--radius-full);
  z-index:2; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(9,93,126,0.3);
}
.plan .flag.founder { background: var(--secondary-600) }
.plan h3 { font-size:22px; font-weight:700; color: var(--neutral-900); margin-bottom:5px }
.plan .desc { font-size:13.5px; color: var(--neutral-500); min-height: 38px; margin-bottom: var(--space-4) }
.plan .cupos { font-family: var(--font-mono); font-size:11px; color: var(--secondary-700); margin-bottom: var(--space-3) }
.plan .price { display:flex; align-items:baseline; gap:8px; margin-bottom:2px }
/* duplicated `.l` removed above — re-add */
.stat .l { font-size:13.5px; color: var(--neutral-600); margin-top: var(--space-3); line-height:1.5 }

.plan .price .uf {
  font-size:40px; font-weight:600; line-height:1; letter-spacing:-.03em;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feat .ic, .ac-summary {
  position: relative;
}
.plan .price .was { font-size:15px; color: var(--neutral-400); text-decoration:line-through }
.plan .per { font-family: var(--font-mono); font-size:11px; color: var(--neutral-400); margin-bottom: var(--space-4) }
.plan .recup { font-family: var(--font-mono); font-size:11.5px; color: var(--primary-600); margin-bottom: var(--space-5) }
.plan ul { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom: var(--space-6); flex:1 }
.plan li { font-size:13.5px; color: var(--neutral-700); display:flex; gap:9px; align-items:flex-start; line-height:1.45 }
.plan li svg { flex:none; width:16px; height:16px; margin-top:2px; color: var(--secondary-600) }
.plan .btn { width:100% }
.price-foot { text-align:center; font-family: var(--font-mono); font-size:11.5px; color: var(--neutral-400); margin-top: var(--space-8) }
.price-foot a { color: var(--primary-600) }

/* ====== FOUNDER SPOTLIGHT ====== */
.founder {
  position: relative; overflow: hidden;
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, #0a4e6b 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 100% 50%, #0d6b5a 0%, transparent 60%),
    linear-gradient(135deg, #052d3f 0%, #073d54 50%, #052d3f 100%);
  margin-bottom: var(--space-12);
  box-shadow:
    0 60px 120px -30px rgba(5,45,63,0.4),
    0 30px 60px -40px rgba(9,93,126,0.25),
    0 0 0 1px rgba(20,150,127,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  isolation: isolate;
}
.founder-mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 0%, transparent 80%);
}
.founder-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none }
.founder-orbs .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: calc(0.5 * var(--motion)) }
.founder-orbs .orb.a { width: 380px; height: 380px; top: -10%; right: -8%; background: var(--secondary-600); animation: floatA 26s ease-in-out infinite }
.founder-orbs .orb.b { width: 320px; height: 320px; bottom: -15%; left: -8%; background: var(--primary-500); animation: floatB 30s ease-in-out infinite }

.founder-inner {
  position: relative; z-index: 1;
  padding: clamp(40px, 5vw, 72px);
  max-width: 1080px;
  margin: 0 auto;
}
.founder-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 12px;
  background: rgba(20,150,127,0.12);
  border: 1px solid rgba(20,150,127,0.28);
  border-radius: var(--radius-full);
  font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--secondary-300);
  backdrop-filter: blur(10px);
  margin-bottom: var(--space-6);
}
.founder-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--secondary-400);
  box-shadow: 0 0 0 4px rgba(61,201,168,0.18), 0 0 16px rgba(61,201,168,0.5);
}
.founder-h {
  font-size: clamp(32px, 4.4vw, 52px); font-weight: 600;
  line-height: 1.05; letter-spacing: -.035em; color: #fff;
  margin-bottom: var(--space-5); text-wrap: balance;
  max-width: 22ch;
}
.founder-h em {
  font-style: normal; font-weight: 500;
  background: linear-gradient(135deg, #7ddbc4 0%, #5ab5d4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.founder-lead {
  font-size: 17px; line-height: 1.6; color: var(--neutral-300);
  max-width: 56ch; margin-bottom: var(--space-8); text-wrap: pretty;
}

/* Scarcity meter */
.founder-meter {
  background: rgba(5,45,63,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
  backdrop-filter: blur(10px);
  max-width: 640px;
}
.fm-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3) }
.fm-label {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--secondary-400);
}
.fm-count {
  font-family: var(--font-mono); font-size: 14px; color: var(--neutral-300);
}
.fm-count strong {
  font-size: 26px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #7ddbc4 0%, #5ab5d4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.fm-bar {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: var(--radius-full);
  overflow: hidden; position: relative;
}
.fm-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--secondary-400) 0%, var(--primary-400) 100%);
  border-radius: var(--radius-full);
  box-shadow: 0 0 16px rgba(61,201,168,0.4);
  position: relative;
  animation: fmShimmer 3s ease-in-out infinite;
}
.fm-fill::after {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: fmSweep 2.4s linear infinite;
}
@keyframes fmSweep { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
@keyframes fmShimmer { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.15) } }
.fm-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-3);
  font-size: 12px; color: var(--neutral-400);
}
.fm-foot .mono { font-family: var(--font-mono); letter-spacing: .04em }

/* Founder pricing tiers — three-card timeline */
.founder-pricing {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  background: rgba(5,45,63,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
}
.fp-item {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.fp-item.is-founder {
  background: linear-gradient(135deg, rgba(20,150,127,0.14) 0%, rgba(9,93,126,0.10) 100%);
  border-color: rgba(61,201,168,0.28);
}
.fp-item.is-founder.is-locked {
  background: linear-gradient(135deg, rgba(20,150,127,0.22) 0%, rgba(9,93,126,0.18) 100%);
  border-color: rgba(61,201,168,0.45);
  box-shadow: 0 0 0 1px rgba(61,201,168,0.2), 0 16px 32px -16px rgba(20,150,127,0.4);
}
.fp-item.is-standard { opacity: 0.6 }
.fp-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--secondary-400);
}
.fp-item.is-standard .fp-tag { color: var(--neutral-400) }
.fp-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: var(--space-1) 0;
}
.fp-price .uf {
  font-size: 44px; font-weight: 600; letter-spacing: -.035em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.fp-item.is-founder .fp-price .uf {
  background: linear-gradient(135deg, #7ddbc4 0%, #5ab5d4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fp-item.is-standard .fp-price .uf { color: var(--neutral-400); text-decoration: line-through; text-decoration-thickness: 1.5px }
.fp-price .uf-unit { font-size: 17px; font-weight: 500; color: var(--neutral-300); margin-left: 2px }
.fp-price .per { font-family: var(--font-mono); font-size: 11.5px; color: var(--neutral-400); margin-left: 2px }
.fp-vs { font-size: 12.5px; color: var(--neutral-300); line-height: 1.4 }
.fp-vs em { font-style: normal; color: var(--secondary-300); font-weight: 500 }
.fp-lock {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-2);
  padding: 6px 10px;
  background: rgba(61,201,168,0.12);
  border: 1px solid rgba(61,201,168,0.25);
  border-radius: var(--radius-sm);
  font-size: 11px; color: var(--secondary-300); line-height: 1.3;
}
.fp-lock svg { color: var(--secondary-400); flex: none }

@media (max-width: 760px) {
  .founder-pricing { grid-template-columns: 1fr; padding: var(--space-4) }
}

.founder-stack {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  margin-bottom: var(--space-9);
  padding-bottom: var(--space-9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fs-num {
  font-size: clamp(34px, 4vw, 44px); font-weight: 600; line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, #7ddbc4 0%, #5ab5d4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
.fs-l { font-size: 13.5px; color: var(--neutral-300); line-height: 1.5 }

/* Bonuses list */
.founder-bonuses h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--secondary-400);
  margin-bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: 10px;
}
.founder-bonuses h4::before {
  content: ''; width: 24px; height: 1px; background: var(--secondary-500); border-radius: 2px;
}
.founder-bonuses ul {
  list-style: none; padding: 0; margin: 0 0 var(--space-9);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-7);
}
.founder-bonuses li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; color: var(--neutral-200); line-height: 1.5;
}
.founder-bonuses li svg {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  color: var(--secondary-400);
  padding: 3px;
  background: rgba(20,150,127,0.15);
  border-radius: 50%;
  box-sizing: content-box;
}
.founder-bonuses li b { color: #fff; font-weight: 600 }

/* CTAs */
.founder-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4) }
.founder-fine {
  font-size: 12px; color: var(--neutral-400);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); letter-spacing: .02em;
}
.founder-fine svg { color: var(--secondary-500); flex: none }

/* Plans divider */
.plans-divider {
  display: flex; align-items: center; gap: var(--space-5);
  max-width: 760px; margin: 0 auto var(--space-7);
  color: var(--neutral-400);
}
.plans-divider::before, .plans-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--neutral-200);
}
.plans-divider span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neutral-500);
}

@media (max-width: 900px) {
  .founder-stack { grid-template-columns: repeat(2, 1fr) }
  .founder-bonuses ul { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 600px) {
  .founder-stack { grid-template-columns: 1fr 1fr; gap: var(--space-4) }
  .founder-bonuses ul { grid-template-columns: 1fr }
  .founder-inner { padding: 36px 24px }
}
.final {
  background: var(--primary-900); position:relative; overflow:hidden; text-align:center;
  padding: var(--space-14) 0; border:0; isolation:isolate;
}
.final .hero-mesh,
.final .hero-orbs,
.final .hero-grid-overlay { z-index:0 }
.final .page { position:relative; z-index:1 }
.final .section-label { color: var(--secondary-400) }
.final .section-label::before { background: var(--secondary-400) }
.final h2 { font-size: clamp(34px, 5.5vw, 64px); font-weight:700; letter-spacing:-.04em; color:#fff; margin-bottom: var(--space-5); text-wrap:balance }
.final h2 em {
  font-style:normal;
  background: linear-gradient(135deg, #7ddbc4 0%, #c8e6f2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final p { font-size:19px; color: var(--neutral-300); margin-bottom: var(--space-8); max-width: 56ch; margin-left:auto; margin-right:auto }
.final .hero-cta { justify-content:center }

/* ====== MARQUEE ====== */
.marquee { overflow:hidden; padding: var(--space-6) 0; border-bottom:1px solid var(--neutral-100); background:#fff }
.marquee-track {
  display:flex; gap: var(--space-12); align-items:center;
  animation: marquee 60s linear infinite;
  width: max-content;
  animation-play-state: running;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee:hover .marquee-track { animation-play-state: paused }
.marquee-item {
  font-family: var(--font-mono); font-size:12px; color: var(--neutral-500);
  letter-spacing:.08em; white-space: nowrap; display:flex; align-items:center; gap: var(--space-3);
  text-transform: uppercase;
}
.marquee-item::before {
  content:''; width:5px; height:5px; border-radius:50%; background: var(--secondary-500);
}
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ====== FOOTER ====== */
.ds-footer { padding: var(--space-12) 0 var(--space-9); background:#FAFBFC }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-7); margin-bottom: var(--space-9) }
.foot-grid .lead { font-size:14px; color: var(--neutral-500); max-width: 34ch; margin-top: var(--space-3) }
.foot-col h5 { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--neutral-400); margin-bottom: var(--space-4) }
.foot-col a { display:block; font-size:14px; color: var(--neutral-600); margin-bottom: var(--space-3); transition: color var(--duration-normal) ease }
.foot-col a:hover { color: var(--primary-600) }
.foot-logo { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; color: var(--primary-600) }
.foot-legal { border-top:1px solid var(--neutral-100); padding-top: var(--space-5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family: var(--font-mono); font-size:12px; color: var(--neutral-400) }
.foot-legal a:hover { color: var(--neutral-700) }

/* ====== REVEAL ====== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo) }
.reveal.in { opacity:1; transform:none }
.reveal-l { transform: translateX(-32px) }
.reveal-r { transform: translateX(32px) }
.reveal-l.in, .reveal-r.in { transform:none }

.stagger > .reveal { transition-delay: 0ms }
.stagger > .reveal:nth-child(1) { transition-delay: 0ms }
.stagger > .reveal:nth-child(2) { transition-delay: 80ms }
.stagger > .reveal:nth-child(3) { transition-delay: 160ms }
.stagger > .reveal:nth-child(4) { transition-delay: 240ms }
.stagger > .reveal:nth-child(5) { transition-delay: 320ms }
.stagger > .reveal:nth-child(6) { transition-delay: 400ms }


/* ====== TESTIMONIAL PLACEHOLDER ====== */
/* Replaces the legacy .video-slot/.play/.vl markup. Calm, branded "coming soon"
   card matching the .proof container width + the .quote card aesthetic. */
.testimonial-placeholder {
  display: flex; align-items: center; gap: var(--space-6);
  background: linear-gradient(135deg, rgba(216,245,233,0.45) 0%, rgba(227,243,250,0.55) 100%);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-9);
  max-width: 720px; margin: 0 auto;
}
.testimonial-placeholder .tp-icon {
  flex: none;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%);
  border-radius: var(--radius-xl);
  color: var(--primary-600);
  box-shadow: inset 0 0 0 1px rgba(9,93,126,0.08);
}
.testimonial-placeholder .tp-text h4 {
  font-size: 18px; font-weight: 600;
  color: var(--neutral-900); letter-spacing: -.015em;
  margin-bottom: 4px;
}
.testimonial-placeholder .tp-text p {
  font-size: 14.5px; color: var(--neutral-600); line-height: 1.55; text-wrap: pretty;
}
@media (max-width: 600px) {
  .testimonial-placeholder { flex-direction: column; text-align: center; padding: var(--space-7) var(--space-6) }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: var(--space-9) }
  .quotes { grid-template-columns: 1fr }
  .stats, .grid-4 { grid-template-columns: repeat(2, 1fr) }
  .grid-3, .plans { grid-template-columns: 1fr }
  .nav-links { display:none }
  .menu-btn { display:block }
  .hero { padding: var(--space-12) 0 var(--space-11) }
  .foot-grid { grid-template-columns: 1fr 1fr }
  .float-card { display:none }
  .hero h1 { font-size: clamp(40px, 9vw, 60px) }
}
@media (max-width: 560px) {
  .stats, .grid-4, .foot-grid { grid-template-columns: 1fr }
  .hero-cta { flex-direction: column; align-items:stretch }
  .btn { width: 100% }
  .nav-tail .portal { display:none }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none }
}

/* ====== MOBILE MENU (display toggle) ====== */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 64px 0 auto 0;
  background: rgba(250,251,252,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--neutral-100);
  padding: var(--space-4) var(--page-gutter) var(--space-6);
  z-index: 99;
  flex-direction: column;
  gap: 0;
}
.mobile-menu.open { display: flex }
.mobile-menu a {
  padding: var(--space-3) 0;
  font-size: 16px;
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-100);
}
.mobile-menu .btn { margin-top: var(--space-4) }

/* ====== SKIP LINK (a11y) ====== */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary-600); color: #fff;
  padding: 12px 16px; z-index: 1000; text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0 }

/* ====== STAGE LOGO (overlay on watermark spot) ====== */
/* Sits on top of .browser-stage::before (which masks the watermark area)
   and replaces the dark gradient mask with the NuvaMed mark. The pill
   must be wide enough to extend past the watermark's right edge, so we
   size from the corner with a percentage min-width that scales with the
   stage. Base size = time-showcase (narrower column). --lg = hero
   (wider stage, larger watermark). */
.stage-logo {
  position: absolute;
  bottom: 6%;
  right: 4%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--radius-full);
  background: rgba(5, 45, 63, 0.7);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  pointer-events: none;
}
.stage-logo svg {
  flex: none;
  width: 22px;
  height: 22px;
}
.stage-logo span { white-space: nowrap }

/* Larger variant for the hero stage — the hero video is wider so
   its watermark sits further from the corner. Logo pill scales up to
   cover the bigger watermark zone. */
.stage-logo--lg {
  padding: 12px 22px 12px 14px;
  font-size: 18px;
  gap: 11px;
  bottom: 5%;
  right: 3.5%;
  border-radius: var(--radius-2xl);
}
.stage-logo--lg svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 600px) {
  .stage-logo { padding: 6px 12px 6px 8px; font-size: 12px; gap: 7px }
  .stage-logo svg { width: 18px; height: 18px }
  .stage-logo--lg { padding: 8px 14px 8px 10px; font-size: 14px; gap: 8px }
  .stage-logo--lg svg { width: 22px; height: 22px }
}