/* ===== CSS Variables ===== */
:root {
  --green: #1cae81;
  --green-dark: #158f6a;
  --green-light: #e6faf4;
  --green-glow: rgba(28, 174, 129, 0.15);
  --accent: #63ffbf;

  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  --nav-h: 72px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --transition: 0.3s ease;
  /* Wētā-style scroll reveals: soft deceleration */
  --ease-weta: cubic-bezier(0.16, 1, 0.3, 1);
  /* Reload splash accent (swap if Khoi supplies final token) */
  --splash-green: #1cae81;
}

/* ===== Page loader (Wētā FX–style: wetafx.co.nz critical.css timings) ===== */
body.page-loading {
  overflow: hidden;
}

/* Same stack as .preloader / .preloader__bg on Wētā */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: visible;
  transition: opacity 0.85s cubic-bezier(0.86, 0, 0.07, 1),
    visibility 0.85s cubic-bezier(0.86, 0, 0.07, 1);
}

.page-loader__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background-color: #111;
}

.page-loader__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.55s var(--ease-weta);
}

.page-loader--show-grid .page-loader__ambient {
  opacity: 1;
}

/* Oversized circle so radial fades before viewport edge — avoids top/bottom clipping */
.page-loader__glow-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(160vmin, 2000px);
  height: min(160vmin, 2000px);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--splash-green) 42%, transparent) 0%,
    color-mix(in srgb, var(--splash-green) 12%, transparent) 38%,
    transparent 68%
  );
}

.page-loader__vlines-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
      90deg,
      transparent 0,
      transparent calc(25% - 0.5px),
      rgba(28, 174, 129, 0.24) calc(25% - 0.5px),
      rgba(28, 174, 129, 0.24) calc(25% + 0.5px),
      transparent calc(25% + 0.5px)
    ),
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(75% - 0.5px),
      rgba(28, 174, 129, 0.24) calc(75% - 0.5px),
      rgba(28, 174, 129, 0.24) calc(75% + 0.5px),
      transparent calc(75% + 0.5px)
    );
}

/* Center line: full-width 1px at 50%; mask fades it in the vertical middle (logo + glow) */
.page-loader__vline-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(50% - 0.5px),
    rgba(28, 174, 129, 0.28) calc(50% - 0.5px),
    rgba(28, 174, 129, 0.28) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 24%,
    transparent 38%,
    transparent 62%,
    #000 76%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 24%,
    transparent 38%,
    transparent 62%,
    #000 76%,
    #000 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.page-loader__stage {
  position: relative;
  z-index: 3;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.page-loader__video {
  position: absolute;
  inset: 0;
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
  opacity: 1;
}

.page-loader--exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition-duration: 0.15s;
  }

  .page-loader__ambient {
    opacity: 1;
    transition: none;
  }

}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .page-loader__glow-ring {
    background: radial-gradient(
      circle at 50% 50%,
      rgba(28, 174, 129, 0.42) 0%,
      rgba(28, 174, 129, 0.12) 38%,
      transparent 68%
    );
  }

}

