@charset "UTF-8";

/* ================================ */
/* Diaspor.io Landing Page - Cutting Edge Design */
/* ================================ */

:root {
  /* Core Backgrounds — deep navy, brand-aligned */
  --background: #0a0b14;
  --background-subtle: #0d0f1a;
  --surface: #13141d;
  --surface-elevated: #1b1d28;
  --surface-overlay: #252835;

  /* Brand palette — indigo primary (matches the two top Venn circles),
     cyan accent (matches the bottom Venn circle + the period in "diaspor.") */
  --primary: #6366f1;
  --primary-dark: #4338ca;
  --secondary: #22d3ee;
  --accent-warm: #f59e0b;
  --accent-cool: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-coral: #22d3ee;

  /* Status Colors */
  --cyber-green: #22c55e;
  --cyber-yellow: #eab308;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;

  /* RGB for rgba() */
  --primary-rgb: 99, 102, 241;
  --secondary-rgb: 34, 211, 238;
  --success-rgb: 16, 185, 129;
  --warning-rgb: 245, 158, 11;
  --error-rgb: 239, 68, 68;

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-hover: rgba(255, 255, 255, 0.15);

  /* Text hierarchy — WCAG AA ≥ 4.5:1 on --background for all four */
  --text-primary: #e8e8f0;   /* 16:1 on bg */
  --text-secondary: #a0a0b0; /* 7.6:1 on bg */
  --text-muted: #8d8d9c;     /* 4.85:1 on bg (was #6a6a7a, 3.69) */
  --text-dim: #7d7d8c;       /* 4.55:1 on bg (was #4a4a5a, 2.26) */

  /* Spacing - Ultra-compact startup style */
  --nav-height: 60px;
  --container-max: 1320px;
  --section-padding: 64px;
  --card-radius: 10px;
  --card-padding: 20px;

  /* Fonts - Distinctive typography with Outfit */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Accessibility - Skip Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--background);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 10000;
  transition: top var(--transition-smooth);
}

.skip-link:focus {
  top: 16px;
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

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

/* ================================ */
/* Entrance Animations */
/* ================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(var(--primary-rgb), 0.3),
      0 0 60px rgba(var(--primary-rgb), 0.1);
  }
  50% {
    box-shadow:
      0 0 50px rgba(var(--primary-rgb), 0.5),
      0 0 100px rgba(var(--primary-rgb), 0.2);
  }
}

@keyframes textShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes borderGlow {
  0%,
  100% {
    border-color: rgba(var(--primary-rgb), 0.3);
  }
  50% {
    border-color: rgba(var(--primary-rgb), 0.6);
  }
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(var(--primary-rgb), 0.2);
}

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

ul {
  list-style: none;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* ================================ */
/* Navigation */
/* ================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: var(--nav-height);
  z-index: 1000;
  background: rgba(8, 8, 12, 0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition-smooth);
  box-sizing: border-box;
  overflow-x: hidden;
}

.nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border) 20%,
    var(--border) 80%,
    transparent 100%
  );
  opacity: 0.6;
}

.nav.scrolled {
  background: rgba(8, 8, 12, 0.92);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav.scrolled::after {
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--primary-rgb), 0.3) 20%,
    rgba(var(--primary-rgb), 0.3) 80%,
    transparent 100%
  );
}

.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-smooth);
}

.logo-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.logo:hover .logo-icon {
  transform: scale(1.06) rotate(-2deg);
}

@keyframes clover-hum {
  0%, 100% { transform: scale(1);     opacity: 0.95; }
  50%      { transform: scale(1.025); opacity: 1;    }
}

.logo-icon svg,
.hero-mockup-brand svg {
  animation: clover-hum 6s ease-in-out infinite;
  transform-origin: center;
}

.logo-text {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.logo-dot {
  color: var(--secondary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Social icons container - grouped together */
.nav-social-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.nav-social-icons .btn-nav-icon {
  margin: 0;
}

.nav-links a {
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--primary);
}

.btn-nav {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.btn-nav:hover {
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15);
}

.btn-linkedin {
  background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
  border-color: rgba(0, 119, 181, 0.5);
}

.btn-linkedin:hover {
  background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%);
  border-color: #0077b5;
  box-shadow: 0 0 20px rgba(0, 119, 181, 0.4);
}

/* Icon-only navigation buttons */
.btn-nav-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
}

.btn-nav-icon:not(.btn-linkedin) svg {
  color: var(--text-secondary);
}

.btn-nav-icon:hover {
  border-color: var(--primary);
  color: var(--text-primary);
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15);
  transform: translateY(-1px);
}

.btn-nav-icon:hover:not(.btn-linkedin) svg {
  color: var(--text-primary);
}

.btn-nav-icon.btn-linkedin {
  background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
  border-color: rgba(0, 119, 181, 0.5);
  color: white;
}

.btn-nav-icon.btn-linkedin:hover {
  background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%);
  border-color: #0077b5;
  box-shadow: 0 0 20px rgba(0, 119, 181, 0.4);
  color: white;
}

.btn-nav-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

.btn-nav-app {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #0d9668 0%, #0891b2 100%);
  border: 2px solid rgba(0, 255, 136, 0.5);
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: all var(--transition-smooth);
  box-shadow:
    0 0 20px rgba(0, 255, 136, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

@keyframes btn-glow {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(0, 255, 136, 0.6),
      0 0 60px rgba(0, 212, 255, 0.3),
      0 4px 16px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 40px rgba(0, 255, 136, 0.8),
      0 0 80px rgba(0, 212, 255, 0.5),
      0 4px 20px rgba(0, 0, 0, 0.5);
  }
}

@keyframes btn-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn-nav-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.btn-nav-app:hover {
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  border-color: rgba(0, 255, 136, 0.8);
  transform: translateY(-2px);
  box-shadow:
    0 0 30px rgba(0, 255, 136, 0.6),
    0 0 60px rgba(0, 212, 255, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.5);
}

.btn-nav-app:hover::before {
  opacity: 1;
}

.btn-nav-app svg {
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all var(--transition-smooth);
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0;
  flex-direction: column;
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Safe area support for notched devices */
  padding-bottom: env(safe-area-inset-bottom, 20px);
  /* Smooth animation */
  transform: translateY(-20px);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
  opacity: 0;
}

.mobile-menu.active {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}

.mobile-menu a {
  color: var(--text-secondary);
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: rgba(var(--primary-rgb), 0.1);
  touch-action: manipulation;
  /* Thumb-friendly spacing */
  padding-left: max(24px, env(safe-area-inset-left, 24px));
  padding-right: max(24px, env(safe-area-inset-right, 24px));
}

.mobile-menu a:hover,
.mobile-menu a:focus {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

.mobile-menu-theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  font-family: inherit;
  position: relative;
  -webkit-tap-highlight-color: rgba(var(--primary-rgb), 0.1);
  touch-action: manipulation;
  user-select: none;
  /* Thumb-friendly spacing */
  padding-left: max(24px, env(safe-area-inset-left, 24px));
  padding-right: max(24px, env(safe-area-inset-right, 24px));
}

.mobile-menu-theme-toggle:hover,
.mobile-menu-theme-toggle:focus {
  background: var(--surface-elevated);
  color: var(--text-primary);
  outline: none;
}

.mobile-menu-theme-toggle svg {
  position: absolute;
  left: 24px;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 20px;
  height: 20px;
}

.mobile-menu-theme-toggle .theme-icon-light {
  opacity: 0;
  transform: rotate(-180deg) scale(0.8);
}

.mobile-menu-theme-toggle .theme-icon-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

body.theme-light .mobile-menu-theme-toggle .theme-icon-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

body.theme-light .mobile-menu-theme-toggle .theme-icon-dark {
  opacity: 0;
  transform: rotate(180deg) scale(0.8);
}

.mobile-menu-theme-toggle span {
  margin-left: 40px;
}

@media (max-width: 480px) {
  .mobile-menu-theme-toggle {
    padding: 16px 20px;
  }

  .mobile-menu-theme-toggle svg {
    left: 20px;
  }

  .mobile-menu-theme-toggle span {
    margin-left: 36px;
  }
}

.mobile-menu-social {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
  justify-content: center;
  align-items: center;
  background: var(--surface-elevated);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  min-height: 80px;
}

.mobile-social-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all var(--transition-fast);
  color: var(--text-primary);
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: rgba(var(--primary-rgb), 0.1);
  touch-action: manipulation;
  user-select: none;
}

.mobile-social-link svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
}

.mobile-social-link svg path {
  fill: currentColor;
}

.mobile-social-link:not(.mobile-linkedin) {
  color: var(--text-primary);
}

.mobile-social-link:not(.mobile-linkedin) svg,
.mobile-social-link:not(.mobile-linkedin) svg path {
  color: var(--text-primary);
  fill: var(--text-primary);
}

.mobile-social-link:hover,
.mobile-social-link:focus {
  border-color: var(--primary);
  color: var(--text-primary);
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15);
  transform: translateY(-1px);
  outline: none;
}

.mobile-social-link:hover:not(.mobile-linkedin) svg,
.mobile-social-link:focus:not(.mobile-linkedin) svg,
.mobile-social-link:hover:not(.mobile-linkedin) svg path,
.mobile-social-link:focus:not(.mobile-linkedin) svg path {
  color: var(--text-primary);
  fill: var(--text-primary);
}

.mobile-social-link.mobile-linkedin {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
  border-color: rgba(0, 119, 181, 0.5);
  color: white;
}

.mobile-social-link.mobile-linkedin svg {
  color: white;
}

.mobile-social-link.mobile-linkedin svg path {
  fill: white !important;
  color: white;
}

.mobile-social-link.mobile-linkedin:hover,
.mobile-social-link.mobile-linkedin:focus {
  background: linear-gradient(135deg, #0088cc 0%, #0066aa 100%);
  border-color: #0077b5;
  box-shadow: 0 0 20px rgba(0, 119, 181, 0.4);
  color: white;
}

.mobile-social-link.mobile-linkedin:hover svg,
.mobile-social-link.mobile-linkedin:focus svg {
  color: white;
}

.mobile-social-link.mobile-linkedin:hover svg path,
.mobile-social-link.mobile-linkedin:focus svg path {
  fill: white !important;
  color: white;
}

.mobile-menu a.mobile-app-link {
  color: #fff;
  font-weight: 700;
  border-bottom: none;
  margin-top: 8px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #0d9668 0%, #0891b2 100%);
  border: 2px solid rgba(0, 255, 136, 0.5);
  border-radius: 10px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
  font-size: 1rem;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

/* ================================ */
/* Hero Section */
/* ================================ */

.hero {
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  overflow: visible;
  position: relative;
  padding: calc(var(--nav-height) + 40px) 24px var(--section-padding);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.hero-bg,
.hero-grid {
  display: none;
}

.hero-content {
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

.badge-container {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
}

.badge-secondary {
  background: rgba(var(--secondary-rgb), 0.1);
  border-color: rgba(var(--secondary-rgb), 0.3);
  color: var(--secondary);
}

.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}

/* Enterprise feel: monochrome headline, no shimmer.
   `.gradient-text` (the marquee word) gets a subtle teal tone.
   `.gradient-text-secondary` (the supporting phrase) stays neutral. */
.gradient-text {
  color: var(--primary);
}

.gradient-text-secondary {
  color: var(--text-primary);
}

.hero-description {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: 24px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-dark) 100%
  );
  color: var(--background);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow:
    0 0 30px rgba(var(--primary-rgb), 0.4),
    0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  /* Better touch feedback */
  -webkit-touch-callout: none;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 50px rgba(var(--primary-rgb), 0.6),
    0 8px 30px rgba(0, 0, 0, 0.4);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-touch-callout: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.btn-secondary:hover {
  border-color: var(--border-hover);
  background: var(--surface-overlay);
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-mono);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Hero Visual */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: fadeInScale 1s ease-out 0.2s both;
  overflow: visible;
  padding: 20px;
}

.hero-illustration {
  position: relative;
  width: 400px;
  height: 400px;
}

.illustration-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: pulse 4s ease-in-out infinite;
}

.ring-1 {
  inset: 0;
  border-color: rgba(var(--primary-rgb), 0.3);
  animation-delay: 0s;
}

.ring-2 {
  inset: 40px;
  border-color: rgba(var(--secondary-rgb), 0.2);
  animation-delay: 0.5s;
}

.ring-3 {
  inset: 80px;
  border-color: rgba(var(--primary-rgb), 0.15);
  animation-delay: 1s;
}

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

.illustration-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-icon {
  color: var(--primary);
}

.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  animation: float 6s ease-in-out infinite;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.card-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.card-icon.success {
  background: var(--cyber-green);
  box-shadow: 0 0 10px var(--cyber-green);
}

.card-icon.warning {
  background: var(--cyber-yellow);
  box-shadow: 0 0 10px var(--cyber-yellow);
}

.card-icon.primary {
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}

.card-icon.accent {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.card-1 {
  top: 20%;
  right: -20px;
  animation-delay: 0s;
}

.card-2 {
  bottom: 30%;
  left: -30px;
  animation-delay: 1s;
}

.card-3 {
  bottom: 10%;
  right: 10%;
  animation-delay: 2s;
}

.card-4 {
  top: 50%;
  left: 10%;
  animation-delay: 1.5s;
}

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

/* ================================ */
/* Section Styles - Consistent Design System */
/* ================================ */

.section-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--primary);
  margin-bottom: 16px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4);
  position: relative;
}

.section-tag::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 2px;
  opacity: 0.8;
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
}

.section-header .section-tag {
  padding-left: 16px;
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

.section-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ================================ */
/* Unified Card System - Symmetric Design */
/* ================================ */

.card-base {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-base::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0) 0%,
    rgba(var(--primary-rgb), 0.05) 100%
  );
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.card-base:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.card-base:hover::before {
  opacity: 1;
}

/* Card Icon Variants */
.card-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.card-icon-box.primary {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.card-icon-box.secondary {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}

.card-icon-box.success {
  background: rgba(0, 255, 136, 0.1);
  color: var(--cyber-green);
}

.card-icon-box.warning {
  background: rgba(240, 255, 0, 0.1);
  color: var(--cyber-yellow);
}

.card-icon-box.accent {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent-purple);
}

/* ================================ */
/* What Is Section */
/* ================================ */

.what-is {
  padding: var(--section-padding) 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.what-is-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.what-is-text h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin-bottom: 16px;
  line-height: 1.2;
}

.lead-text {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.7;
}

.what-is-text p {
  color: var(--text-secondary);
  line-height: 1.8;
}

.what-is-highlights {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.highlight {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.highlight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.highlight:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  transform: translateX(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.highlight:hover::before {
  opacity: 1;
}

.highlight-icon {
  width: 48px;
  height: 48px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.highlight h4 {
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.highlight p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ================================ */
/* Cloud vFS Section */
/* ================================ */

.cloud-vfs {
  padding: var(--section-padding) 0;
  background: linear-gradient(
    180deg,
    var(--background) 0%,
    var(--surface) 50%,
    var(--background) 100%
  );
  position: relative;
  overflow: hidden;
}

.cloud-vfs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--primary-rgb), 0.5) 50%,
    transparent 100%
  );
  opacity: 0.3;
}

.vfs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.vfs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 20px;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vfs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0) 0%,
    rgba(var(--primary-rgb), 0.05) 100%
  );
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.vfs-card:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.vfs-card:hover::before {
  opacity: 1;
}

.vfs-card.vfs-primary {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.05) 0%,
    var(--surface) 100%
  );
  box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.1);
}

.vfs-icon {
  width: 40px;
  height: 40px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.vfs-icon-secondary {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}

.vfs-icon-success {
  background: rgba(0, 255, 136, 0.1);
  color: var(--cyber-green);
}

.vfs-icon-accent {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent-purple);
}

.vfs-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.vfs-card > p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  flex-grow: 1;
}

.vfs-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.vfs-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.vfs-features li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* VFS Diagram */
.vfs-diagram {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 40px;
  position: relative;
  z-index: 1;
}

.diagram-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.diagram-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.diagram-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.flow-box {
  padding: 14px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  min-width: 140px;
  transition: all var(--transition-smooth);
}

.flow-app {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.05);
  color: var(--primary);
}

.flow-vfs {
  border-color: rgba(var(--secondary-rgb), 0.3);
  background: rgba(var(--secondary-rgb), 0.05);
  color: var(--secondary);
}

.flow-storage {
  border-color: rgba(61, 90, 241, 0.3);
  background: rgba(61, 90, 241, 0.05);
  color: var(--accent-cool);
  font-size: 0.8rem;
  min-width: 100px;
}

.flow-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.flow-arrow {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--border) 0%, var(--primary) 100%);
  position: relative;
  flex-shrink: 0;
}

.flow-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--primary);
}

.diagram-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 8px;
}

/* ================================ */
/* Features Section */
/* ================================ */

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

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 2-column equal-size feature grid */
.features-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.features-grid-2 .feature-card {
  min-height: 320px;
}

/* 3-column equal-size feature grid */
.features-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.features-grid-3 .feature-card {
  min-height: 320px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 20px;
  transition: all var(--transition-smooth);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.feature-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(var(--primary-rgb), 0.1);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-large {
  grid-column: span 2;
  grid-row: span 2;
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 12px;
  flex-shrink: 0;
}

.feature-icon-secondary {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}

.feature-icon-success {
  background: rgba(0, 255, 136, 0.1);
  color: var(--cyber-green);
}

.feature-icon-warning {
  background: rgba(240, 255, 0, 0.1);
  color: var(--cyber-yellow);
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.feature-description {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
  flex-grow: 1;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.feature-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Feature Visual - Role Demo */
.feature-visual {
  margin-top: 24px;
}

.role-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.role-badge {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.role-badge.admin {
  background: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
}

.role-badge.operator {
  background: rgba(var(--secondary-rgb), 0.2);
  color: var(--secondary);
}

.role-badge.viewer {
  background: rgba(0, 255, 136, 0.2);
  color: var(--cyber-green);
}

.role-perms {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ================================ */
/* IAM & Security Section */
/* ================================ */

.security-section {
  padding: var(--section-padding) 0;
  background: linear-gradient(
    180deg,
    var(--background) 0%,
    var(--surface) 100%
  );
  position: relative;
  overflow: hidden;
}

.security-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--primary) 50%,
    transparent 100%
  );
  opacity: 0.3;
}

.iam-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.iam-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 20px;
  transition: all var(--transition-smooth);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.iam-card:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.iam-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.15) 0%,
    rgba(var(--primary-rgb), 0.05) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

.iam-icon-accent {
  background: linear-gradient(
    135deg,
    rgba(var(--secondary-rgb), 0.15) 0%,
    rgba(var(--secondary-rgb), 0.05) 100%
  );
  color: var(--secondary);
}

.iam-icon-success {
  background: linear-gradient(
    135deg,
    rgba(var(--success-rgb), 0.15) 0%,
    rgba(var(--success-rgb), 0.05) 100%
  );
  color: var(--success);
}

.iam-icon-warning {
  background: linear-gradient(
    135deg,
    rgba(var(--warning-rgb), 0.15) 0%,
    rgba(var(--warning-rgb), 0.05) 100%
  );
  color: var(--warning);
}

.iam-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.iam-card > p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.iam-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.iam-tag {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  padding: 4px 10px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  border-radius: 4px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.iam-visual {
  display: flex;
  justify-content: center;
}

.iam-diagram {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  max-width: 700px;
  width: 100%;
}

.iam-diagram-header {
  padding: 16px 24px;
  background: rgba(var(--primary-rgb), 0.05);
  border-bottom: 1px solid var(--border);
}

.iam-diagram-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.iam-diagram-content {
  padding: 32px;
}

.iam-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.iam-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 120px;
}

.iam-flow-node svg {
  color: var(--text-muted);
}

.iam-flow-node span {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.iam-flow-user {
  border-color: rgba(var(--primary-rgb), 0.3);
}

.iam-flow-user svg {
  color: var(--primary);
}

.iam-flow-check {
  border-color: rgba(var(--warning-rgb), 0.3);
  background: rgba(var(--warning-rgb), 0.05);
}

.iam-flow-check svg {
  color: var(--warning);
}

.iam-flow-result {
  border-color: rgba(var(--success-rgb), 0.3);
  background: rgba(var(--success-rgb), 0.05);
}

.iam-flow-result svg {
  color: var(--success);
}

.iam-flow-arrow {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--border) 0%, var(--primary) 100%);
  position: relative;
  flex-shrink: 0;
}

