:root {
  /* Color Palette */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F8FF;
  --bg-accent: #EEF3FF;
  --brand-primary: #1A56FF;
  --brand-dark: #0D3ECC;
  --brand-light: #D6E4FF;
  
  --text-headline: #0A0F1E;
  --text-body: #4B5563;
  --text-muted: #9CA3AF;
  
  --alert-warning: #F59E0B;
  --alert-error: #EF4444;
  --alert-success: #10B981;
  
  --card-bg: #FFFFFF;
  --card-border: #E5EEFF;
  --card-shadow: 0 4px 24px rgba(26, 86, 255, 0.07);
  
  /* Typography */
  --font-primary: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-120: 120px;
  
  --max-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  
  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-slow: 400ms ease;

  /* Global site theme tokens (navbar theme toggles these) */
  --site-bg: #ffffff;
  --site-surface: #f7f9ff;
  --site-text: #0a0f1e;
  --site-muted: #4b5563;
  --site-dark-panel: #0a0f1e;
  --site-dark-panel-soft: #020408;
  --site-border: #d7e2ff;
}

:root[data-theme='dark'] {
  --bg-primary: #0b1221;
  --bg-secondary: #101b2e;
  --bg-accent: #17263f;
  --text-headline: #e5edff;
  --text-body: #c1ccdf;
  --text-muted: #8fa2c3;
  --card-bg: #101a2b;
  --card-border: #223555;

  --site-bg: #060a12;
  --site-surface: #0d1626;
  --site-text: #e5edff;
  --site-muted: #9cb0cf;
  --site-dark-panel: #050a13;
  --site-dark-panel-soft: #04070d;
  --site-border: #29406a;
}

:root[data-theme='light'] {
  --site-bg: #ffffff;
  --site-surface: #f7f9ff;
  --site-text: #0a0f1e;
  --site-muted: #4b5563;
  --site-dark-panel: #0a0f1e;
  --site-dark-panel-soft: #020408;
  --site-border: #d7e2ff;
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* NOTE: overflow-x:hidden breaks position:sticky — do NOT set it here globally.
     Horizontal overflow is handled per-section on mobile only (see @media blocks below). */
}

body {
  font-family: var(--font-primary);
  background-color: var(--site-bg);
  color: var(--site-muted);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-slow), color var(--transition-fast);
}

#root,
.app {
  background: var(--site-bg);
  color: var(--site-muted);
  transition: background-color var(--transition-slow), color var(--transition-fast);
}

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-24);
}

.container-wide {
  max-width: 1440px;
}

.section {
  padding: var(--space-120) 0;
}

.section-bg-alt {
  background-color: var(--bg-secondary);
}

.section-bg-dark {
  background-color: var(--site-dark-panel);
  color: var(--bg-primary);
}
.section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3 {
  color: var(--bg-primary);
}

/* Theme sync for core homepage blocks (also overrides inline backgrounds) */
#features,
#solution,
.section-problem,
.owner-view-section,
.outcomes-section,
.product-demo,
.final-cta-section {
  background-color: var(--site-surface) !important;
  border-color: var(--site-border);
}

#how-it-works,
.qualification-section {
  background-color: var(--site-dark-panel-soft) !important;
}

:root[data-theme='dark'] #solution,
:root[data-theme='dark'] .final-cta-section,
:root[data-theme='dark'] .footer-section {
  background-color: #0b1322 !important;
}

:root[data-theme='dark'] .final-cta-container {
  background: #121f35 !important;
  border-color: #2a4167 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
}

:root[data-theme='dark'] .cta-trust-guarantee {
  color: #a9bddb !important;
}

:root[data-theme='dark'] .btn-cta-secondary {
  background: #1a2a45 !important;
  color: #dbe8ff !important;
}

/* Dark mode readability fixes for section-level hardcoded text colors */
:root[data-theme='dark'] .section-solution .headline-bold,
:root[data-theme='dark'] .section-solution .badge-outline,
:root[data-theme='dark'] .section-solution .t-card-title,
:root[data-theme='dark'] .section-solution .solution-footer-text,
:root[data-theme='dark'] .outcomes-left h2.split-headline .light-text,
:root[data-theme='dark'] .outcomes-left h2.split-headline .blue-text,
:root[data-theme='dark'] .outcome-text h3,
:root[data-theme='dark'] .owner-view-left h2,
:root[data-theme='dark'] .summary-value,
:root[data-theme='dark'] .demo-headline,
:root[data-theme='dark'] .bottom-note-new,
:root[data-theme='dark'] .label-text {
  color: #e7efff !important;
}

:root[data-theme='dark'] .section-solution .subtext-grey,
:root[data-theme='dark'] .section-solution .t-card-list li,
:root[data-theme='dark'] .outcomes-description,
:root[data-theme='dark'] .outcome-text p,
:root[data-theme='dark'] .stat-label,
:root[data-theme='dark'] .owner-view-subtext,
:root[data-theme='dark'] .summary-label,
:root[data-theme='dark'] .demo-subtext,
:root[data-theme='dark'] .tab-button-new {
  color: #a9bddb !important;
}

