/* ============================================
   SignumEssentials v30 - Section Styles
   ============================================ */

/* ========================================
   COMPACT SECTION SIZING
   Applied to all .section containers after hero
   ======================================== */

.section {
  padding: 5rem 0;  /* 80px instead of 128px */
}

.section .section-header {
  margin-bottom: 2.5rem;  /* 40px instead of 64px */
}

.section .section-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);  /* 28-36px instead of 40-72px */
  margin-bottom: 0.75rem;
}

.section .section-subtitle {
  font-size: 1rem;  /* 16px instead of 18px+ */
}

.section .section-eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
}

/* Reduce grid gaps throughout sections */
.section .features-grid {
  gap: 1.5rem;  /* 24px instead of larger gaps */
}

/* Reduce card padding */
.section .feature-card {
  padding: 1.5rem;  /* 24px instead of 32px */
}

/* Journey path section sizing is built into the component */

/* Problem section (Two Worlds) */
.section.problem-section {
  padding: 5rem 0;
}

.section.problem-section .problem-grid {
  gap: 1.5rem;
}

.section.problem-section .problem-panel {
  padding: 1.5rem;
}

.section.problem-section .problem-panel-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.section.problem-section .problem-arrow {
  width: 56px;
  height: 56px;
}

.section.problem-section .problem-tagline {
  font-size: 1.25rem;
  margin-top: 2rem;
}

/* Features section */
.section.features-section {
  padding: 5rem 0;
}

.section.features-section .feature-title {
  font-size: 1.1rem;
}

.section.features-section .feature-description {
  font-size: 0.9rem;
}

/* Use cases section */
.section.usecases-section {
  padding: 5rem 0;
}

.section.usecases-section .usecase-title {
  font-size: 1.15rem;
}

.section.usecases-section .usecase-description {
  font-size: 0.875rem;
}

.section.usecases-section .usecase-card {
  padding: 1.75rem;
  padding-top: calc(1.75rem + 4px);
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-16);
}

.section-eyebrow {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  background: var(--gradient-soft);
  color: var(--accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.section-title-lg {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.2;
}

.section-subtitle {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--navbar-height) + var(--space-12)) 0 var(--space-12);
}

/* Background Effects */
.hero-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    var(--gradient-mesh-violet),
    var(--gradient-mesh-cyan),
    var(--gradient-mesh-indigo),
    var(--bg-pure);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 40%, transparent 100%);
}

/* Static fallback background */
.hero-static-bg {
  position: absolute;
  inset: 0;
  background:
    var(--gradient-mesh-violet),
    var(--gradient-mesh-cyan),
    var(--gradient-mesh-indigo),
    var(--bg-pure);
  z-index: 0;
}


/* Floating Orbs */
.hero-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(60px);
  opacity: 0.6;
  pointer-events: none;
  will-change: transform;
}

.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-orb:nth-child(1) {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--violet-400) 0%, transparent 70%);
  top: -10%;
  left: -5%;
  animation: floatGentle 8s ease-in-out infinite;
}

.hero-orb:nth-child(2) {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--cyan-400) 0%, transparent 70%);
  top: 20%;
  right: -10%;
  animation: floatGentle 10s ease-in-out infinite reverse;
}

.hero-orb:nth-child(3) {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--indigo-400) 0%, transparent 70%);
  bottom: 10%;
  left: 20%;
  animation: floatGentle 12s ease-in-out infinite;
}

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

/* Content */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  padding-top: 3rem; /* Breathing room from navigation */
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  padding-bottom: 0.1em; /* Prevent text clipping from split-text overflow:hidden */
}

.hero-subtitle {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-10);
  line-height: var(--leading-relaxed);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Centered single CTA */
.hero-cta-centered {
  justify-content: center;
}

/* Spacer below CTA to push dashboard lower */
.hero-spacer {
  height: 4rem;
}

/* ========================================
   PROBLEM SECTION
   ======================================== */

.problem,
.problem-section {
  padding: var(--space-32) 0;
  background: var(--bg-pure);
}

.problem-grid,
.problem-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
  align-items: center;
}

.problem-panel {
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  height: 100%;
}

/* Chaos Panel - Dark Terminal */
.problem-panel-chaos {
  background: var(--bg-space);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
}

.problem-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.problem-panel-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}

.problem-panel-chaos .problem-panel-icon {
  background: rgba(220, 38, 38, 0.2);
  color: var(--danger-light);
}

.problem-panel-clarity .problem-panel-icon {
  background: var(--gradient-soft);
  color: var(--accent-primary);
}

.problem-panel-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.problem-panel-chaos .problem-panel-label {
  color: var(--text-light-muted);
}

.problem-panel-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}

.problem-panel-chaos .problem-panel-title {
  color: var(--text-light);
}

.problem-panel-content {
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-6);
}

