@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*
  SyncoPro Marketing — Shared Design System
  Source of truth: index.html (homepage)
  ==========================================
  1. Tokens
  2. Reset + Base
  3. Layout
  4. Header + Nav
  5. Buttons
  6. Hero
  7. Section shared
  8. Cards + components
  9. Final CTA band
  10. Footer
  11. Animations
  12. Responsive
*/

/* ── 1. Tokens ── */
:root {
  /* Brand */
  --brand:          #6161FF;
  --brand-dark:     #4848DD;
  --brand-light:    rgba(97, 97, 255, 0.08);

  /* Text */
  --text-primary:   #1A1A1A;
  --text-secondary: #555570;
  --text-muted:     #8F9BB3;

  /* Backgrounds */
  --bg-page:        #F8F9FC;
  --bg-white:       #FFFFFF;

  /* Borders */
  --border:         #E4E7EE;
  --border-light:   #F0F2F7;

  /* Status colors */
  --green:          #10B981;
  --green-bg:       #ECFDF5;
  --green-text:     #065F46;
  --green-dark:     #047857;
  --orange:         #F59E0B;
  --orange-bg:      #FFFBEB;
  --orange-text:    #92400E;
  --red-bg:         #FFF7ED;
  --red-text:       #9A3412;
  --brand-tint:     #F0F4FF;
  --amber:          #FF9500;
  --amber-bg:       #FFF4E6;

  /* Typography scale */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   40px;
  --text-5xl:   52px;
  --text-hero:  60px;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Border radius */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-brand: 0 8px 24px rgba(97,97,255,0.25);
}

/* ── 2. Reset + Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}
a { color: inherit; text-decoration: none; }

/* ── 3. Layout ── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 4. Header + Nav ── */
header {
  padding: 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  height: 40px;
  text-decoration: none;
  flex-shrink: 0;
  z-index: 1001;
  position: relative;
}
.logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
}
/* also support div-based nav-links (secondary pages use divs) */
.nav-links .nav-item { position: relative; list-style: none; }
.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}
.nav-links a:hover,
.nav-links a.active { color: var(--brand); }
.nav-cta {
  background: var(--brand);
  color: #fff !important;
  padding: 9px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  justify-content: center !important;
}
.nav-cta:hover {
  background: var(--brand-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(97,97,255,0.28);
  color: #fff !important;
}

/* Dropdown */
.dropdown-arrow {
  font-size: 10px;
  transition: transform 0.25s ease;
}
.dropdown-toggle.active .dropdown-arrow { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-white);
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: 12px 0;
  margin-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.25s ease;
  z-index: 1001;
  list-style: none;
}
.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 12px 24px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  font-weight: 400;
}
.dropdown-menu a:hover,
.dropdown-menu a.active {
  background: var(--bg-page);
  color: var(--brand);
  border-left-color: var(--brand);
  padding-left: 28px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: 1002;
  position: relative;
}
.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transition: all 0.25s ease;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.25s;
}
.mobile-overlay.active { opacity: 1; }

/* Support nav button variant */
.nav-cta-ghost {
  background: var(--bg-white);
  color: var(--brand) !important;
  border: 1px solid var(--brand);
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s, box-shadow 0.2s;
  margin-left: calc(8px - 32px); /* 8px gap between the two CTA buttons, overriding the 32px nav gap */
}
.nav-cta-ghost:hover {
  background: rgba(97,97,255,0.06);
  box-shadow: 0 2px 8px rgba(97,97,255,0.15);
}

/* ── 5. Buttons ── */
.btn-primary {
  background: var(--brand);
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(97,97,255,0.3);
  color: #fff;
}
.btn-secondary {
  background: var(--bg-white);
  color: var(--brand);
  padding: 14px 36px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--brand);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.btn-secondary:hover {
  background: rgba(97,97,255,0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(97,97,255,0.2);
}
.btn-ghost {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--brand); }
/* White variant for use on brand backgrounds */
.btn-primary--white {
  background: #fff;
  color: var(--brand);
  padding: 15px 40px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.btn-primary--white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* ── 6. Hero ── */
.hero {
  padding: 148px 0 100px;
  text-align: center;
  background: var(--bg-white);
  margin-top: 64px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  color: var(--brand);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--sp-8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2px;
  margin-bottom: var(--sp-6);
  color: var(--text-primary);
}
.hero h1 strong,
.hero h1 .highlight {
  font-weight: 700;
  color: var(--brand);
}
.hero-sub,
.hero p.hero-sub {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto var(--sp-10);
  line-height: 1.65;
  font-weight: 400;
}
.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── 7. Section shared ── */
.section {
  padding: var(--sp-24) 0;
}
.section--alt  { background: var(--bg-page); }
.section--white { background: var(--bg-white); }
.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-3);
  text-align: center;
}
/* Single canonical heading — .section-title is an alias */
.section-heading,
.section-title {
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
  text-align: center;
}

/* Centered section block — for symmetric/grid-header sections */
.section-center {
  text-align: center;
  margin-bottom: 60px;
}
.section-center .section-heading,
.section-center .section-sub,
.section-center p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-center p {
  max-width: 700px;
}

