/* =========================================================================
   AI Jewelry Retoucher Landing Page — NeuroViz
   v3 / 2026-04-29 — adds page nav, hero bg image, card images, theme toggle
   Design tokens extracted from production neuroviz.ai homepage CSS.
   Brand guide: .claude/skills/design/neuroviz-brand-guide.md
   Dark theme overrides: ai-jewelry-retoucher-dark.css
   ========================================================================= */

/* -------- Brand tokens (do not change between themes) -------- */
:root {
  --orange:       #FF6600;
  --orange-dark:  #E55A00;
  --blue:         #31587C;
  --blue-light:   #1CA6AF;
  --teal:         #29ABB3;
  --orange-glow:  0 8px 24px rgba(255, 102, 0, 0.30);

  --heading-font: "Syne", Arial, sans-serif;
  --body-font:    "DM Sans", Arial, sans-serif;

  --container:    1280px;
  --section-pad-y: 100px;
  --radius-card:  20px;
  --radius-btn:   10px;

  /* -------- Theme-aware tokens (light defaults) -------- */
  --page-bg:        #FFFFFF;
  --page-bg-soft:   #EBF2F5;
  --surface-bg:     #FFFFFF;
  --surface-border: #E5EAEE;
  --text-primary:   #1F2937;
  --text-headline:  #1A2B3C;
  --text-section-heading: #31587C; /* light-mode H1/H2 — NeuroViz brand blue */
  --text-secondary: #6B7C8D;
  --card-shadow:        0 4px 24px rgba(49, 88, 124, 0.10);
  --card-shadow-hover:  0 12px 48px rgba(49, 88, 124, 0.18);
  --header-bg:      rgba(255, 255, 255, 0.85);
  --header-border:  rgba(49, 88, 124, 0.08);
  /* Page-nav uses INVERTED contrast vs page bg so the sticky strip
     reads as a deliberate element (not a faint divider). Light mode →
     dark navy nav. Dark mode override flips this in the dark stylesheet. */
  --pagenav-bg:     rgba(26, 43, 60, 0.96);
  --pagenav-border: rgba(255, 255, 255, 0.08);
  --pagenav-link:           rgba(255, 255, 255, 0.78);
  --pagenav-link-hover:     #FFFFFF;
  --pagenav-link-hover-bg:  rgba(255, 255, 255, 0.10);
  --pagenav-link-active-bg: rgba(255, 102, 0, 0.22);
  --pagenav-toggle-bg:      rgba(255, 255, 255, 0.10);
  --pagenav-toggle-border:  rgba(255, 255, 255, 0.22);
  --pagenav-toggle-color:   #FFFFFF;
  --tag-bg:         #EBF2F5;
  --inline-divider: #E5EAEE;
}

/* -------- Reset / base -------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--page-bg);
}

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--orange); }

h1, h2, h3, h4 {
  font-family: var(--heading-font);
  color: var(--text-headline);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

/* H1 + H2 on light/white sections render in NeuroViz brand blue (Issue 4
   refinement). H3 / H4 keep the dark-navy text-headline color so smaller
   headings (e.g. step cards, FAQ questions) stay readable and grounded. */
h1, h2 { color: var(--text-section-heading); }

h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.18; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1em; max-width: 65ch; }

ul { padding-left: 1.25em; margin: 0 0 1em; }
li { margin-bottom: 0.5em; }

/* -------- Container -------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .container { padding: 0 60px; }
}

/* -------- Header (main site) -------- */
/* Header height is a CSS var so all dependent offsets (page-nav top,
   hero margin-top) stay in sync automatically when it changes per
   breakpoint. Default is 72px (single-row); on narrow screens the
   container stacks (logo on top, CTAs below) and grows to 124px. */
:root { --site-header-h: 72px; }
@media (max-width: 639px) { :root { --site-header-h: 124px; } }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--site-header-h);
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s, background-color 0.25s;
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}
@media (min-width: 768px) { .site-header .container { padding: 0 40px; } }

/* Mobile: stack logo row above the CTAs so the wide
   "Try Free — 80 Credits" button stops crushing the logo. */
@media (max-width: 639px) {
  .site-header .container {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .header-ctas { width: 100%; justify-content: center; }
  .header-ctas .btn { padding: 10px 16px; font-size: 0.88rem; }
}

/* Logo must never shrink in the flex header — otherwise the global
   `img { max-width: 100% }` rule clamps the width while `height: 36px`
   stays fixed, distorting/squeezing the logo on mobile. */
.site-logo { flex-shrink: 0; }
.site-logo img { height: 36px; width: auto; max-width: none; }
.site-logo .logo-dark { display: none; }

.site-nav { display: none; gap: 32px; }
.site-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.2s;
}
.site-nav a:hover { color: var(--blue); }
@media (min-width: 1024px) { .site-nav { display: flex; } }