.iam-flow-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--primary);
}

.iam-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.iam-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.iam-check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.iam-check-icon.check-pass {
  background: rgba(var(--success-rgb), 0.2);
  border: 2px solid var(--success);
}

.iam-check-icon.check-pass::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
}

/* ================================ */
/* How It Works Section */
/* ================================ */

.how-it-works {
  padding: var(--section-padding) 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.steps-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.step-card {
  padding: 32px 24px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  text-align: center;
  transition: all var(--transition-smooth);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Add connector line between cards */
.step-card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 50%;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.step-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  transform: translateY(-4px);
}

.step-number {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}

.step-card h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex-grow: 1;
}

/* Hide old connectors */
.step-connector {
  display: none;
}

/* ================================ */
/* Deployment Section */
/* ================================ */

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

.cloud-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.cloud-card {
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  text-align: center;
  transition: all var(--transition-smooth);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cloud-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  transform: translateY(-4px);
}

.cloud-icon {
  color: var(--primary);
  margin-bottom: 16px;
}

.cloud-card h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.cloud-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.deployment-features {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.deploy-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.deploy-feature svg {
  color: var(--cyber-green);
  flex-shrink: 0;
}

/* ================================ */
/* Try the App Section */
/* ================================ */

.try-app {
  padding: var(--section-padding) 0;
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.try-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 50% at 20% 50%,
      rgba(var(--primary-rgb), 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 40% at 80% 60%,
      rgba(var(--secondary-rgb), 0.05) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.try-app-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.try-app-content .section-tag {
  margin-bottom: 16px;
}

.try-app-content .section-title {
  text-align: left;
  margin-bottom: 20px;
}

.try-app-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 480px;
}

.try-app-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.try-app-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.try-app-feature svg {
  color: var(--cyber-green);
  flex-shrink: 0;
}

.try-app-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #0d9668 0%, #0891b2 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 12px;
  border: 2px solid rgba(0, 255, 136, 0.5);
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow:
    0 0 25px rgba(0, 255, 136, 0.4),
    0 4px 20px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-launch:hover {
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  border-color: rgba(0, 255, 136, 0.8);
  transform: translateY(-2px);
  box-shadow:
    0 0 40px rgba(0, 255, 136, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.4);
}

.btn-launch svg {
  stroke: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* App Preview Visual */
.try-app-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-preview {
  width: 100%;
  max-width: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(var(--primary-rgb), 0.1);
  position: relative;
  z-index: 1;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
}

.preview-dots {
  display: flex;
  gap: 6px;
}

.preview-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
}

.preview-dots span:first-child {
  background: #ff5f57;
  border-color: #e0443e;
}

.preview-dots span:nth-child(2) {
  background: #febc2e;
  border-color: #d4a121;
}

.preview-dots span:last-child {
  background: #28c840;
  border-color: #1aab29;
}

.preview-url {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--surface);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.preview-content {
  display: flex;
  min-height: 260px;
}

.preview-sidebar {
  width: 60px;
  background: var(--surface-elevated);
  border-right: 1px solid var(--border-subtle);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-nav-item {
  height: 36px;
  background: var(--surface-overlay);
  border-radius: 8px;
  opacity: 0.4;
}

.preview-nav-item.active {
  background: rgba(var(--primary-rgb), 0.2);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  opacity: 1;
}

.preview-main {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.preview-stat-card {
  height: 70px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.preview-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0.6;
}

.preview-table {
  flex: 1;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-table-row {
  height: 32px;
  background: var(--surface-overlay);
  border-radius: 6px;
  opacity: 0.5;
}

.preview-table-row:first-child {
  opacity: 0.8;
}

.app-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(var(--secondary-rgb), 0.15) 0%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* ================================ */
/* Integrations Section */
/* ================================ */

.integrations {
  padding: var(--section-padding) 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.integrations::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 40% 30% at 10% 20%,
      rgba(153, 153, 255, 0.06) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 40% at 90% 80%,
      rgba(var(--secondary-rgb), 0.04) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.integrations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* Featured Integration Card (Adobe Premiere) */
.integration-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.integration-card:hover {
  border-color: rgba(153, 153, 255, 0.4);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(153, 153, 255, 0.1);
}

.integration-featured {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
}

.integration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.integration-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00005b 0%, #1a1a5c 100%);
  flex-shrink: 0;
}

.integration-logo.adobe-premiere {
  background: linear-gradient(135deg, #00005b 0%, #2a2a7a 100%);
  box-shadow: 0 8px 24px rgba(153, 153, 255, 0.2);
}

.integration-logo.davinci {
  background: linear-gradient(135deg, #ff5c00 0%, #ff8800 100%);
}

.integration-logo.aftereffects {
  background: linear-gradient(135deg, #00005b 0%, #2a2a7a 100%);
}

.integration-logo.vscode {
  background: linear-gradient(135deg, #0078d4 0%, #00a2ed 100%);
  color: #fff;
}

.integration-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.integration-badge {
  padding: 5px 12px;
  background: rgba(153, 153, 255, 0.15);
  border: 1px solid rgba(153, 153, 255, 0.3);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9999ff;
}

.integration-badge.badge-new {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.4);
  color: #00ff88;
}

.integration-content {
  padding: 32px;
}

.integration-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #9999ff 0%, #cc99ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.integration-description {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
  font-size: 1rem;
}

.integration-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.int-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.int-feature-icon {
  width: 36px;
  height: 36px;
  background: rgba(153, 153, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9999ff;
  flex-shrink: 0;
}

.int-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.int-feature-text strong {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
}

.int-feature-text span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.integration-code-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.integration-code-preview .code-header {
  background: var(--surface-overlay);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.integration-code-preview .code-body {
  padding: 16px;
}

.integration-code-preview .code-body code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre;
  display: block;
}

.integration-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-integration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #9999ff 0%, #7777dd 100%);
  color: #000;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 10px;
  transition: all var(--transition-smooth);
  box-shadow: 0 0 24px rgba(153, 153, 255, 0.3);
}

.btn-integration:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(153, 153, 255, 0.5);
}

.btn-integration svg {
  stroke: #000;
}

.btn-secondary-sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 10px;
  transition: all var(--transition-smooth);
}

.btn-secondary-sm:hover {
  border-color: var(--border-hover);
  background: var(--surface);
}

/* Premiere Pro Mockup Visual */
.integration-visual {
  background: linear-gradient(135deg, #1a1a2a 0%, #0f0f1a 100%);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border-subtle);
}

.premiere-mockup {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mockup-timeline {
  background: #0d0d18;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-track {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}

.track-label {
  width: 24px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

.track-clip {
  height: 24px;
  border-radius: 4px;
  flex: 1;
}

.track-video .track-clip {
  background: linear-gradient(90deg, #4a4a8a, #6a6aaa);
}

.clip-1 {
  flex: 2;
}
.clip-2 {
  flex: 1.5;
  background: linear-gradient(90deg, #5a5a9a, #7a7abb) !important;
}
.clip-3 {
  flex: 1;
  background: linear-gradient(90deg, #6a6aaa, #8a8acc) !important;
}

.track-audio .audio-waveform {
  flex: 1;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 136, 0.4) 2px,
    rgba(0, 255, 136, 0.4) 3px
  );
  border-radius: 2px;
}

.track-captions .caption-block {
  flex: 0 0 auto;
  padding: 4px 12px;
  background: rgba(153, 153, 255, 0.2);
  border: 1px solid rgba(153, 153, 255, 0.4);
  border-radius: 4px;
  font-size: 0.65rem;
  color: #9999ff;
  font-weight: 500;
}

.diaspor-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
}

.panel-logo {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--background);
}

.panel-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: auto;
}

.panel-status.connected {
  background: var(--cyber-green);
  box-shadow: 0 0 8px var(--cyber-green);
  animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.panel-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.panel-action:last-child {
  border-bottom: none;
}

.panel-action:hover {
  background: rgba(var(--primary-rgb), 0.05);
}

.panel-action.active {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.panel-action .action-icon {
  width: 16px;
  height: 16px;
  background: var(--surface-overlay);
  border-radius: 4px;
}

.panel-action.active .action-icon {
  background: rgba(var(--primary-rgb), 0.2);
}

/* Coming Soon Integration Cards */
.integration-coming {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.integration-coming .integration-header {
  padding: 0;
}

.integration-coming .integration-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}

.integration-coming .integration-content {
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.integration-coming .integration-title {
  font-size: 1.2rem;
  margin-bottom: 8px;
  background: none;
  -webkit-text-fill-color: var(--text-primary);
}

.integration-coming .integration-description {
  font-size: 0.9rem;
  margin-bottom: 12px;
  flex-grow: 1;
}

.coming-soon-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(74, 74, 90, 0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: auto;
  width: fit-content;
}

.integration-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding: 24px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.integration-cta p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ================================ */
/* Getting Started Section */
/* ================================ */

.getting-started {
  padding: var(--section-padding) 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.quick-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.quick-start-code {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.code-header {
  padding: 12px 20px;
  background: var(--surface-overlay);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.code-body {
  padding: 24px;
  overflow-x: auto;
}

.code-body code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre;
  display: block;
}

.code-body.open-source-benefits {
  padding: 28px;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.benefits-list li:last-child {
  border-bottom: none;
}

.benefits-list li::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background: var(--primary);
  border-radius: 50%;
}

.benefits-list li strong {
  color: var(--text-primary);
}

.code-comment {
  color: var(--text-dim);
}

.quick-start-info h3 {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.quick-start-info p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.7;
}

.quick-start-info ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.quick-start-info li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.quick-start-info li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================ */
/* CTA Section */
/* ================================ */

.cta {
  padding: var(--section-padding) 0;
  background:
    linear-gradient(
      135deg,
      rgba(var(--primary-rgb), 0.08) 0%,
      rgba(var(--secondary-rgb), 0.08) 100%
    ),
    var(--background);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(var(--primary-rgb), 0.15) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.cta-content {
  text-align: center;
}

.cta-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  margin-bottom: 12px;
}

.cta-content p {
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 1.1rem;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ================================ */
/* Footer */
/* ================================ */

.footer {
  padding: 60px 0 40px;
  background: var(--background-subtle);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  color: var(--text-muted);
  margin-top: 12px;
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 80px;
}

.footer-column h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.footer-column a {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--primary);
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  position: relative;
}

.footer-bottom p {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  opacity: 0.3;
  color: var(--text-dim);
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
  text-decoration: none;
}

.footer-linkedin:hover {
  opacity: 0.6;
  color: var(--text-secondary);
}

.footer-linkedin svg {
  width: 14px;
  height: 14px;
}

/* ================================ */
/* Responsive - Symmetric Grids */
/* ================================ */

/* Large tablets and small laptops */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --section-padding: 56px;
    --card-padding: 20px;
    --grid-gap: 24px;
    --element-gap: 16px;
  }

  /* Show mobile menu button on tablets */
  .mobile-menu-btn {
    display: flex;
  }

  /* Optimize container padding for tablets */
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Better section spacing */
  .section,
  .what-is,
  .features,
  .product-section,
  .open-source-section,
  .download-section,
  .getting-started,
  .cta {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }

  /* Hide theme toggle in header on tablets - it's in the mobile menu */
  .nav-links .theme-toggle-btn {
    display: none !important;
  }

  /* Hide social icons in header on tablets - they're in the mobile menu */
  .nav-social-icons {
    display: none !important;
  }

  /* Hide nav links on tablets - they're in the mobile menu */
  .nav-links a:not(.btn-nav-icon) {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-visual {
    order: 0;
  }
  .hero-content {
    order: 1;
  }

  .hero-visual {
    padding: 30px 20px;
    overflow: visible;
  }

  .hero-illustration {
    width: 300px;
    height: 300px;
  }

  /* Ensure floating cards are visible on tablets */
  .floating-card {
    display: flex;
    font-size: 0.75rem;
    padding: 9px 14px;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
    gap: var(--element-gap);
    margin-top: 24px;
  }
  .hero-stats {
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
  }
  .badge-container {
    justify-content: center;
    margin-bottom: 20px;
  }

  /* Better grid gaps */
  .features-grid,
  .features-grid-2,
  .features-grid-3,
  .product-features-grid {
    gap: var(--grid-gap);
  }

  /* Improved card spacing */
  .feature-card,
  .product-feature-card {
    padding: var(--card-padding);
  }

  .what-is-content {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  /* Center what-is section title and tag on mobile */
  .what-is-text {
    text-align: center;
  }

  .what-is-text .section-tag {
    display: inline-block;
    text-align: center;
    padding-left: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .what-is-text .section-title {
    text-align: center;
  }

  /* 2-column grids on tablets */
  .features-grid,
  .vfs-grid,
  .iam-grid,
  .cloud-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid-2,
  .features-grid-3 {
    grid-template-columns: 1fr;
  }

  .features-grid-2 .feature-card,
  .features-grid-3 .feature-card {
    min-height: auto;
  }

  .feature-large {
    grid-column: span 2;
    grid-row: span 1;
  }

  /* Steps become 2x2 grid */
  .steps-visual {
    grid-template-columns: repeat(2, 1fr);
  }

  .step-card:not(:last-child)::after {
    display: none;
  }

  .quick-start {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .try-app-container {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .try-app-content .section-title {
    text-align: center;
  }
  .try-app-description {
    margin-left: auto;
    margin-right: auto;
  }
  .try-app-features {
    align-items: center;
  }
  .try-app-actions {
    justify-content: center;
  }
  .app-preview {
    max-width: 420px;
  }

  /* Integration responsive */
  .integration-featured {
    grid-template-columns: 1fr;
  }

  .integration-visual {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding: 32px 24px;
  }

  .integration-features {
    grid-template-columns: 1fr;
  }

  .integrations-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .integrations-grid > .integration-featured {
    grid-column: 1 / -1;
  }
}

/* Tablets */
@media (max-width: 768px) {
  :root {
    --section-padding: 48px;
    --card-padding: 18px;
    --grid-gap: 20px;
    --element-gap: 16px;
    --nav-height: 90px;
  }

  /* Improved touch targets for tablets */
  button,
  a,
  .btn-primary,
  .btn-secondary,
  .btn-nav-icon,
  .copy-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better typography scaling */
  .hero-title {
    font-size: 2rem;
    line-height: 1.25;
  }

  .section-title {
    font-size: 1.875rem;
    line-height: 1.3;
  }

  /* Improved spacing */
  .container {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Optimize section spacing */
  .section,
  .what-is,
  .features,
  .product-section,
  .open-source-section,
  .download-section,
  .getting-started,
  .cta {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }

  /* Add left/right margins to product-section on tablets */
  .product-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Better grid gaps */
  .features-grid,
  .features-grid-2,
  .features-grid-3,
  .product-features-grid {
    gap: var(--grid-gap);
  }

  /* Hide product features grid (search and metrics screenshots) on mobile/tablet */
  .product-features-grid {
    display: none !important;
  }

  /* Ensure main screenshot shows dark mode on mobile/tablet */
  .main-screenshot .screenshot-image-wrapper .screenshot-dark {
    opacity: 1 !important;
    transform: scale(1) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .main-screenshot .screenshot-image-wrapper .screenshot-light {
    opacity: 0 !important;
    position: absolute !important;
  }

  /* Improved card spacing */
  .feature-card,
  .product-feature-card,
  .download-card {
    margin-bottom: 0;
  }

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

  /* Hide all nav links and buttons on mobile - they're in the mobile menu */
  .nav-links a:not(.btn-nav-icon) {
    display: none;
  }

  /* Hide theme toggle button in header on mobile - it's in the mobile menu */
  .nav-links .theme-toggle-btn {
    display: none !important;
  }

  /* Hide social icons on mobile - they're in the mobile menu */
  .nav-social-icons {
    display: none !important;
  }

  .btn-nav-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .btn-nav-icon svg {
    width: 18px;
    height: 18px;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .hero {
    padding-top: calc(var(--nav-height) + 40px);
    padding-left: max(20px, env(safe-area-inset-left, 20px));
    padding-right: max(20px, env(safe-area-inset-right, 20px));
    min-height: auto;
    overflow: visible;
    max-width: 100%;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  /* Better text spacing for tablets */
  .section-description {
    line-height: 1.7;
  }

  p {
    line-height: 1.7;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: auto;
    min-width: 130px;
    justify-content: center;
    flex: 0 1 auto;
  }

  .hero-visual {
    padding: 30px 20px;
    overflow: visible;
  }

  .hero-illustration {
    width: 320px;
    height: 320px;
    max-width: 85vw;
    max-height: 85vw;
  }

  /* Show floating cards on mobile with adjusted positioning */
  .floating-card {
    display: flex;
    font-size: 0.7rem;
    padding: 8px 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  }

  .card-1 {
    top: 15%;
    right: -10px;
  }

  .card-2 {
    bottom: 25%;
    left: -15px;
  }

  .card-3 {
    bottom: 8%;
    right: 5%;
  }

  .card-4 {
    top: 45%;
    left: 5%;
  }

  .hero-stats {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 36px;
    padding-top: 28px;
  }

  .stat {
    min-width: 120px;
    text-align: center;
    padding: 8px 0;
  }

  .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
  }

  .stat-label {
    font-size: 0.95rem;
    font-weight: 500;
  }

  .stat-divider {
    width: 50px;
    height: 2px;
  }

  .product-showcase {
    gap: 40px;
  }

  .product-features-grid {
    grid-template-columns: 1fr;
    gap: var(--grid-gap);
  }

  .product-screenshot {
    gap: 20px;
  }

  /* Single column on mobile - force all grids to single column.
     .download-grid intentionally excluded: it uses repeat(auto-fit, minmax(240px, 1fr))
     so the browser stacks naturally below ~480px, but fits 2-3 cards at tablet width. */
  .hero,
  .what-is-content,
  .try-app-container,
  .quick-start,
  .product-features-grid,
  .integration-featured,
  .integration-features,
  .features-grid,
  .vfs-grid,
  .iam-grid,
  .cloud-grid,
  .features-grid-2,
  .features-grid-3,
  .steps-visual,
  .integrations-grid,
  .install-notes-grid,
  .footer-content,
  .footer-links {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* Force flex containers to column on mobile */
  .footer-content,
  .footer-links,
  .integration-header {
    flex-direction: column !important;
  }

  /* Ensure all sections are full width */
  .section,
  .hero,
  .product-showcase,
  .what-is,
  .try-app,
  .quick-start-section,
  .cta,
  .footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .feature-large {
    grid-column: span 1 !important;
  }

  /* Ensure integration featured spans full width */
  .integrations-grid > .integration-featured {
    grid-column: 1 / -1 !important;
  }

  /* Force footer to single column */
  .footer-content,
  .footer-links {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .footer-links {
    gap: 32px !important;
  }

  .integration-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Ensure all sections are full width and no overflow */
  .section,
  .hero,
  .product-showcase,
  .what-is,
  .try-app,
  .quick-start-section,
  .cta,
  .footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
  }

  .integration-content {
    padding: 20px;
  }
  .integration-title {
    font-size: 1.4rem;
  }

  .integration-actions {
    flex-direction: column;
  }

  .btn-integration,
  .btn-secondary-sm {
    width: 100%;
    justify-content: center;
  }

  .integration-cta {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  /* Diagram responsive */
  .diagram-flow {
    flex-direction: column;
    gap: 16px;
  }

  .flow-group {
    flex-direction: column;
  }

  .flow-arrow {
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, var(--border) 0%, var(--primary) 100%);
  }

  .flow-arrow::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(50%);
    border: 5px solid transparent;
    border-top-color: var(--primary);
    border-left-color: transparent;
  }

  /* IAM flow responsive */
  .iam-flow {
    flex-direction: column;
  }

  .iam-flow-arrow {
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, var(--border) 0%, var(--primary) 100%);
  }

  .iam-flow-arrow::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(50%);
    border: 5px solid transparent;
    border-top-color: var(--primary);
    border-left-color: transparent;
  }

  .deployment-features {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .footer-content {
    flex-direction: column;
    gap: 40px;
  }

  .footer-links {
    flex-direction: column;
    gap: 32px;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  :root {
    --card-padding: 16px;
    --section-padding: 40px;
    --nav-height: 90px;
    --grid-gap: 16px;
    --element-gap: 12px;
  }

  /* Force single column on all grids for mobile.
     .download-grid intentionally excluded: auto-fit handles the stacking. */
  .hero,
  .what-is-content,
  .try-app-container,
  .quick-start,
  .product-features-grid,
  .integration-featured,
  .integration-features,
  .features-grid,
  .vfs-grid,
  .iam-grid,
  .cloud-grid,
  .features-grid-2,
  .features-grid-3,
  .steps-visual,
  .integrations-grid,
  .install-notes-grid {
    grid-template-columns: 1fr !important;
  }

  .feature-large {
    grid-column: span 1 !important;
  }

  /* Ensure integration featured spans full width */
  .integrations-grid > .integration-featured {
    grid-column: 1 / -1 !important;
  }

  /* Improved typography for mobile */
  html {
    font-size: 16px;
  }

  .hero-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  /* Hide theme toggle button in header on mobile */
  .nav-links .theme-toggle-btn {
    display: none !important;
  }

  /* Social icons are hidden on mobile - they're in the mobile menu */
  .nav-social-icons {
    display: none !important;
  }

  /* Ensure mobile menu social icons are visible and properly styled */
  .mobile-menu-social {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 24px max(20px, env(safe-area-inset-left, 20px))
      max(24px, env(safe-area-inset-bottom, 24px))
      max(20px, env(safe-area-inset-right, 20px));
    min-height: 90px;
    gap: 16px;
  }

  .mobile-social-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 12px !important;
  }

  .mobile-social-link svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
  }

  .mobile-social-link.mobile-linkedin {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #0077b5 0%, #005582 100%) !important;
    border-color: rgba(0, 119, 181, 0.5) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3) !important;
  }

  .mobile-social-link.mobile-linkedin svg,
  .mobile-social-link.mobile-linkedin svg path {
    fill: white !important;
    color: white !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure mobile menu takes full height and shows all content */
  .mobile-menu {
    bottom: 0 !important;
    display: none;
    flex-direction: column;
  }

  .mobile-menu.active {
    display: flex !important;
  }

  .mobile-menu a {
    font-size: 1.1rem;
    padding: 18px 24px;
    min-height: 56px;
  }

  .mobile-menu-theme-toggle {
    font-size: 1.1rem;
    padding: 18px 24px;
    min-height: 56px;
  }

  .btn-nav-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  /* Bigger logo on mobile */
  .logo-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  /* Better text spacing */
  p {
    line-height: 1.7;
    margin-bottom: 16px;
  }

  h2,
  h3,
  h4 {
    line-height: 1.3;
    margin-bottom: 12px;
  }

  /* Improved section descriptions */
  .section-description {
    line-height: 1.7;
    margin-bottom: 0;
  }

  /* Improved margins for hero section on mobile */
  .hero {
    padding-top: calc(var(--nav-height) + 20px);
    padding-bottom: var(--section-padding);
    padding-left: max(20px, env(safe-area-inset-left, 20px));
    padding-right: max(20px, env(safe-area-inset-right, 20px));
    margin-bottom: 0;
    max-width: 100%;
  }

  .hero-content {
    padding: 0;
    margin-top: 40px;
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-title {
    text-align: center;
    width: 100%;
  }

  .hero-description {
    text-align: center;
    width: 100%;
  }

  .badge-container {
    justify-content: center;
    width: 100%;
  }

  .hero-actions {
    justify-content: center;
    width: 100%;
  }

  .hero-stats {
    justify-content: center;
    width: 100%;
  }

  /* Optimize section spacing for mobile */
  .section,
  .what-is,
  .features,
  .product-section,
  .open-source-section,
  .download-section,
  .getting-started,
  .cta {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }

  /* Ensure what-is section has proper container margins */
  .what-is .container {
    padding-left: max(20px, env(safe-area-inset-left, 20px));
    padding-right: max(20px, env(safe-area-inset-right, 20px));
  }

  /* Add left/right margins to product-section on mobile */
  .product-section {
    padding-left: max(20px, env(safe-area-inset-left, 20px));
    padding-right: max(20px, env(safe-area-inset-right, 20px));
  }

  /* Better section header spacing */
  .section-header {
    margin-bottom: 32px;
  }

  .section-title {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  /* Touch-friendly buttons - minimum 44x44px */
  .btn-primary,
  .btn-secondary,
  .btn-launch,
  .btn-nav-icon,
  .mobile-menu-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
  }

  .mobile-menu-btn {
    padding: 10px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--element-gap);
    margin-top: 24px;
  }

  .btn-primary,
  .btn-secondary,
  .btn-launch {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
  }

  .cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .cta-actions .btn-primary,
  .cta-actions .btn-secondary {
    width: auto;
    min-width: 130px;
  }

  .highlight {
    flex-direction: row;
    text-align: left;
    gap: 12px;
    padding: 14px 16px;
  }

  .try-app-actions {
    flex-direction: column;
    width: 100%;
  }

  .preview-card-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .preview-stat-card {
    height: 50px;
  }
  .preview-content {
    min-height: 200px;
  }

  /* Better spacing for mobile */
  .container {
    padding-left: max(20px, env(safe-area-inset-left, 20px));
    padding-right: max(20px, env(safe-area-inset-right, 20px));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Optimize grid gaps for mobile */
  .features-grid,
  .features-grid-2,
  .features-grid-3,
  .product-features-grid,
  .download-options {
    gap: var(--grid-gap);
  }

  /* Hide product features grid (search and metrics screenshots) on mobile */
  .product-features-grid {
    display: none !important;
  }

  /* Ensure main screenshot shows dark mode on mobile */
  .main-screenshot .screenshot-image-wrapper .screenshot-dark {
    opacity: 1 !important;
    transform: scale(1) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .main-screenshot .screenshot-image-wrapper .screenshot-light {
    opacity: 0 !important;
    position: absolute !important;
  }

  /* Better card spacing */
  .feature-card,
  .product-feature-card {
    padding: var(--card-padding);
    margin-bottom: 0;
  }

  /* Improved element spacing */
  .hero-stats {
    margin-top: 32px;
    padding-top: 24px;
  }

  .badge-container {
    margin-bottom: 20px;
  }

  .hero-description {
    margin-bottom: 24px;
  }

  /* Improved card spacing */
  .feature-card,
  .product-feature-card {
    padding: var(--card-padding);
  }

  /* Better image sizing */
  .screenshot-frame img {
    max-width: 100%;
    height: auto;
  }

  .screenshot-frame {
    border-radius: 12px;
  }

  .product-feature-card {
    gap: var(--element-gap);
  }

  .product-showcase {
    gap: 32px;
  }

  .product-screenshot {
    gap: 20px;
  }

  .feature-info h4 {
    font-size: 1rem;
  }

  .feature-info p {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* Improved mobile menu */
  .mobile-menu a {
    padding: 16px max(20px, env(safe-area-inset-left, 20px));
    min-height: 48px;
  }

  .mobile-menu-theme-toggle {
    padding: 16px max(20px, env(safe-area-inset-left, 20px));
    min-height: 48px;
  }

  .mobile-menu-social {
    padding: 20px max(20px, env(safe-area-inset-left, 20px));
    gap: 12px;
  }

  /* Better scrolling on mobile */
  html,
  body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100%;
    position: relative;
  }

  /* Prevent horizontal overflow on all elements */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Ensure images and media are responsive */
  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Ensure all containers respect viewport */
  .container,
  .section,
  .hero,
  .product-showcase,
  .what-is,
  .try-app,
  .quick-start-section,
  .cta,
  .footer {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Ensure sections use container padding */
  .section > .container,
  .hero > .container {
    padding-left: max(20px, env(safe-area-inset-left, 20px));
    padding-right: max(20px, env(safe-area-inset-right, 20px));
  }

  /* Force footer to single column */
  .footer-content,
  .footer-links {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .footer-links {
    gap: 32px !important;
  }

  /* Safe area insets for notched devices */
  .nav {
    padding-left: max(24px, env(safe-area-inset-left, 24px));
    padding-right: max(24px, env(safe-area-inset-right, 24px));
  }

  .container {
    padding-left: max(16px, env(safe-area-inset-left, 16px));
    padding-right: max(16px, env(safe-area-inset-right, 16px));
  }

  /* Improved spacing between interactive elements */
  .hero-actions {
    gap: var(--element-gap);
  }

  .cta-actions {
    gap: var(--element-gap);
  }

  /* Better download section spacing */
  .download-section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }

  .download-options {
    gap: var(--grid-gap);
    margin-bottom: 24px;
  }

  .download-card {
    padding: 16px 18px;
    flex-direction: row;
    text-align: left;
    gap: 14px;
    border-radius: 12px;
  }

  /* Better feature card spacing */
  .feature-card {
    padding: var(--card-padding);
  }

  .feature-icon {
    margin-bottom: 16px;
  }

  .feature-title {
    margin-bottom: 10px;
  }

  .feature-description {
    margin-bottom: 16px;
  }

  /* Improved what-is section */
  .what-is-content {
    gap: 32px;
  }

  /* Center the title and tag on mobile like other sections */
  .what-is-text {
    text-align: center;
  }

  .what-is-text .section-tag {
    padding-left: 16px;
    justify-content: center;
  }

  .what-is-text .section-title {
    text-align: center;
  }

  .what-is-highlights {
    gap: 16px;
  }

  .highlight {
    padding: 20px;
  }

  /* Better touch feedback */
  button:active,
  a:active,
  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Prevent accidental text selection on buttons */
  button,
  .btn-primary,
  .btn-secondary,
  .mobile-menu-btn,
  .mobile-menu-theme-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Improved focus states for keyboard navigation */
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Improved card spacing */
  .product-features-grid {
    gap: 20px;
  }

  /* Better text readability */
  p,
  li {
    line-height: 1.7;
  }

  /* Improved list spacing */
  ul,
  ol {
    margin-bottom: 16px;
  }

  li {
    margin-bottom: 8px;
  }

  /* Better feature list spacing */
  .feature-list {
    gap: 8px;
    margin-top: 16px;
  }

  /* Improved code blocks */
  code {
    font-size: 0.85em;
    word-break: break-word;
  }

  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Better code blocks on mobile */
  .code-block {
    font-size: 0.85rem;
    padding: 12px;
    overflow-x: auto;
  }

  /* Improved stats display */
  .hero-stats {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .stat {
    min-width: 100px;
    text-align: center;
    padding: 12px 0;
  }

  .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
  }

  .stat-label {
    font-size: 0.7rem;
    font-weight: 500;
  }

  .hero-stats {
    flex-direction: row;
    gap: 0;
    margin-top: 28px;
    padding-top: 20px;
    justify-content: space-around;
  }

  .stat-divider {
    width: 1px;
    height: 36px;
    background: var(--border);
    margin: 0;
  }

  /* Better badge display */
  .badge-container {
    justify-content: center;
    gap: 8px;
  }

  .badge {
    font-size: 0.7rem;
    padding: 5px 12px;
  }

  /* Better footer on mobile */
  .footer {
    padding: var(--section-padding) 0 24px;
  }

  .footer-content {
    gap: 32px;
    margin-bottom: 32px;
  }

  .footer-links {
    gap: 24px;
  }

  /* Better CTA section */
  .cta {
    padding: var(--section-padding) 0;
  }

  .cta-content {
    padding: 0;
  }

  .cta-content h2 {
    margin-bottom: 16px;
  }

  .cta-content p {
    margin-bottom: 24px;
  }

  /* Improved open source section */
  .models-grid {
    gap: var(--grid-gap);
  }

  .model-card {
    padding: 20px;
  }

  /* Better getting started section */
  .quick-start {
    gap: 32px;
  }

  .quick-start-code {
    margin-bottom: 0;
  }

  .quick-start-info {
    padding: 0;
  }

  .quick-start-info h3 {
    margin-bottom: 12px;
  }

  .quick-start-info p {
    margin-bottom: 16px;
  }

  .quick-start-info ul {
    margin-bottom: 24px;
    gap: 10px;
  }
}

/* Tablet optimizations (between 481px and 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
  :root {
    --section-padding: 52px;
    --card-padding: 20px;
    --grid-gap: 22px;
    --element-gap: 16px;
  }

  /* Touch-friendly targets for tablets */
  .btn-primary,
  .btn-secondary,
  .btn-launch,
  .btn-nav-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
  }

  /* Proper spacing for social icons on tablets */
  /* Hide theme toggle button in header on tablets - it's in the mobile menu */
  .nav-links .theme-toggle-btn {
    display: none !important;
  }

  /* Hide social icons on tablets - they're in the mobile menu */
  .nav-social-icons {
    display: none !important;
  }

  /* Better navigation spacing */
  .nav-links {
    gap: 12px;
  }

  /* Better grid layouts for tablets */
  .features-grid,
  .product-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }

  /* Optimize section spacing */
  .section,
  .what-is,
  .features,
  .product-section,
  .open-source-section,
  .download-section,
  .getting-started,
  .cta {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
  }

  /* Better container padding */
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Improved card spacing */
  .feature-card,
  .product-feature-card,
  .download-card {
    padding: var(--card-padding);
  }

  /* Improved typography */
  .hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .section-title {
    font-size: 2rem;
    line-height: 1.3;
  }

  /* Better spacing */
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Improved product cards */
  .product-feature-card {
    gap: 18px;
  }

  .feature-info h4 {
    font-size: 1.05rem;
  }

  .feature-info p {
    font-size: 0.9rem;
  }

  /* Better screenshot frames */
  .screenshot-frame {
    border-radius: 12px;
  }
}

/* ================================ */
/* Product Section - Screenshots */
/* ================================ */

.product-section {
  padding: var(--section-padding) 0;
  background: var(--background);
  position: relative;
}

.product-showcase {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.product-screenshot {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.main-screenshot {
  max-width: 1000px;
  margin: 0 auto;
}

.screenshot-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.5),
    0 0 100px rgba(var(--primary-rgb), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all var(--transition-smooth);
}

.main-screenshot .screenshot-frame {
  animation: glowPulse 4s ease-in-out infinite;
}

.main-screenshot .screenshot-frame:hover {
  transform: scale(1.01);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.6),
    0 0 120px rgba(var(--primary-rgb), 0.2);
}

.screenshot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 3rem;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.1) 0%,
    rgba(var(--secondary-rgb), 0.1) 100%
  );
  border-radius: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.screenshot-placeholder p {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.screenshot-placeholder small {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.screenshot-frame.small {
  border-radius: 10px;
}

.screenshot-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.screenshot-header .screenshot-dots {
  flex: 0 0 auto;
}

.screenshot-header .screenshot-title {
  flex: 1;
  margin-left: 0;
}

.screenshot-dots {
  display: flex;
  gap: 6px;
}

.screenshot-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-hover);
}

.screenshot-dots span:first-child {
  background: #ff5f57;
}

.screenshot-dots span:nth-child(2) {
  background: #ffbd2e;
}

.screenshot-dots span:nth-child(3) {
  background: #28c840;
}

.screenshot-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.screenshot-image-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.screenshot-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  object-fit: contain;
  background: var(--surface);
}

.screenshot-image-wrapper img[src=''],
.screenshot-image-wrapper img:not([src]) {
  display: none;
}

.screenshot-image-wrapper .screenshot-light {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.screenshot-image-wrapper .screenshot-dark {
  position: relative;
  z-index: 2;
}

/* Light theme screenshots (show light images) */
body.theme-light .screenshot-image-wrapper .screenshot-light {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
}

body.theme-light .screenshot-image-wrapper .screenshot-dark {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  position: absolute;
}

/* Dark theme screenshots (show dark images) - DEFAULT */
body.theme-dark .screenshot-image-wrapper .screenshot-light {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  position: absolute;
}

body.theme-dark .screenshot-image-wrapper .screenshot-dark {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
}

/* Global Theme Toggle Button */
.theme-toggle-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.theme-toggle-btn svg {
  position: absolute;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 20px;
  height: 20px;
}

.theme-toggle-btn .theme-icon-light {
  opacity: 0;
  transform: rotate(-180deg) scale(0.8);
}

.theme-toggle-btn .theme-icon-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

body.theme-light .theme-toggle-btn .theme-icon-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

body.theme-light .theme-toggle-btn .theme-icon-dark {
  opacity: 0;
  transform: rotate(180deg) scale(0.8);
}

.screenshot-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.screenshot-caption {
  text-align: center;
}

.screenshot-caption h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.screenshot-caption p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.product-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.product-feature-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-feature-card .screenshot-frame.small img {
  width: 100%;
  height: auto;
}

.feature-info h4 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.feature-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Storage Demo Visual */
.storage-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.storage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.storage-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.storage-badge.s3 {
  background: rgba(255, 153, 0, 0.2);
  color: #ff9900;
}

.storage-badge.azure {
  background: rgba(0, 120, 212, 0.2);
  color: #0078d4;
}

.storage-badge.nas {
  background: rgba(var(--success-rgb), 0.2);
  color: var(--success);
}

.storage-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ================================ */
/* Open Source Models Section */
/* ================================ */

.open-source-section {
  padding: var(--section-padding) 0;
  background: var(--surface);
  position: relative;
}

/* Developers Section */
.developers-section {
  padding: var(--section-padding) 0;
  background: var(--background-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.developers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.developer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.developer-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    rgba(var(--primary-rgb), 0.1),
    transparent 30%
  );
  animation: rotate 10s linear infinite;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.developer-card:hover::before {
  opacity: 1;
}

.developer-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.15);
}

.developer-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.2),
    rgba(var(--secondary-rgb), 0.2)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--primary);
  position: relative;
  z-index: 1;
}

.developer-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.developer-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.developer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-smooth);
  position: relative;
  z-index: 1;
}

.developer-link:hover {
  color: var(--primary-dark);
  gap: 12px;
}

.developer-link svg {
  transition: transform var(--transition-smooth);
}

.developer-link:hover svg {
  transform: translateX(2px);
}

@media (max-width: 900px) {
  .developers-grid {
    grid-template-columns: 1fr;
  }
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.model-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.model-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(var(--primary-rgb), 0.1),
    transparent 30%
  );
  opacity: 0;
  transition: opacity var(--transition-smooth);
  animation: rotate 6s linear infinite paused;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.model-card:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  transform: translateY(-6px);
  box-shadow:
    0 20px 50px rgba(var(--primary-rgb), 0.2),
    0 0 60px rgba(var(--primary-rgb), 0.1);
}

.model-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.model-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.15),
    rgba(var(--primary-rgb), 0.05)
  );
  color: var(--primary);
  margin-bottom: 20px;
}

.model-icon.model-icon-accent {
  background: linear-gradient(
    135deg,
    rgba(var(--secondary-rgb), 0.15),
    rgba(var(--secondary-rgb), 0.05)
  );
  color: var(--secondary);
}

.model-icon.model-icon-success {
  background: linear-gradient(
    135deg,
    rgba(var(--success-rgb), 0.15),
    rgba(var(--success-rgb), 0.05)
  );
  color: var(--success);
}

.model-card h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.model-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.model-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.tags-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.tags-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tags-list li {
  font-size: 0.8rem;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tags-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Primary color tags (cyan) */
.tags-primary li::before {
  background: var(--primary);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
}

.tags-primary li {
  border-color: rgba(var(--primary-rgb), 0.2);
}

/* Accent color tags (pink/secondary) */
.tags-accent li::before {
  background: var(--secondary);
  box-shadow: 0 0 8px rgba(var(--secondary-rgb), 0.5);
}

.tags-accent li {
  border-color: rgba(var(--secondary-rgb), 0.2);
}

/* Success color tags (green) */
.tags-success li::before {
  background: var(--success);
  box-shadow: 0 0 8px rgba(var(--success-rgb), 0.5);
}

.tags-success li {
  border-color: rgba(var(--success-rgb), 0.2);
}

.open-source-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
}

.oss-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.15),
    rgba(var(--secondary-rgb), 0.15)
  );
  border-radius: 20px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
}

.open-source-cta p {
  color: var(--text-secondary);
  margin: 0;
}

/* ================================ */
/* Deployment Options */
/* ================================ */

.deployment-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.deploy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  text-align: center;
  transition: all var(--transition-smooth);
}