.problem-panel-chaos .problem-panel-content {
  color: var(--text-light-secondary);
}

/* Chaos Terminal */
.chaos-terminal {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.chaos-terminal-line {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chaos-terminal-line:last-child {
  border-bottom: none;
}

.chaos-terminal-line .danger {
  color: var(--danger-light);
}

.chaos-terminal-line .warning {
  color: var(--warning-light);
}

.chaos-terminal-line .count {
  font-weight: var(--weight-bold);
  color: var(--text-light);
}

/* Clarity Panel */
.problem-panel-clarity {
  background: var(--bg-pure);
}

/* Problem Chaos Side */
.problem-chaos {
  background: var(--bg-space);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  color: var(--text-light);
}

.chaos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.chaos-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-light-muted);
}

.chaos-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--danger);
}

.chaos-indicator.pulse-error {
  animation: pulse 1.5s ease-in-out infinite;
}

.chaos-terminal {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  margin-bottom: var(--space-4);
}

.terminal-line {
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-light-secondary);
}

.terminal-line:last-child {
  border-bottom: none;
}

.terminal-line.error {
  color: var(--danger-light);
}

/* Problem Clarity Side */
.problem-clarity {
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}

.clarity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.clarity-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
}

.clarity-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success);
}

.clarity-indicator.pulse-success {
  animation: pulse 1.5s ease-in-out infinite;
}

.clarity-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.clarity-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.clarity-item:hover {
  background: var(--gradient-soft);
}

.clarity-item.highlight {
  background: var(--gradient-soft);
  border: 1px solid var(--border-accent);
}

.clarity-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  color: white;
  border-radius: var(--radius-lg);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-lg);
}

.clarity-content {
  flex: 1;
}

.clarity-value {
  display: block;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.clarity-item .clarity-label {
  font-size: var(--text-small);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* Problem Shield */
.problem-shield {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.shield-svg {
  width: 100px;
  height: 120px;
}

.shield-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawShield 2s ease forwards;
}

@keyframes drawShield {
  to { stroke-dashoffset: 0; }
}

.shield-label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--accent-primary);
}

.clarity-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.clarity-question {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.clarity-question svg {
  flex-shrink: 0;
  color: var(--accent-primary);
}

/* Arrow Between Panels */
.problem-arrow {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  border-radius: var(--radius-full);
  color: white;
  box-shadow: var(--shadow-primary);
}

.problem-arrow svg {
  width: 32px;
  height: 32px;
}

/* Tagline */
.problem-tagline {
  text-align: center;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-top: var(--space-16);
}

.problem-tagline-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   SOLUTION SECTION - Assess. Prioritize. Prove.
   ======================================== */

.solution-section {
  padding: var(--space-16) 0 var(--space-32) 0;
  background: var(--bg-soft);
  overflow: hidden;
}

/* ========================================
   FEATURES SECTION
   ======================================== */

.features,
.features-section {
  padding: var(--space-32) 0;
  background: var(--bg-pure);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ========================================
   FAQ SECTION
   ======================================== */

.faq-section {
  background: var(--bg-soft);
}

.btn-full {
  width: 100%;
}

/* ========================================
   CTA SECTION (Dark)
   ======================================== */

.cta-section {
  position: relative;
  padding: var(--space-32) 0;
  background: var(--bg-space);
  overflow: hidden;
}

.cta-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.cta-title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--weight-bold);
  color: var(--text-light);
  margin-bottom: var(--space-6);
}

.cta-subtitle {
  font-size: var(--text-body-lg);
  color: var(--text-light-secondary);
  margin-bottom: var(--space-10);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--leading-relaxed);
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cta-supporting {
  margin-top: var(--space-6);
  font-size: var(--text-small);
  color: var(--text-light-muted);
  letter-spacing: 0.01em;
}

.cta-gradient-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(124, 58, 237, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(6, 182, 212, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(49, 46, 129, 0.2) 0%, transparent 50%);
}

.cta-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cta-shape {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  animation: floatRotate 20s ease-in-out infinite;
}

.shape-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  top: 60%;
  right: 15%;
  width: 80px;
  height: 80px;
  animation-delay: -5s;
}

.shape-3 {
  bottom: 20%;
  left: 30%;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  animation-delay: -10s;
}

@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  background: var(--bg-pure);
  border-top: 1px solid var(--border-light);
  padding: var(--space-16) 0 var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
}

.footer-logo-img {
  height: 36px;
  width: auto;
}

.footer-tagline {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-cloud);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.social-link:hover {
  background: var(--gradient-brand);
  color: white;
}

.footer-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-links a {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

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

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-light);
}

.copyright {
  font-size: var(--text-small);
  color: var(--text-muted);
}

.footer-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  color: var(--text-muted);
}

.footer-trust svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ========================================
   USE CASES SECTION
   ======================================== */