.header-ctas { display: flex; gap: 12px; align-items: center; }

/* -------- Page nav (sticky landing-page nav) -------- */
.page-nav {
  position: sticky;
  top: var(--site-header-h);
  background: var(--pagenav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pagenav-border);
  z-index: 90;
  transition: background-color 0.25s, border-color 0.25s;
}
.page-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
}
@media (min-width: 768px) { .page-nav-inner { padding: 0 60px; } }

.page-nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}
.page-nav-links::-webkit-scrollbar { display: none; }
.page-nav-links li { margin: 0; flex-shrink: 0; }
.page-nav-links a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pagenav-link);
  border-radius: 999px;
  transition: color 0.2s, background-color 0.2s;
  white-space: nowrap;
}
.page-nav-links a:hover {
  color: var(--pagenav-link-hover);
  background: var(--pagenav-link-hover-bg);
}
.page-nav-links a.active {
  color: var(--orange);
  background: var(--pagenav-link-active-bg);
}

/* -------- Theme toggle button --------
   Lives inside .page-nav which uses inverted contrast vs page bg. The
   toggle picks up matching tokens so it stays visible on either nav bg. */
.theme-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--pagenav-toggle-border);
  background: var(--pagenav-toggle-bg);
  color: var(--pagenav-toggle-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.theme-toggle:hover {
  border-color: var(--orange);
  transform: scale(1.05);
}
.theme-toggle .icon-moon { display: inline-block; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-block; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  padding: 12px 24px;
  line-height: 1;
  white-space: nowrap;
}
.btn-primary { background: var(--orange); color: #FFFFFF; }
.btn-primary:hover {
  background: var(--orange-dark);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--orange-glow);
}
.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--surface-border);
}
.btn-outline:hover {
  border-color: var(--blue);
  background: var(--page-bg-soft);
  color: var(--blue);
}
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-sm { padding: 10px 18px; font-size: 0.85rem; }

/* -------- Generic section -------- */
section { padding: var(--section-pad-y) 0; }
@media (max-width: 767px) { section { padding: 64px 0; } }