.deploy-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
}

.deploy-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.1),
    rgba(var(--primary-rgb), 0.05)
  );
  color: var(--primary);
}

.deploy-card h3 {
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.deploy-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.btn-deploy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-smooth);
}

.btn-deploy:hover {
  background: var(--primary);
  color: var(--background);
}

/* Download Section - Premium Treatment */
.download-section {
  padding: var(--section-padding) 0;
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.download-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(var(--primary-rgb), 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.download-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.download-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: linear-gradient(
    135deg,
    var(--surface) 0%,
    var(--surface-elevated) 100%
  );
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.download-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.1),
    rgba(var(--secondary-rgb), 0.05)
  );
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.download-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.download-card:hover {
  border-color: transparent;
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(var(--primary-rgb), 0.15);
}

.download-card:hover::before {
  opacity: 1;
}

.download-card:hover::after {
  opacity: 1;
}

.download-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.download-icon svg {
  width: 40px;
  height: 40px;
}

.download-info {
  flex: 1;
}

.download-info h3 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.download-info p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.download-ext {
  display: inline-block;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--primary);
  padding: 2px 8px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 4px;
}

.download-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: all var(--transition-smooth);
}

.download-card:hover .download-arrow {
  color: var(--primary);
  transform: translateY(2px);
}

/* Installation Notes - All Platforms */
.install-notes {
  max-width: 900px;
  margin: 40px auto 0;
  text-align: left;
  display: none; /* Hidden by default */
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.install-notes.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.install-notes-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 20px;
  text-align: center;
}