.usecases-section {
  padding: var(--space-32) 0;
  background: var(--bg-soft);
}

/* 3+2 pyramid grid layout */
.usecases-grid {
  display: grid;
  gap: var(--space-6);
}

.usecases-all {
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--space-12);
}

/* First 3 cards span 2 columns each (fills 6-col row) */
.usecases-all .usecase-card:nth-child(1),
.usecases-all .usecase-card:nth-child(2),
.usecases-all .usecase-card:nth-child(3) {
  grid-column: span 2;
}

/* Last 2 cards: offset by 1 col each to center them */
.usecases-all .usecase-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.usecases-all .usecase-card:nth-child(5) {
  grid-column: 4 / span 2;
}

/* Card base — lifecycle-inspired design */
.usecase-card {
  position: relative;
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  padding-top: calc(var(--space-8) + 4px);
  transition: all var(--transition-normal);
  overflow: hidden;
}

/* Gradient accent bar at top of each card */
.usecase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary) 0%, #06b6d4 100%);
}

.usecase-card:hover {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
  border-color: transparent;
}

/* Per-card color themes */
.usecase-theme-indigo::before {
  background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
}
.usecase-theme-indigo .usecase-icon {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.usecase-theme-cyan::before {
  background: linear-gradient(90deg, #06b6d4 0%, #22d3ee 100%);
}
.usecase-theme-cyan .usecase-icon {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
}

.usecase-theme-green::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}
.usecase-theme-green .usecase-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.usecase-theme-amber::before {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}
.usecase-theme-amber .usecase-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.usecase-theme-purple::before {
  background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
}
.usecase-theme-purple .usecase-icon {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

/* Horizontal icon + title row */
.usecase-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.usecase-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  color: var(--accent-primary);
}

.usecase-icon svg {
  width: 24px;
  height: 24px;
}

.usecase-title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.3;
}

.usecase-description {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.usecase-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
}

.usecase-list li {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  position: relative;
}

.usecase-list li::before {
  content: '✓';
  position: absolute;
  left: calc(-1 * var(--space-4));
  color: var(--success);
  font-weight: var(--weight-bold);
}

/* ========================================
   STATS SECTION
   ======================================== */

.stats-section {
  padding: var(--space-12) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.stats-title {
  text-align: center;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-8);
  max-width: 1100px;
  margin: 0 auto;
}

.stats-item {
  text-align: center;
}