:root[data-theme='dark'] .section-solution .t-card,
:root[data-theme='dark'] .outcome-card,
:root[data-theme='dark'] .video-container,
:root[data-theme='dark'] .tab-button-new,
:root[data-theme='dark'] .label-text,
:root[data-theme='dark'] .owner-stats-summary-row {
  background: #121f35 !important;
  border-color: #2a4167 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme='dark'] .outcome-icon-box,
:root[data-theme='dark'] .play-button {
  background: #0f1a2d !important;
  border-color: #2a4167 !important;
  color: #dfe9ff !important;
}

:root[data-theme='dark'] .owner-cta-btn {
  background: #2a6dff !important;
  color: #ffffff !important;
}

:root[data-theme='dark'] .owner-cta-btn:hover {
  background: #1f5add !important;
}

:root[data-theme='dark'] #how-it-works h1,
:root[data-theme='dark'] #how-it-works h2,
:root[data-theme='dark'] #how-it-works h3,
:root[data-theme='dark'] #how-it-works h4,
:root[data-theme='dark'] #pricing h1,
:root[data-theme='dark'] #pricing h2,
:root[data-theme='dark'] #pricing h3,
:root[data-theme='dark'] #pricing h4,
:root[data-theme='dark'] .qualification-section h1,
:root[data-theme='dark'] .qualification-section h2,
:root[data-theme='dark'] .qualification-section h3,
:root[data-theme='dark'] .qualification-section h4 {
  color: #e7efff !important;
}

:root[data-theme='dark'] #how-it-works p,
:root[data-theme='dark'] #how-it-works li,
:root[data-theme='dark'] #how-it-works span,
:root[data-theme='dark'] #how-it-works a,
:root[data-theme='dark'] #pricing p,
:root[data-theme='dark'] #pricing li,
:root[data-theme='dark'] #pricing span,
:root[data-theme='dark'] #pricing a,
:root[data-theme='dark'] .qualification-section p,
:root[data-theme='dark'] .qualification-section li,
:root[data-theme='dark'] .qualification-section span,
:root[data-theme='dark'] .qualification-section a {
  color: #a9bddb !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-headline);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-24);
  letter-spacing: -0.02em;
}

/* Standardized V2 Section Headers */
.v2-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.v2-section-title {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.1;
}

h2.v2-section-title,
h3.v2-section-title {
  margin-bottom: 0;
}

.v2-section-subtext {
  max-width: 600px;
  margin: 12px auto 0;
  line-height: 1.6;
}

.v2-section-content {
  margin-top: 55px;
}

/* --- Global Reveal Animations (Standard JS Fallback) --- */
@keyframes revealFadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(40px); /* Slightly reduced offset for snappier feel */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reveal-delay-1 { transition-delay: 0.1s !important; }
.reveal-delay-2 { transition-delay: 0.2s !important; }
.reveal-delay-3 { transition-delay: 0.3s !important; }


.headline-1 { font-size: 56px; }
.headline-2 { font-size: 44px; }
.headline-3 { font-size: 36px; }
.headline-4 { font-size: 28px; }

p {
  color: var(--site-muted);
  margin-bottom: var(--space-24);
}
.text-lg { font-size: 18px; }
.text-base { font-size: 16px; font-weight: 400; }
.text-muted { color: var(--text-muted); }
.text-subtle { font-weight: 500; color: var(--text-muted); }

.label {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

/* Motif / Divider */
.s-motif-line {
  position: relative;
  height: 2px;
  background-color: var(--brand-light);
  width: 100px;
  margin: var(--space-24) 0;
}
.s-motif-line::before, .s-motif-line::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-primary);
}
.s-motif-line::before { left: -4px; }
.s-motif-line::after { right: -4px; }

.logo-s-curve-container {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-weight: 800;
  font-size: 24px;
  color: var(--text-headline);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo-white { color: var(--bg-primary); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--space-20);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  border: 1px solid transparent;
  outline: none;
}

.btn-primary {
  background-color: var(--brand-primary);
  color: #FFFFFF;
}

.btn-primary:focus-visible, .btn-primary:hover {
  background-color: var(--brand-dark);
  box-shadow: 0 4px 14px rgba(26, 86, 255, 0.25);
}

.btn-secondary {
  background-color: var(--bg-primary);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-secondary:focus-visible, .btn-secondary:hover {
  background-color: var(--bg-accent);
  box-shadow: 0 4px 14px rgba(26, 86, 255, 0.1);
}

/* Watch Demo scroll animation */
.hero-demo-btn {
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.hero-demo-btn.scrolling {
  background-color: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(26, 86, 255, 0.18);
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

.arrow-bounce {
  animation: arrow-bounce 0.5s ease-in-out infinite;
}

/* Cards */
.card {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  padding: var(--space-32);
  box-shadow: var(--card-shadow);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
  display: block;
}

.card h3 { margin-bottom: var(--space-12); font-size: 24px; }
.card p { margin-bottom: 0; }

.card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 30px rgba(26, 86, 255, 0.15);
  transform: translateY(-2px);
}

/* Utility Layouts */
.grid {
  display: grid;
}

.grid-cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-48); }
.grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-32); }

.flex-row { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-gap-24 { gap: var(--space-24); flex-wrap: wrap; }
.flex-col-gap-24 { gap: var(--space-24); }

.mb-12 { margin-bottom: var(--space-12); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-48 { margin-bottom: var(--space-48); }
.mt-48 { margin-top: var(--space-48); }

/* Colors Showcase */
.color-box {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: white;
}

.color-swatch {
  height: 120px;
  width: 100%;
}

.color-info {
  padding: var(--space-16);
  border-top: 1px solid var(--card-border);
}

.color-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--text-headline); }
.color-hex { font-size: 13px; color: var(--text-muted); font-family: monospace; }
.color-var { font-size: 11px; color: var(--text-muted); background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 4px; }