.install-notes-title svg {
  color: var(--warning);
}

.install-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Responsive install notes - tablets */
@media (max-width: 900px) and (min-width: 481px) {
  .install-notes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.install-note-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.install-note-card:hover {
  border-color: var(--border-hover);
}

.install-note-card[open] {
  border-color: rgba(var(--primary-rgb), 0.3);
}

.install-note-card summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  list-style: none;
  transition: all var(--transition-smooth);
}

.install-note-card summary::-webkit-details-marker {
  display: none;
}

.install-note-card summary svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.install-note-card summary:hover {
  color: var(--text-primary);
  background: var(--surface-elevated);
}

.install-note-card[open] summary {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.install-note-content {
  padding: 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.install-note-content p {
  margin: 0 0 10px;
}

.install-note-content strong {
  color: var(--text-primary);
}

.install-note-content .code-block {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  overflow-x: auto;
}

.install-note-content .code-block code {
  flex: 1;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: var(--primary);
  word-break: break-all;
  user-select: all;
}

.install-note-content .copy-btn {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-smooth);
}

.install-note-content .copy-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}

.install-note-content .copy-btn:active {
  transform: scale(0.95);
}

.install-note-reason {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* Responsive install notes */
@media (max-width: 900px) {
  .install-notes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .install-notes {
    margin-top: 32px;
    padding: 0 16px;
  }

  .install-note-card summary {
    padding: 18px 16px;
    font-size: 0.9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .install-note-content {
    padding: 16px;
    font-size: 0.875rem;
  }

  .install-note-content .code-block {
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .install-note-content .code-block code {
    font-size: 0.8rem;
    word-break: break-all;
  }

  .install-note-content .copy-btn {
    min-height: 44px;
    padding: 10px 16px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.download-footer {
  text-align: center;
  margin-top: 32px;
}

.download-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition-smooth);
}

.download-footer a:hover {
  color: var(--primary);
}

/* Responsive for new sections */
/* Hide sections only on mobile devices */
@media (max-width: 768px) {
  /* .hero-creative-text was hidden here pre-2026-05-15 because the
     old hero layout couldn't fit the wrapped two-line headline. With
     the minmax(0, 1fr) grid fix in place the second half now wraps
     cleanly, and "that installs on your server." is the differentiator
     mobile users were missing. Keep it visible. */

  #product,
  .product-section {
    display: none !important;
  }

  #getting-started,
  .getting-started {
    display: none !important;
  }
}

/* Hide Product navigation link only on mobile (where section is hidden) */
@media (max-width: 768px) {
  .nav-links a[href='#product'],
  .mobile-menu a[href='#product'] {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .product-features-grid {
    grid-template-columns: 1fr !important;
  }

  .models-grid {
    grid-template-columns: 1fr !important;
  }

  .deployment-options {
    grid-template-columns: 1fr !important;
  }

  .download-options {
    grid-template-columns: 1fr !important;
  }

  /* .download-grid intentionally excluded: auto-fit stacks naturally below ~480px. */

  .integration-featured {
    grid-template-columns: 1fr !important;
  }

  .try-app-container {
    grid-template-columns: 1fr !important;
  }

  .what-is-content {
    grid-template-columns: 1fr !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
  }

  .open-source-cta {
    flex-direction: column;
    text-align: center;
  }
}

/* ================================ */
/* Enhanced Mobile Optimizations */
/* ================================ */

/* Tablet refinements (768px - 900px) */
@media (max-width: 900px) and (min-width: 769px) {
  /* More compact buttons on tablets */
  .btn-primary {
    padding: 12px 24px;
    font-size: 0.9rem;
  }

  .btn-secondary {
    padding: 10px 20px;
    font-size: 0.85rem;
  }

  /* Pricing cards - more compact */
  .model-card {
    padding: 22px;
  }

  .model-icon {
    width: 48px;
    height: 48px;
  }

  .model-icon svg {
    width: 32px;
    height: 32px;
  }

  .model-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }

  .model-card p {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  /* Download cards - more horizontal on tablets */
  .download-card {
    padding: 20px 24px;
    gap: 16px;
  }

  .download-icon {
    width: 40px;
    height: 40px;
  }

  .download-icon svg {
    width: 32px;
    height: 32px;
  }
}

/* Mobile phones - comprehensive optimizations */
@media (max-width: 480px) {
  /* ========== BUTTONS ========== */
  /* More compact, touch-friendly buttons */
  .btn-primary {
    padding: 10px 18px;
    font-size: 0.875rem;
    min-height: 44px;
    gap: 8px;
    border-radius: 8px;
  }

  .btn-primary svg {
    width: 14px;
    height: 14px;
  }

  .btn-secondary {
    padding: 10px 16px;
    font-size: 0.85rem;
    min-height: 44px;
    gap: 6px;
    border-radius: 8px;
  }

  /* Hero buttons - full width but not overly tall */
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  /* CTA buttons - compact */
  .cta-actions .btn-primary {
    padding: 12px 24px;
    font-size: 0.9rem;
  }

  /* ========== HERO STATS ========== */
  /* Horizontal stats row instead of vertical */
  .hero-stats {
    flex-direction: row !important;
    gap: 0;
    margin-top: 28px;
    padding-top: 20px;
    justify-content: space-around;
    width: 100%;
  }

  .stat {
    min-width: auto;
    flex: 1;
    padding: 0 4px;
  }

  .stat-value {
    font-size: 1.5rem !important;
    margin-bottom: 2px;
  }

  .stat-label {
    font-size: 0.7rem !important;
    white-space: nowrap;
  }

  .stat-divider {
    width: 1px;
    height: 36px;
    margin: 0;
  }

  /* ========== BADGES ========== */
  .badge-container {
    flex-direction: row !important;
    gap: 6px;
    margin-bottom: 16px;
  }

  .badge {
    font-size: 0.65rem;
    padding: 4px 10px;
  }

  /* ========== PRICING SECTION (Models Grid) ========== */
  .models-grid {
    gap: 12px !important;
  }

  .model-card {
    padding: 16px;
    border-radius: 12px;
  }

  .model-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .model-icon svg {
    width: 28px;
    height: 28px;
  }

  .model-card h3 {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .model-card p {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .model-tags {
    margin-top: 12px;
    padding-top: 12px;
    gap: 6px;
  }

  .tags-label {
    font-size: 0.65rem;
  }

  .tags-list {
    gap: 4px;
  }

  .tags-list li {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  /* ========== DOWNLOAD SECTION ========== */
  .download-options {
    gap: 10px !important;
    margin-bottom: 20px;
  }

  .download-card {
    padding: 14px 16px;
    gap: 12px;
    flex-direction: row !important;
    text-align: left !important;
    border-radius: 12px;
  }

  .download-card:hover {
    transform: translateY(-2px) scale(1);
  }

  .download-icon {
    width: 36px;
    height: 36px;
  }

  .download-icon svg {
    width: 28px;
    height: 28px;
  }

  .download-info {
    flex: 1;
    min-width: 0;
  }

  .download-info h3 {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }

  .download-info p {
    font-size: 0.75rem;
    margin-bottom: 4px;
  }

  .download-ext {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .download-arrow {
    width: 16px;
    height: 16px;
  }

  .download-arrow svg {
    width: 16px;
    height: 16px;
  }

  /* Download footer link */
  .download-footer {
    margin-top: 20px;
  }

  .download-footer a {
    font-size: 0.85rem;
  }

  /* ========== CTA SECTION ========== */
  .cta {
    padding: 32px 0 !important;
  }

  .cta-content h2 {
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
  }

  .cta-content p {
    font-size: 0.9rem;
    margin-bottom: 20px !important;
    line-height: 1.6;
  }

  .cta-actions {
    gap: 10px !important;
  }

  /* ========== FEATURES SECTION ========== */
  .features-grid,
  .features-grid-2 {
    gap: 12px !important;
  }

  .feature-card {
    padding: 16px !important;
    border-radius: 12px;
  }

  .feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px !important;
    border-radius: 10px;
  }

  .feature-icon svg {
    width: 22px;
    height: 22px;
  }

  .feature-title {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }

  .feature-description {
    font-size: 0.8rem !important;
    line-height: 1.5;
    margin-bottom: 12px !important;
  }

  .feature-list {
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .feature-list li {
    font-size: 0.75rem;
    padding-left: 16px;
  }

  .feature-list li::before {
    width: 4px;
    height: 4px;
  }

  /* ========== WHAT IS SECTION ========== */
  .what-is {
    padding: 32px 0 !important;
  }

  .what-is-content {
    gap: 24px !important;
  }

  .what-is-text .section-title {
    font-size: 1.4rem;
  }

  .lead-text {
    font-size: 0.95rem;
  }

  .what-is-highlights {
    gap: 10px !important;
  }

  .highlight {
    padding: 14px 16px !important;
    flex-direction: row !important;
    text-align: left !important;
    gap: 12px;
    border-radius: 10px;
  }

  .highlight-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
  }

  .highlight-icon svg {
    width: 20px;
    height: 20px;
  }

  .highlight h4 {
    font-size: 0.9rem;
    margin-bottom: 2px;
  }

  .highlight p {
    font-size: 0.75rem;
    margin-bottom: 0;
  }

  /* ========== SECTION HEADERS ========== */
  .section-header {
    margin-bottom: 24px !important;
  }

  .section-tag {
    font-size: 0.7rem;
    margin-bottom: 8px;
  }

  .section-title {
    font-size: 1.5rem !important;
    line-height: 1.25;
    margin-bottom: 10px !important;
  }

  .section-description {
    font-size: 0.85rem !important;
    line-height: 1.6;
  }

  /* ========== HERO REFINEMENTS ========== */
  .hero {
    padding-top: calc(var(--nav-height) + 24px) !important;
    padding-bottom: 32px !important;
  }

  .hero-title {
    font-size: 1.6rem !important;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .hero-description {
    font-size: 0.85rem !important;
    line-height: 1.6;
    margin-bottom: 20px !important;
  }

  .hero-actions {
    gap: 10px !important;
    margin-top: 20px !important;
  }

  /* Hero illustration - smaller on mobile */
  .hero-visual {
    padding: 20px 10px !important;
  }

  .hero-illustration {
    width: 260px !important;
    height: 260px !important;
    max-width: 70vw !important;
    max-height: 70vw !important;
  }

  .floating-card {
    font-size: 0.6rem;
    padding: 6px 10px;
  }

  /* ========== INSTALLATION NOTES ========== */
  .install-notes {
    margin-top: 24px !important;
    padding: 0 !important;
  }

  .install-notes-title {
    font-size: 0.85rem;
    gap: 8px;
    margin-bottom: 12px;
  }

  .install-notes-title svg {
    width: 14px;
    height: 14px;
  }

  .install-notes-grid {
    gap: 8px !important;
  }

  .install-note-card summary {
    padding: 12px 14px;
    font-size: 0.8rem;
    gap: 10px;
  }

  .install-note-card summary svg {
    width: 16px;
    height: 16px;
  }

  .install-note-content {
    padding: 12px 14px;
    font-size: 0.8rem;
  }

  .install-note-content p {
    margin-bottom: 8px;
    line-height: 1.5;
  }

  .install-note-reason {
    font-size: 0.7rem;
  }

  .code-block {
    padding: 8px 10px;
    font-size: 0.7rem;
  }

  .code-block code {
    font-size: 0.7rem;
  }

  .copy-btn {
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    padding: 4px;
  }

  .copy-btn svg {
    width: 12px;
    height: 12px;
  }

  /* ========== GENERAL SPACING ========== */
  .features,
  .pricing-section {
    padding: 32px 0 !important;
  }

  .download-section {
    padding: 32px 0 !important;
  }
}

/* Very small screens (320px - 380px) */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.4rem !important;
  }

  .section-title {
    font-size: 1.3rem !important;
  }

  .btn-primary,
  .btn-secondary {
    padding: 10px 14px;
    font-size: 0.8rem;
  }

  .stat-value {
    font-size: 1.25rem !important;
  }

  .stat-label {
    font-size: 0.6rem !important;
  }

  .badge {
    font-size: 0.6rem;
    padding: 3px 8px;
  }

  .download-card {
    padding: 12px 14px;
  }

  .model-card {
    padding: 14px;
  }

  .feature-card {
    padding: 14px !important;
  }

  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ================================ */
/* Mobile Menu Final Fixes */
/* ================================ */

/* Ensure mobile menu is always properly displayed on all mobile devices */
@media (max-width: 768px) {
  .mobile-menu {
    position: fixed !important;
    top: var(--nav-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - var(--nav-height)) !important;
    height: calc(100dvh - var(--nav-height)) !important;
    max-height: none !important;
    background: var(--background) !important;
    z-index: 9999 !important;
    border-top: 2px solid var(--primary) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 0 !important;
  }

  .mobile-menu.active {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Make menu items larger and more tappable */
  .mobile-menu a {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    padding: 32px 24px !important;
    min-height: 90px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
    margin: 0 !important;
  }

  .mobile-menu a:hover,
  .mobile-menu a:active {
    background: var(--surface-elevated) !important;
  }

  .mobile-menu-theme-toggle {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    padding: 32px 24px !important;
    min-height: 90px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
    margin: 0 !important;
  }

  .mobile-menu-theme-toggle:hover,
  .mobile-menu-theme-toggle:active {
    background: var(--surface-elevated) !important;
  }

  /* LinkedIn button must be visible */
  .mobile-menu-social {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 32px 24px !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom, 32px)) !important;
    min-height: 120px !important;
    gap: 20px !important;
    background: var(--surface) !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    margin: auto 0 0 0 !important;
  }

  .mobile-social-link.mobile-linkedin {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #0077b5 0%, #005582 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 119, 181, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
  }

  .mobile-social-link.mobile-linkedin:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(0, 119, 181, 0.5) !important;
  }

  .mobile-social-link.mobile-linkedin svg {
    width: 52px !important;
    height: 52px !important;
  }

  .mobile-social-link.mobile-linkedin svg,
  .mobile-social-link.mobile-linkedin svg path {
    fill: white !important;
    color: white !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Consistent base typography for all mobile */
@media (max-width: 768px) {
  html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Prevent text from being too small */
  p,
  li,
  span,
  a {
    font-size: inherit;
  }

  /* Ensure readable minimum sizes */
  .hero-description,
  .section-description,
  .feature-description {
    font-size: max(0.95rem, 15px) !important;
    line-height: 1.7 !important;
  }

  .feature-card p,
  .model-card p {
    font-size: max(0.9rem, 14px) !important;
    line-height: 1.6 !important;
  }
}

/* ================================ */
/* Logo mark (inline SVG)           */
/* ================================ */

.logo-icon svg {
  display: block;
}

.logo-icon {
  color: var(--background);
  padding: 0;
}

/* ================================ */
/* Nav CTA button                   */
/* ================================ */

.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--background) !important;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.btn-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 26px rgba(var(--primary-rgb), 0.4),
    0 4px 10px rgba(0, 0, 0, 0.32);
  opacity: 0.95;
}

.btn-mobile-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--background) !important;
  font-weight: 600;
  text-align: center;
}

/* ================================ */
/* Waitlist Section                 */
/* ================================ */

.waitlist-section {
  padding: var(--section-padding) 0;
  position: relative;
}

.waitlist-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(var(--primary-rgb), 0.08),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 100%,
      rgba(var(--secondary-rgb), 0.06),
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;
}

.waitlist-card {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 24px 48px rgba(0, 0, 0, 0.32);
}

.waitlist-header {
  margin-bottom: 28px;
}

.waitlist-header .section-tag {
  display: inline-block;
  margin-bottom: 12px;
}

.waitlist-header .section-title {
  margin-bottom: 12px;
}

.waitlist-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.waitlist-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.waitlist-input::placeholder {
  color: var(--text-muted);
}

.waitlist-input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.waitlist-submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

.waitlist-fineprint {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.waitlist-perks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.waitlist-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.waitlist-perks svg {
  color: var(--success);
  flex-shrink: 0;
}

.waitlist-success {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 14px 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .waitlist-card {
    padding: 32px 22px;
    border-radius: 16px;
  }
  .waitlist-form {
    flex-direction: column;
  }
  .waitlist-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ================================ */
/* Section header (shared)          */
/* ================================ */

.capabilities-section .section-header,
.canada-section .section-header,
.pricing-section .section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

.capabilities-section .section-header .section-title,
.canada-section .section-header .section-title,
.pricing-section .section-header .section-title {
  margin-top: 16px;
  margin-bottom: 12px;
}

.capabilities-section .section-header .section-description,
.canada-section .section-header .section-description,
.pricing-section .section-header .section-description {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ================================ */
/* Capabilities Section (AI features) */
/* ================================ */

.capabilities-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.capability-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 28px 24px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.capability-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.capability-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.capability-card > p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.capability-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}

.capability-card li {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 5px 0 5px 16px;
  position: relative;
  line-height: 1.5;
}

.capability-card li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  top: 6px;
}

.capability-pricing {
  display: block;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  margin-top: auto;
}

/* ================================ */
/* Canada Section                   */
/* ================================ */

.canada-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--background-subtle);
}

.canada-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: var(--container-max);
  margin: 0 auto 48px;
  padding: 0 24px;
}