.stats-value {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stats-label {
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* ========================================
   CHALLENGE CARDS
   ========================================== */

.challenge-section {
  padding: var(--space-20) 0;
  background: var(--bg-pure);
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.challenge-card {
  position: relative;
  background: var(--bg-soft);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  padding-left: calc(var(--space-6) + 4px);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.challenge-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.challenge-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.challenge-card-coral .challenge-card-accent { background: var(--danger); }
.challenge-card-amber .challenge-card-accent { background: var(--warning); }
.challenge-card-violet .challenge-card-accent { background: var(--accent-primary); }
.challenge-card-blue .challenge-card-accent { background: var(--info); }

.challenge-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.challenge-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}

.challenge-card-coral .challenge-card-icon {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

.challenge-card-amber .challenge-card-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.challenge-card-violet .challenge-card-icon {
  background: rgba(124, 58, 237, 0.1);
  color: var(--accent-primary);
}

.challenge-card-blue .challenge-card-icon {
  background: rgba(37, 99, 235, 0.1);
  color: var(--info);
}

.challenge-card-icon svg {
  width: 24px;
  height: 24px;
}

.challenge-card-title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.challenge-card-description {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.challenge-card-quote {
  font-size: var(--text-body-sm);
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid;
  background: var(--bg-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.challenge-card-coral .challenge-card-quote  { border-left-color: var(--danger); }
.challenge-card-amber .challenge-card-quote  { border-left-color: var(--warning); }
.challenge-card-violet .challenge-card-quote { border-left-color: var(--accent-primary); }
.challenge-card-blue .challenge-card-quote   { border-left-color: var(--info); }


/* ========================================
   CONVERSATION UI
   ======================================== */

.conversation-ui {
  max-width: 700px;
  margin: var(--space-12) auto;
}

.conversation-container {
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.conversation-message {
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Only animate when container is in view */
.conversation-container.is-animating .conversation-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.conversation-message:last-child {
  margin-bottom: 0;
}

/* Pre-message typing indicator */
.conversation-pre-typing {
  height: 0;
  overflow: visible;
  margin: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.conversation-pre-typing.is-visible {
  opacity: 1;
}

.conversation-pre-typing .typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: #e8e8ed;
  border-radius: var(--radius-xl);
}

.conversation-message-right .conversation-pre-typing .typing-dots,
.pre-typing-right .typing-dots {
  background: var(--bg-tertiary);
}

.pre-typing-right {
  text-align: right;
}

.typing-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dots .dot:nth-child(1) { animation-delay: 0s; }
.typing-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dots .dot:nth-child(3) { animation-delay: 0.4s; }

.conversation-message-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.conversation-message-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.conversation-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.conversation-content {
  display: flex;
  flex-direction: column;
}

.conversation-message-right .conversation-content {
  align-items: flex-end;
}

.conversation-participant-info {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-1);
}

.conversation-message-right .conversation-participant-info {
  align-items: flex-end;
}

.conversation-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  flex-shrink: 0;
}

.conversation-avatar-ceo {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.conversation-avatar-it {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
}

.conversation-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
}

.conversation-title {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.conversation-bubble {
  max-width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

.conversation-message-left .conversation-bubble {
  background: #e8e8ed;
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

.conversation-message-right .conversation-bubble {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom-right-radius: var(--radius-sm);
}

/* Typing indicator */
.conversation-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
}

.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Bridge transition */
.conversation-bridge-wrapper {
  text-align: center;
  margin: var(--space-16) 0 var(--space-8);
}

.conversation-bridge {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.bridge-emphasis {
  background: linear-gradient(135deg, var(--accent-primary) 0%, #06b6d4 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--weight-bold);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
}

.conversation-bridge-sub {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* ========================================
   HOW IT WORKS SECTION (After Scenario)
   ======================================== */

.how-it-works-section {
  padding: var(--space-12) 0 var(--space-16) 0;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-pure) 100%);
}

.how-it-works-header {
  text-align: center;
  margin-bottom: var(--space-12);
}


.how-it-works-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0;
}

/* Success-themed conversation container */
.conversation-container-success {
  border: 2px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.1);
}

/* Clarity Transition - Bridge from conversation to methodology */
.clarity-transition {
  text-align: center;
  margin-top: var(--space-12);
  padding-top: var(--space-4);
}

.clarity-statement {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0;
}

/* ========================================
   LIFECYCLE CARDS - Assess. Prioritize. Prove.
   ======================================== */

.lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.lifecycle-card {
  position: relative;
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  padding-top: calc(var(--space-8) + 4px);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  overflow: hidden;
}

/* Top accent bar */
.lifecycle-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary) 0%, #06b6d4 100%);
}

/* Card 1 - Purple/Indigo theme */
.lifecycle-card:nth-child(1) {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.03) 0%, var(--bg-pure) 100%);
}
.lifecycle-card:nth-child(1)::before {
  background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
}
.lifecycle-card:nth-child(1) .lifecycle-quote {
  color: #6366f1;
  border-left-color: #6366f1;
}

/* Card 2 - Cyan/Teal theme */
.lifecycle-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.03) 0%, var(--bg-pure) 100%);
}
.lifecycle-card:nth-child(2)::before {
  background: linear-gradient(90deg, #06b6d4 0%, #22d3ee 100%);
}
.lifecycle-card:nth-child(2) .lifecycle-quote {
  color: #06b6d4;
  border-left-color: #06b6d4;
}

/* Card 3 - Green/Emerald theme */
.lifecycle-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, var(--bg-pure) 100%);
}
.lifecycle-card:nth-child(3)::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}
.lifecycle-card:nth-child(3) .lifecycle-quote {
  color: #10b981;
  border-left-color: #10b981;
}

.lifecycle-card:hover {
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
  border-color: transparent;
}

.lifecycle-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: var(--weight-bold);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-4);
  opacity: 0.9;
}