/* Above [data-theme="dark"] body > * { z-index: 1 } */
[data-theme="dark"] body > .page-loader {
  z-index: 2147483647;
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  --white: #111111;
  --gray-50: #1a1d26;
  --gray-100: #22262f;
  --gray-200: #2d3240;
  --gray-300: #3d4455;
  --gray-500: #9ca3af;
  --gray-600: #b0b8c4;
  --gray-700: #d1d5db;
  --gray-800: #e5e7eb;
  --gray-900: #f3f4f6;
  --green-light: rgba(28, 174, 129, 0.12);
  --green-glow: rgba(28, 174, 129, 0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  /* Page-wide ambient (UE-style): tune blur / opacity / edge inset / scroll parallax in main.js */
  --ambient-blur: 100px;
  --ambient-opacity: 0.4;
  --ambient-blob-w: min(62vw, 620px);
  --ambient-blob-h: min(88vh, 760px);
  --ambient-edge-left: clamp(-46%, -280px, -16vw);
  --ambient-edge-right: clamp(-46%, -280px, -16vw);
  --ambient-y: 44%;
  --ambient-scroll-y-1: 0px;
  --ambient-scroll-y-2: 0px;
}

/* Fixed mesh wash + dual-edge green blobs (Ultimate Editors–like) */
[data-theme="dark"] body {
  position: relative;
  background-color: var(--white);
  background-image: radial-gradient(
    ellipse 130% 70% at 50% -12%,
    rgba(28, 174, 129, 0.22) 0%,
    rgba(28, 174, 129, 0.06) 38%,
    transparent 58%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% min(55vh, 480px);
  background-position: top center;
}
[data-theme="dark"] body::before,
[data-theme="dark"] body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: var(--ambient-blob-w);
  height: var(--ambient-blob-h);
  top: var(--ambient-y);
  border-radius: 50%;
  filter: blur(var(--ambient-blur));
  opacity: var(--ambient-opacity);
  will-change: transform;
}
[data-theme="dark"] body::before {
  left: var(--ambient-edge-left);
  transform: translateY(calc(-50% + var(--ambient-scroll-y-1, 0px)));
  background: radial-gradient(
    ellipse 88% 88% at 26% 48%,
    rgba(28, 174, 129, 0.78) 0%,
    rgba(28, 174, 129, 0.12) 42%,
    transparent 72%
  );
}
[data-theme="dark"] body::after {
  right: var(--ambient-edge-right);
  transform: translateY(calc(-50% + var(--ambient-scroll-y-2, 0px)));
  background: radial-gradient(
    ellipse 88% 88% at 74% 52%,
    rgba(28, 174, 129, 0.52) 0%,
    rgba(28, 174, 129, 0.16) 52%,
    transparent 74%
  );
}
[data-theme="dark"] body > *:not(.navbar):not(.page-loader):not(.scroll-btn) {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .navbar {
  background: var(--green);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="dark"] .nav-menu {
  background: transparent;
}

[data-theme="dark"] .nav-logo {
  filter: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
[data-theme="dark"] .nav-logo span {
  color: #ffffff;
}

[data-theme="dark"] .nav-menu a:not(.nav-cta) {
  color: #ffffff;
}
[data-theme="dark"] .nav-menu a:not(.nav-cta):hover {
  color: rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] .nav-cta {
  color: #ffffff !important;
  background: color-mix(in srgb, var(--green) 68%, #ffffff 32%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 6px 28px rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .nav-cta:hover {
  color: #ffffff !important;
  background: color-mix(in srgb, var(--green) 52%, #ffffff 48%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.26),
    0 8px 32px rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .theme-toggle {
  color: #ffffff;
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

[data-theme="dark"] .nav-toggle span {
  background: #ffffff;
}

[data-theme="dark"] .hero {
  background: linear-gradient(
    180deg,
    #111111 0%,
    color-mix(in srgb, #111111 90%, var(--green) 10%) 100%
  );
  position: relative;
  isolation: isolate;
}

/* UE-style top corner glow under navbar (dark mode, page-wide) */
[data-theme="dark"] html::before,
[data-theme="dark"] html::after {
  content: "";
  position: fixed;
  top: -34px;
  width: min(40vw, 420px);
  height: min(40vw, 420px);
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  filter: blur(86px);
  opacity: 0.55;
}
[data-theme="dark"] html::before {
  left: -12vw;
  background: radial-gradient(circle at 26% 24%, rgba(28, 174, 129, 0.8) 0%, rgba(28, 174, 129, 0.24) 40%, transparent 68%);
}
[data-theme="dark"] html::after {
  right: -12vw;
  background: radial-gradient(circle at 74% 24%, rgba(28, 174, 129, 0.74) 0%, rgba(28, 174, 129, 0.2) 44%, transparent 70%);
}

[data-theme="dark"] .phone-mockup {
  background: #000;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* Match Center: dark overrides (base is light) */
[data-theme="dark"] .match-center-section {
  background: color-mix(in srgb, #000000 82%, transparent);
  color: #ffffff;
}
[data-theme="dark"] .match-center-section .section-header h2 { color: #ffffff; }
[data-theme="dark"] .match-center-section .section-header p { color: #d1d5db; }
[data-theme="dark"] .match-center-section .section-tag { color: #63ffbf; }
[data-theme="dark"] .match-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
[data-theme="dark"] .match-card:hover {
  background: rgba(255,255,255,0.1);
  box-shadow: none;
}
[data-theme="dark"] .match-card-icon {
  background: rgba(28,174,129,0.15);
  color: var(--accent);
}
[data-theme="dark"] .match-card h4 { color: #ffffff; }
[data-theme="dark"] .match-card p { color: #d1d5db; }
[data-theme="dark"] .match-phones .phone-mockup-sm {
  background: #111;
}

[data-theme="dark"] .footer {
  background: color-mix(in srgb, #0a0c10 86%, transparent);
  color: #d1d5db;
}
[data-theme="dark"] .footer-logo span { color: #ffffff; }
[data-theme="dark"] .footer-links-group h4 { color: #ffffff; }
[data-theme="dark"] .footer-links-group a { color: #9ca3af; }
[data-theme="dark"] .footer-brand p { color: #9ca3af; }
[data-theme="dark"] .footer-social a { color: #d1d5db; background: rgba(255,255,255,0.08); }
[data-theme="dark"] .footer-bottom p { color: #6b7280; }

[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,0.7);
}
[data-theme="dark"] .modal-content {
  background: var(--gray-50);
}
[data-theme="dark"] .modal-close:hover {
  background: var(--gray-200);
}

[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field textarea {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-800);
}

[data-theme="dark"] .download-section {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gray-50) 84%, transparent) 0%,
    color-mix(in srgb, var(--white) 86%, transparent) 100%
  );
}

[data-theme="dark"] .price-coming {
  background: var(--gray-300);
}

[data-theme="dark"] .price-btn-outline {
  border-color: var(--gray-300);
  color: var(--gray-700);
}

[data-theme="dark"] .toggle-slider {
  background: var(--gray-300);
}

[data-theme="dark"] .features-section {
  background: color-mix(in srgb, #000000 84%, transparent);
}
[data-theme="dark"] .how-it-works {
  background: color-mix(in srgb, var(--gray-50) 82%, transparent);
}
[data-theme="dark"] .analytics-section {
  background: color-mix(in srgb, var(--white) 86%, transparent);
}
[data-theme="dark"] .recording-guide {
  background: color-mix(in srgb, var(--white) 86%, transparent);
}
[data-theme="dark"] .profile-section {
  background: color-mix(in srgb, var(--gray-50) 82%, transparent);
}
[data-theme="dark"] .pricing-section {
  background: color-mix(in srgb, var(--white) 86%, transparent);
}

/* Dark mode toggle button */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--gray-600);
  transition: all var(--transition);
  font-size: 1.1rem;
  cursor: pointer;
}
.theme-toggle:hover {
  background: var(--gray-100);
  color: var(--green);
}
.theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* One document scrollbar: scroll the viewport on html; body must not create a second bar */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  font-family: var(--font-body);
  color: var(--gray-800);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Homepage (light): fixed soft #1cae81 edge + top wash — same RGB as splash / header */
html:not([data-theme="dark"]) body.page-home {
  position: relative;
  background-color: var(--white);
  background-image:
    radial-gradient(
      ellipse 130% 70% at 50% -12%,
      rgba(28, 174, 129, 0.1) 0%,
      rgba(28, 174, 129, 0.035) 38%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 95% 72% at 0% 48%,
      rgba(28, 174, 129, 0.085) 0%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 95% 72% at 100% 52%,
      rgba(28, 174, 129, 0.085) 0%,
      transparent 56%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size:
    100% min(55vh, 480px),
    52% 100%,
    52% 100%;
  background-position:
    top center,
    left center,
    right center;
}

html:not([data-theme="dark"]) body.page-home::before,
html:not([data-theme="dark"]) body.page-home::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: min(62vw, 620px);
  height: min(88vh, 760px);
  top: 44%;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.28;
  will-change: transform;
}

html:not([data-theme="dark"]) body.page-home::before {
  left: clamp(-46%, -280px, -16vw);
  transform: translateY(calc(-50% + var(--ambient-scroll-y-1, 0px)));
  background: radial-gradient(
    ellipse 88% 88% at 26% 48%,
    rgba(28, 174, 129, 0.62) 0%,
    rgba(28, 174, 129, 0.11) 42%,
    transparent 72%
  );
}

html:not([data-theme="dark"]) body.page-home::after {
  right: clamp(-46%, -280px, -16vw);
  transform: translateY(calc(-50% + var(--ambient-scroll-y-2, 0px)));
  background: radial-gradient(
    ellipse 88% 88% at 74% 52%,
    rgba(28, 174, 129, 0.52) 0%,
    rgba(28, 174, 129, 0.09) 52%,
    transparent 74%
  );
}

html:not([data-theme="dark"]) body.page-home > *:not(.navbar):not(.page-loader):not(.scroll-btn) {
  position: relative;
  z-index: 1;
}

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

/* ===== Utility ===== */
.text-gradient {
  background: linear-gradient(135deg, var(--green), #00d68f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 12px;
}

.section-header p {
  font-size: 1.1rem;
  color: var(--gray-500);
  max-width: 560px;
  margin: 0 auto;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green);
  margin-bottom: 12px;
}

/* ===== Scroll “pop-up” reveals (Wētā FX–style: rise + fade + light scale) ===== */
.scroll-reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 40px, 0) scale(0.985);
  transition:
    opacity 1.25s var(--ease-weta),
    transform 1.25s var(--ease-weta),
    filter 1.25s var(--ease-weta);
  will-change: transform, opacity;
}
.scroll-reveal.scroll-reveal--visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

[data-scroll-reveal-group] > * {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 36px, 0) scale(0.99);
  transition:
    opacity 1.2s var(--ease-weta),
    transform 1.2s var(--ease-weta),
    filter 1.2s var(--ease-weta);
}
[data-scroll-reveal-group].scroll-reveal-group--visible > * {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(1) { transition-delay: 0ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(2) { transition-delay: 110ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(3) { transition-delay: 220ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(4) { transition-delay: 330ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(5) { transition-delay: 440ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(6) { transition-delay: 550ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(7) { transition-delay: 660ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(8) { transition-delay: 770ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(9) { transition-delay: 880ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(10) { transition-delay: 990ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(11) { transition-delay: 1100ms; }
[data-scroll-reveal-group].scroll-reveal-group--visible > *:nth-child(12) { transition-delay: 1210ms; }

.scroll-reveal-steps .step-card {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 1.2s var(--ease-weta),
    transform 1.2s var(--ease-weta),
    filter 1.2s var(--ease-weta);
}
.scroll-reveal-steps.scroll-reveal-steps--visible .step-card {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
.scroll-reveal-steps.scroll-reveal-steps--visible .step-card:nth-child(1) { transition-delay: 0ms; }
.scroll-reveal-steps.scroll-reveal-steps--visible .step-card:nth-child(3) { transition-delay: 150ms; }
.scroll-reveal-steps.scroll-reveal-steps--visible .step-card:nth-child(5) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  [data-scroll-reveal-group] > *,
  .scroll-reveal-steps .step-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

.store-badge {
  height: 48px;
  width: auto;
  transition: transform var(--transition);
}
.store-badge:hover {
  transform: scale(1.05);
}

/* Green halo around media blocks (inspired by ultimateeditors.com) */
.media-glow-green {
  position: relative;
  isolation: isolate;
}
.media-glow-green::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    62% 62% at 50% 42%,
    rgba(0, 255, 170, 0.16),
    rgba(28, 174, 129, 0.10) 46%,
    rgba(28, 174, 129, 0.04) 60%,
    transparent 78%
  );
  filter: blur(24px);
  opacity: 0.62;
}

/* ===== Phone Mockup ===== */
.phone-mockup {
  width: 280px;
  background: var(--gray-900);
  border-radius: 36px;
  padding: 12px;
  position: relative;
  overflow: hidden;
  filter:
    drop-shadow(0 0 24px rgba(2, 255, 170, 0.22))
    drop-shadow(0 0 56px rgba(2, 255, 170, 0.14))
    drop-shadow(0 0 92px rgba(28, 174, 129, 0.08));
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,255,255,0.1) inset;
}
/* Placeholder / download-section shots — not the hero bezel PNG (that must keep native aspect ratio) */
.phone-mockup > img:not(.phone-mockup-frame) {
  width: 100%;
  border-radius: 24px;
  aspect-ratio: 9/19.5;
  object-fit: cover;
}

/* Hero: horizontal push — current slides left, next enters from right (no white gap) */
.phone-mockup-screens--hero {
  position: relative;
  width: 100%;
  border-radius: 24px;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  overflow: clip;
  background: #0f1117;
  isolation: isolate;
  contain: paint;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.phone-mockup-screens--hero::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* Kill any nested scrollbar inside the phone screen (track, images, subpixel overflow) */
.phone-mockup-screens--hero *,
.phone-mockup-screens--hero *::before,
.phone-mockup-screens--hero *::after {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.phone-mockup-screens--hero *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.phone-mockup-screens--hero .phone-mockup-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 400%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
  backface-visibility: hidden;
  overflow: hidden;
  overflow: clip;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.phone-mockup-screens--hero .phone-mockup-track::-webkit-scrollbar {
  display: none !important;
}
.phone-mockup-screens--hero .phone-mockup-slide {
  flex: 0 0 25%;
  width: 25%;
  height: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #0f1117;
  border-radius: inherit;
  overflow: hidden;
  -webkit-user-drag: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .phone-mockup-screens--hero .phone-mockup-track {
    transition: none;
  }
}
.phone-notch {
  width: 100px;
  height: 6px;
  background: var(--gray-700);
  border-radius: 4px;
  margin: 0 auto 8px;
}
.phone-mockup-sm {
  width: 220px;
}

/* Hero only: PNG bezel over slideshow — screen fills glass; video ~9:16 uses cover + top anchor so UI text stays below notch */
.phone-mockup.phone-mockup--hero-frame {
  width: 100%;
  max-width: min(300px, calc(100vw - 80px));
  margin-inline: auto;
}
.phone-mockup--hero-frame {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}
.phone-mockup--hero-frame .phone-mockup-screens--hero {
  position: absolute;
  z-index: 1;
  left: 6.05%;
  right: 6.05%;
  top: 3.4%;
  bottom: 3.4%;
  width: auto;
  height: auto;
  aspect-ratio: unset;
  border-radius: clamp(1.4rem, 8.9%, 2.15rem);
  transform: none;
  transform-origin: 50% 10%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* Fill the glass: cover + explicit stretch so no letterboxing inside the screen rect */
.phone-mockup--hero-frame .phone-mockup-screens--hero .phone-mockup-slide {
  flex: 0 0 25%;
  width: 25%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  object-fit: cover;
  object-position: center center;
}
/* Full device artwork from phone front view.png — no forced aspect-ratio / object-fit: cover (that was cropping bezels) */
.phone-mockup--hero-frame .phone-mockup-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.4)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
}

/* ===== Navbar ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  z-index: 1000;
  transition: box-shadow var(--transition);
}
.navbar.scrolled {
  box-shadow: var(--shadow-sm);
}

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

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
}
/* assets/newlogo.png — wide nav/footer wordmark (swap file anytime; bump ?v= in HTML/CSS) */
.nav-logo img {
  height: 36px;
  width: auto;
  max-width: min(200px, 52vw);
  object-fit: contain;
  display: block;
}
/* Logo is white — tint to brand green in light mode so it reads on white navbar.
   Footer stays dark in both themes, so footer-logo keeps white by default. */
html:not([data-theme="dark"]) .nav-logo img {
  filter: brightness(0) saturate(100%) invert(53%) sepia(75%) saturate(415%) hue-rotate(122deg) brightness(91%) contrast(89%);
}
.nav-logo span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  color: var(--gray-900);
}

/* plan&pricing, joincommunity — .navbar .logo */
.navbar .logo a {
  display: inline-flex;
  align-items: center;
}
.navbar .logo img {
  height: 36px;
  width: auto;
  max-width: min(200px, 52vw);
  object-fit: contain;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-menu a {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: color var(--transition);
  letter-spacing: 0.3px;
}
.nav-menu a:hover { color: var(--green); }

.nav-cta {
  background: var(--green) !important;
  color: var(--white) !important;
  padding: 10px 24px !important;
  border-radius: 8px;
  font-weight: 600 !important;
  transition: background var(--transition), transform var(--transition) !important;
}
.nav-cta:hover {
  background: var(--green-dark) !important;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-800);
  border-radius: 2px;
  transition: var(--transition);
}

/* ===== Hero ===== */
.hero {
  padding-top: calc(var(--nav-h) + 60px);
  /* Space so phone + subtle motion stay inside hero bounds */
  padding-bottom: 160px;
  background: linear-gradient(180deg, var(--white) 0%, var(--green-light) 100%);
  /* overflow: visible — avoids clipping the phone; do not mix overflow-x:hidden + overflow-y:visible (forces y:auto scrollbar) */
  overflow: visible;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.hero-content {
  flex: 1;
  min-width: 0;
  max-width: 580px;
  will-change: transform;
}

.hero-badge {
  display: inline-block;
  background: var(--green-glow);
  color: var(--green);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--gray-900);
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 32px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}
.stat { text-align: center; }
.stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
}
.stat span {
  font-size: 0.8rem;
  color: var(--gray-500);
}
.stat-divider {
  width: 1px;
  height: 36px;
  background: var(--gray-300);
}

.hero-visual {
  flex: 0 1 300px;
  min-width: 0;
  max-width: 100%;
  position: relative;
  perspective: 1100px;
  perspective-origin: 50% 55%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: clamp(4px, 2.5vw, 20px);
  box-sizing: border-box;
}

/* Inner layer: idle float (always visible motion; combines with parent scroll transform) */
.hero-phone-inner {
  transform-style: preserve-3d;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-phone-inner {
    animation: hero-phone-idle 5.5s ease-in-out infinite alternate;
  }
}
@keyframes hero-phone-idle {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-6px);
  }
}

/* Scroll-driven hero (Chrome 115+, Safari 18+): ties phone pose to document scroll — no JS required */
@keyframes hero-weta-scroll-reveal {
  from {
    transform: translate3d(0, min(120px, 14vh), 0) rotateX(6deg) scale3d(0.96, 0.96, 1);
  }
  to {
    transform: translate3d(0, 0, 0) rotateX(0deg) scale3d(1, 1, 1);
  }
}

body[data-hero-scroll-driven] .hero-phone-ambient[data-hero-phone-reveal] {
  animation: hero-weta-scroll-reveal linear both;
  animation-timeline: scroll(root block);
  animation-range: 0% 52%;
  transform-origin: 50% 92%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  margin-top: -18px;
}

/* Default pose when JS drives transforms (or browsers without scroll timelines) */
body:not([data-hero-scroll-driven]) .hero-phone-ambient[data-hero-phone-reveal] {
  transform: translate3d(0, min(100px, 14vh), 0) rotateX(6deg) scale3d(0.96, 0.96, 1);
  transform-origin: 50% 92%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  margin-top: -18px;
}
.hero-phone-ambient {
  position: relative;
  z-index: 1;
  will-change: transform;
}
.hero-phone-ambient::before {
  content: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-phone-inner {
    animation: none !important;
  }
  .hero-phone-ambient {
    transform: none !important;
    animation: none !important;
    animation-timeline: auto !important;
    will-change: auto;
  }
  .hero-content {
    transform: none !important;
  }
  .hero-glow {
    transform: translate(-50%, -50%) !important;
  }
}

.hero-glow {
  display: none;
}

/* ===== Features ===== */
.features-section {
  padding: 100px 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.features-section .section-container {
  position: relative;
  z-index: 1;
}
.features-stroke-bg {
  position: absolute;
  top: 50%;
  left: clamp(-140px, -8vw, -60px);
  width: min(26vw, 380px);
  max-width: 32%;
  transform: translate3d(0, -50%, 0);
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 0 14px rgba(2, 255, 170, 0.14));
}

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

.feature-card {
  padding: 36px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
}
.feature-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 24px var(--green-glow);
  transform: translateY(-4px);
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--green-light);
  color: var(--green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 0.92rem;
  color: var(--gray-500);
  line-height: 1.6;
}

[data-theme="dark"] .features-section .feature-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .features-section .section-header h2 {
  color: #ffffff;
}

[data-theme="dark"] .features-section .section-header p {
  color: rgba(255, 255, 255, 0.82);
}

[data-theme="dark"] .feature-card h3 {
  color: #ffffff;
}

[data-theme="dark"] .feature-card p {
  color: rgba(255, 255, 255, 0.78);
}

[data-theme="dark"] .hero h1 {
  color: #ffffff;
}

[data-theme="dark"] .hero-subtitle {
  color: rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] .stat strong {
  color: #ffffff;
}

[data-theme="dark"] .stat span {
  color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .stat-divider {
  background: rgba(255, 255, 255, 0.14);
}

/* ===== How It Works ===== */
.how-it-works {
  padding: 100px 0;
  background: var(--gray-50);
  position: relative;
  overflow: hidden;
}
.how-it-works .section-container {
  position: relative;
  z-index: 1;
}
.howitworks-stroke-bg {
  position: absolute;
  top: 54%;
  left: auto;
  right: clamp(-120px, -6vw, -40px);
  width: min(30vw, 430px);
  max-width: 38%;
  transform: translate3d(0, -50%, 0);
  opacity: 0.46;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 0 10px rgba(2, 255, 170, 0.12));
}

.steps-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.step-card {
  flex: 1;
  max-width: 320px;
  text-align: center;
  padding: 0 24px;
}

.step-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--green-light);
  background: linear-gradient(180deg, var(--green), rgba(28,174,129,0.15));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.step-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 10px;
}

.step-card p {
  font-size: 0.92rem;
  color: var(--gray-500);
  line-height: 1.6;
}

.step-connector {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--gray-200));
  margin-top: 40px;
  flex-shrink: 0;
}

/* ===== Recording Setup Guide ===== */
.recording-guide {
  padding: 100px 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.recording-rail {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.recording-card {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform var(--transition);
  will-change: transform;
}

.recording-card:hover,
.recording-card:focus-within {
  transform: translateY(-4px);
}

.recording-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition);
}

.recording-card:hover img,
.recording-card:focus-within img {
  box-shadow: var(--shadow-lg);
}

.recording-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a3d2d;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(28, 174, 129, 0.25);
}

[data-theme="dark"] .recording-step {
  color: #052a1e;
  background: var(--accent);
}

@media (max-width: 1024px) {
  .recording-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(220px, 36vw, 280px);
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    padding: 4px 24px 20px;
    margin-inline: -24px;
    -webkit-overflow-scrolling: touch;
  }
  .recording-card {
    scroll-snap-align: start;
  }
  /* Slim scrollbar */
  .recording-rail::-webkit-scrollbar { height: 6px; }
  .recording-rail::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 999px;
  }
  [data-theme="dark"] .recording-rail::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 480px) {
  .recording-guide { padding: 72px 0; }
  .recording-rail {
    grid-auto-columns: min(72vw, 300px);
  }
  .recording-step {
    font-size: 0.7rem;
    padding: 5px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recording-card { transition: none; }
  .recording-card:hover,
  .recording-card:focus-within { transform: none; }
}

/* ===== Analytics ===== */
.analytics-section {
  padding: 100px 0;
  background: var(--white);
}

.analytics-layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.analytics-content {
  flex: 1;
}

.analytics-content h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
}

.analytics-desc {
  font-size: 1.05rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 32px;
}

.analytics-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.analytics-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.analytics-feature > i {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--green-light);
  color: var(--green);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-top: 2px;
}
.analytics-feature h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 2px;
}
.analytics-feature p {
  font-size: 0.85rem;
  color: var(--gray-500);
}

.analytics-visuals {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}
.analytics-phone-offset {
  margin-top: 60px;
}

/* ===== Match Center (base = light; dark overrides in [data-theme="dark"]) ===== */
.match-center-section {
  padding: 100px 0;
  background: var(--gray-50);
  color: var(--gray-900);
}
.match-center-section .section-tag {
  color: var(--green);
}
.match-center-section .section-header h2 {
  color: var(--gray-900);
}
.match-center-section .section-header p {
  color: var(--gray-500);
}

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

.match-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.match-card:hover {
  background: var(--white);
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.match-card-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.match-card h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}
.match-card p {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.5;
}

.match-phones {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.match-phones .phone-mockup-sm {
  background: var(--gray-800);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.3),
    0 0 18px rgba(2, 255, 170, 0.10),
    0 0 44px rgba(2, 255, 170, 0.06),
    0 0 78px rgba(28, 174, 129, 0.05);
  filter:
    drop-shadow(0 0 14px rgba(2, 255, 170, 0.08))
    drop-shadow(0 0 34px rgba(2, 255, 170, 0.06))
    drop-shadow(0 0 58px rgba(28, 174, 129, 0.05));
}
.match-phones .phone-notch {
  background: var(--gray-600);
}

/* ===== Profile Section ===== */
.profile-section {
  padding: 100px 0;
  background: var(--gray-50);
}

.profile-layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.profile-images {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 460px;
}
.profile-card-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3/4;
  object-fit: cover;
}
.profile-net-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3/4;
  object-fit: cover;
  margin-top: 40px;
}

.profile-content {
  flex: 1;
}
.profile-content h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 24px;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profile-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.profile-list li i {
  color: var(--green);
  font-size: 1.1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ===== Pricing ===== */
.pricing-section {
  padding: 100px 0;
  background: var(--white);
}

.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.billing-label {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: color var(--transition);
}
.billing-label.active { color: var(--gray-900); font-weight: 600; }

.save-badge {
  background: var(--green-light);
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  margin-left: 4px;
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.toggle input { display: none; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray-300);
  border-radius: 12px;
  transition: var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: var(--transition);
}
.toggle input:checked + .toggle-slider {
  background: var(--green);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

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

.price-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.price-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.price-card-featured {
  border-color: var(--green);
  box-shadow: 0 4px 24px var(--green-glow);
  transform: scale(1.03);
}
.price-card-featured:hover {
  transform: scale(1.03) translateY(-4px);
}

.price-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.price-coming {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-800);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.price-card h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.price-desc {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 20px;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 28px;
}
.price-currency {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-900);
}
.price-value {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
}
.price-period {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-left: 4px;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  flex: 1;
}
.price-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--gray-600);
}
.price-features li i {
  color: var(--green);
  font-size: 0.8rem;
}

.price-btn {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 10px;
  transition: all var(--transition);
}
.price-btn-outline {
  border: 2px solid var(--gray-200);
  color: var(--gray-700);
}
.price-btn-outline:hover {
  border-color: var(--green);
  color: var(--green);
}
.price-btn-filled {
  background: var(--green);
  color: var(--white);
}
.price-btn-filled:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

/* ===== Pricing comparison table (desktop) ===== */
.pricing-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-100, #f1f5f9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 32px rgba(15, 23, 42, 0.06);
  background: var(--white);
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--white);
}
.pricing-table th,
.pricing-table td {
  padding: 14px 18px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-100);
}
.pricing-table thead th {
  background: var(--white);
  padding: 32px 20px 24px;
  text-align: center;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-200);
}
.pricing-table th.pt-feature-col,
.pricing-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--gray-700);
  width: 28%;
}
.pricing-table th.pt-featured,
.pricing-table td.pt-featured {
  background: rgba(28, 174, 129, 0.05);
  position: relative;
}
.pricing-table th.pt-featured {
  background: rgba(28, 174, 129, 0.08);
  border-top: 3px solid var(--green);
}
.pt-popular {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px var(--green-glow, rgba(28, 174, 129, 0.25));
}
/* simple stacked header: name + description, then price */
.pt-plan-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 56px;
}
.pt-plan-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}
.pt-plan-desc {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 8px;
}
.pt-plan-price {
  font-family: var(--font-heading);
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
}
.pt-currency {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  align-self: flex-start;
  margin-top: 6px;
}
.pt-amount {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pt-period {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-left: 4px;
}
/* subtle column highlight on row hover (excludes feature label col) */
.pricing-table tbody tr:not(.pt-section):hover td:not(:first-child) {
  background: var(--gray-50, #f9fafb);
}
.pricing-table tbody tr:not(.pt-section):hover td.pt-featured {
  background: var(--green-light);
}
.pricing-table thead th:hover .pt-plan-icon {
  transform: translateY(-2px);
}
.pricing-table tr.pt-section td {
  background: var(--gray-50, #f9fafb);
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  padding: 10px 18px;
}
.pricing-table .pt-yes { color: var(--green); font-size: 1rem; }
.pricing-table .pt-no { color: var(--gray-300); font-size: 0.95rem; }
.pricing-table .pt-na { color: var(--gray-300); font-size: 0.9rem; }
.pricing-table .pt-hint {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-500);
  margin-top: 2px;
}
.pricing-table tfoot td {
  padding: 20px 14px;
  background: var(--white);
}
.pricing-table tfoot .price-btn {
  display: block;
  width: 100%;
  font-size: 0.85rem;
  padding: 10px 14px;
}

/* mobile-only card grid (hidden on desktop) */
.pricing-cards-mobile { display: none; }

/* ===== Download CTA ===== */
.download-section {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--green-light) 0%, var(--white) 100%);
}