.section-tag {
  display: inline-block;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  padding: 6px 14px;
  background: var(--tag-bg);
  border-radius: 999px;
}
.section-intro {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 640px;
  margin-bottom: 56px;
}
.bg-soft  { background: var(--page-bg-soft); }
.bg-white { background: var(--page-bg); }
.bg-dark {
  background: linear-gradient(135deg, #1A2B3C 0%, #1E3A54 100%);
  color: #FFFFFF;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #FFFFFF; }
.bg-dark p { color: rgba(255, 255, 255, 0.78); }

/* -------- Hero (replicates neuroviz.ai homepage hero) --------
   Split layout: text left, interactive before/after slider right.
   Two floating badges flank the slider with floatUp animation.
   Stats strip below. Light + dark themes via CSS variables.
   ============================================================= */
.hero {
  margin-top: var(--site-header-h); /* clear fixed site-header */
  background: var(--page-bg);
  padding: 100px 0;
}
@media (max-width: 767px) { .hero { padding: 56px 0 64px; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
}

/* Text column (mobile order: text BELOW image). */
.hero-text { order: 2; max-width: 560px; }
.hero-visual { order: 1; }
@media (min-width: 1024px) {
  .hero-text { order: 1; }
  .hero-visual { order: 2; }
}

/* Eyebrow badge with pulsing dot — same pattern as homepage. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(28,166,175,0.12), rgba(49,88,124,0.08));
  border: 1px solid rgba(28,166,175,0.25);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
[data-theme="dark"] .hero-badge {
  background: linear-gradient(135deg, rgba(28,166,175,0.18), rgba(49,88,124,0.14));
  color: #5BD0D8;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-light);
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0 rgba(28,166,175,0.6); }
  50%      { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 6px rgba(28,166,175,0); }
}

/* H1 — split into two parts:
   Part 1 keeps the homepage hero size (clamp 2.4–3.4rem) at extrabold;
   Part 2 is a refined subtitle — lighter weight + ~62% size. */
.hero-text h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: var(--text-headline); /* override the global section-blue rule */
}
.hero-title-main {
  display: block;
  font-family: var(--heading-font);
  font-weight: 800;
  color: var(--text-headline);
}
.hero-title-sub {
  display: block;
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--blue);
  font-size: 0.62em;
  margin-top: 0.32em;
  letter-spacing: -0.005em;
  line-height: 1.18;
}
[data-theme="dark"] .hero-title-main { color: #FFFFFF; }
[data-theme="dark"] .hero-title-sub  { color: #5BAACA; }

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 0 32px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
/* Hero CTA arrow icon margin */
.hero-cta-row .btn svg { margin-left: 2px; }

/* Trust checklist with green tick pills */
.hero-trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.hero-trust-tick {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-trust-tick svg { width: 11px; height: 11px; }

/* "Works with" AI-assistant row — sits under the trust checklist.
   Text only (no third-party logos). Muted trust row, not a CTA;
   the link click is tracked via data-track-cta. */
.works-with-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--inline-divider);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.works-with-label { color: var(--text-secondary); }
.works-with-items { color: var(--text-secondary); font-weight: 500; }
.works-with-link {
  color: var(--blue-light);
  font-weight: 600;
  white-space: nowrap;
}
.works-with-link:hover { color: var(--orange); }
[data-theme="dark"] .works-with-link { color: #5BD0D8; }
[data-theme="dark"] .works-with-link:hover { color: var(--orange); }

/* ---------- Before/After slider (homepage hero pattern) ---------- */
.hero-visual { position: relative; width: 100%; }

.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: #F0F4F7;
  box-shadow: 0 24px 80px rgba(49, 88, 124, 0.22);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ba-slider-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.ba-slider-after {
  /* Initial clip — JS updates this via --slider-pos. */
  clip-path: inset(0 0 0 var(--slider-pos, 50%));
}
.ba-slider-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: #FFFFFF;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.20);
  z-index: 5;
  left: var(--slider-pos, 50%);
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-slider-handle {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
  z-index: 6;
  cursor: col-resize;
  left: var(--slider-pos, 50%);
  transform: translate(-50%, -50%);
  padding: 0;
}
.ba-slider-handle:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.ba-slider-label {
  position: absolute;
  font-family: var(--body-font);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 7;
  pointer-events: none;
}
.ba-slider-label-before { bottom: 16px; left: 16px; background: rgba(0, 0, 0, 0.55); }
.ba-slider-label-after  { top: 16px;    right: 16px; background: var(--orange); }

/* Floating stat badges around the slider (homepage pattern). */
.hero-float {
  position: absolute;
  z-index: 20;
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 48px rgba(49, 88, 124, 0.18);
  animation: floatUp 3s ease-in-out infinite;
}
[data-theme="dark"] .hero-float { background: #16263A; border-color: #243950; box-shadow: 0 12px 48px rgba(0,0,0,0.45); }
.hero-float-tl { top: -20px;    left: -20px; }
.hero-float-br { bottom: -20px; right: -20px; animation-delay: 1.5s; }
.hero-float-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-float-icon-blue {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
}
.hero-float-icon svg { width: 18px; height: 18px; }
.hero-float-value {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-headline);
  line-height: 1;
}
[data-theme="dark"] .hero-float-value { color: #FFFFFF; }
.hero-float-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-6px); }
}
@media (max-width: 640px) {
  .hero-float-tl { top: -12px;    left: 8px;  padding: 8px 12px; }
  .hero-float-br { bottom: -12px; right: 8px; padding: 8px 12px; }
  .hero-float-value { font-size: 0.95rem; }
  .hero-float-label { font-size: 0.65rem; }
}

/* ---------- Stats strip below hero ---------- */
.hero-stats {
  background: var(--page-bg-soft);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  padding: 22px 0;
}
.hero-stats-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
@media (min-width: 768px) { .hero-stats-inner { gap: 48px; padding: 0 60px; } }
.hero-stat { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.hero-stat-value {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--blue);
}
[data-theme="dark"] .hero-stat-value { color: #5BAACA; }
.hero-stat-label { font-size: 0.85rem; color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .hero-badge-dot, .hero-float { animation: none; }
}

/* -------- 3-step "How It Works" -------- */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step-card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  padding: 32px;
  position: relative;
  transition: all 0.3s ease;
}
.step-card:hover {
  border-color: rgba(28, 166, 175, 0.3);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 100%);
  color: #FFFFFF;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 20px;
}
.step-card h3 { margin-bottom: 12px; }
.step-card p { font-size: 0.95rem; color: var(--text-secondary); margin: 0; }

/* -------- Retoucher cards (3 products) -------- */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 40px;
}
@media (min-width: 768px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}
.product-card:hover {
  border-color: rgba(28, 166, 175, 0.4);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.product-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--page-bg-soft);
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .product-image img { transform: scale(1.04); }