.canada-pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 28px 24px;
}

.canada-pillar h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.canada-pillar p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.canada-pillar strong {
  color: var(--text-primary);
}

.canada-sectors {
  text-align: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.canada-sectors-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.canada-sectors ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.canada-sectors li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-mono);
}

/* ================================ */
/* Pricing Section                  */
/* ================================ */

.pricing-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 1180px) {
  /* Force a clean 2-col → 1-col transition for the content-heavy deployment cards
     instead of the auto-fit calculation producing weird intermediate widths. */
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-card.pricing-featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card.pricing-featured {
    grid-column: auto;
  }
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 32px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card.pricing-featured {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
  box-shadow:
    0 0 0 1px var(--primary),
    0 8px 24px rgba(var(--primary-rgb), 0.1);
}

.pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--background);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}

.pricing-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.pricing-amount span {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}

.pricing-badge-neutral {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-muted);
}

.pricing-card .pricing-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-card .pricing-features li {
  padding: 5px 0 5px 22px;
  font-size: 12.5px;
  line-height: 1.5;
}

.pricing-card .pricing-features li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pricing-card .pricing-features li em {
  color: var(--text-muted);
  font-style: italic;
}

.pricing-card .pricing-features li:has(em)::before {
  content: '';
}

.pricing-description {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0 0 20px;
  min-height: 42px;
  line-height: 1.5;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.pricing-card li {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 6px 0 6px 22px;
  position: relative;
  line-height: 1.5;
}

.pricing-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--primary);
  font-weight: 700;
}

.pricing-card .btn-primary,
.pricing-card .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

@media (max-width: 640px) {
  .capabilities-grid,
  .canada-pillars,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .canada-sectors ul {
    justify-content: flex-start;
  }
}

/* ==================================== */
/* Trust strip — under the hero        */
/* ==================================== */
.trust-strip {
  background: var(--background-subtle);
  padding: 36px 0 40px;
  border-block: 1px solid var(--border);
}
.trust-strip-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px 0;
  text-align: center;
}
.trust-strip-logos {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: center;
}
.trust-strip-logos li {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.trust-strip-logos li::before {
  content: '◆';
  color: var(--text-dim);
  margin-right: 8px;
  font-size: 0.7em;
}
.trust-strip-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
}
.trust-strip-badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.trust-strip-badges li strong {
  color: var(--text-primary);
  font-weight: 600;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-success {
  background: var(--success);
  box-shadow: 0 0 8px rgba(var(--success-rgb), 0.5);
}
.dot-warning {
  background: var(--warning);
  box-shadow: 0 0 8px rgba(var(--warning-rgb), 0.5);
}
.dot-info {
  background: var(--secondary);
  box-shadow: 0 0 8px rgba(var(--secondary-rgb), 0.5);
}

/* ==================================== */
/* Customer proof / quote cards         */
/* ==================================== */
.customer-proof-section {
  padding: var(--section-padding) 0;
}
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.quote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}
.quote-card:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-2px);
}
.quote-card blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  font-style: italic;
  quotes: '“' '”';
}
.quote-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.quote-card figcaption strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.quote-card figcaption span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
@media (max-width: 960px) {
  .quote-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================== */
/* Comparison table                     */
/* ==================================== */
.comparison-section {
  padding: var(--section-padding) 0;
  background: var(--background-subtle);
}
.comparison-table-wrap {
  margin-top: 36px;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.comparison-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.comparison-table th,
.comparison-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.comparison-table thead th {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
}
.comparison-table thead th.col-us,
.comparison-table tbody td.col-us {
  background: rgba(var(--primary-rgb), 0.06);
  border-left: 1px solid rgba(var(--primary-rgb), 0.2);
  border-right: 1px solid rgba(var(--primary-rgb), 0.2);
}
.comparison-table thead th.col-us {
  color: var(--primary);
}
.comparison-table tbody th {
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-elevated);
  white-space: nowrap;
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.cell-yes,
.cell-no,
.cell-partial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
}
.cell-yes::before {
  content: '✓';
  color: var(--success);
  font-weight: 700;
}
.cell-no::before {
  content: '✕';
  color: var(--text-dim);
  font-weight: 700;
}
.cell-partial::before {
  content: '~';
  color: var(--warning);
  font-weight: 700;
}
.cell-no {
  color: var(--text-muted);
}

/* ==================================== */
/* FAQ — semantic details/summary       */
/* ==================================== */
.faq-section {
  padding: var(--section-padding) 0;
}
.faq-list {
  max-width: 820px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--transition-smooth);
}
.faq-item:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
}
.faq-item[open] {
  border-color: rgba(var(--primary-rgb), 0.4);
  background: var(--surface-elevated);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-overlay);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  transition:
    transform var(--transition-spring),
    background var(--transition-fast);
}
.faq-item[open] summary::after {
  content: '−';
  background: var(--primary);
  color: var(--background);
  transform: translateY(-50%) rotate(180deg);
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.faq-answer {
  padding: 0 22px 22px 22px;
  color: var(--text-secondary);
  line-height: 1.65;
}
.faq-answer p {
  margin: 0;
}
.faq-answer a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==================================== */
/* Expanded footer                      */
/* ==================================== */
.footer .footer-content {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;
  gap: 48px;
  align-items: flex-start;
}
.footer .footer-links {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.footer .footer-column h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.footer-locale {
  display: inline-flex;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.locale-btn {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.locale-btn + .locale-btn {
  border-left: 1px solid var(--border);
}
.locale-btn:hover {
  color: var(--text-primary);
}
.locale-active {
  background: var(--surface-elevated);
  color: var(--primary);
}
.footer-meta {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-dim);
}
@media (max-width: 960px) {
  .footer .footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .footer .footer-links {
    grid-template-columns: 1fr;
  }
}

/* ============================================ */
/* Cutting-edge product polish                 */
/* (overrides + new sections)                  */
/* ============================================ */

/* Section eyebrow — clean uppercase, not dev-comment */
.section-tag {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--primary) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  display: inline-block !important;
  margin-bottom: 18px !important;
  line-height: 1.2 !important;
}

/* Hero title — bigger, bolder, tighter */
.hero-title {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 64px;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
  }
}
@media (min-width: 1280px) {
  .hero-title {
    font-size: 80px;
  }
}

/* Hero description tighter on mobile */
.hero-description {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .hero-description {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Section titles bigger */
.capabilities-section .section-title,
.canada-section .section-title,
.pricing-section .section-title,
.how-section .section-title,
.tech-section .section-title {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
@media (min-width: 768px) {
  .capabilities-section .section-title,
  .canada-section .section-title,
  .pricing-section .section-title,
  .how-section .section-title,
  .tech-section .section-title {
    font-size: 44px;
  }
}

/* How It Works section */
.how-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
}

.how-section .section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

.how-section .section-header .section-title {
  margin-top: 16px;
  margin-bottom: 14px;
}

.how-section .section-description {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.how-step {
  position: relative;
  padding-top: 8px;
}

.how-step-number {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary);
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  font-weight: 600;
  opacity: 0.7;
}

.how-step h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.how-step p {
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* Tech / Under the hood section */
.tech-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--background-subtle);
}

.tech-section .section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.tech-section .section-header .section-title {
  margin-top: 16px;
  margin-bottom: 14px;
}

.tech-section .section-description {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: var(--container-max);
  margin: 0 auto 32px;
  padding: 0 24px;
}

.tech-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 24px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.tech-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.tech-card h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-family: var(--font-sans);
  margin: 0 0 16px;
}

.tech-card-models {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.tech-card-models strong {
  font-weight: 600;
}

.tech-card-note {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.tech-cta {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
  padding: 0 24px;
}

.tech-cta a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}

.tech-cta a:hover {
  color: var(--primary-dark);
}

@media (max-width: 640px) {
  .how-steps,
  .tech-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================ */
/* Hero product shot                            */
/* Replaces abstract rings with real product UI */
/* ============================================ */

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  min-height: 0;
  perspective: 1400px;
}

.hero-product-shot {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.hero-product-glow {
  position: absolute;
  inset: -18% -10% -8% -10%;
  background:
    radial-gradient(
      60% 60% at 30% 0%,
      rgba(99, 102, 241, 0.28),
      transparent 70%
    ),
    radial-gradient(
      50% 50% at 70% 100%,
      rgba(34, 211, 238, 0.18),
      transparent 70%
    );
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

.hero-product-frame {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 36px 72px -24px rgba(0, 0, 0, 0.65),
    0 18px 40px -20px rgba(0, 0, 0, 0.55);
  z-index: 1;
  transform: rotateX(2deg) rotateY(-3deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center top;
}

.hero-product-frame:hover {
  transform: rotateX(0deg) rotateY(0deg);
}

.hero-product-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

.hero-product-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-block;
}

.hero-product-dot:nth-child(1) {
  background: #ff5f57;
}
.hero-product-dot:nth-child(2) {
  background: #febc2e;
}
.hero-product-dot:nth-child(3) {
  background: #28c840;
}

.hero-product-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Theme-aware visibility (matches existing site pattern) */
body.theme-dark .hero-product-image.screenshot-light,
body.theme-light .hero-product-image.screenshot-dark {
  display: none;
}

/* Floating "Transcribing with Whisper v3" tag */
.hero-product-tag {
  position: absolute;
  bottom: 18px;
  right: -16px;
  background: var(--surface-elevated, var(--surface));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 3;
  white-space: nowrap;
}

.hero-product-tag-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
  flex-shrink: 0;
}

.hero-product-tag-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.5);
  animation: hero-pulse-ring 1.8s ease-out infinite;
}

@keyframes hero-pulse-ring {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Tablet & mobile: drop the perspective tilt, scale down the floating tag */
@media (max-width: 1024px) {
  .hero-product-shot {
    max-width: 640px;
  }
  .hero-product-frame {
    transform: rotateX(1deg) rotateY(-1deg);
  }
}

@media (max-width: 768px) {
  .hero-product-shot {
    max-width: 100%;
  }
  .hero-product-frame {
    transform: none;
    border-radius: 10px;
  }
  .hero-product-glow {
    inset: -8% -6% -4% -6%;
    filter: blur(36px);
  }
  .hero-product-tag {
    right: 8px;
    bottom: 8px;
    font-size: 11px;
    padding: 6px 10px 6px 8px;
  }
  .hero-product-chrome {
    padding: 8px 12px;
  }
  .hero-product-dot {
    width: 9px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-frame {
    transform: none;
    transition: none;
  }
  .hero-product-tag-pulse::before {
    animation: none;
  }
}

/* ============================================ */
/* Hero balance pass — typography & layout     */
/* Reduces H1, restructures stats, gives the   */
/* product shot more column width.             */
/* ============================================ */

/* H1 — smaller, more elegant scaling */
.hero-title {
  font-size: 36px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
}
@media (min-width: 640px) {
  .hero-title {
    font-size: 44px !important;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 52px !important;
    line-height: 1.04 !important;
  }
}
@media (min-width: 1440px) {
  .hero-title {
    font-size: 60px !important;
  }
}

/* Hero description — tighter, narrower max-width so it doesn't run wide */
.hero-description {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
  max-width: 540px !important;
  color: var(--text-secondary) !important;
}
@media (min-width: 1024px) {
  .hero-description {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    max-width: 520px !important;
  }
}

/* Badge container & badge — tighter, more refined */
.badge-container {
  gap: 8px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap;
}

.badge {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 5px 12px !important;
  line-height: 1.4 !important;
}

/* Hero actions — tighter inter-button spacing */
.hero-actions {
  gap: 12px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap;
}

/* Hero stats — divider above instead of massive top margin */
.hero-stats {
  margin-top: 0 !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--border-subtle) !important;
  gap: 24px !important;
  max-width: 520px !important;
}

@media (min-width: 1024px) {
  .hero-stats {
    gap: 32px !important;
  }
}

.hero-stats .stat-value {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-mono) !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.hero-stats .stat-label {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--text-muted) !important;
  margin-top: 5px !important;
  font-weight: 500 !important;
  display: block !important;
}

.hero-stats .stat {
  display: flex;
  flex-direction: column;
}

.hero-stats .stat-divider {
  width: 1px !important;
  height: 32px !important;
  background: var(--border-subtle) !important;
  flex-shrink: 0;
}

/* Hero grid rebalance — give the product more visual presence */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 56px !important;
  }
}

@media (min-width: 1440px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    gap: 64px !important;
  }
}

/* Product shot — fill its column */
.hero-product-shot {
  max-width: 100% !important;
  width: 100% !important;
}

/* Softer 3D tilt so it feels balanced, not gimmicky */
.hero-product-frame {
  transform: rotateX(1.5deg) rotateY(-2deg);
}

/* Slightly slim nav logo wordmark feel */
.nav .logo-text {
  letter-spacing: -0.01em;
}

/* ============================================ */
/* Hero layout v2 — stacked, centered, balanced */
/* Content on top (centered), product full-width */
/* below. Fixes the side-by-side height mismatch */
/* and gives the page a single, clear focal line. */
/* ============================================ */

.hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
  justify-items: center !important;
  padding-top: calc(var(--nav-height) + 56px) !important;
  padding-bottom: var(--section-padding) !important;
  text-align: center !important;
  max-width: var(--container-max) !important;
}

@media (min-width: 1024px) {
  .hero {
    gap: 72px !important;
    padding-top: calc(var(--nav-height) + 72px) !important;
  }
}

/* Content on top */
.hero-content {
  order: 1 !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  width: 100%;
}

/* Product shot on the bottom */
.hero-visual {
  order: 2 !important;
  width: 100% !important;
  max-width: 1100px !important;
  padding: 0 24px !important;
  perspective: 1800px;
}

/* Center each child element in the hero-content stack */
.hero-content .badge-container {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-content .hero-description {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 640px !important;
}

.hero-content .hero-actions {
  justify-content: center !important;
}

.hero-content .hero-stats {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 640px !important;
}

/* Headline can be larger now that it's the focal element of the top half */
@media (min-width: 1024px) {
  .hero-title {
    font-size: 60px !important;
    line-height: 1.04 !important;
  }
}

@media (min-width: 1440px) {
  .hero-title {
    font-size: 72px !important;
  }
}

/* Product shot expanded to use the full container width */
.hero-product-shot {
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Flatter tilt for centered layout — small but present */
.hero-product-frame {
  transform: rotateX(1deg) !important;
}

.hero-product-frame:hover {
  transform: rotateX(0deg) !important;
}

/* Tag in bottom-right of the now-bigger product frame */
.hero-product-tag {
  bottom: 20px !important;
  right: 20px !important;
}

@media (max-width: 768px) {
  .hero-product-tag {
    right: 8px !important;
    bottom: 8px !important;
  }
  .hero-product-frame {
    transform: none !important;
  }
}

/* ============================================ */
/* Hero v3 — product image FIRST, copy below   */
/* Flips the stacked order so the product is   */
/* the immediate focal element.                 */
/* ============================================ */

/* Content first, image below (text visible above the fold) */
.hero-content {
  order: 1 !important;
}
.hero-visual {
  order: 2 !important;
}

/* H1 sized so it doesn't fight the product shot for attention */
.hero-title {
  font-size: 36px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
}
@media (min-width: 640px) {
  .hero-title {
    font-size: 44px !important;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 56px !important;
  }
}
@media (min-width: 1440px) {
  .hero-title {
    font-size: 64px !important;
  }
}

.hero-description {
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin-bottom: 32px !important;
}
@media (min-width: 1024px) {
  .hero-description {
    font-size: 18px !important;
  }
}

.hero-description em {
  color: var(--text-primary);
  font-style: italic;
  font-weight: 500;
}

/* Second floating tag — top-left area, blue pulse */
.hero-product-tag-2 {
  top: 24px;
  left: -16px;
  right: auto !important;
  bottom: auto !important;
}

.hero-product-tag-pulse-blue {
  background: #3b82f6 !important;
}

.hero-product-tag-pulse-blue::before {
  background: rgba(59, 130, 246, 0.55) !important;
  animation-delay: 0.9s;
}

@media (max-width: 768px) {
  .hero-product-tag-2 {
    top: 8px !important;
    left: 8px !important;
  }
}

/* Slightly tighter top padding so the image lands closer to the nav */
.hero {
  padding-top: calc(var(--nav-height) + 40px) !important;
}
@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--nav-height) + 56px) !important;
    gap: 56px !important;
  }
}

/* ============================================ */
/* Slim buttons + UX polish                     */
/* ============================================ */

/* Primary buttons: slimmer, tighter, with proper hover lift */
.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 20px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: var(--primary) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.2 !important;
}

.btn-primary:hover {
  background: var(--primary-dark, var(--primary)) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(var(--primary-rgb), 0.5);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Secondary buttons: slim, outlined */
.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 20px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition:
    transform 0.15s ease,
    border-color 0.2s ease,
    background 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.2 !important;
}

.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* Nav CTA: even slimmer */
.btn-nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition:
    background 0.2s ease,
    transform 0.15s ease !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.btn-nav-cta:hover {
  background: var(--primary-dark, var(--primary)) !important;
  transform: translateY(-1px);
}

/* Mobile CTA: full-width slim */
.btn-mobile-cta {
  padding: 11px 18px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  background: var(--primary) !important;
  color: #fff !important;
  text-align: center !important;
  width: 100%;
}

/* Universal focus ring (a11y) */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-nav-cta:focus-visible,
.btn-mobile-cta:focus-visible,
.nav-links a:focus-visible,
.mobile-menu a:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* Nav link refinement: subtle hover */
.nav-links a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: color 0.2s ease !important;
  padding: 6px 4px !important;
}

.nav-links a:hover {
  color: var(--text-primary) !important;
}

.nav-links a.btn-nav-cta {
  color: #fff !important;
}

/* Nav container — tighter rhythm */
.nav-links {
  gap: 28px !important;
  align-items: center !important;
}

/* Pricing card CTAs full-width and aligned bottom */
.pricing-card .btn-primary,
.pricing-card .btn-secondary {
  width: 100% !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
}

/* SVG icons inside buttons sit tight to text */
.btn-primary svg,
.btn-secondary svg,
.btn-nav-cta svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn-primary:hover svg,
.btn-secondary:hover svg {
  transform: translateX(2px);
}