.lifecycle-title {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.lifecycle-quote {
  font-size: var(--text-body-sm);
  font-style: italic;
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid;
}

.lifecycle-description {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.lifecycle-how {
  margin-top: auto;
  padding: var(--space-4);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.lifecycle-card:nth-child(1) .lifecycle-how {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.1);
}

.lifecycle-card:nth-child(2) .lifecycle-how {
  background: rgba(6, 182, 212, 0.04);
  border-color: rgba(6, 182, 212, 0.1);
}

.lifecycle-card:nth-child(3) .lifecycle-how {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.1);
}

.lifecycle-how-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.lifecycle-card:nth-child(1) .lifecycle-how-label { color: #6366f1; }
.lifecycle-card:nth-child(2) .lifecycle-how-label { color: #06b6d4; }
.lifecycle-card:nth-child(3) .lifecycle-how-label { color: #10b981; }

.lifecycle-how p {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .lifecycle-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .lifecycle-card {
    text-align: center;
  }

  .lifecycle-quote {
    border-left: none;
    padding-left: 0;
    border-top: 3px solid var(--accent-primary);
    padding-top: var(--space-3);
  }
}

/* ========================================
   JOURNEY PATH - Horizontal Road Design
   ======================================== */

.journey-horizontal {
  position: relative;
  margin-top: 2.5rem;
  padding: 0 1rem;
}

/* The visual road SVG */
.journey-road {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 120px;
  z-index: 0;
  pointer-events: none;
}

/* Steps container - horizontal layout */
.journey-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  padding-top: 1rem;
}

/* Start and End points */
.journey-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 70px;
}

.journey-point-marker {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.start-marker {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.end-marker {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.journey-point-marker svg {
  width: 20px;
  height: 20px;
}

.journey-point-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.journey-end .journey-point-label {
  color: var(--success);
}

/* Individual step - horizontal */
.journey-step-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 220px;
  padding: 0 0.5rem;
}

/* Step marker (number on the road) */
.journey-step-marker {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-pure);
  border: 3px solid var(--accent-primary);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.journey-step-h:nth-child(2) .journey-step-marker {
  border-color: #6366f1;
}

.journey-step-h:nth-child(3) .journey-step-marker {
  border-color: #06b6d4;
}

.journey-step-h:nth-child(4) .journey-step-marker {
  border-color: #10b981;
}

/* Step card */
.journey-step-card {
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  width: 100%;
}

.journey-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Step icon */
.journey-step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin: 0 auto 0.75rem;
  color: white;
}

.journey-step-icon svg {
  width: 24px;
  height: 24px;
}

/* Step title */
.journey-step-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

/* Step description */
.journey-step-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

/* Step stat */
.journey-step-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: var(--bg-soft);
  border-radius: 2rem;
}

.journey-step-stat .stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-primary);
}

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

/* Responsive - Tablet and smaller */
@media (max-width: 900px) {
  .journey-horizontal {
    margin-top: 2rem;
  }

  .journey-road {
    display: none;
  }

  .journey-steps {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 0;
  }

  .journey-point {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
  }

  .journey-point-marker {
    margin-bottom: 0;
  }

  .journey-point-label {
    text-align: left;
  }

  .journey-step-h {
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    gap: 1rem;
    padding: 0;
  }

  .journey-step-marker {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .journey-step-card {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
  }

  .journey-step-icon {
    margin: 0;
    flex-shrink: 0;
  }

  .journey-step-card > div:last-child {
    flex: 1;
  }

  .journey-step-title {
    margin-bottom: 0.25rem;
  }

  .journey-step-desc {
    margin-bottom: 0.5rem;
  }
}

/* ========================================
   PLATFORM TABS
   ======================================== */

.platform-section {
  padding: 2rem 0 var(--space-32);
  background: var(--bg-soft);
}

.platform-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.platform-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.platform-tab:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.platform-tab.active {
  background: var(--gradient-brand);
  color: white;
  border-color: transparent;
}

.platform-panels {
  max-width: 1200px;
  margin: 2rem auto 0;
}

.platform-panel {
  display: none;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
}

.platform-panel.active {
  display: grid;
  animation: fadeIn 0.3s ease;
}

.platform-panel-text {
  display: flex;
  flex-direction: column;
}

.platform-panel-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.platform-panel-description {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.platform-panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.platform-panel-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.platform-panel-list li svg {
  width: 20px;
  height: 20px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}

.platform-panel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Platform panel screenshots */
.platform-screenshot-placeholder {
  width: 100%;
  border-radius: var(--radius-xl);
  background: var(--bg-cloud);
  overflow: hidden;
}

.platform-screenshot-placeholder img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

/* ========================================
   TRUST INTERSTITIAL
   ======================================== */

.trust-interstitial {
  padding: var(--space-20) 0;
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.07) 0%, rgba(6, 182, 212, 0.07) 100%);
}