.section-sub,
.section-subtitle,
.section-description {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-subtitle,
.section-description {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* Split-layout sections: header stays left-aligned with its text column */
.section-left .section-label,
.section-left .section-heading,
.section-left .section-sub,
.section-left h2 {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ── 8. Cards + components ── */

/* Generic card */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(97,97,255,0.1);
  transform: translateY(-3px);
}

/* Chip / tag */
.tag {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: var(--sp-3);
}

/* 3-col problem cards */
.problem-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.problem-item {
  padding: var(--sp-8);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
}
.problem-item.active { border-top-color: var(--brand); }
.problem-item-icon { font-size: 28px; margin-bottom: var(--sp-4); }
.problem-item h3 { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); }
.problem-item p { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; }

/* Steps / how-it-works row */
.steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  margin-top: var(--sp-12);
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.666% + 24px);
  right: calc(16.666% + 24px);
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.step { text-align: center; padding: 0 var(--sp-8); position: relative; z-index: 1; }
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: var(--text-xl);
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-5);
}
.step h3 { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); }
.step p  { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; }

/* Output cards 3-col */
.outputs-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.output-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.output-card:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(97,97,255,0.1);
  transform: translateY(-3px);
}
.output-tag {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: var(--sp-4);
}
.output-card h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.output-card p  { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; }

/* Screenshot mock */
.screenshot-wrap { max-width: 820px; margin: var(--sp-12) auto 0; }
.screenshot-chrome {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(0,0,0,0.07);
}
.screenshot-bar {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chrome-dot { width: 10px; height: 10px; border-radius: 50%; }
.screenshot-bar img,
.screenshot-chrome img { width: 100%; display: block; }

/* Diff grid (why different) */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.diff-card {
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  border: 1px solid var(--border);
}
.diff-card--them { background: var(--bg-page); }
.diff-card--us   { background: var(--bg-white); border-color: var(--brand); }
.diff-card-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
  color: var(--text-muted);
}
.diff-card--us .diff-card-label { color: var(--brand); }
.diff-card h3 { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-4); }
.diff-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.diff-list li {
  font-size: var(--text-base); color: var(--text-secondary); line-height: 1.55;
  padding-left: 22px; position: relative;
}
.diff-list li::before { content: '–'; position: absolute; left: 0; color: var(--text-muted); }
.diff-card--us .diff-list li::before { content: '✓'; color: var(--brand); font-weight: 700; }

/* Validation cards */
.validation-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.validation-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  border-left: 4px solid var(--brand);
}
.validation-num {
  font-family: 'Poppins', sans-serif;
  font-size: 44px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.validation-card p   { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; margin-bottom: var(--sp-4); }
.validation-source   { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* Feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.feature-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(97,97,255,0.1);
  transform: translateY(-3px);
}
.feature-icon { font-size: 28px; margin-bottom: var(--sp-4); }
.feature-card h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.feature-card p  { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; }

/* Roadmap */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.roadmap-item {
  padding: var(--sp-6);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
}
.roadmap-item:first-child { background: rgba(97,97,255,0.03); }
.roadmap-quarter { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brand); margin-bottom: var(--sp-3); }
.roadmap-item h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }
.roadmap-item p  { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* Team card */
.team-card {
  max-width: 360px;
  margin: var(--sp-12) auto 0;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  text-align: center;
}
.team-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--sp-4);
  border: 3px solid var(--border-light);
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.team-card h3   { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-1); }
.team-role      { font-size: var(--text-sm); font-weight: 600; color: var(--brand); margin-bottom: var(--sp-3); }
.team-bio       { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6; }