.product-content {
  padding: 28px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card .badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--orange);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.product-card .badge.blue { background: var(--blue); }
.product-card .badge.teal { background: var(--teal); }
.product-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.product-tagline {
  font-size: 1rem;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 16px;
}
.product-desc {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.product-best-for {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--inline-divider);
}
.product-best-for strong { color: var(--text-headline); }
.product-pro-tip {
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding: 14px 16px;
  background: rgba(255, 102, 0, 0.06);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
}
.product-pro-tip strong { color: var(--orange); display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.product-credits {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  margin-top: auto;
}
.product-credits strong { color: var(--text-headline); font-size: 1.05rem; }
.product-card .btn {
  align-self: flex-start;
  width: 100%;
  justify-content: center;
}

/* -------- Fix list (icon list) -------- */
.fix-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 32px;
  margin-top: 32px;
}
@media (min-width: 640px) { .fix-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fix-list { grid-template-columns: 1fr 1fr 1fr; } }
.fix-list li {
  font-size: 0.95rem;
  color: var(--text-primary);
  padding-left: 28px;
  position: relative;
  margin: 0;
}
.fix-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") no-repeat center / contain;
}
.fix-list li strong { color: var(--text-headline); }

/* "What It Fixes" is a long list with one very tall bullet (Gemstone control).
   Grid row-flow makes that tall row push a gap into the other two columns.
   Switch this list to independent column flow (multicol) so every bullet sits
   directly under the previous one in its column. The short batch list keeps grid. */
.fix-list-cols {
  display: block;
  column-count: 1;
  column-gap: 32px;
}
@media (min-width: 640px)  { .fix-list-cols { column-count: 2; } }
@media (min-width: 1024px) { .fix-list-cols { column-count: 3; } }
.fix-list-cols li {
  margin-bottom: 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* -------- Gallery -------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: 1fr 1fr 1fr; } }
.gallery-card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all 0.3s ease;
}
.gallery-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.gallery-card .ba-frame {
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: 4/3;
}
.gallery-caption {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gallery-caption h4 { font-size: 0.95rem; margin: 0; color: var(--text-headline); }
.gallery-caption .tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--page-bg-soft);
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -------- Before/After frame (used in gallery) -------- */
.ba-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--page-bg-soft);
  box-shadow: var(--card-shadow);
  aspect-ratio: 4/3;
}
.ba-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  position: relative;
}
.ba-split > div { position: relative; overflow: hidden; }
.ba-split img { width: 100%; height: 100%; object-fit: cover; }
.ba-split .before img { filter: grayscale(0.6) contrast(0.9) brightness(0.92); }
.ba-divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: var(--orange);
  z-index: 2;
}
.ba-label {
  position: absolute;
  top: 16px;
  font-family: var(--body-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(26, 43, 60, 0.85);
  padding: 5px 12px;
  border-radius: 4px;
  z-index: 3;
}
.ba-label.before { left: 16px; }
.ba-label.after  { right: 16px; background: var(--orange); }

/* Composite gallery frame: a single pre-composed before/after image fills
   the frame. Hides the .ba-split / .ba-divider helpers since the visual
   split is baked into the source image. The Before/After pill labels stay
   as overlays so the slot still reads correctly to a scanning user. */
.ba-frame-composite > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-frame-composite .ba-divider,
.ba-frame-composite .ba-split { display: none; }

/* -------- Comparison table (Why NeuroViz) -------- */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 40px -20px 0;
  padding: 0 20px;
}
@media (min-width: 768px) { .compare-wrap { margin: 40px 0 0; padding: 0; } }
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.compare-table th, .compare-table td {
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.compare-table th {
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.95rem;
  color: #FFFFFF;
}
.compare-table td.feature {
  font-weight: 600;
  color: #FFFFFF;
  width: 32%;
}
.compare-table td.nv {
  color: #FFFFFF;
  background: rgba(255, 102, 0, 0.08);
  border-left: 2px solid var(--orange);
}
.compare-table td { color: rgba(255, 255, 255, 0.78); }
.compare-table .yes { color: var(--orange); font-weight: 700; }
.compare-table .no { color: rgba(255, 255, 255, 0.4); }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: none; }
@media (max-width: 767px) {
  .compare-table { font-size: 0.82rem; }
  .compare-table th, .compare-table td { padding: 12px 10px; }
}