.trust-interstitial p {
  max-width: 55%;
  margin: 0 auto;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.trust-quote {
  margin: var(--space-6) auto 0;
  padding: 0;
  border: none;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: var(--weight-bold);
  font-style: italic;
  line-height: var(--leading-relaxed);
}

.trust-attribution {
  margin-left: var(--space-4);
  font-size: var(--text-body-sm);
  font-style: normal;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ========================================
   SOLUTIONS SECTION (two products)
   ======================================== */

.solutions-section {
  padding: 5rem 0;
  background: var(--bg-pure);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}

/* Card base — equal weight, no favoritism */
.solution-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition: all var(--transition-normal);
}

.solution-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.solution-header {
  margin-bottom: var(--space-4);
}

.solution-name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.solution-audience {
  font-size: var(--text-body-sm);
  color: var(--accent-primary);
  font-weight: var(--weight-medium);
}

.solution-description {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.solution-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  flex-grow: 1;
}

.solution-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.solution-feature svg {
  width: 20px;
  height: 20px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}

/* CTA pinned to bottom of card */
.solution-cta {
  margin-top: auto;
  display: flex;
  gap: var(--space-3);
}

/* "Not sure" help line */
.solutions-help {
  text-align: center;
  margin-top: var(--space-10);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.solutions-help-link {
  color: var(--accent-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.solutions-help-link:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}

/* Consulting comparison statement */
.solutions-compare {
  max-width: 800px;
  margin: var(--space-10) auto 0;
  padding: var(--space-6) var(--space-8);
  text-align: center;
  border-top: 1px solid var(--border-light);
}

.solutions-compare p {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.solutions-compare strong {
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}


/* FAQ Accordion Wrapper - narrow centered layout */
.faq-accordion-wrap {
  max-width: 65%;
  margin: 0 auto;
}

.faq-closing {
  text-align: center;
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.faq-closing-link {
  color: var(--accent-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.faq-closing-link:hover {
  color: var(--accent-primary-dark);
  text-decoration: underline;
}

/* ========================================
   CONTACT / REQUEST A DEMO PAGE
   ======================================== */

.contact-section {
  padding: calc(var(--navbar-height) + var(--space-16)) 0 var(--space-24);
  min-height: 100vh;
  background: var(--bg-soft);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Left column */
.contact-left {
  padding-top: var(--space-8);
}

.contact-heading {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.contact-description {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-10);
}

.contact-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.contact-features svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-primary);
  margin-top: 2px;
}

.contact-supporting {
  font-size: var(--text-body-sm);
  color: var(--text-tertiary);
  font-style: italic;
}

/* Right column — form card */
.contact-form-card {
  background: var(--bg-pure);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-10);
  box-shadow: var(--shadow-card);
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.required {
  color: var(--danger);
}

.optional {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

/* Consent checkbox */
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.form-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.consent-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  cursor: pointer;
}

/* Submit button */
.contact-submit {
  width: 100%;
  margin-bottom: var(--space-5);
}

/* Disclaimer */
.contact-disclaimer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.contact-disclaimer a {
  color: var(--accent-primary);
  text-decoration: underline;
}

.contact-disclaimer a:hover {
  color: var(--accent-primary-dark);
}

/* ========================================
   LAW / SAFE HARBOR PAGES
   ======================================== */

/* --- Law Hero --- */
.law-hero-section {
  padding: calc(var(--navbar-height) + var(--space-20)) 0 var(--space-12);
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-pure) 100%);
  text-align: center;
}

.law-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.law-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

.law-hero-subtitle {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 650px;
  margin: 0 auto var(--space-6);
}

.law-hero-meta {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.law-hero-meta span {
  margin: 0 var(--space-2);
}

.law-hero-meta a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.law-hero-meta a:hover {
  color: var(--accent-primary-dark);
}

/* --- Law Section Text --- */
.law-text {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.law-text strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.section-header .law-text {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Law Defenses (3-col cards) --- */
.law-defenses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.law-defense-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  transition: all var(--transition-normal);
}

.law-defense-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.law-defense-card h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.law-defense-card p {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.law-defense-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-soft);
  border-radius: var(--radius-lg);
  color: var(--accent-primary);
  margin-bottom: var(--space-3);
}

.law-defense-icon svg {
  width: 20px;
  height: 20px;
}

/* --- Law Requirements (numbered list) --- */
.law-requirements-section {
  background: var(--bg-soft);
}

.law-req-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  position: relative;
  padding-left: var(--space-2);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.law-req {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  position: relative;
}

.law-req:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: calc(-1 * var(--space-4));
  width: 2px;
  background: var(--border-light);
}

.law-req-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--gradient-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  color: white;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

.law-req h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.law-req p {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* --- Law Framework Badges --- */
.law-frameworks-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.law-framework-badge {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.law-framework-badge:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--gradient-soft);
}

/* --- Law Callouts --- */
.law-callout {
  position: relative;
  border-left: 3px solid;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6);
  margin-top: var(--space-6);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.law-callout h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.law-callout p {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.law-callout p strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.law-callout-safe {
  border-left-color: var(--success);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.06), rgba(5, 150, 105, 0.02));
}

.law-callout-safe h3 {
  color: var(--success-light);
}

.law-callout-warn {
  border-left-color: var(--warning);
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.06), rgba(217, 119, 6, 0.02));
  margin-top: var(--space-3);
}

.law-callout-warn strong {
  color: var(--warning-light);
}

/* --- Law Mapping Grid --- */
.law-map {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.law-map-header {
  display: grid;
  grid-template-columns: 3fr 40px 5fr;
  padding: 0 var(--space-4);
  margin-bottom: var(--space-1);
}

.law-map-header span {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.law-map-header span:first-child {
  color: var(--text-primary);
}

.law-map-header span:last-child {
  color: var(--accent-primary);
}

.law-map-row {
  display: grid;
  grid-template-columns: 3fr 40px 5fr;
  align-items: stretch;
  min-height: 4.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.law-map-row:hover {
  border-color: var(--accent-primary-lighter);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.law-map-left {
  padding: var(--space-3) var(--space-4);
  background: var(--gradient-soft);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.law-map-left h4 {
  flex: 1;
}

.law-map-right {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
}

.law-map-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-1);
}

.law-map-left .law-map-label {
  color: var(--text-muted);
}

.law-map-right .law-map-label {
  color: var(--accent-primary);
}

.law-map-left h4,
.law-map-right h4 {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.law-map-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.law-map-arrow svg {
  width: 20px;
  height: 20px;
  fill: var(--accent-primary);
}

.law-map-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-soft);
  border-radius: var(--radius-md);
  color: var(--accent-primary);
  margin-bottom: 0;
  flex-shrink: 0;
  order: -1;
}

.law-map-icon svg {
  width: 16px;
  height: 16px;
}

/* --- Law State Timeline --- */
.law-timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: var(--space-8);
  padding: 0 var(--space-4);
}

.law-timeline-line {
  position: absolute;
  top: 8px;
  left: var(--space-4);
  right: var(--space-4);
  height: 2px;
  background: var(--border-light);
}

.law-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 1;
}

.law-timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-pure);
  border: 2px solid var(--border-light);
  transition: all var(--transition-normal);
}