/* Hero proof stats */
.hero-proof {
  margin-top: var(--sp-12);
  display: flex;
  justify-content: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.hero-proof-item { text-align: center; }
.hero-proof-num  {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.hero-proof-label   { font-size: var(--text-sm); color: var(--text-muted); }
.hero-proof-divider { width: 1px; background: var(--border); align-self: stretch; }

/* FAQ accordion */
.faq-item {
  background: var(--bg-page);
  padding: var(--sp-5) var(--sp-8);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
  border: 2px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
}
.faq-item:hover {
  border-color: var(--brand);
  background: var(--bg-white);
  box-shadow: 0 4px 12px rgba(97,97,255,0.1);
}
.faq-question {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.faq-question::after {
  content: "+";
  font-size: 22px;
  color: var(--brand);
  transition: transform 0.25s ease;
  font-weight: 300;
  flex-shrink: 0;
}
.faq-item.active .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.7;
}
.faq-item.active .faq-answer { max-height: 600px; padding-top: var(--sp-3); }

/* Form elements */
.form-label,
.form-group label {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.form-input,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(97,97,255,0.1);
}
.form-group { margin-bottom: var(--sp-6); }
.form-group textarea { resize: vertical; min-height: 140px; }
.form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.submit-btn {
  background: var(--brand);
  color: #fff;
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  width: 100%;
  font-family: inherit;
}
.submit-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(97,97,255,0.3);
}

/* ── 9. Final CTA band ── */
.final-cta {
  padding: 100px 0;
  text-align: center;
  background: linear-gradient(140deg, #5555EE 0%, #7A7AFF 100%);
  color: #fff;
}
.final-cta h2 {
  font-size: var(--text-4xl);
  font-weight: 400;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: #fff;
}
.final-cta p {
  font-size: var(--text-md);
  margin-bottom: var(--sp-10);
  opacity: 0.9;
  line-height: 1.65;
}
.final-cta-note { margin-top: var(--sp-4); font-size: var(--text-sm); opacity: 0.7; }

/* ── 10. Footer ── */
footer {
  background: #2D2D3A;
  color: rgba(255,255,255,0.6);
  padding: 32px 0;
  text-align: center;
  font-size: 13px;
}
footer a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
footer a:hover { color: #fff; }

/* ── 11. Scroll animations ── */
.animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 13. Page Hero (secondary pages) ── */
.page-hero {
  padding: 148px 0 80px;
  text-align: center;
  background: var(--bg-white);
  margin-top: 64px;
  position: relative;
  overflow: hidden;
}
.page-hero:before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(97, 97, 255, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  top: -250px;
  right: -150px;
}
.page-hero .hero-badge { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: var(--text-hero);
  font-weight: 400;
  margin-bottom: var(--sp-6);
  position: relative;
  z-index: 1;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--text-primary);
}
.page-hero .hero-subtitle {
  font-size: var(--text-hero);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--sp-6);
  letter-spacing: -2px;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.page-hero p {
  font-size: var(--text-xl);
  max-width: 800px;
  margin: 0 auto 32px;
  position: relative;
  z-index: 1;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── 14. All Features page ── */
.features-section {
  background: var(--bg-page);
  padding: 100px 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.feature-item {
  background: var(--bg-white);
  padding: var(--sp-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}
.feature-item.dashed {
  background: transparent;
  border: 2px dashed var(--border);
}
.feature-item.dashed:hover {
  background: var(--bg-white);
  border-color: var(--brand);
  border-style: solid;
}
.feature-item.vision-item {
  background: linear-gradient(135deg, rgba(97, 97, 255, 0.03) 0%, transparent 100%);
  border: 1px solid rgba(97, 97, 255, 0.15);
}
.feature-item.vision-item:hover {
  border-color: var(--brand);
  background: var(--bg-white);
}
.feature-icon-wrap {
  font-size: 40px;
  margin-bottom: var(--sp-5);
  display: inline-block;
}
.feature-item h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  color: var(--text-primary);
}
.feature-item p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
}
.feature-item .feature-eta {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  padding: 3px 10px;
  border-radius: 12px;
}
.tier-header { margin-bottom: var(--sp-12); }
.tier-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-20) 0;
}

/* ── 15. How It Works page ── */
.workflow-section {
  background: var(--bg-page);
  padding: 100px 0;
}
.workflow-timeline {
  position: relative;
  margin-top: var(--sp-12);
}
.timeline-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
  position: relative;
}
.timeline-step:not(:last-child):before {
  content: "";
  position: absolute;
  left: 40px;
  top: 80px;
  width: 2px;
  height: calc(100% + 20px);
  background: linear-gradient(180deg, var(--brand) 0%, var(--border) 100%);
}
.timeline-number {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--brand) 0%, #8787FF 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: white;
  font-family: 'Poppins', sans-serif;
  box-shadow: var(--shadow-brand);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.timeline-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--border);
  transition: all 0.3s ease;
}
.timeline-content:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(97, 97, 255, 0.15);
  transform: translateX(8px);
}
.step-phase {
  font-size: var(--text-xs);
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}
.step-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.step-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
}
.step-meta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--border-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* ── 16. Scoring & Readiness page ── */
.dimension-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.dimension-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-10);
  transition: all 0.3s ease;
  border-left: 4px solid var(--brand);
}
.dimension-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(97, 97, 255, 0.1);
  border-color: var(--brand);
}
.dimension-card h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.dimension-card p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}
.dimension-card .weak-example {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  padding: 10px 14px;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}
.dimension-card .strong-example {
  font-size: var(--text-sm);
  color: var(--green-dark);
  font-style: italic;
  padding: 10px 14px;
  background: var(--green-bg);
  border-radius: var(--radius-sm);
}
.readiness-levels {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.readiness-level {
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  text-align: center;
}
.readiness-level h3 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--sp-3); }
.readiness-level p  { font-size: var(--text-base); line-height: 1.65; }
.readiness-level.refine { background: var(--red-bg); color: var(--red-text); }
.readiness-level.refine h3 { color: var(--red-text); }
.readiness-level.almost { background: var(--orange-bg); color: var(--orange-text); }
.readiness-level.almost h3 { color: var(--orange-text); }
.readiness-level.ready  { background: var(--green-bg); color: var(--green-text); }
.readiness-level.ready h3 { color: var(--green-text); }