/* Animations */
.fade-up {
  opacity: 0;
  transform: translateY(60px);
  will-change: opacity, transform;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Micro UI loops */
@keyframes softPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(26, 86, 255, 0); }
  50% { transform: scale(1.02); box-shadow: 0 4px 20px rgba(26, 86, 255, 0.15); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(26, 86, 255, 0); }
}

@keyframes floatElement {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.micro-loop-pulse {
  animation: softPulse 4s ease-in-out infinite;
}

.micro-loop-float {
  animation: floatElement 5s ease-in-out infinite;
}

/* Video Placeholder */
.video-placeholder {
  background-color: #0A0F1E;
  border-radius: var(--radius-md);
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(26, 86, 255, 0.2), 0 0 30px rgba(26, 86, 255, 0.12);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.video-placeholder:hover {
  box-shadow: 0 0 0 1px rgba(26, 86, 255, 0.4), 0 0 40px rgba(26, 86, 255, 0.25);
}

.video-placeholder::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, rgba(26, 86, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.video-play-btn {
  width: 72px;
  height: 72px;
  background-color: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.video-play-btn svg {
  width: 28px;
  height: 28px;
  fill: #FFFFFF;
  margin-left: 6px; /* offset play icon slightly for visual balance */
}

.video-play-btn:hover {
  background-color: var(--brand-dark);
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(26, 86, 255, 0.4);
}

.video-title {
  position: absolute;
  top: var(--space-24);
  left: var(--space-24);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 16px;
  z-index: 2;
  letter-spacing: 0.02em;
}

/* ===== Header Navbar ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 64px;
  border-radius: 0;
  z-index: 1000;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 300ms ease, box-shadow 300ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease;
  overflow: hidden;
}

.navbar.nav-scrolled {
  width: 100%;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(99, 127, 198, 0.18);
  box-shadow: 0 4px 24px rgba(10, 25, 60, 0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.navbar.nav-pricing {
  background: #1A56FF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(26, 86, 255, 0.25);
}

.navbar.nav-pricing .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar.nav-pricing .nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.navbar.nav-pricing .nav-logo-white { display: inline; }
.navbar.nav-pricing .nav-logo-blue { display: none; }

.navbar.nav-pricing .nav-cta-btn {
  background: #ffffff;
  color: #1A56FF;
}

.navbar.nav-pricing .nav-cta-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.navbar.nav-hidden {
  transform: translateY(-110%);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 16px;
  overflow: hidden;
}

/* Logo */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  flex-shrink: 0;
  transition: color 300ms ease;
}

.nav-scrolled .nav-logo {
  color: #0d1938;
}

/* Logo image elements */
.nav-logo-wordmark {
  display: block;
  height: 156px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* White logos: visible on blue navbar (default/top state) */
.nav-logo-white {
  display: block;
}

/* Blue logos: hidden on blue navbar */
.nav-logo-blue {
  display: none;
}

/* When scrolled (white bg): show blue, hide white */
.nav-scrolled .nav-logo-white {
  display: none;
}

.nav-scrolled .nav-logo-blue {
  display: block;
}

/* Center Links */
.nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.nav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.nav-scrolled .nav-link {
  color: #3a4566;
}

.nav-scrolled .nav-link:hover {
  color: #0d1938;
  background: rgba(26, 86, 255, 0.08);
}

/* Right Actions */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-login-btn {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-login-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.nav-scrolled .nav-login-btn {
  color: #3a4566;
}

.nav-scrolled .nav-login-btn:hover {
  color: #0d1938;
  background: rgba(0, 0, 0, 0.04);
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  background: #ffffff;
  color: #1a56ff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.nav-cta-btn:hover {
  background: #f0f5ff;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.nav-scrolled .nav-cta-btn {
  background: #1a56ff;
  color: #ffffff;
}

.nav-scrolled .nav-cta-btn:hover {
  background: #0d3ecc;
  box-shadow: 0 6px 20px rgba(26, 86, 255, 0.3);
}

/* Mobile Toggle */
.nav-mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 300ms ease, border-color 300ms ease;
}

.nav-scrolled .nav-mobile-toggle {
  border-color: rgba(100, 130, 210, 0.3);
  background: rgba(255, 255, 255, 0.5);
}

.nav-mobile-toggle span {
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 4px;
  background: #ffffff;
  transition: transform 220ms ease, opacity 220ms ease, background 300ms ease;
}

.nav-scrolled .nav-mobile-toggle span {
  background: #0d1938;
}

.nav-mobile-toggle span:nth-child(1) { transform: translateY(-6px); }
.nav-mobile-toggle span:nth-child(2) { transform: translateY(0); }
.nav-mobile-toggle span:nth-child(3) { transform: translateY(6px); }

.nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg); }
.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg); }

/* Mobile Overlay — minimal */
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 24px 48px;

  /* Glassmorphism */
  background: rgba(8, 12, 28, 0.55);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);

  animation: mobileMenuIn 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Glass card container */
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 8px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-mobile-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 16px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.18s ease, padding-left 0.18s ease;
  display: block;
}

.nav-mobile-link:last-child {
  border-bottom: none;
}