.download-layout {
  display: flex;
  align-items: center;
  gap: 60px;
}

.download-content {
  flex: 1;
}
.download-content h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
}
.download-content > p {
  font-size: 1.1rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 32px;
}

.download-badges {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.download-features {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.download-features span {
  font-size: 0.85rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.download-features i {
  color: var(--green);
  font-size: 0.9rem;
}

.download-visual {
  flex-shrink: 0;
  position: relative;
}

/* ===== Footer ===== */
.footer {
  background: var(--gray-900);
  color: var(--gray-300);
  padding: 60px 0 0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
}
.footer-logo img {
  height: 32px;
  width: auto;
  max-width: min(180px, 48vw);
  object-fit: contain;
  display: block;
}
.footer-logo span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  color: var(--white);
}
.footer-brand p {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.6;
}

.footer-links-group h4 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.footer-links-group a {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 10px;
  transition: color var(--transition);
}
.footer-links-group a:hover { color: var(--green); }

.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  transition: all var(--transition);
  font-size: 0.9rem;
}
.footer-social a:hover {
  background: var(--green);
  color: var(--white);
}

.footer-bottom {
  padding: 20px 0;
  text-align: center;
}
.footer-bottom p {
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* ===== Contact Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.active { display: flex; }

.modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 540px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-content h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 6px;
}
.modal-content > p {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-bottom: 24px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  border-radius: 8px;
  transition: all var(--transition);
  font-size: 1.1rem;
}
.modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  margin-bottom: 16px;
}
.form-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gray-800);
  transition: border-color var(--transition);
  outline: none;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--green);
}
.form-field textarea { resize: vertical; }