/* ── 17. Collaboration & Integration pages ── */
.coming-badge {
  display: inline-block;
  background: rgba(97, 97, 255, 0.08);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* ── 18. Pricing page ── */
.billing-toggle {
  text-align: center;
  margin-bottom: 60px;
  animation: fadeIn 1s ease 0.4s backwards;
}
.billing-toggle h3 {
  font-size: 18px;
  margin-bottom: 24px;
  color: var(--text-primary);
}
.billing-options {
  display: inline-flex;
  gap: 0;
  background: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
  max-width: 100%;
  overflow: hidden;
}
.billing-option {
  padding: 12px 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  transition: all 0.3s ease;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  outline: none;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.billing-option-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.billing-option-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  display: none; /* hidden on desktop — shown on mobile */
}
.billing-option.active {
  background: var(--brand);
  color: white;
  box-shadow: 0 4px 12px rgba(97, 97, 255, 0.3);
  animation: billingPulse 0.4s ease;
}
@keyframes billingPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.billing-option:not(.active):hover {
  color: var(--brand);
  background: rgba(97, 97, 255, 0.05);
}
.billing-badge {
  background: var(--green);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.billing-benefits {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--sp-3);
}
.comparison-team-note {
  display: none; /* shown only on mobile via media query */
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 16px;
}
.comparison-team-note a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pricing-section {
  padding: 80px 0;
  background: var(--bg-page);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pricing-card {
  background: white;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: scaleIn 0.6s ease forwards;
}
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
.pricing-card:nth-child(3) { animation-delay: 0.3s; }
.pricing-card:nth-child(4) { animation-delay: 0.4s; }
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.pricing-card.featured {
  border: 3px solid var(--brand);
  transform: scale(1.02);
}
.pricing-card.featured:hover { transform: scale(1.02) translateY(-8px); }
.pricing-card.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}
.pricing-card.disabled .plan-cta { opacity: 0.5; cursor: not-allowed; }
.plan-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  min-height: 18px; /* reserve space on all cards so plan-name aligns */
}
.plan-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  text-align: center;
  background: rgba(97, 97, 255, 0.08);
  border-radius: 20px;
  padding: 4px 12px;
  display: inline-block;
  width: fit-content;
  align-self: center;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.plan-hint--empty {
  visibility: hidden;
}
.plan-name {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.plan-description {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--sp-6);
  min-height: 42px;
}
.price { margin-bottom: 28px; }
.price-amount {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
}
.price-period { font-size: var(--text-base); color: var(--text-secondary); }
.price-savings {
  display: none;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--green);
  color: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.price-savings.show {
  display: block;
  animation: slideInDown 0.4s ease;
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.price-original {
  display: none;
  font-size: var(--text-md);
  color: var(--text-muted);
  text-decoration: line-through;
  margin-top: 4px;
}
.price-original.show { display: block; }
.features-list {
  list-style: none;
  margin-bottom: 28px;
  flex-grow: 1;
}
.features-list li {
  padding: 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
}
.features-list li::before {
  content: "✓";
  color: var(--brand);
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}
.plan-cta {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin-top: auto;
  display: block;
  text-align: center;
}
.plan-cta.primary { background: var(--brand); color: white; }
.plan-cta.primary:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(97, 97, 255, 0.3);
}
.plan-cta.secondary {
  background: white;
  color: var(--brand);
  border: 2px solid var(--brand);
}
.plan-cta.secondary:hover { background: var(--brand); color: white; }
.comparison-section {
  padding: 100px 0;
  background: white;
}
.comparison-section h2 {
  font-size: var(--text-4xl);
  font-weight: 400;
  margin-bottom: var(--sp-4);
  color: var(--text-primary);
  letter-spacing: -0.5px;
  text-align: center;
}
.comparison-table {
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; }
thead {
  background: var(--bg-page);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
th {
  padding: 24px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border);
}
td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 15px;
}
.category-header {
  background: var(--bg-page);
  font-weight: 600;
  color: var(--brand);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 56px;
  z-index: 15;
}
.check-icon { color: var(--brand); font-size: 20px; }
.faq-section {
  padding: 100px 0;
  background: white;
}
.faq-section h2 {
  font-size: var(--text-4xl);
  font-weight: 400;
  margin-bottom: var(--sp-12);
  color: var(--text-primary);
  letter-spacing: -0.5px;
  text-align: center;
}
.faq-grid { margin: 0 auto; }
/* Contact Sales Dialog */
.dialog-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.dialog-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.signup-dialog {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.dialog-overlay.active .signup-dialog { transform: scale(1); }
.dialog-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.dialog-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-secondary);
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.dialog-close:hover { background: var(--border-light); color: var(--text-primary); }
.dialog-header h2 {
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-weight: 600;
}
.dialog-header p { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.65; }
.dialog-body { padding: 32px; }
.dialog-submit {
  width: 100%;
  padding: 16px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}
.dialog-submit:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(97, 97, 255, 0.3);
}
.terms-text {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}
.terms-text a { color: var(--brand); text-decoration: none; font-weight: 500; }
.terms-text a:hover { text-decoration: underline; }