.nav-mobile-link:hover,
.nav-mobile-link:active {
  color: #ffffff;
  padding-left: 6px;
}

.nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0;
  border-top: none;
}

.nav-mobile-login {
  display: none;
}

.nav-mobile-cta {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background: linear-gradient(135deg, #1a56ff 0%, #2d7bff 100%);
  color: #fff;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(26, 86, 255, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.nav-mobile-cta:hover {
  background: linear-gradient(135deg, #0d3ecc 0%, #1a56ff 100%);
  box-shadow: 0 12px 32px rgba(26, 86, 255, 0.55);
  transform: translateY(-1px);
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .nav-link {
    font-size: 12.5px;
    padding: 8px 10px;
  }
}

@media (max-width: 900px) {
  /* Prevent horizontal bleed on mobile without breaking position:sticky on desktop */
  body {
    overflow-x: clip;
    max-width: 100vw;
  }

  .navbar {
    top: 0;
    width: 100%;
    border-radius: 0;
    overflow: visible;
  }

  .nav-container {
    min-height: 56px;
    overflow: visible;
  }

  .nav-center,
  .nav-right {
    display: none;
  }

  .nav-mobile-toggle {
    display: inline-flex;
    position: relative;
    z-index: 1001;
  }
}




.nav-logo-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nav-text);
  position: relative;
}

.logo-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #00d98e;
  box-shadow: 0 0 0 0 rgba(0, 217, 142, 0.5);
  animation: pulseLive 2.4s infinite;
}

.futuristic-center {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.navbar[data-theme='dark'] .futuristic-center {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(149, 171, 237, 0.22);
}

.active-glow-rail {
  position: absolute;
  left: 0;
  top: 5px;
  height: calc(100% - 10px);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(31, 86, 255, 0.14), rgba(49, 196, 255, 0.2));
  box-shadow: inset 0 0 0 1px rgba(31, 86, 255, 0.18), 0 8px 20px rgba(31, 86, 255, 0.2);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), width 260ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.nav-link-chip {
  text-decoration: none;
  color: var(--nav-text);
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 2;
  padding: 10px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-link-chip.active {
  color: #0b2f96;
}

.navbar[data-theme='dark'] .nav-link-chip.active {
  color: #d7e4ff;
}

.popular-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 122, 53, 0.17);
  color: #ff7a35;
}

.futuristic-right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  position: relative;
}

.smart-search-wrap {
  position: relative;
  width: 280px;
}

.smart-search {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(108, 131, 186, 0.36);
  background: rgba(255, 255, 255, 0.58);
  color: var(--nav-text);
  padding: 0 14px;
  font-family: var(--font-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.navbar[data-theme='dark'] .smart-search {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(147, 177, 250, 0.28);
}

.smart-search:focus {
  border-color: rgba(31, 86, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(31, 86, 255, 0.15);
}

.voice-trigger {
  position: absolute;
  right: 7px;
  top: 7px;
  height: 28px;
  min-width: 34px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #245bff, #39b9ff);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.suggestion-panel {
  position: absolute;
  top: calc(100% + 8px);
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--nav-border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 42px rgba(15, 32, 72, 0.2);
  overflow: hidden;
  z-index: 20;
}

.navbar[data-theme='dark'] .suggestion-panel {
  background: rgba(9, 14, 29, 0.96);
}

.suggestion-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--nav-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  font-size: 13px;
  cursor: pointer;
}

.suggestion-item:hover {
  background: var(--nav-soft);
}

.suggestion-meta {
  font-size: 11px;
  color: #5f75b6;
}

.selected-hint {
  font-size: 11px;
  color: #6c7490;
  padding: 9px 12px;
  border-top: 1px dashed rgba(108, 116, 144, 0.36);
}

.trend-trigger,
.theme-toggle,
.notification-bell,
.quick-action {
  border: 1px solid rgba(103, 136, 206, 0.34);
  background: rgba(255, 255, 255, 0.45);
  color: var(--nav-text);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  height: 38px;
  padding: 0 11px;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.navbar[data-theme='dark'] .trend-trigger,
.navbar[data-theme='dark'] .theme-toggle,
.navbar[data-theme='dark'] .notification-bell,
.navbar[data-theme='dark'] .quick-action {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(136, 167, 241, 0.3);
}

.trend-trigger:hover,
.theme-toggle:hover,
.notification-bell:hover,
.quick-action:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 86, 255, 0.55);
}

.notification-bell {
  position: relative;
}

.notification-badge {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  background: #ff4f66;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.trending-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 226px;
  width: 290px;
  border-radius: 14px;
  border: 1px solid var(--nav-border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 26px 48px rgba(11, 24, 54, 0.22);
  padding: 12px;
  z-index: 20;
}

.navbar[data-theme='dark'] .trending-dropdown {
  background: rgba(9, 14, 30, 0.96);
}

.trending-dropdown p {
  margin-bottom: 10px;
  font-size: 12px;
  color: #6878a9;
}

.trending-item {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--nav-text);
  font-size: 12px;
  padding: 8px 6px;
  border-radius: 8px;
}

.trending-item:hover {
  background: var(--nav-soft);
}

.trending-item strong {
  color: #4c89ff;
  font-size: 11px;
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 158px;
  width: 320px;
  border-radius: 14px;
  border: 1px solid var(--nav-border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 26px 48px rgba(11, 24, 54, 0.22);
  padding: 12px;
  z-index: 20;
}

.navbar[data-theme='dark'] .notifications-dropdown {
  background: rgba(9, 14, 30, 0.96);
}

.notifications-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.notifications-head p {
  margin: 0;
  font-size: 12px;
  color: #6878a9;
}

.mark-read-btn {
  border: none;
  background: transparent;
  color: #4c89ff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.notification-item {
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: var(--nav-text);
  padding: 10px 8px;
  border-radius: 8px;
}

.notification-item:hover {
  background: var(--nav-soft);
}

.notification-item.unread {
  background: rgba(76, 137, 255, 0.08);
}

.notification-item.read {
  opacity: 0.84;
}

.notification-item span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.notification-item small {
  display: block;
  font-size: 11px;
  color: #6c7490;
  line-height: 1.35;
}

.notification-item strong {
  color: #4c89ff;
  font-size: 10px;
  white-space: nowrap;
  margin-top: 2px;
}

.magnetic {
  --mx: 0px;
  --my: 0px;
  transform: translate(var(--mx), var(--my));
}

.mega-shell {
  margin: 0 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(103, 134, 199, 0.3);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px;
  animation: megaIn 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar[data-theme='dark'] .mega-shell {
  background: rgba(10, 16, 33, 0.68);
  border-color: rgba(126, 157, 232, 0.3);
}

.mega-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mega-header span {
  font-size: 15px;
  font-weight: 700;
  color: var(--nav-text);
}

.mega-header p {
  margin: 0;
  font-size: 12px;
  color: #6b7aa8;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mega-card {
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.mega-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(20, 44, 96, 0.16);
}

.mega-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--nav-text);
}

.mega-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #6978a4;
}