/* -------- Pricing -------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
}
@media (min-width: 900px) { .pricing-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.price-card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--card-shadow);
}
.price-card h3 { font-size: 1.15rem; margin-bottom: 18px; color: var(--text-headline); }
.price-card table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.price-card th, .price-card td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid var(--inline-divider);
}
.price-card th { color: var(--text-secondary); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.price-card td { color: var(--text-headline); }
.price-card td:nth-child(1) { font-weight: 600; }
.price-card tr:last-child td { border-bottom: none; }
.price-card .price { color: var(--orange); font-weight: 700; }

/* -------- FAQ -------- */
.faq-list {
  margin-top: 32px;
  border-top: 1px solid var(--inline-divider);
}
.faq-item {
  border-bottom: 1px solid var(--inline-divider);
  padding: 8px 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 36px 18px 0;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-headline);
  position: relative;
  outline: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--orange);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-answer {
  padding: 0 0 20px 0;
  font-size: 0.98rem;
  color: var(--text-primary);
  line-height: 1.7;
  max-width: 70ch;
}

/* -------- Cross-links -------- */
.cross-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 640px) { .cross-grid { grid-template-columns: 1fr 1fr; } }
.cross-card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s ease;
}
.cross-card:hover {
  border-color: rgba(28, 166, 175, 0.4);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.cross-card h4 { font-size: 1.05rem; margin-bottom: 4px; color: var(--text-headline); }
.cross-card p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }
.cross-card .arrow { font-size: 0.85rem; color: var(--orange); font-weight: 600; margin-top: 8px; }

/* -------- Final CTA -------- */
.final-cta {
  text-align: center;
  background: linear-gradient(135deg, #1A2B3C 0%, #1E3A54 100%);
  color: #FFFFFF;
}
.final-cta h2 { color: #FFFFFF; }
.final-cta p { color: rgba(255, 255, 255, 0.78); max-width: 560px; margin: 0 auto 28px; }
.final-cta .btn-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.final-cta .sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin-top: 16px; }

/* -------- Footer -------- */
.site-footer {
  background: #1A2B3C;
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 32px;
  font-size: 0.9rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.7); }
.site-footer a:hover { color: var(--orange); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-grid h4 {
  color: #FFFFFF;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* -------- Sticky bottom CTA (mobile) -------- */
.sticky-cta {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: var(--orange);
  color: #FFFFFF;
  text-align: center;
  padding: 14px 20px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 32px rgba(255, 102, 0, 0.4);
  z-index: 95;
  text-decoration: none;
  display: none;
}
.sticky-cta:hover { background: var(--orange-dark); color: #FFFFFF; }
@media (max-width: 767px) {
  .sticky-cta { display: block; }
  body { padding-bottom: 72px; }
}

/* -------- Scroll-fade animation -------- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .scroll-indicator { animation: none; }
}

/* -------- Accessibility -------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
/* ── Footer social icons ─────────────────────────────────────────────
   Mirrors the bottom-bar icon row in the Next.js footer
   (ai-jewelry-platform/components/footer.tsx). The static pages have no
   Tailwind, so the equivalent styles live here. */
.footer-socials {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.footer-social {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.2s ease;
}
.footer-social:hover { color: rgba(255, 255, 255, 0.7); }
.footer-social svg { display: block; }


/* =========================================================================
   -------- Mobile nav (hamburger + drawer) --------
   Below 1024px `.site-nav` is display:none, and until 2026-07-31 there was no
   hamburger — all seven nav links were simply unreachable on a phone or
   tablet. The homepage (Next.js components/header.tsx) has always had a
   hamburger + drawer; this is the static-page equivalent.

   The drawer markup is built at runtime by the script injected by
   _scripts/inject-mobile-nav.py, which CLONES the links already in .site-nav
   and .header-ctas — so it cannot drift from the desktop nav.
   ========================================================================= */

.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;
    background: transparent;
    border: 0;
    border-radius: var(--radius-btn);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s;
  }
  .nav-toggle:hover { background: rgba(49, 88, 124, 0.08); }
  .nav-toggle:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }

  /* The CTAs move into the drawer, so the header is just logo + toggle and no
     longer needs the <640px column stacking that pushed it to 124px tall. */
  .header-ctas { display: none; }
  .site-header .container {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 639px) { :root { --site-header-h: 72px; } }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-bg);
  border-top: 1px solid var(--surface-border);
  box-shadow: 0 12px 32px rgba(26, 43, 60, 0.16);
  max-height: calc(100vh - var(--site-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 110;
}
.mobile-menu[hidden] { display: none; }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px 24px;
}
.mobile-menu-link {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background-color 0.15s, color 0.15s;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible { background: var(--page-bg-soft); color: var(--blue); }

.mobile-menu-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--inline-divider);
}
.mobile-menu-ctas .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 12px 20px;
}

/* Lock the page behind the open drawer. */
body.nv-menu-open { overflow: hidden; }