/* ── 19. Support page ── */
.support-hero {
  padding: 148px 0 80px;
  text-align: center;
  background: var(--bg-white);
  margin-top: 64px;
  position: relative;
  overflow: hidden;
}
.support-hero:before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(97, 97, 255, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  top: -250px;
  right: -150px;
}
.support-hero h1 {
  font-size: var(--text-hero);
  font-weight: 400;
  margin-bottom: var(--sp-6);
  color: var(--text-primary);
  letter-spacing: -2px;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.support-hero p {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.65;
  position: relative;
  z-index: 1;
  font-weight: 400;
}
.support-form-section {
  padding: 60px 0;
  background: var(--bg-page);
}
.support-form-container {
  background: white;
  border-radius: 16px;
  padding: 50px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  max-width: 1200px;
  margin: 0 auto;
}
.success-message {
  display: none;
  background: var(--green-bg);
  border: 2px solid var(--green);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-bottom: 30px;
  animation: slideDown 0.5s ease;
}
.success-message.show { display: block; }
.success-message h3 { color: var(--green-dark); margin-bottom: 10px; font-size: 24px; }
.success-message p  { color: var(--green-text); font-size: 16px; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-header { text-align: center; margin-bottom: 50px; }
.faq-header h2 { font-size: 42px; margin-bottom: 16px; color: var(--text-primary); }
.faq-header p   { font-size: var(--text-lg); color: var(--text-secondary); margin-bottom: var(--sp-10); }
.segment-toggle {
  display: inline-flex;
  gap: 0;
  background: white;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.segment-btn {
  padding: 12px 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  transition: all 0.3s ease;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
}
.segment-btn.active {
  background: var(--brand);
  color: white;
  box-shadow: 0 4px 12px rgba(97, 97, 255, 0.3);
}
.segment-btn:not(.active):hover {
  color: var(--brand);
  background: rgba(97, 97, 255, 0.05);
}
.faq-container { max-width: 1200px; margin: 0 auto; }
.faq-category { display: none; }
.faq-category.active {
  display: block;
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-answer ol {
  color: var(--text-secondary);
  line-height: 1.8;
  padding-left: 20px;
  margin-top: 12px;
}
.faq-answer li { margin-bottom: 10px; }
.faq-answer strong { color: var(--text-primary); }

/* ── 20. Testimonials page ── */
.why-section { background: white; padding: var(--sp-24) 0; }
.why-card {
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(97, 97, 255, 0.05) 0%, rgba(135, 135, 255, 0.05) 100%);
  border-left: 4px solid var(--brand);
  border-radius: 16px;
  padding: 40px;
}
.why-card h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.why-card p { font-size: 17px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 24px; }
.why-quote {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand);
  font-style: italic;
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 12px;
}
.testimonials-section {
  background: var(--bg-page);
  padding: 100px 0;
  overflow: hidden;
}
.carousel-container {
  position: relative;
  max-width: 1200px;
  margin: auto;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-container::-webkit-scrollbar { display: none; }
.carousel-container:active { cursor: grabbing; }
.carousel-track {
  display: flex;
  gap: 32px;
  animation: carouselScroll 180s linear infinite;
  width: max-content;
  padding: 50px 0 20px;
}
.carousel-track:hover { animation-play-state: paused; }
@keyframes carouselScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.testimonial-card {
  background: white;
  border-radius: 20px;
  padding: 40px;
  border: 2px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
  min-width: 380px;
  max-width: 380px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.testimonial-card:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(97, 97, 255, 0.15);
  transform: translateY(-4px);
  z-index: 10;
}
.testimonial-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.3;
}
.testimonial-quote {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--sp-6);
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 2px solid var(--border-light);
}
.author-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, #8787FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-info { flex: 1; }
.author-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.author-role { font-size: var(--text-sm); color: var(--text-muted); }
.learning-section { background: white; padding: var(--sp-24) 0; }
.learning-content { max-width: 1200px; margin: 0 auto; text-align: center; }
.learning-content p { font-size: 18px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 20px; }
.highlight-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand);
  padding: 24px;
  background: rgba(97, 97, 255, 0.05);
  border-radius: 12px;
  margin-top: 32px;
}

/* ── 21. Our Team page ── */
.mission-approach { padding: var(--sp-24) 0; background: var(--bg-page); }
.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}
.mission-card,
.approach-card {
  background: white;
  padding: 50px 40px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(97, 97, 255, 0.08);
  border: 1px solid rgba(97, 97, 255, 0.1);
  transition: all 0.4s ease;
}
.mission-card:hover,
.approach-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(97, 97, 255, 0.15);
  border-color: rgba(97, 97, 255, 0.3);
}
.mission-card h2,
.approach-card h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.mission-card p,
.approach-card p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.leadership-section { padding: var(--sp-24) 0; background: white; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 50px;
}
.team-member {
  background: white;
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(97, 97, 255, 0.15);
  border-color: var(--brand);
}
.team-member .team-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px;
  overflow: hidden;
  border: 3px solid var(--border);
  transition: all 0.3s ease;
}
.team-member:hover .team-avatar {
  border-color: var(--brand);
  transform: scale(1.05);
}
.team-member .team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-member h3 { font-size: 18px; margin-bottom: 6px; color: var(--text-primary); font-weight: 600; }
.culture { padding: var(--sp-24) 0; background: var(--bg-page); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.value-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.value-card:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(97, 97, 255, 0.1);
  transform: translateY(-5px);
}
.value-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--brand); }
.value-card p  { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0; }
.recruiting { padding: var(--sp-24) 0; background: white; }
.apply-btn {
  background: var(--brand);
  color: white;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.apply-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(97, 97, 255, 0.3);
}

/* ── 22. About SyncoPro page ── */
.story-section { background: var(--bg-page); padding: var(--sp-24) 0; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.story-content h2 {
  font-size: var(--text-4xl);
  font-weight: 400;
  margin-bottom: var(--sp-8);
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.story-content p {
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
}
.concept-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.concept-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
}
.concept-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}
.concept-icon { font-size: 48px; margin-bottom: var(--sp-5); }
.concept-card h3 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--sp-3); color: var(--text-primary); }
.concept-card p  { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; }
.evolution-section { background: var(--bg-white); padding: var(--sp-24) 0; }
.evolution-content { max-width: 900px; margin: 0 auto; text-align: center; }
.evolution-content h2 {
  font-size: var(--text-4xl);
  font-weight: 400;
  margin-bottom: var(--sp-10);
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.evolution-description {
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--text-secondary);
  padding: 0 var(--sp-4);
}