.card-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.tone-blue {
  background: linear-gradient(145deg, rgba(42, 113, 255, 0.16), rgba(130, 201, 255, 0.18));
  border-color: rgba(74, 133, 247, 0.25);
}

.tone-mint {
  background: linear-gradient(145deg, rgba(18, 200, 176, 0.15), rgba(164, 251, 232, 0.18));
  border-color: rgba(27, 181, 154, 0.25);
}

.tone-orange {
  background: linear-gradient(145deg, rgba(255, 135, 56, 0.15), rgba(255, 222, 178, 0.2));
  border-color: rgba(255, 128, 51, 0.2);
}

.tone-blue .card-icon { background: rgba(41, 104, 255, 0.22); color: #1e55ef; }
.tone-mint .card-icon { background: rgba(11, 184, 156, 0.24); color: #047f6b; }
.tone-orange .card-icon { background: rgba(255, 145, 42, 0.24); color: #cc6815; }

.orb-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(114, 144, 218, 0.4);
  background: rgba(255, 255, 255, 0.58);
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.navbar[data-theme='dark'] .orb-toggle {
  background: rgba(255, 255, 255, 0.08);
}

.orb-toggle i {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 145, 255, 0.35), transparent 58%);
  opacity: 0;
  transition: opacity 220ms ease;
}

.orb-toggle.open i {
  opacity: 1;
}

.orb-toggle span {
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 4px;
  background: var(--nav-text);
  transition: transform 220ms ease, opacity 220ms ease;
}

.orb-toggle span:nth-child(1) { transform: translateY(-6px); }
.orb-toggle span:nth-child(2) { transform: translateY(0); }
.orb-toggle span:nth-child(3) { transform: translateY(6px); }

.orb-toggle.open span:nth-child(1) { transform: rotate(45deg); }
.orb-toggle.open span:nth-child(2) { opacity: 0; }
.orb-toggle.open span:nth-child(3) { transform: rotate(-45deg); }

.orbital-mobile {
  display: none;
}

@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseLive {
  0% { box-shadow: 0 0 0 0 rgba(0, 217, 142, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(0, 217, 142, 0); }
}

@keyframes navAura {
  0%, 100% { opacity: 0.38; filter: blur(22px) hue-rotate(0deg); }
  50% { opacity: 0.62; filter: blur(30px) hue-rotate(20deg); }
}

@media (max-width: 1230px) {
  .smart-search-wrap { width: 220px; }
}

@media (max-width: 1420px) {
  .quick-action-analyze { display: none; }
}

@media (max-width: 1330px) {
  .quick-action-explore { display: none; }
}

@media (max-width: 1080px) {
  .smart-search-wrap,
  .trend-trigger,
  .quick-action,
  .notification-bell {
    display: none;
  }
  .nav-container {
    grid-template-columns: auto 1fr auto;
  }
}

@media (max-width: 900px) {
  .navbar {
    top: 0;
    width: 100%;
    border-radius: 0;
  }

  .nav-container {
    min-height: 66px;
    grid-template-columns: auto 1fr auto;
  }

  .futuristic-center,
  .futuristic-right {
    display: none;
  }

  .orb-toggle {
    display: inline-flex;
  }

  .orbital-mobile {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 94px 16px 22px;
    background: radial-gradient(circle at 18% 14%, rgba(50, 129, 255, 0.24), rgba(6, 13, 30, 0.96) 58%);
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 998;
  }

  .orbital-mobile.open {
    transform: translateY(0);
  }

  .mobile-search-zone {
    padding: 0 6px;
  }

  .mobile-search-zone .smart-search {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(166, 188, 255, 0.36);
    color: #e8efff;
  }

  .mobile-search-zone .smart-search::placeholder {
    color: rgba(232, 239, 255, 0.62);
  }

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  .mobile-nav-list a {
    text-decoration: none;
    color: #f4f7ff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(179, 197, 249, 0.2);
  }

  .mobile-bottom-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(166, 189, 255, 0.3);
    border-radius: 14px;
    padding: 8px;
  }

  .mobile-bottom-dock button {
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #eaf0ff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    height: 40px;
  }

  .mega-shell {
    display: none;
  }
}

/* Hero Section V2 (Inspiration Immersive Variant) */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 96px var(--space-24) 48px;
  overflow: hidden;
  background-image: url('/download%20(16).webp');
  background-size: cover;
  background-position: center;
}