.law-timeline-item.active .law-timeline-dot {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.law-timeline-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.law-timeline-state {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.law-timeline-item.active .law-timeline-state {
  color: var(--accent-primary);
}

.law-timeline-year {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Law Disclaimer --- */
.law-disclaimer {
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--border-light);
}

.law-disclaimer p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--leading-relaxed);
}


/* ─────────────────────────────────────────────────
   Privacy Policy — Two-column Stripe-style layout
   ───────────────────────────────────────────────── */

.policy-header {
  padding: calc(var(--navbar-height) + var(--space-20)) 0 var(--space-8);
  border-bottom: 1px solid var(--border-light);
}

.policy-header h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.policy-header .policy-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 600px;
}

.policy-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

.policy-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-12);
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
}

.policy-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.policy-toc {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--border-light);
  padding-left: var(--space-4);
}

.policy-toc-link {
  display: block;
  padding: 6px 0;
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition: color var(--transition-fast);
}

.policy-toc-link:hover {
  color: var(--text-primary);
}

.policy-toc-link.active {
  color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}

.policy-content {
  max-width: 760px;
  min-width: 0;
}

.policy-body h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  padding-top: var(--space-8);
  scroll-margin-top: 100px;
}

.policy-body h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.policy-body h4 {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.policy-body p {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.policy-body {
  overflow-wrap: break-word;
}

.policy-body a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
  overflow-wrap: break-word;
  word-break: break-all;
}

.policy-body a:hover {
  color: var(--accent-secondary);
}

.policy-body ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-4);
}

.policy-body ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.policy-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.policy-body .policy-emphasis {
  font-style: italic;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.policy-body ol {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}

.policy-body ol li {
  margin-bottom: var(--space-2);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  padding-left: var(--space-2);
}

.policy-body ol li::marker {
  color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}

/* Responsive: collapse sidebar on tablet and below */
@media (max-width: 1023px) {
  .policy-header {
    padding: calc(var(--navbar-height) + var(--space-10)) 0 var(--space-6);
  }

  .policy-header h1 {
    font-size: var(--text-3xl);
  }

  .policy-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: var(--space-6);
  }

  .policy-sidebar {
    position: static;
    max-height: none;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-6);
  }

  .policy-toc {
    border-left: none;
    padding-left: 0;
    flex-direction: column;
    gap: 0;
  }

  .policy-toc-link {
    padding: 4px 0;
  }
}

@media (max-width: 639px) {
  .policy-header {
    padding: calc(var(--navbar-height) + var(--space-8)) 0 var(--space-4);
  }

  .policy-header h1 {
    font-size: var(--text-2xl);
  }

  .policy-toc {
    flex-direction: column;
    gap: 0;
  }

  .policy-body h2 {
    font-size: var(--text-xl);
    padding-top: var(--space-6);
    scroll-margin-top: 80px;
  }

  .policy-body ol {
    padding-left: var(--space-4);
  }

  .policy-body ol li {
    padding-left: var(--space-1);
  }
}


/* ========================================
   PRODUCT PAGE (v2 — Product Tour)
   ======================================== */

/* --- Product Hero (Screenshot-Forward) --- */
.product-hero {
  padding: calc(var(--navbar-height) + var(--space-16)) 0 var(--space-12);
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-pure) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.product-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(124, 58, 237, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(6, 182, 212, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 50% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.product-hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
}

.product-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.product-hero-subtitle {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 700px;
  margin: 0 auto var(--space-6);
}

.product-hero-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.product-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-pure);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}