/* ==================================== */
/* Built differently — 5 diff cards    */
/* ==================================== */
.differentiators-section {
  padding: var(--section-padding) 0;
}
.diff-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.diff-card {
  display: grid;
  grid-template-columns: 56px 64px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth),
    background var(--transition-smooth);
}
.diff-card:hover {
  border-color: rgba(var(--primary-rgb), 0.35);
  background: var(--surface-elevated);
  transform: translateY(-2px);
}
.diff-card-featured {
  border-color: rgba(var(--primary-rgb), 0.4);
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.07) 0%,
    var(--surface) 60%
  );
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.15);
}
.diff-num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  padding-top: 4px;
}
.diff-card-featured .diff-num {
  color: var(--secondary);
}
.diff-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  flex-shrink: 0;
}
.diff-card-featured .diff-icon {
  background: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}
.diff-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 10px 0;
  color: var(--text-primary);
}
.diff-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.65;
}
.diff-body p code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-overlay);
  color: var(--primary);
}
.diff-body strong {
  color: var(--text-primary);
  font-weight: 600;
}
.diff-bullets {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.diff-bullets li {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
}
.diff-bullets li::before {
  content: '→';
  color: var(--primary);
  margin-right: 8px;
  font-weight: 700;
}
.diff-card-featured .diff-bullets li::before {
  color: var(--secondary);
}

@media (max-width: 768px) {
  .diff-card {
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 22px 22px;
  }
  .diff-num {
    grid-row: 1;
    align-self: center;
  }
  .diff-icon {
    grid-row: 1;
    align-self: center;
    width: 44px;
    height: 44px;
  }
  .diff-body {
    grid-column: 1 / -1;
  }
  .diff-body h3 {
    font-size: 1.1rem;
  }
  .diff-bullets {
    gap: 4px 10px;
  }
}

/* ============================================ */
/* Hero terminal snippet — Vercel/Bun-style    */
/* ============================================ */

.hero-snippet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1;
  color: var(--text-secondary);
  margin: 0 auto 24px;
  max-width: max-content;
  position: relative;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}

.hero-snippet:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.hero-snippet-prompt {
  color: var(--primary);
  font-weight: 600;
  user-select: none;
}

.hero-snippet-cmd {
  color: var(--text-primary);
  font-weight: 600;
}

.hero-snippet-arg {
  color: var(--text-secondary);
}

.hero-snippet-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--primary);
  margin-left: 2px;
  animation: snippet-blink 1.1s steps(2) infinite;
  border-radius: 1px;
  vertical-align: middle;
  opacity: 0.85;
}

@keyframes snippet-blink {
  50% {
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .hero-snippet {
    font-size: 12px;
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-snippet-caret {
    animation: none;
  }
}

/* ==================================== */
/* Cutting-edge polish pass             */
/* ==================================== */

/* Hero snippet — terminal-style command block */
.hero-snippet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  margin: 0 0 28px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.2);
}
.hero-snippet-prompt {
  color: var(--text-muted);
  font-weight: 500;
}
.hero-snippet-cmd {
  color: var(--text-primary);
  font-weight: 600;
}
.hero-snippet-arg {
  color: var(--primary);
}
.hero-snippet-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--primary);
  border-radius: 1px;
  margin-left: 2px;
  animation: snippet-blink 1.1s steps(2) infinite;
  vertical-align: -2px;
}
@keyframes snippet-blink {
  to {
    opacity: 0;
  }
}

/* Tighter hero typography — Linear / Vercel display rhythm */
.hero-title {
  letter-spacing: -0.035em;
}
.hero-description strong {
  color: var(--text-primary);
  font-weight: 600;
}
.hero-description em {
  font-style: italic;
  color: var(--primary);
  font-weight: 500;
  background: rgba(var(--primary-rgb), 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

/* CTA arrow slide on hover */
.btn-primary svg,
.btn-secondary svg,
.btn-nav-cta svg,
.waitlist-submit svg {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover svg,
.btn-secondary:hover svg,
.btn-nav-cta:hover svg,
.waitlist-submit:hover svg {
  transform: translateX(4px);
}

/* How-it-works — connector line between numbered steps */
.how-steps {
  position: relative;
}
@media (min-width: 769px) {
  .how-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--primary-rgb), 0.28) 20%,
      rgba(var(--secondary-rgb), 0.22) 80%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 0;
  }
}
.how-step {
  position: relative;
  z-index: 1;
}
.how-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--background);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 18px;
  box-shadow: 0 0 0 4px var(--background);
}

/* Pricing-featured — animated gradient border */
.pricing-featured {
  position: relative;
  isolation: isolate;
}
.pricing-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--secondary) 50%,
    var(--primary) 100%
  );
  background-size: 220% 220%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gradient-shift 6s ease infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Universal soft card lift on hover */
.capability-card,
.tech-card,
.pricing-card,
.quote-card {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.capability-card:hover,
.tech-card:hover,
.pricing-card:not(.pricing-featured):hover {
  transform: translateY(-4px);
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}

/* Comparison table — subtle row hover */
.comparison-table tbody tr {
  transition: background 0.15s ease;
}
.comparison-table tbody tr:hover td:not(.col-us),
.comparison-table tbody tr:hover th {
  background: rgba(var(--primary-rgb), 0.03);
}

/* Hero stats — gradient values for emphasis */
.hero-stats .stat-value {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* Subtle radial vignettes under heavier text sections */
.differentiators-section,
.tech-section,
.faq-section,
.comparison-section {
  position: relative;
  overflow: hidden;
}
.differentiators-section::before,
.tech-section::before,
.faq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 0%,
    rgba(var(--primary-rgb), 0.05),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.differentiators-section .container,
.tech-section .container,
.faq-section .container,
.comparison-section .container {
  position: relative;
  z-index: 1;
}

/* Trust strip refinements */
.trust-strip-logos li {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.trust-strip-logos li:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
}
.trust-strip-logos li:hover::before {
  color: var(--primary);
}

/* Tech cards — code-snippet vibe */
.tech-card .tech-card-models strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.93em;
  letter-spacing: -0.01em;
}
.tech-card .tech-card-note {
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* Logo hover — tiny float on nav scroll-to-top affordance */
.logo {
  transition: opacity var(--transition-fast);
}
.logo:hover {
  opacity: 0.92;
}

/* Generic improved focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Smooth section-to-section gradient fade (visual continuity) */
.trust-strip,
.differentiators-section,
.comparison-section,
.tech-section,
.faq-section,
.customer-proof-section {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(var(--primary-rgb), 0.015) 50%,
    transparent 100%
  );
}

/* ============================================ */
/* Final polish — ambient hero breathing       */
/* (Linear / Cursor / Resend pattern)          */
/* ============================================ */

@keyframes hero-glow-breathe {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.hero-product-glow {
  animation: hero-glow-breathe 9s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-glow {
    animation: none;
  }
}

/* Scroll-driven section reveal — uses native animation-timeline.
   No JS required. Falls back gracefully in browsers that don't support it. */

@supports (animation-timeline: view()) {
  .capabilities-section,
  .canada-section,
  .pricing-section,
  .tech-section,
  .how-section,
  .customer-proof-section,
  .comparison-section,
  .faq-section {
    animation: section-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  @keyframes section-reveal {
    from {
      opacity: 0.4;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .capabilities-section,
    .canada-section,
    .pricing-section,
    .tech-section,
    .how-section,
    .customer-proof-section,
    .comparison-section,
    .faq-section {
      animation: none;
    }
  }
}

/* ============================================ */
/* FINAL polish — unified visual rhythm        */
/* All section titles same size; consistent     */
/* section padding; equal card heights.        */
/* ============================================ */

/* Section title — unified at 40px desktop, scales down responsively */
.section-title {
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
  margin-top: 12px !important;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .section-title {
    font-size: 36px !important;
  }
}

@media (min-width: 1024px) {
  .section-title {
    font-size: 42px !important;
  }
}

/* Section description — consistent across all sections */
.section-description {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto !important;
}

@media (min-width: 1024px) {
  .section-description {
    font-size: 16px !important;
  }
}

/* Section padding — consistent vertical rhythm across all sections */
section[id]:not(.hero):not(#main-content) {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  section[id]:not(.hero):not(#main-content) {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* All card-based grids: cards stretch to equal height */
.capabilities-grid,
.canada-pillars,
.pricing-grid,
.tech-grid,
.quote-grid {
  align-items: stretch !important;
}

.capability-card,
.canada-pillar,
.tech-card,
.quote-card {
  height: 100%;
}

/* Stat label slight bump for better legibility */
.hero-stats .stat-label {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
}

.hero-stats .stat-value {
  font-size: 15px !important;
}

/* Comparison table: horizontal scroll on small screens */
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  min-width: 720px;
}

/* ============================================ */
/* Cost-at-scale section — pennies vs majors   */
/* ============================================ */

.cost-section {
  padding: 80px 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      70% 60% at 50% 0%,
      rgba(34, 211, 238, 0.06),
      transparent 70%
    ),
    radial-gradient(
      70% 60% at 50% 100%,
      rgba(99, 102, 241, 0.05),
      transparent 70%
    );
}

.cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.cost-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.cost-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.cost-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.cost-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}

.cost-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.4;
}

.cost-list li:last-child {
  border-bottom: 0;
}

.cost-vendor {
  flex: 1;
}

.cost-amount {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cost-row-diaspor {
  background: linear-gradient(
    90deg,
    rgba(99, 102, 241, 0.08),
    rgba(34, 211, 238, 0.04)
  );
  margin: 0 -10px;
  padding: 10px !important;
  border-radius: 6px;
  border-bottom: 0 !important;
}

.cost-row-diaspor + .cost-row-diaspor {
  margin-top: -2px;
  border-top: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 0 0 6px 6px;
}

.cost-row-diaspor:not(:has(+ .cost-row-diaspor)) {
  border-radius: 0 0 6px 6px;
}

.cost-row-diaspor:not(.cost-row-diaspor + .cost-row-diaspor) {
  border-radius: 6px 6px 0 0;
}

/* Simpler fallback for browsers without :has() */
.cost-row-diaspor {
  border-radius: 6px;
}

.cost-row-diaspor .cost-vendor strong {
  color: var(--text-primary);
}

.cost-row-diaspor .cost-amount strong {
  color: var(--primary);
  font-weight: 600;
}

.cost-savings {
  margin: 0;
  padding: 12px 14px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 6px;
  color: #22c55e;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: -0.005em;
}

.cost-footnote {
  max-width: 720px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .cost-grid {
    grid-template-columns: 1fr;
  }
  .cost-list li {
    font-size: 13px;
  }
}

/* ============================================ */
/* Differentiator cards — UI/UX polish         */
/* Smaller numbers, bigger headlines, cleaner   */
/* bullets, more breathing room.                */
/* ============================================ */

.diff-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px !important;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  list-style: none;
}

.diff-card {
  display: grid !important;
  grid-template-columns: auto auto 1fr !important;
  gap: 24px !important;
  align-items: start !important;
  padding: 28px 32px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease !important;
}

.diff-card:hover {
  border-color: var(--border-hover) !important;
  transform: translateY(-2px) !important;
}

.diff-card-featured {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06),
    var(--surface) 50%
  ) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
}

.diff-num {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  letter-spacing: 0.08em !important;
  padding-top: 4px !important;
  opacity: 0.7 !important;
  min-width: 24px;
}

.diff-icon {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  border-radius: 10px !important;
  color: var(--primary) !important;
  flex-shrink: 0;
}

.diff-card-featured .diff-icon {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.18),
    rgba(34, 211, 238, 0.12)
  ) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}

.diff-body {
  min-width: 0;
}

.diff-body h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.diff-body p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin: 0 0 14px !important;
}

.diff-body p code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.diff-body p strong {
  color: var(--text-primary);
  font-weight: 600;
}

.diff-bullets {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
}

.diff-bullets li {
  position: relative;
  padding-left: 18px !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  font-family: var(--font-sans) !important;
  line-height: 1.5 !important;
}

.diff-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 600;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .diff-card {
    grid-template-columns: auto 1fr !important;
    gap: 16px !important;
    padding: 22px 20px !important;
  }
  .diff-num {
    grid-column: 1;
    grid-row: 1;
  }
  .diff-icon {
    grid-column: 1;
    grid-row: 2;
    width: 36px !important;
    height: 36px !important;
  }
  .diff-body {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .diff-bullets {
    grid-template-columns: 1fr !important;
    gap: 4px 0 !important;
  }
  .diff-body h3 {
    font-size: 17px !important;
  }
  .diff-body p {
    font-size: 14px !important;
  }
}

/* ============================================ */
/* Custom AI / RL engagements — single card    */
/* ============================================ */

.custom-section {
  padding: 80px 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      60% 50% at 20% 0%,
      rgba(99, 102, 241, 0.08),
      transparent 70%
    ),
    radial-gradient(
      60% 50% at 80% 100%,
      rgba(34, 211, 238, 0.06),
      transparent 70%
    );
}

.custom-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.custom-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.4) 30%,
    rgba(34, 211, 238, 0.4) 70%,
    transparent 100%
  );
}

.custom-card .section-tag {
  display: inline-block;
  margin-bottom: 14px !important;
}

.custom-card .section-title {
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

.custom-card .section-description {
  margin: 0 auto 28px !important;
  max-width: 680px !important;
  font-size: 16px;
}

.custom-card .section-description strong {
  color: var(--text-primary);
  font-weight: 600;
}

.custom-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.custom-pills li {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 500;
}

.custom-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.custom-footnote {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .custom-card {
    padding: 32px 22px;
  }
  .custom-actions {
    flex-direction: column;
  }
  .custom-actions a {
    width: 100%;
  }
}

/* ============================================================ */
/* Hero — bare screenshot (no chrome frame)                     */
/* ============================================================ */

.hero-product-shot-bare {
  perspective: 1400px;
}

.hero-product-image-bare {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
  z-index: 1;
  border-radius: 14px;
  transform: rotateX(2deg) rotateY(-3deg);
  transform-origin: center top;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.55))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.hero-product-image-bare:hover {
  transform: rotateX(0deg) rotateY(0deg);
}

@media (max-width: 1024px) {
  .hero-product-image-bare {
    transform: rotateX(1deg) rotateY(-1deg);
  }
}

@media (max-width: 768px) {
  .hero-product-image-bare {
    transform: none;
    border-radius: 10px;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5))
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }
}

/* ============================================================ */
/* Capabilities v2 — featured hero card + companion list        */
/* ============================================================ */

.capabilities-v2 .capabilities-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  align-items: stretch;
}

.capability-feature {
  position: relative;
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(99, 102, 241, 0.18),
      transparent 60%
    ),
    radial-gradient(
      120% 80% at 100% 100%,
      rgba(34, 211, 238, 0.14),
      transparent 60%
    ),
    var(--surface);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 18px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.capability-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06),
    transparent 30%
  );
  pointer-events: none;
}

.capability-feature-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(99, 102, 241, 0.22),
    rgba(34, 211, 238, 0.18)
  );
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
}

.capability-feature-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  position: relative;
}

.capability-feature-lede {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  position: relative;
}

.capability-feature-grid-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}

.capability-feature-grid-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.capability-feature-grid-list strong {
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
}

.capability-feature-grid-list span {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.capability-feature-pricing {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  font-family: var(--font-mono);
  font-size: 12.5px;
  position: relative;
}

.capabilities-companion {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capabilities-companion li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.capabilities-companion li:hover {
  border-color: var(--border-hover);
  transform: translateX(-2px);
}

.capabilities-companion h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.capabilities-companion p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

.capability-companion-price {
  margin-top: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

@media (max-width: 960px) {
  .capabilities-v2 .capabilities-feature-grid {
    grid-template-columns: 1fr;
  }
  .capability-feature {
    padding: 28px 22px;
  }
  .capability-feature-title {
    font-size: 24px;
  }
  .capability-feature-grid-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* Tech section — terminal bands                                */
/* ============================================================ */

.tech-section-bands .tech-bands {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tech-section-bands .tech-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    rgba(10, 12, 22, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-mono);
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.tech-section-bands .tech-band:hover {
  border-color: var(--border-hover);
  transform: translateX(2px);
}

.tech-section-bands .tech-band-accent {
  border-color: rgba(34, 211, 238, 0.38);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.06), rgba(99, 102, 241, 0.04)),
    rgba(10, 12, 22, 0.65);
}

.tech-section-bands .tech-band-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.tech-section-bands .tech-band-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.32);
  color: #c7d2fe;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.tech-section-bands .tech-band-accent .tech-band-tag {
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.36);
  color: #a5f3fc;
}

.tech-section-bands .tech-band-code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.tech-section-bands .tech-band-code::-webkit-scrollbar {
  display: none;
}

.tech-section-bands .tech-band-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tech-section-bands .tech-band-models {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tech-section-bands .tech-band-models strong {
  color: var(--text-primary);
  font-weight: 600;
}

.tech-section-bands .tech-band-note {
  margin: 0;
  font-family: var(--font-sans, inherit);
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .tech-section-bands .tech-band-head {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
    gap: 10px;
  }
  .tech-section-bands .tech-band-code {
    width: 100%;
    font-size: 12px;
  }
  .tech-section-bands .tech-band-body {
    padding: 14px 14px 16px;
  }
}

/* ============================================================ */
/* Hero eyebrow pill                                            */
/* ============================================================ */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(99, 102, 241, 0.18),
    rgba(34, 211, 238, 0.14)
  );
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7);
  animation: eyebrow-pulse 2s ease-out infinite;
}

@keyframes eyebrow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(34, 211, 238, 0);
  }
}

/* ============================================================ */
/* Hero mockup — live non-verbal analysis UI (replaces image)   */
/* ============================================================ */

.hero-mockup {
  --mockup-bg: #0a0d1a;
  --mockup-border: rgba(99, 102, 241, 0.24);
  --mockup-text: #e2e8f0;
  --mockup-muted: rgba(226, 232, 240, 0.55);

  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(67, 56, 202, 0.16),
      transparent 55%
    ),
    radial-gradient(
      100% 70% at 100% 100%,
      rgba(34, 211, 238, 0.12),
      transparent 60%
    ),
    var(--mockup-bg);
  border: 1px solid var(--mockup-border);
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--mockup-text);
  font-size: 12px;
  line-height: 1.4;
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: rotateX(2deg) rotateY(-3deg);
  transform-origin: center top;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-mockup:hover {
  transform: rotateX(0deg) rotateY(0deg);
}

@media (max-width: 1024px) {
  .hero-mockup {
    transform: rotateX(1deg) rotateY(-1deg);
  }
}
@media (max-width: 768px) {
  .hero-mockup {
    transform: none;
  }
}

/* Hero screenshot cross-fader.
   Replaces the old CSS-animated interview mockup with two real-app
   screenshots that auto-cycle every 6 seconds. */
.hero-mockup-screenshots {
  aspect-ratio: 1600 / 1030;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
}

.hero-mockup-screenshots .hero-screenshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  border-radius: inherit;
  display: block;
}

.hero-mockup-screenshots .hero-screenshot.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-mockup-screenshots .hero-screenshot {
    transition: none;
  }
}

.hero-mockup-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.hero-mockup-traffic {
  display: flex;
  gap: 6px;
}
.hero-mockup-traffic span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.hero-mockup-traffic span:nth-child(1) {
  background: #ff5f57;
}
.hero-mockup-traffic span:nth-child(2) {
  background: #febc2e;
}
.hero-mockup-traffic span:nth-child(3) {
  background: #28c840;
}