.hero-v2 > * {
  z-index: 2; /* Elevate above overlay */
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 32px;
}

.hero-title,
.v2-section-title.hero-scale {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 800px;
  margin: 0 auto;
  letter-spacing: -0.04em;
}

.hero-title {
  color: #FFFFFF;
}


.hero-subtext {
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 24px auto 0;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Redesigned Floating Dashboard */
.hero-demo-window {
  margin-top: 40px;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  background: rgba(10, 15, 30, 0.2);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.main-play-btn {
  width: 80px;
  height: 80px;
  background: rgba(26, 86, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.05);
  transition: all var(--transition-fast);
}

.hero-demo-window:hover .main-play-btn {
  transform: scale(1.05);
  background: var(--brand-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.1);
}

.hero-demo-window:hover .video-overlay {
  background: rgba(0, 0, 0, 0.2);
}

.hero-demo-window:hover .video-controls-bar {
  opacity: 1 !important;
}

.demo-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 20px;
  flex: 1;
  align-items: center;
  padding-bottom: 32px; /* space for controls */
}

/* Delicate UI Panels */
.demo-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* Delicate UI Skeletal Nodes */
.ui-skeleton-line { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); margin-bottom: 12px; }
.ui-skeleton-circle { width: 32px; height: 32px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); }

/* Accents */
.ui-accent-blue { background: var(--brand-primary) !important; opacity: 0.9; }

.scroll-indicator {
  margin-top: 32px;
  color: rgba(255,255,255,0.7);
  animation: bounce 2s infinite;
  display: flex;
  justify-content: center;
}
.scroll-indicator svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

@media (max-width: 768px) {
  .hero-title, .v2-section-title.hero-scale { font-size: 40px; line-height: 1.2; }
  .demo-dashboard-grid { grid-template-columns: 1fr; }
  .hero-demo-window { margin-top: 48px; padding: 16px; aspect-ratio: auto; min-height: 300px; }
  .hero-subtext { font-size: 17px; max-width: 100% !important; }
  .hero-subtext br { display: none; }
  .hero-pill { font-size: 12px; padding: 6px 14px; }
  .hero-v2 { padding: 80px 16px 40px; }

  /* Problem section mobile */
  .section-problem { padding: 60px 0; overflow: hidden; }
  .v2-section-header { padding: 0 20px; }
  .v2-section-title { font-size: 28px !important; }
  .v2-section-subtext { font-size: 15px; }

  /* Problem cards — horizontal scroll carousel */
  .problem-grid-ramp {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 8px 20px 24px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .problem-grid-ramp::-webkit-scrollbar { display: none; }

  /* Problem cards: 85vw so peeking is visible on both sides */
  .card-ramp {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    max-width: 82vw !important;
    scroll-snap-align: center;
    height: 420px !important;
  }

  /* Solution section */
  .solution-headline { font-size: 30px; max-width: 100%; }
  .solution-subtext { font-size: 16px; }

  /* HowItWorks closing text */
  .closing-1, .closing-2 { font-size: 36px; }
}

@media (max-width: 480px) {
  .hero-title, .v2-section-title.hero-scale { font-size: 30px; }
  .hero-subtext { font-size: 15px; }
  .hero-demo-window { min-height: 200px; }

  .card-ramp { flex: 0 0 85vw !important; width: 85vw !important; max-width: 85vw !important; }
  .ramp-title { font-size: 20px !important; }

  .closing-1, .closing-2 { font-size: 26px; }
  .flow-row { padding: 24px 16px; }
  .flow-step-title { font-size: 20px; }
  .flow-desc { font-size: 15px; }

  /* Solution section */
  .solution-headline { font-size: 26px; }
  .t-card { padding: 20px; }
}

/* Flow diagram / abstract motif */
.abstract-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bg-primary);
  border: 2px solid var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(26, 86, 255, 0.1);
  color: var(--brand-primary);
}

.flow-connector {
  height: 2px;
  background-color: var(--brand-light);
  flex: 1;
  min-width: 40px;
  position: relative;
}

/* Section 2: The Problem (Revised to Exact Spec) */
.section-problem {
  background-color: #FFFFFF;
  padding: 80px 0;
  border-top: 1px solid #F9FAFB;
}

.problem-header-new {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  text-align: left;
}

.header-left {
  max-width: 600px;
}