.product-hero-chip svg {
  width: 16px;
  height: 16px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

/* Browser frame mockup */
.product-hero-browser {
  max-width: 1000px;
  margin: 0 auto var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  background: var(--bg-pure);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

/* Chrome-style toolbar */
.product-hero-toolbar {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-light);
}

.product-hero-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.product-hero-nav-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; display: flex; align-items: center;
  justify-content: center; color: var(--text-muted); cursor: default;
}
.product-hero-nav-btn svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.product-hero-url { flex: 1; display: flex; align-items: center; justify-content: center; }

.product-hero-url-bar {
  background: #f1f3f4; border-radius: 20px; padding: 7px 16px;
  font-size: 13px; display: flex; align-items: center; gap: 7px;
  width: 100%; max-width: 480px;
}
.product-hero-lock svg {
  width: 13px; height: 13px; stroke: #57534e; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block;
}
.product-hero-url-text { color: var(--text-secondary); font-size: 13px; }

.product-hero-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.product-hero-action-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; display: flex; align-items: center;
  justify-content: center; color: var(--text-muted); cursor: default;
}
.product-hero-action-btn svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.product-hero-profile {
  width: 24px; height: 24px; border-radius: 50%; background: #e0e0de;
  display: flex; align-items: center; justify-content: center;
  margin-left: 2px; flex-shrink: 0;
}
.product-hero-profile svg {
  width: 14px; height: 14px; stroke: #8a8a88; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.product-hero-screenshot {
  display: block;
  width: 100%;
  height: auto;
}

.product-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.product-hero-meta {
  font-size: var(--text-small);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* --- Platform Lifecycle (6-Stage Stepper) --- */
.product-lifecycle {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: var(--space-10) auto 0;
}

.product-lifecycle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.product-lifecycle-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-600), var(--indigo-600));
  color: white;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
  margin-bottom: var(--space-3);
}

.product-lifecycle-label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.product-lifecycle-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 150px;
}

.product-lifecycle-connector {
  flex-shrink: 0;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--violet-300), var(--indigo-300));
  border-radius: 1px;
  margin-top: 19px; /* center with the 40px circle */
}

.product-lifecycle-note {
  max-width: 700px;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* Execution section — top-align text beside tall screenshot */
#execution .product-feature { align-items: start; }

/* --- Full-width Screenshot Display (Reports section) --- */
.product-screenshot-full {
  max-width: 1000px;
  margin: var(--space-10) auto 0;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

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

/* --- Feature Deep-Dive (Alternating 2-col) --- */
.product-feature {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.product-feature-reverse {
  direction: rtl;
}

.product-feature-reverse > * {
  direction: ltr;
}

.product-feature-visual {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.product-feature-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.product-feature-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
  margin-bottom: var(--space-3);
}

.product-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.product-feature-description {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.product-feature-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.product-feature-list li svg {
  width: 20px;
  height: 20px;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}

.product-reports-note {
  max-width: 700px;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* --- Your First 30 Days (Timeline) --- */
.product-timeline {
  max-width: 700px;
  margin: var(--space-10) auto 0;
  position: relative;
  padding-left: var(--space-10);
}

.product-timeline-line {
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--violet-400), var(--cyan-400));
  border-radius: 1px;
}

.product-timeline-item {
  position: relative;
  padding-bottom: var(--space-10);
}

.product-timeline-item:last-child {
  padding-bottom: 0;
}

.product-timeline-dot {
  position: absolute;
  left: calc(-1 * var(--space-10) + 8px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-pure);
  border: 3px solid var(--violet-500);
  z-index: 2;
}

.product-timeline-item:last-child .product-timeline-dot {
  border-color: var(--cyan-500);
}

.product-timeline-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  margin-bottom: var(--space-2);
}

.product-timeline-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.product-timeline-description {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* --- Product Comparison Table --- */
.product-comparison-section {
  background: var(--bg-soft);
}

.product-comparison-table {
  max-width: 1000px;
  margin: var(--space-12) auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-light);
  background: var(--bg-pure);
  box-shadow: var(--shadow-card);
}

.product-comparison-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  min-width: 700px;
}

.product-comparison-header {
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  text-align: center;
  border-bottom: 2px solid var(--border-light);
  color: var(--text-primary);
}

.product-comparison-header:first-child {
  text-align: left;
}

.product-comparison-header-highlight {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: white;
  border-bottom-color: transparent;
}

.product-comparison-header-highlight:first-of-type {
  border-radius: var(--radius-lg) 0 0 0;
}

.product-comparison-label {
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
}

.product-comparison-cell {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-comparison-cell-highlight {
  background: rgba(124, 58, 237, 0.03);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.product-comparison-grid > :last-child,
.product-comparison-grid > :nth-last-child(-n+4) {
  border-bottom: none;
}

.product-comparison-footnote {
  max-width: 800px;
  margin: var(--space-10) auto 0;
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.product-comparison-footnote strong {
  color: var(--text-primary);
}