/* ── 23. Roadmap page ── */
.roadmap-section { background: var(--bg-page); padding: var(--sp-20) 0; }
.phase-block {
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-12);
  margin-bottom: var(--sp-8);
  transition: all 0.3s ease;
  position: relative;
}
.phase-block:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(97, 97, 255, 0.1);
  transform: translateY(-3px);
}
.phase-block.now {
  border-color: var(--brand);
  border-left: 5px solid var(--brand);
}
.phase-block.now::before {
  content: "You are here";
  position: absolute;
  top: 20px; right: 24px;
  background: var(--brand);
  color: white;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 20px;
}
.phase-quarter {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
}
.phase-title {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}
.phase-description {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--sp-8);
  max-width: 760px;
}
.phase-deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.deliverable {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.5;
}
.deliverable-dot { color: var(--brand); font-size: var(--text-lg); line-height: 1.2; flex-shrink: 0; }
.phase-block.vision {
  background: linear-gradient(135deg, rgba(97, 97, 255, 0.03) 0%, transparent 100%);
  border-color: rgba(97, 97, 255, 0.2);
}
.phase-block.vision .phase-deliverables .deliverable { background: rgba(97, 97, 255, 0.04); }
.vision-note {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: rgba(97, 97, 255, 0.06);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--brand);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── 24. Privacy Policy & Terms pages ── */
.policy-hero,
.terms-hero {
  padding: 148px 0 60px;
  text-align: center;
  background: var(--bg-white);
  margin-top: 64px;
  position: relative;
  overflow: hidden;
}
.policy-hero:before,
.terms-hero:before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(97, 97, 255, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  top: -250px;
  right: -150px;
}
.policy-hero h1,
.terms-hero h1 {
  font-size: var(--text-hero);
  font-weight: 400;
  margin-bottom: var(--sp-5);
  color: var(--text-primary);
  letter-spacing: -2px;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.policy-hero .last-updated,
.terms-hero .last-updated {
  font-size: var(--text-md);
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}
.policy-content,
.terms-content {
  padding: 80px 0;
  background: var(--bg-page);
}
.policy-container,
.terms-container {
  background: white;
  border-radius: 16px;
  padding: 60px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  max-width: 900px;
  margin: 0 auto;
}
.policy-container h2,
.terms-container h2 {
  font-size: 32px;
  margin-top: 48px;
  margin-bottom: 20px;
  color: var(--text-primary);
  font-weight: 600;
}
.policy-container h2:first-child,
.terms-container h2:first-child { margin-top: 0; }
.policy-container h3,
.terms-container h3 {
  font-size: 24px;
  margin-top: 32px;
  margin-bottom: 16px;
  color: var(--text-primary);
  font-weight: 600;
}
.policy-container p,
.terms-container p {
  margin-bottom: 20px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.8;
}
.policy-container ul,
.policy-container ol,
.terms-container ul,
.terms-container ol {
  margin-bottom: 20px;
  padding-left: 28px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.policy-container li,
.terms-container li { margin-bottom: 12px; }
.policy-container strong,
.terms-container strong { color: var(--text-primary); font-weight: 600; }
.policy-container a,
.terms-container a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}
.policy-container a:hover,
.terms-container a:hover { color: var(--brand-dark); text-decoration: underline; }
.highlight-box {
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  padding: 24px;
  margin: 24px 0;
  border-radius: 8px;
}
.highlight-box p { margin-bottom: 0; }
/* Terms-specific orange highlight */
.terms-container .highlight-box {
  background: var(--amber-bg);
  border-left-color: var(--amber);
}
.info-box {
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  padding: 24px;
  margin: 24px 0;
  border-radius: 8px;
}
.info-box p { margin-bottom: 0; }

/* ── 12. Responsive ── */

/* Tablet */
@media (max-width: 1024px) {
  .outputs-grid, .feature-grid { grid-template-columns: repeat(2,1fr); }
  .roadmap-grid { grid-template-columns: repeat(2,1fr); }
  .diff-grid { grid-template-columns: 1fr; }
  .section-heading, .section-title { font-size: 34px; }
  .final-cta h2 { font-size: 34px; }
}

/* Mobile */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .nav-links {
    position: fixed;
    top: 64px;
    right: 16px;
    background: var(--bg-white);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.14);
    min-width: 240px;
    max-width: calc(100% - 32px);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.97);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    z-index: 1001;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
  }
  .nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .nav-links .nav-item,
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--border-light);
  }
  .nav-links .nav-item:last-child,
  .nav-links li:last-child { border-bottom: none; }
  .nav-links > .nav-item > a,
  .nav-links li a { padding: 14px 20px; display: flex; font-size: 15px; }
  /* Mobile dropdown */
  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: var(--bg-page);
    margin: 0;
    padding: 0;
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.3s ease;
  }
  .dropdown-menu.active {
    max-height: 400px;
    border-top: 1px solid var(--border);
  }
  .dropdown-menu a { padding: 11px 20px 11px 32px; border-left: none; font-size: 14px; }
  .dropdown-menu a:hover { padding-left: 36px; background: var(--bg-white); }

  /* CTA items — full-width buttons in mobile menu, grouped at bottom */
  .nav-item:has(.nav-cta),
  .nav-item:has(.nav-cta-ghost) {
    border-bottom: none;
    padding: 4px 16px;
    display: flex;
    justify-content: stretch;
    align-items: center;
  }
  .nav-item:has(.nav-cta) {
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
  }
  .nav-item:has(.nav-cta-ghost) { padding-bottom: 12px; }

  .nav-cta,
  .nav-cta-ghost {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
    margin-left: 0;
    text-align: center;
  }

  .hero { padding: 100px 0 60px; }
  .hero h1 { font-size: 38px; letter-spacing: -1px; }
  .hero-sub { font-size: 17px; }
  .hero-proof { gap: 24px; }
  .hero-proof-divider { display: none; }

  .problem-list, .steps, .validation-grid { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .outputs-grid, .feature-grid { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr; }

  .section { padding: 64px 0; }
  .section-heading, .section-title { font-size: 28px; }
  .final-cta h2 { font-size: 28px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .hero-cta-group { flex-direction: column; gap: 12px; }
  .logo { height: 36px; }
  .btn-primary, .btn-secondary { padding: 13px 28px; font-size: 15px; }
}

/* ── Secondary page responsive ── */

@media (max-width: 1200px) {
  /* Pricing */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  /* Our Team */
  .mission-grid { grid-template-columns: 1fr; gap: 40px; }
  /* About */
  .story-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  /* Page hero (all secondary pages) */
  .page-hero h1,
  .page-hero .hero-subtitle,
  .support-hero h1,
  .policy-hero h1,
  .terms-hero h1 { font-size: 40px; letter-spacing: -1px; }

  .page-hero p,
  .support-hero p { font-size: 17px; }

  /* Custom section padding — match .section 64px on mobile */
  .why-section,
  .learning-section,
  .evolution-section,
  .story-section,
  .mission-approach,
  .leadership-section,
  .culture,
  .recruiting { padding: 64px 0; }

  /* Custom section h2 scaling */
  .story-content h2,
  .evolution-content h2,
  .learning-content h2 { font-size: 28px; }

  /* Custom section body text */
  .learning-content p,
  .evolution-description { font-size: 16px; }
  .highlight-text { font-size: 17px; padding: 20px; }

  /* All Features */
  .features-grid { grid-template-columns: 1fr; }

  /* How It Works */
  .workflow-timeline { margin-top: 40px; }
  .timeline-step { grid-template-columns: 60px 1fr; gap: 20px; }
  .timeline-number { width: 60px; height: 60px; font-size: 24px; }
  .step-title { font-size: 20px; }

  /* Scoring & Readiness */
  .dimension-grid { grid-template-columns: 1fr; }
  .readiness-levels { grid-template-columns: 1fr; gap: 16px; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
  .phase-block { padding: 32px 24px; }

  /* Testimonials */
  .carousel-track {
    animation: none;
    flex-direction: column;
    width: auto;
    padding: 30px 16px 0;
  }
  .testimonial-card { min-width: 100%; }
  .why-card { padding: 32px 24px; }
  .why-card h2 { font-size: 26px; }

  /* Our Team */
  .mission-card h2, .approach-card h2 { font-size: 24px; }
  .team-grid, .values-grid { grid-template-columns: 1fr; }

  /* About */
  .concept-cards { grid-template-columns: 1fr; }

  /* Roadmap */
  .phase-title { font-size: 26px; }
  .phase-deliverables { grid-template-columns: 1fr; }
  .phase-block.now::before { top: 14px; right: 14px; font-size: 11px; }
}

@media (max-width: 480px) {
  /* Page hero (all secondary pages) */
  .page-hero h1,
  .page-hero .hero-subtitle,
  .support-hero h1,
  .policy-hero h1,
  .terms-hero h1 { font-size: 32px; }

  /* Custom section padding — further reduce on small phones */
  .why-section,
  .learning-section,
  .evolution-section,
  .story-section,
  .mission-approach,
  .leadership-section,
  .culture,
  .recruiting { padding: 48px 0; }

  /* Custom section h2 */
  .story-content h2,
  .evolution-content h2 { font-size: 26px; }

  /* Our Team */
  .team-member, .value-card { padding: 24px; }
  .mission-card, .approach-card { padding: 32px 24px; }

  /* Roadmap */
  .phase-block { padding: 24px 16px; }

  /* Policy/Terms */
  .policy-container, .terms-container { padding: 32px 24px; }
}

/* ── Font Awesome icon sizing (replaces emoji) ── */
.feature-icon i,
.feature-icon-wrap i,
.problem-item-icon i,
.concept-icon i,
.card-icon i,
.meta-item i {
  font-size: inherit;
  line-height: 1;
}

/* Mission/approach gradient icon box */
.card-icon-box {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--brand) 0%, #8787FF 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 24px;
  color: #fff;
}

/* Recruiting value cards — centered layout */
.value-card--center {
  text-align: center;
}
.value-card--center .recruit-icon {
  font-size: 32px;
  color: var(--brand);
  margin-bottom: 16px;
}
.value-card--center h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* Roadmap "you are here" item */
.roadmap-item--current {
  border-left: 3px solid var(--brand);
  padding-left: 24px;
}
.roadmap-item--current .roadmap-quarter strong {
  color: var(--brand);
}

/* Coming-soon / dashed feature cards */
.feature-card--dashed {
  border: 2px dashed var(--border);
  background: transparent;
}

/* Feature card timeline label (Q3 2026 etc.) */
.feature-eta-inline {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}

/* Coming-next section spacer */
.section-coming-next {
  margin-top: 72px;
}
.section-coming-next .section-heading {
  margin-bottom: 12px;
}
.section-coming-next .section-sub {
  margin-bottom: 40px;
}

/* How it works outputs-grid spacer */
.outputs-grid--spaced {
  margin-top: 40px;
}

/* Index outputs grid spacer */
.outputs-grid--index {
  margin-top: 32px;
}

/* Index roadmap CTA wrapper */
.roadmap-cta-wrap {
  text-align: center;
  margin-top: 48px;
}

/* Chrome mock dots */
.chrome-dot--red   { background: #FC6058; }
.chrome-dot--yellow { background: #FEC02F; }
.chrome-dot--green  { background: #2ACA44; }

/* Team avatar scale (CEO photo crops to face) */
.avatar-scale {
  transform: scale(1.5);
}

/* Success dialog */
.dialog-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.dialog-success-icon {
  width: 80px;
  height: 80px;
  background: var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 32px;
  color: #fff;
}
.dialog-success-title {
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 16px;
  color: var(--text-primary);
  font-weight: 600;
}
.dialog-success-body {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Support hero email link */
.hero-email-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Privacy / Terms minor spacing */
.mt-4  { margin-top: 16px; }
.mt-10 { margin-top: 40px; }

/* Pricing grid — 4-column layout override */
.pricing-grid--4col {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Coming-soon card dim */
.pricing-card--dim { opacity: 0.8; }

/* Unlock plan "Most popular" label color */
.plan-label--brand { color: var(--brand); }

/* Coming-soon label color */
.plan-label--muted { color: var(--text-muted); }

/* Dialog form field spacing */
.form-field { margin-bottom: 20px; }

/* Evolution description paragraph spacing */
.evolution-description + .evolution-description { margin-top: 20px; }

/* How it works section 2 CTA wrap */
.section-cta-wrap {
  margin-top: 32px;
}

/* ── Responsive gap-fills ── */

/* Billing toggle — stacked card layout on mobile */
@media (max-width: 640px) {
  .billing-options {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    gap: 8px;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .billing-option {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--bg-white);
    border: 2px solid var(--border);
    font-size: 15px;
    white-space: normal;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .billing-option.active {
    border-color: var(--brand);
    background: var(--bg-white);
    color: var(--brand);
    box-shadow: 0 2px 12px rgba(97,97,255,0.15);
  }
  .billing-option-label {
    font-size: 15px;
  }
  .billing-option-sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 2px;
    text-align: left;
  }
  .billing-option-label { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Pricing: 4-col → 2-col at tablet before it hits the 1-col 768px rule */
@media (max-width: 1024px) {
  .pricing-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-grid--4col { grid-template-columns: 1fr; }
}

/* Comparison table: readable on mobile */
@media (max-width: 768px) {
  .comparison-table { font-size: 13px; overflow-x: visible; }
  .comparison-table th,
  .comparison-table td { padding: 12px 8px; }
  /* Hide Team column on mobile — coming soon, keeps table in viewport */
  .comparison-table th:last-child,
  .comparison-table td:last-child { display: none; }
  .comparison-team-note { display: block; }
  .comparison-section { padding: 60px 0; }
}

/* Hero h1 at very small screens */
@media (max-width: 375px) {
  .hero h1 { font-size: 26px; }
  .page-hero h1 { font-size: 26px; }
  .hero-proof { gap: 12px; }
}

/* Hero proof gap at 480px */
@media (max-width: 480px) {
  .hero-proof { gap: 16px; }
}

/* Timeline at small screens */
@media (max-width: 480px) {
  .timeline-step { grid-template-columns: 50px 1fr; gap: 12px; }
  .timeline-number { width: 50px; height: 50px; font-size: 20px; }
  .timeline-step:not(:last-child)::before { left: 25px; }
}

/* Testimonial carousel card on very small screens */
@media (max-width: 480px) {
  .testimonial-card { min-width: 90vw; max-width: 90vw; padding: 28px 20px; }
}

/* Support form container padding on mobile */
@media (max-width: 480px) {
  .support-form-container { padding: 32px 20px; }
}

/* Policy/Terms padding — tighter below 375px */
@media (max-width: 375px) {
  .policy-container,
  .terms-container { padding: 24px 16px; }
}

/* Final CTA — reduce excessive padding on small screens */
@media (max-width: 480px) {
  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 26px; }
}

/* Touch targets — ensure min 44px height on primary actions */
@media (max-width: 480px) {
  .btn-primary,
  .btn-ghost,
  .btn-secondary,
  .btn-primary--white { padding: 14px 28px; min-height: 44px; font-size: 15px; }
  .plan-cta { min-height: 44px; }
}

/* Validation grid margin on small screens */
@media (max-width: 480px) {
  .validation-grid { margin-top: 32px; }
  .validation-card { padding: 28px 20px; }
}

/* Roadmap phase block — 768px–1024px gap */
@media (max-width: 768px) {
  .phase-block { padding: 32px 24px; }
}

/* Footer — compact on mobile */
@media (max-width: 480px) {
  footer { padding: 24px 0; }
  footer p { font-size: 12px; }
}

/* Nav CTA ghost — reset negative margin on mobile */
@media (max-width: 768px) {
/* Nav CTA ghost margin already reset via mobile nav rules above */
}