.badge-outline {
  display: inline-flex;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.headline-bold {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.subtext-grey {
  color: #6B7280;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.header-right {
  display: flex;
  gap: 12px;
}

.nav-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9CA3AF;
  transition: all 0.2s;
}

.nav-arrow:hover {
  border-color: #D1D5DB;
  color: #4B5563;
}

.nav-arrow.active {
  color: #F59E0B;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
  border-color: #FDE68A;
}

/* Section 2: Image 1 Perfect Recreation Grid */
.problem-grid-ramp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 1024px) {
  .problem-grid-ramp { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .problem-grid-ramp { grid-template-columns: 1fr; }
}

/* Card Skeleton */
.card-ramp {
  background-color: #FAF7F4 !important; /* Force color */
  border-radius: 20px !important; /* Reduced to 20px as requested */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  height: 520px !important; /* Reduced from 620px to 520px */
  border: none !important; /* Removed border to match clean look */
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}





/* Content Top */
.card-ramp-content {
  padding: 40px 32px 12px 32px; /* Adjusted padding for better spacing */
}

.ramp-title {
  font-size: 28px !important; /* Reduced from 36px to 28px */
  font-weight: 600 !important; /* Reduced from 700 to 600 for a slightly lighter bold */
  color: #000000;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.ramp-sub {
  font-size: 16px !important; /* Reduced from 20px to 16px */
  color: #8c8c8c !important;
  line-height: 1.4;
  margin-bottom: 20px;
  max-width: 100%;
}

.ramp-link {
  display: inline-flex;
  align-items: center;
  font-size: 15px !important; /* Reduced from 18px to 15px */
  font-weight: 600 !important;
  color: #444 !important;
  text-decoration: none;
  border-bottom: 1.5px solid #ccc !important; 
  padding-bottom: 2px;
  transition: all 0.2s;
  margin-bottom: 24px;
}

.ramp-link:hover {
  color: #1A56FF;
}

/* Visual Bottom Sandbox */
.card-ramp-visual {
  height: auto;
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end; /* Align image to bottom */
  justify-content: center;
  padding: 0; /* Remove padding to let image touch edges */
  overflow: hidden;
}

.card-ramp-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block;
  transition: none;
}

/* Specific styling for the first card graphic only */
.card-ramp:nth-child(1) .card-ramp-visual img {
  width: 98% !important;
  height: 95% !important;
  object-fit: contain !important;
  object-position: bottom !important;
  margin: 0 auto;
  transform: scale(1.1) !important;
  transform-origin: bottom center !important;
}



/* Specific styling for the second, third, and fourth card graphics */
.card-ramp:nth-child(2) .card-ramp-visual img,
.card-ramp:nth-child(3) .card-ramp-visual img,
.card-ramp:nth-child(4) .card-ramp-visual img {
  width: 98% !important;
  height: 95% !important;
  object-fit: contain !important;
  object-position: bottom !important;
  margin: 0 auto;
}

/* Image Placeholder */
.placeholder-graphic {
  width: 100%;
  height: 100%;
  background-color: #F3F4F6;
  border: 1px dashed #D1D5DB;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.ramp-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0 0 16px 16px;
}

/* Section 3: The Solution */
.section-solution {
  background-color: #FFFFFF;
  padding: 80px 0;
  text-align: center;
}

.solution-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #1A56FF;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.solution-headline {
  font-size: 44px;
  font-weight: 800;
  color: #0A0F1E;
  margin: 0 auto 24px auto;
  max-width: 720px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.solution-subtext {
  font-size: 18px;
  color: #6B7280;
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.6;
}

/* Timeline Container */
.timeline-wrapper {
  margin: 64px auto 80px auto;
  max-width: 100%; 
  position: relative;
  padding: 0 24px;
}

/* On desktop, constrain the header section width */
.timeline-wrapper > .container .timeline-header {
  max-width: 1040px;
  margin: 0 auto;
}

/* On desktop, the cards stack uses a constrained container div */
.timeline-wrapper > .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* On mobile (900px), the cards go edge-to-edge via timeline-cards rules */
.timeline-header {
  position: relative;
  margin-bottom: 0;
  padding: 0 0 32px;
}

.timeline-track-bg {
  position: absolute;
  top: 14px; /* half of pill height (~28px) — centers line through pills */
  left: 16%;
  right: 16%;
  height: 2px;
  background-color: #E5E7EB; /* Light grey base line */
  z-index: 1;
}

.timeline-track-fill {
  position: absolute;
  top: 14px; /* half of pill height (~28px) — centers line through pills */
  left: 16%;
  height: 2px;
  background-color: #1A56FF;
  z-index: 2;
  animation: fillTrack 6s infinite;
}

@keyframes fillTrack {
  0% { width: 0%; }
  100% { width: 68%; } /* Matches exactly to the right 16% */
}

.timeline-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}

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

.timeline-pill {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #0A0F1E;
  margin-bottom: 0px; /* sits directly on line */
  position: relative;
  z-index: 4;
  animation: pillLightUp 6s infinite;
}