.hero-mockup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.hero-mockup-brand {
  width: 18px;
  height: 16px;
  display: inline-flex;
  flex-shrink: 0;
}
.hero-mockup-brand svg {
  width: 100%;
  height: 100%;
}
.hero-mockup-filename {
  font-size: 11.5px;
  color: var(--mockup-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-mockup-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.32);
  color: #4ade80;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-mockup-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: mockup-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes mockup-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

.hero-mockup-body {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 172px;
  min-height: 380px;
}

.hero-mockup-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.012);
  min-width: 0;
  overflow: visible;
}
.hero-mockup-sidebar h5 {
  margin: 0 0 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mockup-muted);
  padding-left: 4px;
}
.hero-mockup-sidebar h5:not(:first-child) {
  margin-top: 16px;
}
.hero-mockup-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-mockup-sidebar li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--mockup-muted);
  font-size: 10.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  letter-spacing: -0.005em;
}
.hero-mockup-sidebar li.active {
  background: rgba(99, 102, 241, 0.16);
  color: var(--mockup-text);
}

.src-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.src-dot.src-s3 {
  background: #f59e0b;
}
.src-dot.src-local {
  background: #6366f1;
}
.src-dot.src-nas {
  background: #22d3ee;
}
.src-dot.src-cloud {
  background: #ef4444;
}

.model-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: mockup-dot-pulse 1.8s ease-in-out infinite;
}
.hero-mockup-sidebar li.model-active:nth-of-type(2) .model-pulse {
  animation-delay: 0.3s;
}
.hero-mockup-sidebar li.model-active:nth-of-type(3) .model-pulse {
  animation-delay: 0.6s;
}

.hero-mockup-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-mockup-canvas {
  position: relative;
  flex: 1;
  min-height: 200px;
  overflow: hidden;
  background:
    radial-gradient(
      60% 50% at 50% 45%,
      rgba(99, 102, 241, 0.08),
      transparent 70%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.canvas-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  opacity: 0.55;
}

.canvas-skeleton {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 134px;
  height: 168px;
  transform: translate(-58%, -55%);
  pointer-events: none;
  overflow: visible;
}

.canvas-skeleton line {
  stroke: rgba(34, 211, 238, 0.45);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: skeleton-draw 3.5s ease-in-out infinite;
}

.canvas-skeleton line:nth-child(1) {
  animation-delay: 0.05s;
}
.canvas-skeleton line:nth-child(2) {
  animation-delay: 0.1s;
}
.canvas-skeleton line:nth-child(3) {
  animation-delay: 0.15s;
}
.canvas-skeleton line:nth-child(4) {
  animation-delay: 0.2s;
}
.canvas-skeleton line:nth-child(5) {
  animation-delay: 0.25s;
}
.canvas-skeleton line:nth-child(6) {
  animation-delay: 0.3s;
}
.canvas-skeleton line:nth-child(7) {
  animation-delay: 0.35s;
}
.canvas-skeleton line:nth-child(8) {
  animation-delay: 0.4s;
}
.canvas-skeleton line:nth-child(9) {
  animation-delay: 0.45s;
}
.canvas-skeleton line:nth-child(10) {
  animation-delay: 0.5s;
}

@keyframes skeleton-draw {
  0% {
    stroke-dashoffset: 90;
    opacity: 0;
  }
  18% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  78% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 90;
    opacity: 0;
  }
}

.canvas-face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 134px;
  height: 168px;
  transform: translate(-58%, -55%);
}

.canvas-face-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 80% at 50% 45%,
    rgba(99, 102, 241, 0.22),
    transparent 70%
  );
  border-radius: 50% / 60%;
  border: 1px dashed rgba(199, 210, 254, 0.4);
}

.canvas-marker {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.7);
  transform: translate(-50%, -50%);
  animation: marker-flicker 3.2s ease-in-out infinite;
}
.canvas-marker-eye-l {
  left: 32%;
  top: 38%;
}
.canvas-marker-eye-r {
  left: 66%;
  top: 38%;
  animation-delay: 0.25s;
}
.canvas-marker-brow-l {
  left: 30%;
  top: 26%;
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
  animation-delay: 0.5s;
}
.canvas-marker-brow-r {
  left: 68%;
  top: 26%;
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
  animation-delay: 0.75s;
}
.canvas-marker-nose {
  left: 50%;
  top: 53%;
  width: 5px;
  height: 5px;
  animation-delay: 1s;
}
.canvas-marker-mouth-l {
  left: 38%;
  top: 71%;
  width: 5px;
  height: 5px;
  animation-delay: 1.25s;
}
.canvas-marker-mouth-r {
  left: 62%;
  top: 71%;
  width: 5px;
  height: 5px;
  animation-delay: 1.5s;
}
.canvas-marker-jaw {
  left: 50%;
  top: 90%;
  width: 5px;
  height: 5px;
  animation-delay: 1.75s;
}

@keyframes marker-flicker {
  0%,
  90%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  93% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

.canvas-gaze {
  position: absolute;
  left: 32%;
  top: 38%;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.7), transparent);
  transform-origin: top center;
  animation: gaze-sweep 4.5s ease-in-out infinite;
}

@keyframes gaze-sweep {
  0%,
  100% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(-12deg);
  }
}

.canvas-flag {
  position: absolute;
  left: 78%;
  top: -2%;
  padding: 4px 8px;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 4px;
  color: #fbbf24;
  font-size: 10px;
  white-space: nowrap;
  animation: flag-fade 4.5s ease-in-out infinite;
  max-width: 180px;
}

@keyframes flag-fade {
  0%,
  100% {
    opacity: 0;
    transform: translateY(3px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

.canvas-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 211, 238, 0.18),
    transparent
  );
  width: 28%;
  pointer-events: none;
  animation: scan-slide 5s linear infinite;
}

@keyframes scan-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

.hero-mockup-timeline {
  padding: 10px 14px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-track {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.timeline-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  border-radius: 2px;
  width: 0;
  animation: timeline-fill 9s ease-in-out infinite;
}

@keyframes timeline-fill {
  0% {
    width: 0;
  }
  90% {
    width: 88%;
  }
  100% {
    width: 88%;
  }
}

.timeline-marker {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(199, 210, 254, 0.7);
  transform: translate(-50%, -50%);
}
.timeline-marker.mid {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.7);
}
.timeline-marker.high {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  width: 7px;
  height: 7px;
}

.timeline-cursor {
  position: absolute;
  top: -3px;
  left: 0;
  width: 2px;
  height: 10px;
  background: #fff;
  border-radius: 1px;
  animation: timeline-cursor 9s ease-in-out infinite;
}

@keyframes timeline-cursor {
  0% {
    left: 0;
  }
  100% {
    left: 88%;
  }
}

.timeline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 9.5px;
  color: var(--mockup-muted);
  font-variant-numeric: tabular-nums;
}

.hero-mockup-transcript {
  padding: 6px 14px 14px;
  font-size: 11.5px;
  color: var(--mockup-text);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans, inherit);
}

.hero-mockup-transcript p {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.hero-mockup-transcript .speaker {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.hero-mockup-transcript .speaker-q {
  background: rgba(34, 211, 238, 0.16);
  color: #67e8f9;
  border-color: rgba(34, 211, 238, 0.4);
}

.hero-mockup-transcript .line {
  flex: 1;
  color: var(--mockup-muted);
}
.hero-mockup-transcript .typing-row .line {
  color: var(--mockup-text);
}

.hero-mockup-transcript .typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: bottom;
  animation: typing 5s steps(34, end) infinite;
}

@keyframes typing {
  0% {
    width: 0;
  }
  60%,
  100% {
    width: 100%;
  }
}

.hero-mockup-transcript .caret {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #c7d2fe;
  margin-left: 2px;
  animation: caret-blink 1s steps(1) infinite;
  vertical-align: -2px;
}

@keyframes caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

.hero-mockup-signals {
  padding: 12px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.signal-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.signal-card-flagship {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.32);
}

.signal-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.signal-label {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mockup-muted);
}

.signal-card-flagship .signal-label {
  color: #fca5a5;
}

.signal-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--mockup-text);
  font-variant-numeric: tabular-nums;
}

/* Cycling numeric readings — stacked spans fade through in sequence */
.signal-cycle {
  position: relative;
  display: inline-block;
  min-width: 3.4em;
  height: 1.1em;
  text-align: right;
}

.signal-cycle > span {
  position: absolute;
  inset: 0;
  text-align: right;
  opacity: 0;
  animation: signal-cycle-fade 8s ease-in-out infinite;
}

.signal-cycle > span:nth-child(1) {
  animation-delay: 0s;
}
.signal-cycle > span:nth-child(2) {
  animation-delay: 2s;
}
.signal-cycle > span:nth-child(3) {
  animation-delay: 4s;
}
.signal-cycle > span:nth-child(4) {
  animation-delay: 6s;
}

@keyframes signal-cycle-fade {
  0%,
  22%,
  100% {
    opacity: 0;
    transform: translateY(2px);
  }
  3%,
  19% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* per-card phase offset so the four cards don't flip in lockstep */
.signal-cycle.signal-cycle-credibility > span:nth-child(1) {
  animation-delay: 0s;
}
.signal-cycle.signal-cycle-credibility > span:nth-child(2) {
  animation-delay: 2s;
}
.signal-cycle.signal-cycle-credibility > span:nth-child(3) {
  animation-delay: 4s;
}
.signal-cycle.signal-cycle-credibility > span:nth-child(4) {
  animation-delay: 6s;
}

.signal-cycle.signal-cycle-stress > span:nth-child(1) {
  animation-delay: 0.4s;
}
.signal-cycle.signal-cycle-stress > span:nth-child(2) {
  animation-delay: 2.4s;
}
.signal-cycle.signal-cycle-stress > span:nth-child(3) {
  animation-delay: 4.4s;
}
.signal-cycle.signal-cycle-stress > span:nth-child(4) {
  animation-delay: 6.4s;
}

.signal-cycle.signal-cycle-engagement > span:nth-child(1) {
  animation-delay: 0.8s;
}
.signal-cycle.signal-cycle-engagement > span:nth-child(2) {
  animation-delay: 2.8s;
}
.signal-cycle.signal-cycle-engagement > span:nth-child(3) {
  animation-delay: 4.8s;
}
.signal-cycle.signal-cycle-engagement > span:nth-child(4) {
  animation-delay: 6.8s;
}

.signal-cycle.signal-cycle-pose > span:nth-child(1) {
  animation-delay: 1.2s;
}
.signal-cycle.signal-cycle-pose > span:nth-child(2) {
  animation-delay: 3.2s;
}
.signal-cycle.signal-cycle-pose > span:nth-child(3) {
  animation-delay: 5.2s;
}
.signal-cycle.signal-cycle-pose > span:nth-child(4) {
  animation-delay: 7.2s;
}

@media (prefers-reduced-motion: reduce) {
  .signal-cycle > span {
    opacity: 0;
  }
  .signal-cycle > span:first-child {
    opacity: 1;
    animation: none !important;
  }
}

/* ============================================================ */
/* Enterprise polish — section rhythm + safety overrides        */
/* ============================================================ */

/* Consistent vertical spacing between every major section */
.usecases-section,
.deployment-section,
.compliance-section,
.engineering-section,
.canada-band,
.cost-section,
.capabilities-section,
.tech-section,
.custom-section,
.pricing-section,
.waitlist-section {
  scroll-margin-top: 80px;
}

/* Subtle divider between adjacent dark sections */
.usecases-section + .deployment-section,
.deployment-section + .compliance-section,
.compliance-section + .capabilities-section,
.capabilities-section + .cost-section,
.cost-section + .tech-section,
.tech-section + .engineering-section,
.engineering-section + .custom-section {
  position: relative;
}

.usecases-section + .deployment-section::before,
.deployment-section + .compliance-section::before,
.compliance-section + .capabilities-section::before,
.capabilities-section + .cost-section::before,
.cost-section + .tech-section::before,
.tech-section + .engineering-section::before,
.engineering-section + .custom-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.32),
    rgba(34, 211, 238, 0.22),
    transparent
  );
  pointer-events: none;
}

/* Hero stats — never wrap to two lines on the value, allow label wrap below */
.hero-stats .stat-value {
  white-space: nowrap;
}
.hero-stats .stat-label {
  max-width: 22ch;
}

/* Asym section header — give the title room */
.section-header-asym .section-title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

/* Capabilities flagship — tighten the 2-col features grid on mid widths */
@media (max-width: 1180px) and (min-width: 961px) {
  .capability-feature-grid-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Engineering pre blocks — never break out horizontally */
.engineering-pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Compliance pill — keep it on its own line, never wrap mid-status */
.compliance-pill {
  white-space: nowrap;
}

/* Mockup safety — prevent the floating tag from escaping the card */
.hero-mockup-canvas {
  overflow: hidden;
}

/* Trust strip — wrap badges cleanly with consistent gutters */
.trust-strip .container {
  display: flex;
  justify-content: center;
}

.trust-strip-badges {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}

.signal-card-flagship .signal-value {
  color: #f87171;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.4);
}

@keyframes signal-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.signal-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.signal-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: #6366f1;
}

.signal-bar-danger {
  background: linear-gradient(90deg, #ef4444, #f59e0b);
  animation: bar-fill-danger 5s ease-in-out infinite alternate;
}
.signal-bar-warn {
  background: linear-gradient(90deg, #f59e0b, #facc15);
  animation: bar-fill-warn 5s ease-in-out infinite alternate;
}
.signal-bar-good {
  background: linear-gradient(90deg, #22c55e, #4ade80);
  animation: bar-fill-good 5s ease-in-out infinite alternate;
}

@keyframes bar-fill-danger {
  0% {
    width: 58%;
  }
  100% {
    width: 72%;
  }
}
@keyframes bar-fill-warn {
  0% {
    width: 32%;
  }
  100% {
    width: 48%;
  }
}
@keyframes bar-fill-good {
  0% {
    width: 78%;
  }
  100% {
    width: 88%;
  }
}

.signal-card p {
  margin: 0;
  font-size: 10.5px;
  color: var(--mockup-muted);
  line-height: 1.4;
  font-family: var(--font-sans, inherit);
}

.signal-card-mini {
  border-style: dashed;
}
.signal-hint {
  font-style: italic;
}

@media (max-width: 760px) {
  .hero-mockup-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-mockup-sidebar {
    display: none;
  }
  .hero-mockup-signals {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: none;
  }
  .hero-mockup-signals::-webkit-scrollbar {
    display: none;
  }
  .signal-card {
    min-width: 150px;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mockup *,
  .hero-mockup *::before,
  .hero-mockup *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-eyebrow-dot {
    animation: none !important;
  }
}

/* ============================================================ */
/* Asymmetric section header + bleed tag                        */
/* ============================================================ */

.section-header-asym {
  text-align: left;
  max-width: var(--container-max);
  margin: 0 auto 36px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px 36px;
  align-items: end;
}

.section-header-asym .section-tag {
  grid-column: 1;
  align-self: start;
}

.section-tag-bleed {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(
    90deg,
    rgba(239, 68, 68, 0.18),
    rgba(99, 102, 241, 0.18)
  );
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #fca5a5;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-header-asym .section-title {
  grid-column: 1;
  margin: 0;
}
.section-header-asym .section-description {
  grid-column: 2;
  margin: 0;
  text-align: left;
}

@media (max-width: 768px) {
  .section-header-asym {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .section-header-asym .section-description {
    grid-column: 1;
  }
}

/* ============================================================ */
/* Use cases section                                            */
/* ============================================================ */

.usecases-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      60% 50% at 18% 0%,
      rgba(239, 68, 68, 0.06),
      transparent 70%
    ),
    radial-gradient(
      60% 50% at 82% 100%,
      rgba(34, 211, 238, 0.05),
      transparent 70%
    );
}

.usecases-grid {
  list-style: none;
  padding: 0 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.usecase-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.usecase-tile:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.usecase-tile-flagship {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(99, 102, 241, 0.14),
      transparent 60%
    ),
    radial-gradient(
      120% 80% at 100% 100%,
      rgba(34, 211, 238, 0.1),
      transparent 60%
    ),
    var(--surface);
  border-color: rgba(99, 102, 241, 0.35);
}

.usecase-tile-flagship:first-child {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(239, 68, 68, 0.14),
      transparent 60%
    ),
    radial-gradient(
      120% 80% at 100% 100%,
      rgba(99, 102, 241, 0.1),
      transparent 60%
    ),
    var(--surface);
  border-color: rgba(239, 68, 68, 0.35);
}

.usecase-tile h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.usecase-tile-flagship h3 {
  font-size: 22px;
}

.usecase-tile p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

.usecase-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #c7d2fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.usecase-tile-flagship:first-child .usecase-icon {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.32);
  color: #fca5a5;
}

.usecase-tile-flagship:nth-child(2) .usecase-icon {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.32);
  color: #67e8f9;
}

.usecase-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.usecases-disclaimer {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 960px) {
  .usecases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .usecases-grid {
    grid-template-columns: 1fr;
  }
}

/* Beta pill on use-case tiles (lie detection + sport judging) */
.usecase-beta {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.18),
    rgba(251, 146, 60, 0.14)
  );
  border: 1px solid rgba(251, 191, 36, 0.42);
  color: #fbbf24;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.usecase-beta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
  animation: beta-pulse 1.8s ease-out infinite;
}

@keyframes beta-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55);
  }
  100% {
    box-shadow: 0 0 0 7px rgba(251, 191, 36, 0);
  }
}

.usecases-disclaimer strong {
  color: #fbbf24;
  font-weight: 600;
}

@media (max-width: 480px) {
  .usecase-beta {
    position: static;
    align-self: flex-start;
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usecase-beta-dot {
    animation: none !important;
  }
}

/* ============================================================ */
/* Custom-card price tag                                        */
/* ============================================================ */

.custom-price-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 24px;
  margin: 14px auto 22px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.22),
    rgba(34, 211, 238, 0.14)
  );
  border: 1px solid rgba(99, 102, 241, 0.42);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.custom-price-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(199, 210, 254, 0.18),
    transparent
  );
  width: 30%;
  animation: scan-slide 7s linear infinite;
  pointer-events: none;
}

.custom-price-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c7d2fe;
  position: relative;
}

.custom-price-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  font-family: var(--font-sans, inherit);
  line-height: 1;
  position: relative;
}

.custom-price-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-sans, inherit);
  max-width: 260px;
  line-height: 1.45;
  position: relative;
}

/* ============================================================ */
/* Built in Canada — credibility band (under trust strip)       */
/* ============================================================ */

.canada-band {
  padding: 48px 0 56px;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      80% 60% at 50% 0%,
      rgba(239, 68, 68, 0.05),
      transparent 70%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent);
}

.canada-band-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.canada-band-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.canada-band-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.canada-band-flag {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(239, 68, 68, 0.16),
      transparent 60%
    ),
    radial-gradient(
      120% 80% at 100% 100%,
      rgba(248, 113, 113, 0.08),
      transparent 60%
    ),
    var(--surface);
  border-color: rgba(239, 68, 68, 0.38);
}

.canada-band-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #c7d2fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.canada-band-flag .canada-band-icon {
  width: 52px;
  height: 52px;
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.canada-band-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.canada-band-flag h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.canada-band-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

.canada-band-card strong {
  color: var(--text-primary);
}

@media (max-width: 1100px) {
  .canada-band-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .canada-band-flag {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .canada-band-grid {
    grid-template-columns: 1fr;
  }
  .canada-band-flag {
    grid-column: span 1;
  }
}

/* ============================================================ */
/* Deployment ladder — self-hosting tiers                       */
/* ============================================================ */

.deployment-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      70% 60% at 0% 0%,
      rgba(99, 102, 241, 0.06),
      transparent 70%
    ),
    radial-gradient(
      70% 60% at 100% 100%,
      rgba(34, 211, 238, 0.05),
      transparent 70%
    );
}