.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  transition: background var(--transition);
  cursor: pointer;
  border: none;
}
.form-submit:hover {
  background: var(--green-dark);
}

/* ===== Content Pages (About, Privacy, Terms) ===== */
.content-page {
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 80px;
  min-height: 60vh;
}

.content-page .section-container {
  max-width: 800px;
}

.content-page h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.content-page .content-subtitle {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-bottom: 40px;
}

.content-page h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-top: 36px;
  margin-bottom: 12px;
}

.content-page h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-top: 10px;
  margin-bottom: 8px;
}

.content-page p {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 12px;
}

.content-page ul {
  margin: 8px 0 16px 20px;
  list-style: disc;
}
.content-page ul li {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 4px;
}

.content-page a {
  color: var(--green);
  font-weight: 500;
  transition: color var(--transition);
}
.content-page a:hover {
  color: var(--green-dark);
}

.content-page strong {
  color: var(--gray-800);
}

.content-page .content-note {
  text-align: center;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}

/* About page specifics */
.about-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 24px;
}
.about-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-info-item .label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
}
.about-info-item .value {
  font-size: 0.95rem;
  color: var(--gray-800);
}

/* Visual Intelligence (About page — vertical demo videos) */
.visual-intelligence-breakout {
  width: 100vw;
  position: relative;
  overflow: hidden;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 32px;
  margin-bottom: 24px;
  padding: 32px 24px 56px;
  box-sizing: border-box;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 18px 48px rgba(15, 23, 42, 0.06);
}
/* Semi-transparent brand wash + depth — stays behind text (z-index on inner) */
.visual-intelligence-breakout::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 110% 72% at 50% 0%, rgba(28, 174, 129, 0.075) 0%, transparent 54%),
    radial-gradient(ellipse 68% 48% at 96% 78%, rgba(28, 174, 129, 0.06) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 48%);
}
.visual-intelligence-breakout::after {
  content: '';
  position: absolute;
  left: -16%;
  right: -16%;
  bottom: -22px;
  height: 62%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(130% 78% at 50% 100%, rgba(28, 174, 129, 0.16) 0%, rgba(28, 174, 129, 0.1) 28%, rgba(0, 0, 0, 0) 70%);
}
@keyframes vi-section-reflect {
  0% { opacity: 0; transform: translateY(26px) scaleY(0.95); }
  35% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(0) scaleY(1); }
}
.visual-intelligence-breakout--reflect::after {
  animation: vi-section-reflect 980ms cubic-bezier(0.2, 0.88, 0.28, 1) both;
}
[data-theme="dark"] .visual-intelligence-breakout {
  background: var(--white);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .visual-intelligence-breakout::before {
  background:
    radial-gradient(ellipse 110% 72% at 50% 0%, rgba(28, 174, 129, 0.12) 0%, transparent 54%),
    radial-gradient(ellipse 68% 48% at 8% 82%, rgba(28, 174, 129, 0.07) 0%, transparent 52%),
    linear-gradient(185deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.18) 100%);
}
[data-theme="dark"] .visual-intelligence-breakout::after {
  background:
    radial-gradient(130% 78% at 50% 100%, rgba(28, 174, 129, 0.16) 0%, rgba(28, 174, 129, 0.1) 28%, rgba(0, 0, 0, 0) 72%);
}
.visual-intelligence-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.visual-intelligence-breakout h2 {
  margin-top: 0;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .visual-intelligence-breakout h2 {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.visual-intelligence-intro {
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.7;
  margin-bottom: 8px;
  max-width: 720px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .visual-intelligence-intro {
  color: var(--gray-600);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.visual-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 10px;
  align-items: start;
  justify-items: center;
}
/* Scroll-triggered: JS adds .visual-intelligence-item--in-view per tile — no opacity hide */
.visual-intelligence-item {
  margin: 0;
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  opacity: 1;
  padding: 14px 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 36px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(28, 174, 129, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(clamp(34px, 6vw, 56px)) scale(0.92);
  transition: transform 0.86s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
[data-theme="dark"] .visual-intelligence-item {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 16px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(28, 174, 129, 0.12);
}
.visual-intelligence-item:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 44px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(28, 174, 129, 0.14);
}
[data-theme="dark"] .visual-intelligence-item:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 20px 56px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(28, 174, 129, 0.18);
}
.visual-intelligence-item--in-view {
  transform: translateY(0) scale(1);
  animation: vi-card-pop 0.92s cubic-bezier(0.18, 0.9, 0.24, 1.12) both;
}
@keyframes vi-card-pop {
  0% { transform: translateY(clamp(38px, 7vw, 62px)) scale(0.9); }
  65% { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes vi-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(28, 174, 129, 0.35),
      0 0 0 4px rgba(28, 174, 129, 0.14),
      inset 0 0 0 1px rgba(160, 255, 235, 0.18),
      0 0 22px rgba(28, 174, 129, 0.13),
      0 12px 40px rgba(0, 0, 0, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(28, 174, 129, 0.45),
      0 0 0 4px rgba(28, 174, 129, 0.18),
      inset 0 0 0 1px rgba(160, 255, 235, 0.2),
      0 0 28px rgba(28, 174, 129, 0.20),
      0 12px 40px rgba(0, 0, 0, 0.20);
  }
}

@keyframes vi-glow-pulse-dark {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(28, 174, 129, 0.62),
      0 0 0 4px rgba(28, 174, 129, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 28px rgba(0, 212, 200, 0.20),
      0 12px 44px rgba(0, 0, 0, 0.56);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(28, 174, 129, 0.78),
      0 0 0 4px rgba(28, 174, 129, 0.24),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 38px rgba(0, 212, 200, 0.26),
      0 12px 44px rgba(0, 0, 0, 0.60);
  }
}
@keyframes vi-scanline-drift {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}
@media (prefers-reduced-motion: reduce) {
  .visual-intelligence-item {
    transform: none !important;
    transition: none !important;
  }
}
/* Analysis-style panel: brand green + cyan outer glow */
.visual-intelligence-video-frame {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) + 10px);
  padding: 5px;
  background: linear-gradient(
    155deg,
    rgba(28, 174, 129, 0.22) 0%,
    rgba(28, 174, 129, 0.12) 40%,
    rgba(28, 174, 129, 0.06) 100%
  );
  box-shadow:
    0 0 0 2px rgba(28, 174, 129, 0.35),
    0 0 0 4px rgba(28, 174, 129, 0.14),
    inset 0 0 0 1px rgba(160, 255, 235, 0.18),
    0 0 24px rgba(28, 174, 129, 0.13),
    0 12px 40px rgba(0, 0, 0, 0.18);
  transition: box-shadow 360ms ease, transform 360ms ease;
}
.visual-intelligence-video-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--radius-lg) + 5px);
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(130, 255, 224, 0.03) 0px,
      rgba(130, 255, 224, 0.03) 1px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 4px
    );
  mix-blend-mode: screen;
  transition: opacity 360ms ease;
}
[data-theme="dark"] .visual-intelligence-video-frame {
  background: linear-gradient(
    155deg,
    rgba(28, 174, 129, 0.14) 0%,
    rgba(28, 174, 129, 0.08) 40%,
    rgba(28, 174, 129, 0.05) 100%
  );
  box-shadow:
    0 0 0 2px rgba(28, 174, 129, 0.62),
    0 0 0 4px rgba(28, 174, 129, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 34px rgba(0, 212, 200, 0.20),
    0 12px 44px rgba(0, 0, 0, 0.56);
}
.visual-intelligence-item--in-view .visual-intelligence-video-frame {
  animation: vi-glow-pulse 2.8s ease-in-out infinite;
}
.visual-intelligence-item--in-view .visual-intelligence-video-frame::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 12px);
  pointer-events: none;
  border: 1px solid rgba(120, 255, 226, 0.66);
  box-shadow:
    0 0 0 1px rgba(28, 174, 129, 0.35),
    0 0 24px rgba(28, 174, 129, 0.26);
  opacity: 0;
  animation: vi-ring-flash 700ms ease-out both;
  animation-delay: var(--vi-delay, 0ms);
}
@keyframes vi-ring-flash {
  0% { opacity: 0; transform: scale(0.97); }
  35% { opacity: 0.7; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.04); }
}
.visual-intelligence-item--in-view .visual-intelligence-video-frame::after {
  opacity: 0.2;
  animation: vi-scanline-drift 7.5s linear infinite alternate;
}
.visual-intelligence-item:hover .visual-intelligence-video-frame {
  transform: translateY(-2px);
}
[data-theme="dark"] .visual-intelligence-item--in-view .visual-intelligence-video-frame {
  animation: vi-glow-pulse-dark 2.8s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(28, 174, 129, 0.62),
    0 0 0 4px rgba(28, 174, 129, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 34px rgba(0, 212, 200, 0.20),
    0 12px 44px rgba(0, 0, 0, 0.56);
}
.visual-intelligence-video-frame video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) + 5px);
  box-sizing: border-box;
  background: #070b0a;
  display: block;
}
/* HUD-style subtitle under each feed — soft brand glow */
.visual-intelligence-item figcaption {
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(232, 255, 248, 0.96);
  background: linear-gradient(
    165deg,
    rgba(8, 28, 22, 0.94) 0%,
    rgba(4, 14, 12, 0.98) 100%
  );
  border: 1px solid rgba(28, 174, 129, 0.42);
  box-shadow:
    0 0 0 1px rgba(28, 174, 129, 0.18),
    0 0 20px rgba(28, 174, 129, 0.22),
    0 0 44px rgba(0, 212, 200, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  text-shadow:
    0 0 10px rgba(0, 236, 214, 0.45),
    0 0 22px rgba(28, 174, 129, 0.3),
    0 1px 0 rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .visual-intelligence-item figcaption {
  color: rgba(240, 255, 252, 0.98);
  background: linear-gradient(
    165deg,
    rgba(6, 22, 18, 0.96) 0%,
    rgba(2, 10, 9, 0.99) 100%
  );
  border-color: rgba(28, 174, 129, 0.48);
  box-shadow:
    0 0 0 1px rgba(28, 174, 129, 0.28),
    0 0 26px rgba(28, 174, 129, 0.32),
    0 0 56px rgba(28, 174, 129, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow:
    0 0 12px rgba(100, 255, 228, 0.5),
    0 0 28px rgba(28, 174, 129, 0.38),
    0 1px 0 rgba(0, 0, 0, 0.45);
}

@media (max-width: 900px) {
  .visual-intelligence-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 28px;
  }
  .visual-intelligence-item {
    max-width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-intelligence-item--in-view .visual-intelligence-video-frame::after {
    animation: none !important;
    opacity: 0.22;
  }
}

@media (max-width: 480px) {
  .content-page h1 { font-size: 1.8rem; }
  .about-info-grid { grid-template-columns: 1fr; }
  .visual-intelligence-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero h1 { font-size: 2.6rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .match-grid { grid-template-columns: repeat(2, 1fr); }
  /* swap table for card grid on tablet/mobile */
  .pricing-table-wrap { display: none; }
  .pricing-cards-mobile { display: grid; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid .price-card:last-child {
    grid-column: 1 / -1;
    max-width: 400px;
    justify-self: center;
  }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: 100%;
    background: var(--white);
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform var(--transition);
  }
  .nav-menu.open { transform: translateY(0); }
  .nav-cta { text-align: center; }

  [data-theme="dark"] .nav-menu {
    background: #4bd8a4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .hero-container { flex-direction: column; text-align: center; gap: 40px; }
  .hero-content { max-width: 100%; }
  .hero-visual {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
  .hero h1 { font-size: 2.2rem; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }

  .section-header h2 { font-size: 2rem; }

  .features-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }

  .steps-grid { flex-direction: column; align-items: center; gap: 32px; }
  .step-connector { width: 2px; height: 40px; background: linear-gradient(180deg, var(--green), var(--gray-200)); }

  .analytics-layout { flex-direction: column; }
  .analytics-content h2 { font-size: 1.8rem; }
  .analytics-visuals { justify-content: center; }
  .analytics-phone-offset { margin-top: 40px; }

  .match-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 40px; }
  .match-phones { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .match-phones .phone-mockup-sm { width: 160px; }

  .profile-layout { flex-direction: column; }
  .profile-images { max-width: 340px; }
  .profile-content h2 { font-size: 1.8rem; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .pricing-grid .price-card:last-child { max-width: none; }
  .price-card-featured { transform: none; }
  .price-card-featured:hover { transform: translateY(-4px); }

  .download-layout { flex-direction: column; text-align: center; }
  .download-content h2 { font-size: 2rem; }
  .download-badges { justify-content: center; }
  .download-features { justify-content: center; }
  .download-visual { order: -1; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .footer-social { justify-content: center; }
  .footer-logo { justify-content: center; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.8rem; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .stat-divider { width: 40px; height: 1px; }
  .store-badge { height: 42px; }
  .phone-mockup { width: 240px; }
  .phone-mockup-sm { width: 180px; }
  .match-phones .phone-mockup-sm { width: 140px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================
 * HERO PARTICLES & GLASS OVERLAY (canvas neural-network background)
 * Markup: <canvas id="hero-particles" class="hero-particles"></canvas>
 *         <div class="hero-glass-overlay"></div>
 * Hero section is position:relative; hero children sit at z-index ≥ 1.
 * ============================================ */
.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 15%, black 50%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 15%, black 50%);
}

.hero-glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: rgba(17, 17, 17, 0.3);
}

/* ============================================
 * FEATURES / MATCH CENTER DOTS BACKGROUND (parallax dots)
 * Markup: <div class="features-dots-bg" data-features-dots></div>
 * Container must be position:relative; overflow:hidden.
 * JS adds translate3d Y parallax via initFeaturesDotsParallax().
 * ============================================ */
.features-section .section-container,
.match-center-section .section-container {
  position: relative;
  z-index: 2;
}

.features-dots-bg {
  position: absolute;
  inset: -150px;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--green) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  background-position: 0 0;
  opacity: 0.3;
  will-change: transform;
}

/* ============================================
 * PHONE MOCKUP — IMAGE-BACKED FRAMES (uses /assets/phone.png overlay)
 * Markup:
 *   <div class="phone-mockup phone-mockup-img-frame"> (Analytics)
 *   <div class="phone-mockup phone-mockup-sm is-image-frame"> (Match Center)
 *   <div class="phone-mockup is-image-frame download-phone--focus"> (Download)
 *   <img class="phone-mockup-screen-img" ...> screen jpeg
 *   <img class="phone-mockup-frame" src="/assets/phone.png" alt=""> overlay
 * ============================================ */

/* First analytics phone: corner cut inside bezel */
.analytics-phone--focus .phone-mockup-screen-img {
  border-radius: 2.6rem !important;
  overflow: hidden !important;
  clip-path: inset(2.2% round 2.6rem);
}

/* Second (right-side) analytics phone: slightly tighter cut */
.analytics-phone--secondary-focus .phone-mockup-screen-img {
  border-radius: 2.7rem !important;
  overflow: hidden !important;
  clip-path: inset(2.6% round 2.7rem);
}

/* Image-based phone mockup overlay (Analytics) */
.phone-mockup-img-frame {
  position: relative;
  width: 250px;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 0 14px rgba(2, 255, 170, 0.08))
    drop-shadow(0 0 34px rgba(2, 255, 170, 0.06))
    drop-shadow(0 0 58px rgba(28, 174, 129, 0.05));
}

.phone-mockup-img-frame .phone-mockup-screen-img {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  border-radius: 2rem;
  display: block;
  aspect-ratio: unset !important;
}

.phone-mockup-img-frame .phone-mockup-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Modifier for existing phone-mockup-sm / phone-mockup to use image frame */
.is-image-frame {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  filter: none !important;
}

.is-image-frame > img.phone-mockup-screen-img {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  border-radius: 2rem;
  display: block;
  aspect-ratio: unset !important;
}

.is-image-frame .phone-mockup-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Download phone: corner cut to sit inside frame */
.download-phone--focus .phone-mockup-screen-img {
  border-radius: 2.55rem !important;
  overflow: hidden !important;
  clip-path: inset(2.1% round 2.55rem);
}

/* ============================================
 * SCROLL CONTROLS (floating go-top / go-down)
 * Markup: two <button id="go-top-btn|go-down-btn" class="scroll-btn">
 * placed as direct children of <body>. JS toggles .scroll-button-active.
 * ============================================ */
.scroll-btn {
  position: fixed;
  right: 24px;
  z-index: 999;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transition: all var(--transition);
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  cursor: pointer;
}

#go-down-btn { top: 100px; }
#go-top-btn { bottom: 40px; }

.scroll-btn.scroll-button-active {
  opacity: 0.25;
  pointer-events: auto;
  transform: translateX(0);
}

.scroll-btn:hover {
  opacity: 0.6;
  background: var(--green);
  color: white;
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(28, 174, 129, 0.3);
}

[data-theme="dark"] .scroll-btn {
  background: color-mix(in srgb, var(--gray-800) 5%, transparent);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}