@keyframes pillLightUp {
  0% { background-color: #FFFFFF; color: #0A0F1E; border-color: #E5E7EB; box-shadow: none; }
  1% { background-color: #1A56FF; color: #FFFFFF; border-color: #1A56FF; box-shadow: 0 0 0 4px rgba(26, 86, 255, 0.1); }
  100% { background-color: #1A56FF; color: #FFFFFF; border-color: #1A56FF; box-shadow: 0 0 0 4px rgba(26, 86, 255, 0.1); }
}

.timeline-cards {
  display: flex;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.t-card {
  flex: 1;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 32px;
  text-align: left;
  box-shadow: 0 6px 24px rgba(0,0,0,0.02);
}

.t-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0A0F1E;
  margin-bottom: 24px;
}

.t-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.t-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: #6B7280;
  line-height: 1.4;
}

.t-card-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .timeline-header { display: none; }

  /* Horizontal snap-scroll carousel — JS handles auto-advance */
  .timeline-cards {
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    max-width: none !important;
  }
  .timeline-cards::-webkit-scrollbar { display: none; }

  .t-card {
    flex: 0 0 85vw !important;
    width: 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: center;
    padding: 24px !important;
  }
}

@media (max-width: 480px) {
  .t-card {
    flex: 0 0 85vw !important;
    width: 85vw !important;
    max-width: 85vw !important;
    padding: 20px !important;
  }
}

/* Footer statement */
.solution-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 64px;
}
.solution-footer-text {
  font-size: 16px;
  color: #6B7280;
  font-weight: 500;
}
.solution-logo-mark {
  color: #1A56FF;
  display: flex;
  align-items: center;
}

.underline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.fw-bold { font-weight: 700; }
.mt-64 { margin-top: 64px; }
.mt-80 { margin-top: 80px; }

/* ========================================================================= */
/* SECTION 4: HOW IT WORKS (Alternating Rows)                               */
/* ========================================================================= */

.flow-rows-container {
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 64px rgba(0,0,0,0.03); 
  border: 1px solid #E5E7EB; 
}

.flow-row {
  display: flex;
  padding: 48px;
  align-items: center;
  gap: 40px;
  border-bottom: 1px solid #E5E7EB;
}
.flow-row:last-child {
  border-bottom: none;
}
.flow-row.bg-white { background: #FFFFFF; }
.flow-row.bg-alt { background: #F5F8FF; }

.flow-col-left { flex: 0 0 25%; }
.flow-col-center { flex: 0 0 40%; padding-right: 24px;}
.flow-col-right { flex: 0 0 35%; }

.flow-step-num {
  background: #1A56FF;
  color: #FFFFFF;
  padding: 4px 16px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 16px;
}

.flow-step-title {
  font-size: 24px;
  font-weight: 800;
  color: #0A0F1E;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.flow-desc {
  font-size: 17px;
  color: #4B5563;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.5;
}

.flow-muted {
  font-size: 14px;
  color: #9CA3AF;
  margin: 0;
}

/* Micro UI Cards - Flat UI Typography */
.micro-ui-card {
  background: #0A0F1E;
  border-radius: 12px;
  height: 160px;
  width: 100%;
  box-shadow: 0 0 0 1px rgba(26, 86, 255, 0.2), 0 0 32px rgba(26, 86, 255, 0.1);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ui-flex-center { align-items: center; justify-content: center; }
.ui-flex-center-col { align-items: center; justify-content: center; flex-direction: column; }

.ui-msg-in {
  background: #1F2937;
  color: #E5E7EB;
  padding: 10px 14px;
  border-radius: 12px 12px 12px 2px;
  font-size: 13px;
  align-self: flex-start;
  max-width: 85%;
  font-weight: 500;
}

.ui-msg-out {
  background: #1A56FF;
  color: #FFFFFF;
  padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
  font-size: 13px;
  align-self: flex-end;
  max-width: 85%;
  font-weight: 500;
}

.ui-typing {
  font-size: 12px;
  color: #9CA3AF;
  font-style: italic;
  margin-bottom: -6px;
  padding-left: 2px;
}

.ui-lead-card {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  align-self: center;
  width: 90%;
}

.ui-score-badge {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px 32px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.ui-push-noti {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #E5E7EB;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 500;
  width: 90%;
  text-align: center;
  margin-bottom: 12px;
}

.ui-timer {
  font-size: 36px;
  font-weight: 800;
  color: #EF4444;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ui-rep-card {
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  width: 90%;
  border: 1px solid transparent;
}
.ui-rep-card.missed {
  color: #6B7280;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  text-decoration: line-through;
}
.ui-rep-card.active {
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  text-decoration: none;
}

.ui-urgent-msg {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.15);
}

.flow-closing {
  margin-top: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.closing-1 {
  font-size: 48px;
  font-weight: 800;
  color: #0A0F1E;
  letter-spacing: -0.02em;
}
.closing-2 {
  font-size: 48px;
  font-weight: 800;
  color: #1A56FF;
  letter-spacing: -0.02em;
}

/* Hide Scrollbar */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Responsive Collapse */
@media (max-width: 900px) {
  .flow-row {
    flex-direction: column;
    padding: 32px 24px;
    align-items: flex-start;
    gap: 24px;
  }
  .flow-col-left, .flow-col-center, .flow-col-right {
    width: 100%;
    padding-right: 0;
  }
  .flow-col-right {
    margin-top: 8px;
  }
  .closing-1, .closing-2 {
    font-size: 32px;
  }
}

/* ========================================================================= */
/* HOW IT WORKS - Premium Animations                                        */
/* ========================================================================= */

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatHover {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(26, 86, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(26, 86, 255, 0);
  }
}

.card-animate {
  animation: slideUpFade 0.6s ease-out forwards;
}

.card-animate:nth-child(1) { animation-delay: 0.1s; }
.card-animate:nth-child(2) { animation-delay: 0.2s; }
.card-animate:nth-child(3) { animation-delay: 0.3s; }
.card-animate:nth-child(4) { animation-delay: 0.4s; }
.card-animate:nth-child(5) { animation-delay: 0.5s; }
.card-animate:nth-child(6) { animation-delay: 0.6s; }