.deployment-ladder {
  list-style: none;
  padding: 0 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  counter-reset: deployment-step;
}

.deployment-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.deployment-step:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.deployment-step-featured {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(99, 102, 241, 0.16),
      transparent 60%
    ),
    radial-gradient(
      120% 80% at 100% 100%,
      rgba(34, 211, 238, 0.1),
      transparent 60%
    ),
    var(--surface);
  border-color: rgba(99, 102, 241, 0.42);
}

.deployment-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deployment-step-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #c7d2fe, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.deployment-step-iso {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.deployment-step-featured .deployment-step-iso {
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.42);
  background: rgba(99, 102, 241, 0.12);
}

.deployment-step h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.deployment-step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

.deployment-step ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.deployment-step li {
  font-size: 12.5px;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}

.deployment-step li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -2px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
}

.deployment-cmd {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #c7d2fe;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 9px 11px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: auto;
}

.deployment-cmd::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1180px) {
  .deployment-ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .deployment-ladder {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================ */
/* Compliance matrix                                            */
/* ============================================================ */

.compliance-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background: radial-gradient(
    50% 60% at 50% 0%,
    rgba(34, 197, 94, 0.05),
    transparent 70%
  );
}

.compliance-grid {
  list-style: none;
  padding: 0 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.compliance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.compliance-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.compliance-card header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.compliance-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.compliance-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.compliance-pill-ready {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.36);
  color: #4ade80;
}

.compliance-pill-progress {
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.36);
  color: #fbbf24;
}

.compliance-pill-roadmap {
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.36);
  color: #c7d2fe;
}

.compliance-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compliance-card li {
  font-size: 12.5px;
  color: var(--text-secondary);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}

.compliance-card li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.compliance-status-ready li::before {
  background: rgba(34, 197, 94, 0.65);
}
.compliance-status-progress li::before {
  background: rgba(251, 191, 36, 0.65);
}
.compliance-status-roadmap li::before {
  background: rgba(99, 102, 241, 0.65);
}

.compliance-footnote {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 960px) {
  .compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .compliance-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* Engineering — by engineers, for engineers                    */
/* ============================================================ */

.engineering-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      70% 60% at 50% 0%,
      rgba(34, 211, 238, 0.04),
      transparent 70%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 30%);
}

.engineering-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.engineering-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    rgba(8, 10, 18, 0.78);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-mono);
}

.engineering-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.engineering-tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.16);
  border: 1px solid rgba(34, 211, 238, 0.34);
  color: #67e8f9;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.engineering-version {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.engineering-pre {
  margin: 0;
  padding: 16px 18px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: pre;
  tab-size: 2;
}

.engineering-pre code {
  font-family: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
}

.engineering-footnote {
  max-width: 820px;
  margin: 28px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.engineering-footnote a {
  color: #c7d2fe;
  text-decoration: underline;
  text-decoration-color: rgba(199, 210, 254, 0.4);
}

@media (max-width: 880px) {
  .engineering-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .engineering-pre {
    font-size: 11.5px;
    padding: 14px 14px 16px;
  }
}

/* ============================================================
   Responsive overflow rails — added 2026-05-15
   Stops grid/flex children from forcing intrinsic min-content
   widths larger than their parent column (the classic CSS
   grid trap). Without these, the hero mockup and any block
   containing long unbreakable tokens (filenames, model IDs,
   compound headings) blows past the viewport at <500px.
   ============================================================ */
.hero,
.hero-content,
.hero-visual,
.hero-product-shot,
.hero-product-shot-bare,
.hero-mockup,
.hero-mockup-body,
.hero-mockup-stage,
.hero-mockup-canvas,
.hero-mockup-sidebar,
.hero-mockup-signals,
.hero-mockup-transcript,
.hero-mockup-timeline,
.deployment-step,
.deployment-step-head,
.deployment-step-body,
.deployment-cmd,
.pricing-card,
.pricing-card-body,
.faq-item,
.compliance-card,
.compliance-card-body,
.comparison-table,
.differentiator-card,
.customer-card,
.usecase-tile,
.engineering-card,
.engineering-pre,
.tech-band,
.capability-card {
  min-width: 0;
}

/* Unbreakable tokens inside the hero mockup must wrap on
   narrow screens. Without this the file path and model
   identifiers force their parent to 480px+. */
.hero-mockup-filename,
.hero-mockup-sidebar li,
.hero-mockup-transcript .line,
.signal-label,
.signal-value {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 560px) {
  /* Hero text was being pushed wider than the viewport by
     the mockup's intrinsic min-content. Constrain it. */
  .hero-content {
    max-width: 100% !important;
  }
  .hero-title,
  .hero-eyebrow,
  .hero-description,
  .hero-pillar-label,
  .hero-pillar-value {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  /* Mockup occupies full width but stays inside viewport. */
  .hero-visual {
    padding: 0 16px !important;
  }
  .hero-mockup {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  }
  /* CTAs stack full-width and easier to tap. */
  .hero-actions {
    width: 100%;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  /* Inline-code line in the hero (the `$ diaspor deploy ...`
     command) gains horizontal scroll instead of pushing the
     page wider. */
  .hero-command,
  .hero-cli {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Final safety net — never let the document scroll
   horizontally. Catches any overflow we missed without
   hiding overflow on .hero (which has decorative glows). */
html,
body {
  overflow-x: hidden;
}

/* ============================================================ */
/* Mid-range tablet polish (960–1180px) — content-heavy sections */
/* ============================================================ */

@media (max-width: 1180px) and (min-width: 961px) {
  /* The 4-card grids look cramped at this width with their feature
     lists; drop to 2x2 at this breakpoint. */
  .canada-band-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .canada-band-flag {
    grid-column: span 2;
  }

  .deployment-ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compliance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .engineering-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero mockup — make the 3-col body comfortable below 960px before
   the full 760px collapse hides the sidebar. */
@media (max-width: 960px) and (min-width: 761px) {
  .hero-mockup-body {
    grid-template-columns: 150px minmax(0, 1fr) 150px;
  }
  .hero-mockup-sidebar {
    padding: 12px 8px;
  }
  .hero-mockup-sidebar li {
    font-size: 10px;
    padding: 4px 6px;
  }
  .hero-mockup-signals {
    padding: 10px;
  }
  .signal-card {
    padding: 9px 10px;
  }
  .signal-value {
    font-size: 14px;
  }
}

/* SDK + API cards — give them a small-tablet step too. */
@media (max-width: 1080px) and (min-width: 881px) {
  .sdk-api-card {
    padding: 22px 20px 20px;
  }
  .sdk-api-code {
    font-size: 11.5px;
    padding: 12px 14px;
  }
  .sdk-api-head h3 {
    font-size: 20px;
  }
}

/* Section header asym — at narrower widths, the 1.4fr description
   column was getting squeezed. Reduce the ratio gracefully. */
@media (max-width: 1080px) and (min-width: 769px) {
  .section-header-asym {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 14px 28px;
  }
}

/* Touch-target safety — every nav and CTA must be at least 44px tall
   on mobile. The default buttons are around 40px; bump on small screens. */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary,
  .btn-nav-cta,
  .btn-mobile-cta,
  .sdk-api-cta,
  .pricing-card .btn-primary,
  .pricing-card .btn-secondary {
    min-height: 44px;
  }

  /* Mobile menu — ensure every menu item is at least 44px tap target. */
  .mobile-menu a[role='menuitem'] {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Tighten section padding so we don't waste vertical space on phones. */
  .usecases-section,
  .deployment-section,
  .compliance-section,
  .engineering-section,
  .sdk-api-section,
  .pricing-section,
  .capabilities-section,
  .tech-section,
  .cost-section,
  .canada-band {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Section headers shrink for phones. */
  .section-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
  .section-description {
    font-size: 0.98rem;
  }
}

/* ============================================================ */
/* SDK + API — commercial developer entry points                */
/* ============================================================ */

.sdk-api-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      60% 50% at 50% 0%,
      rgba(34, 211, 238, 0.05),
      transparent 70%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), transparent 35%);
}

.sdk-api-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sdk-api-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
}

.sdk-api-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.sdk-api-card-featured {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(99, 102, 241, 0.14),
      transparent 60%
    ),
    radial-gradient(
      120% 80% at 100% 100%,
      rgba(34, 211, 238, 0.1),
      transparent 60%
    ),
    var(--surface);
  border-color: rgba(99, 102, 241, 0.42);
}

.sdk-api-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sdk-api-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.16);
  border: 1px solid rgba(34, 211, 238, 0.36);
  color: #67e8f9;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sdk-api-card-featured .sdk-api-tag {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.42);
  color: #c7d2fe;
}

.sdk-api-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.sdk-api-tagline {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.sdk-api-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sdk-api-points li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.sdk-api-points li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -2px;
  color: var(--primary);
  font-weight: 700;
  font-size: 18px;
}

.sdk-api-code {
  margin: 0;
  padding: 14px 16px;
  background: rgba(8, 10, 18, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: pre;
  tab-size: 2;
  max-width: 100%;
}

.sdk-api-code code {
  font-family: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
}

.sdk-api-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.sdk-api-pricing {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

.sdk-api-pricing strong {
  color: var(--text-primary);
  font-weight: 600;
}

.sdk-api-cta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #c7d2fe;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 210, 254, 0.3);
  padding-bottom: 2px;
  transition:
    color var(--transition-smooth),
    border-color var(--transition-smooth);
}

.sdk-api-cta:hover {
  color: #fff;
  border-color: rgba(199, 210, 254, 0.7);
}

.sdk-api-footnote {
  max-width: 860px;
  margin: 28px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 880px) {
  .sdk-api-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .sdk-api-card {
    padding: 20px 18px 18px;
  }
  .sdk-api-code {
    font-size: 11.5px;
    padding: 12px 14px;
  }
}

/* ================================ */
/* CLI download section             */
/* ================================ */

.cli-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(
      60% 50% at 50% 0%,
      rgba(99, 102, 241, 0.06),
      transparent 70%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 40%);
}

.cli-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cli-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  transition:
    border-color var(--transition-smooth),
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

.cli-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.cli-card.is-recommended {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.25),
    0 16px 36px rgba(67, 56, 202, 0.2);
}

.cli-card.is-recommended::before {
  content: "Recommended for your platform";
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.96);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.35);
}

.cli-card[lang="fr"].is-recommended::before {
  content: "Recommandé pour votre plateforme";
}

.cli-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cli-card-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.16);
  border: 1px solid rgba(34, 211, 238, 0.36);
  color: #67e8f9;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cli-card-head h3 {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.cli-card-sub {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.cli-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cli-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13.5px;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.cli-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.42);
  transform: translateY(-1px);
}

.cli-btn-primary {
  background: linear-gradient(
    135deg,
    rgba(67, 56, 202, 0.95),
    rgba(99, 102, 241, 0.95)
  );
  border-color: rgba(99, 102, 241, 0.55);
  color: #fff;
  font-weight: 600;
}

.cli-btn-primary:hover {
  background: linear-gradient(135deg, #4338CA, #6366F1);
  filter: brightness(1.06);
}

.cli-btn-arch {
  letter-spacing: -0.005em;
}

.cli-btn-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  opacity: 0.75;
}

.cli-card-foot {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cli-card-foot code {
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: inherit;
}

.cli-source {
  max-width: var(--container-max);
  margin: 36px auto 0;
  padding: 0 24px;
}

.cli-source h3 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.cli-footnote {
  max-width: 860px;
  margin: 28px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.cli-footnote a {
  color: #c7d2fe;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 210, 254, 0.3);
  padding-bottom: 1px;
  transition:
    color var(--transition-smooth),
    border-color var(--transition-smooth);
}

.cli-footnote a:hover {
  color: #fff;
  border-color: rgba(199, 210, 254, 0.7);
}

@media (max-width: 980px) {
  .cli-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .cli-card {
    padding: 22px 18px 18px;
  }
  .cli-card.is-recommended::before {
    left: 14px;
  }
}

/* ================================================ */
/* Mobile + a11y polish (appended 2026-05-16)       */
/* Targets: zero overflow 320→1440px, touch-first,  */
/* WCAG 2.1 AA. Append-only so changes are isolable.*/
/* ================================================ */

/* 1. Grid columns that resist intrinsic shrinking — collapse cleanly.
   `1fr` resolves to min-content when children have long text/code;
   `minmax(0, 1fr)` lets the column actually shrink to container width. */
@media (max-width: 880px) {
  .sdk-api-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sdk-api-card {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .cost-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cost-card {
    min-width: 0;
  }
}

/* 2. Engineering code blocks — the <pre> already has overflow-x: auto;
   ensure its parent grid track can shrink so the column doesn't push
   the section out at narrow widths. */
.engineering-grid {
  min-width: 0;
}
.engineering-block,
.engineering-pre {
  min-width: 0;
  max-width: 100%;
}

/* 3. Hero decorative cards — `.hero-visual` parent must clip locally
   so positioned signal-cards never push horizontal scroll on the page
   (body has overflow-x: hidden as a final firewall, but local clipping
   prevents the cards from rendering off-screen at narrow widths). */
@media (max-width: 768px) {
  .hero,
  .hero-visual {
    overflow: clip;
  }
}

/* 4. Ultra-small screens (<360px — iPhone SE 1st-gen, Galaxy Fold cover).
   The existing 380px breakpoint handles most of this; add a narrower
   floor so 320px doesn't fall through with desktop-ish padding. */
@media (max-width: 359px) {
  :root {
    --section-padding: 32px;
    --card-padding: 14px;
  }
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .cost-grid,
  .sdk-api-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
  .hero-title {
    font-size: clamp(1.4rem, 5.5vw, 1.6rem) !important;
  }
  .section-title {
    font-size: clamp(1.2rem, 5vw, 1.4rem) !important;
  }
  .btn-primary,
  .btn-secondary {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .nav .logo-text {
    font-size: 1rem;
  }
}

/* 5. Suppress 300ms tap delay on every primary interactive element
   so Mobile Safari and older Chromium feel native. */
.btn-primary,
.btn-secondary,
.btn-nav,
.btn-nav-app,
.faq-item summary,
.nav-links a,
.footer-column a,
.locale-btn,
.mobile-menu a {
  touch-action: manipulation;
}

/* 6. Mobile menu link tap targets — anchor links can be tiny by default;
   guarantee 48px height inside the open menu. */
@media (max-width: 768px) {
  .mobile-menu a,
  .mobile-menu .btn-primary,
  .mobile-menu .btn-secondary {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* 7. Stronger focus rings on CTAs — the global :focus-visible rule
   sets a 2px primary outline; primary CTAs already use --primary
   as background, so use --secondary (cyan) for contrast against them. */
.btn-primary:focus-visible,
.btn-nav-app:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}

/* 8. iOS Safari zooms inputs whose font-size < 16px on focus.
   Enforce a 16px floor on all form controls. */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

/* 9. Flex-row CTAs must wrap below 480px so a 2-button stack never
   pushes off-screen. */
@media (max-width: 480px) {
  .cta-actions,
  .hero-cta,
  .hero-actions {
    flex-wrap: wrap;
  }
  .cta-actions > *,
  .hero-cta > *,
  .hero-actions > * {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* 10. Footer columns — at narrow widths, ensure column stack reads
   top-to-bottom with breathing room between blocks. */
@media (max-width: 480px) {
  .footer-links {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .footer-content {
    gap: 24px;
  }
}

/* 11. Long unbreakable strings (URLs in copy, model names) — allow
   overflow-wrap so they don't push their container past viewport. */
p, li, h1, h2, h3, h4, h5, h6, dt, dd, summary {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
code, pre code {
  /* keep code blocks unwrapped (their parent <pre> handles overflow) */
  overflow-wrap: normal;
  word-wrap: normal;
}

/* ============================================================ */
/* Contact section — replaces the old 3-tier pricing grid       */
/* ============================================================ */
.contact-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid var(--border-subtle);
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(34, 211, 238, 0.07), transparent 70%),
    radial-gradient(60% 50% at 85% 100%, rgba(99, 102, 241, 0.06), transparent 70%);
}

.contact-card {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.45) 30%,
    rgba(99, 102, 241, 0.45) 70%,
    transparent 100%
  );
}

.contact-card-intro .section-tag {
  display: inline-block;
  margin-bottom: 12px;
}

.contact-card-intro .section-title {
  margin: 0 0 14px;
}

.contact-card-intro .section-description {
  margin: 0 0 24px;
  font-size: 16px;
  max-width: 560px;
}

.contact-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-points li {
  position: relative;
  padding-left: 22px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
}

.contact-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22D3EE, #6366F1);
}

.contact-points li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.contact-card-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  padding: 28px;
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 14px;
}

.contact-cta-primary,
.contact-cta-secondary {
  justify-content: center;
  width: 100%;
}

.contact-card-meta {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .contact-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 28px;
  }
  .contact-card-actions {
    padding: 22px;
  }
}

/* ============================================================
   2026-06 — Outline CTAs + side-by-side hero
   1. Buttons drop their solid fill and become outline (accent
      border + text, faint tint on hover only).
   2. The product (Files) screenshot sits BESIDE the copy on
      desktop, so at least half of it is visible on landing
      instead of being stacked entirely below the fold.
   Appended last to win the earlier !important cascade.
   ============================================================ */

/* 1 — Outline buttons (no background fill) */
.btn-primary {
  background: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: rgba(var(--primary-rgb), 0.12) !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
.btn-primary::before {
  display: none !important;
} /* drop the white sheen sweep — reads oddly without a fill */

.btn-nav-cta,
.nav-links a.btn-nav-cta {
  background: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
}
.btn-nav-cta:hover {
  background: rgba(var(--primary-rgb), 0.12) !important;
}

.btn-mobile-cta {
  background: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
}

/* 2 — Side-by-side hero on desktop: copy left, Files shot right */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    text-align: left !important;
    gap: 48px !important;
  }
  .hero-content {
    order: 1 !important;
    max-width: 620px !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .hero-content .hero-eyebrow {
    margin-left: 0 !important;
  }
  .hero-content .hero-description {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-content .hero-snippet {
    margin-left: 0 !important;
  }
  .hero-content .hero-actions {
    justify-content: flex-start !important;
  }
  .hero-content .hero-stats {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-visual {
    order: 2 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .hero-product-shot,
  .hero-product-shot-bare {
    max-width: 600px !important;
    margin: 0 auto !important;
  }
  .hero-title {
    font-size: 44px !important;
    line-height: 1.05 !important;
  }
}
@media (min-width: 1440px) {
  .hero {
    gap: 64px !important;
  }
  .hero-content {
    max-width: 660px !important;
  }
  .hero-title {
    font-size: 50px !important;
  }
  .hero-product-shot,
  .hero-product-shot-bare {
    max-width: 660px !important;
  }
}

/* Tablet & phone (stacked): there is no room for side-by-side, so put
   the product shot FIRST — at least half of it stays above the fold
   on landing, then the copy follows. */
@media (max-width: 1023px) {
  .hero-visual {
    order: 1 !important;
    margin-bottom: 6px;
  }
  .hero-content {
    order: 2 !important;
  }
}

/* Phone: the floating nav CTA overlaps the logo once the hamburger
   appears. It already lives in the mobile menu, so hide it here. */
@media (max-width: 768px) {
  .nav-links .btn-nav-cta {
    display: none !important;
  }
}