/* =========================================================
   TurboCharger — Landing Page Styles
   Organized by: Tokens → Base/Reset → Layout utilities →
   Header → Hero → Sections (in page order) → Footer → Responsive
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --navy-950: #060512;
  --navy-900: #0a0918;
  --navy-800: #0e0c22;
  --navy-700: #13122b;
  --ink: #0d0e2b;
  --ink-soft: #4a4b66;
  --muted: #6b6c86;
  --muted-light: #9a9ab8;
  --blue: #2563eb;
  --blue-light: #4f8bff;
  --pink: #ec4899;
  --purple: #7c3aed;
  --violet-glow: #5b21b6;
  --lavender-bg: #f3f2fb;
  --lavender-border: #e3e1f5;
  --white: #ffffff;
  --green: #22c55e;
  --red: #ef4444;

  /* Gradients */
  --grad-logo: linear-gradient(135deg, var(--pink), var(--purple));
  --grad-dark-hero: radial-gradient(circle at 15% 20%, rgba(124,58,237,.55), transparent 45%),
                    radial-gradient(circle at 75% 60%, rgba(37,99,235,.35), transparent 50%),
                    linear-gradient(180deg, #030309 0%, #0a0716 60%, #0a0716 100%);
  --grad-features: radial-gradient(circle at 20% 10%, rgba(124,58,237,.5), transparent 50%),
                    radial-gradient(circle at 90% 80%, rgba(37,99,235,.35), transparent 55%),
                    linear-gradient(180deg, #050510 0%, #120a2e 55%, #050510 100%);
  --grad-pricing: linear-gradient(180deg, #06040f 0%, #0c0a22 100%);
  --grad-final-cta: radial-gradient(circle at 20% 30%, rgba(124,58,237,.5), transparent 50%),
                     radial-gradient(circle at 85% 20%, rgba(236,72,153,.35), transparent 45%),
                     linear-gradient(180deg, #08061a 0%, #0b0a22 100%);

  /* Type */
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (rem) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;

  --container-w: 74rem;
  --header-pad-y: 1rem;
  --header-pad-x: 3rem;
  --header-h: 4.75rem;

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }
svg { display: block; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 640px) {
  .container { padding-inline: 2rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

.eyebrow {
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.eyebrow.light { color: rgba(255,255,255,.65); }
.eyebrow.center { text-align: center; }
.eyebrow-sm { margin-bottom: 0.5rem; }

.section-title {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 1rem;
}
.section-title.center { text-align: center; margin-inline: auto; }
.section-title.light { color: var(--white); }

.section-sub {
  font-size: 1rem;
  color: var(--muted);
  max-width: 34rem;
}
.section-sub.center { text-align: center; margin-inline: auto; }
.section-sub.light { color: rgba(255,255,255,.65); }
.section-sub.left { text-align: left; margin-inline: 0; }

.section { padding-block: var(--space-8); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }

.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: #1d4fd1; box-shadow: 0 10px 24px -8px rgba(37,99,235,.6); }

.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { box-shadow: 0 10px 24px -8px rgba(0,0,0,.25); }

.btn-outline { background: transparent; color: var(--ink); border-color: #d8d7ea; }
.btn-outline:hover { background: var(--lavender-bg); }

.btn-sm {
  padding: 0.9375rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1em;
  border-radius: 0.3125rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: #06082C;
}
.text-link span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.25rem;
  background: #2E72DC; color: var(--white); font-size: 0.6875rem;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(6,5,15,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: var(--header-pad-y) var(--header-pad-x);
}

.logo { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.logo-img { height: 1.75rem; width: auto; display: block; }

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.5rem;
}

.main-nav { display: flex; align-items: center; gap: 2.5rem; }
.main-nav a { font-size: 1rem; color: rgba(255,255,255,.85); transition: color .2s var(--ease); white-space: nowrap; }
.main-nav a:hover { color: var(--white); }

.header-cta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: none;
  padding: 0;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  background: var(--grad-dark-hero);
  overflow: hidden;
}

/* Desktop: true full-screen hero, content vertically centered,
   image absolutely pinned bottom-right of the viewport. */
@media (min-width: 1025px) {
  .hero {
    /* Full screen height, but never shorter than 730px on low screens */
    min-height: max(100vh, 45.625rem);
    display: flex;
    align-items: center;
    padding-top: var(--header-h);
  }
}

/* Tablet / mobile: natural height, content stacks, image flows below. */
@media (max-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 3rem;
  }
}

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;}
.hero-lottie { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; pointer-events: none; }
.hero-bg-fallback {
  position: absolute; inset: 0;
  background: var(--grad-dark-hero);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-content { max-width: 34rem; }

/* Desktop: pin the hero text block to the bottom-left of the full-height
   hero, matching the design. .hero-inner must give up being the nearest
   positioned ancestor so .hero-content anchors to .hero itself. */
@media (min-width: 1025px) {
  .hero-inner {
    position: static;
  }
  .hero-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 1.5rem 3rem 3rem;
  }
  /* Keep each list item on one line on desktop, where there's room. */
  .hero-list {
    width: max-content;
  }
  .hero-list li {
    white-space: nowrap;
  }
}

.hero-social { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; }
.avatar-stack { display: flex; }
.avatar-stack img {
  width: 2rem; height: 2rem; 
  object-fit: cover;
  margin-left: -0.5rem;
}
.avatar-stack img:first-child { margin-left: 0; }
.hero-social-label { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--white); font-weight: 600; }

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.hero-list { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 2rem; }
.hero-list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.875rem; color: rgba(255,255,255,.78); }
.hero-list .check-icon {
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.35rem;
  display: block;
}

.hero-actions { display: flex; gap: 1rem; }

/* Hero image — right + bottom aligned, ~60% of viewport width on desktop */
.hero-visual { z-index: 1; pointer-events: none; }
.hero-visual .dashboard-mock { pointer-events: auto; }
.hero-visual-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  pointer-events: auto;
}

@media (min-width: 1025px) {
  .hero-visual {
    position: absolute;
    top: 6.25rem; /* 100px clear above the image */
    right: 0;
    bottom: 0;
    width: 60vw;
    max-width: 58rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  /* Image fits the space below that gap, keeping its shape, pinned bottom-right */
  .hero-visual-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .hero-visual { width: 54vw; }
  /* Content is bottom-anchored now (not vertically centered above the
     image), so at this narrower band it needs a tighter cap to stay
     clear of the image's left edge. */
  .hero-content { max-width: 22rem; }
  /* Forcing single-line list items (below) would collide with the image
     in this narrow band, so allow wrapping again here only. */
  .hero-list { width: auto; max-width: 22rem; }
  .hero-list li { white-space: normal; }
}
@media (min-width: 1800px) {
  .hero-visual { width: 52vw; }
}

@media (max-width: 1024px) {
  .hero-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 2.5rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
}

/* Dashboard mockup */
.dashboard-mock {
  background: rgba(14,13,28,.75);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(6px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
  width: 100%;
}
.dash-window-bar { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.dash-window-bar span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(255,255,255,.15); }

.dash-body { display: grid; grid-template-columns: 9.5rem 1fr; min-height: 26rem; }
.dash-sidebar { border-right: 1px solid rgba(255,255,255,.06); padding: 1.25rem 0.75rem; }
.dash-sidebar ul { display: flex; flex-direction: column; gap: 0.35rem; }
.dash-sidebar li {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.8125rem; color: rgba(255,255,255,.55);
  padding: 0.5rem 0.6rem; border-radius: 0.5rem;
}
.dash-sidebar li i { width: 0.9rem; height: 0.9rem; border-radius: 3px; background: currentColor; opacity: .5; flex-shrink: 0; }
.dash-sidebar li.active { background: rgba(255,255,255,.06); color: var(--white); }
.dash-sidebar li.active i { opacity: 1; background: var(--blue-light); }

.dash-main { padding: 1.25rem 1.5rem 1.5rem; color: rgba(255,255,255,.9); min-width: 0; }
.dash-title { font-size: 1.05rem; font-weight: 600; color: var(--white); margin-bottom: 1rem; }

.dash-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.85rem; margin-bottom: 0.85rem; }
.dash-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 0.75rem; padding: 1rem; }
.dash-card--cleanup { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.25rem 0.9rem; align-items: center; }
.ring-wrap { position: relative; width: 4.5rem; height: 4.5rem; grid-row: 1 / 3; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 7; }
.ring-fill { fill: none; stroke: var(--blue-light); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 213; stroke-dashoffset: 213; }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(0); }
.ring-label strong { font-size: 0.85rem; color: var(--white); }
.ring-label span { font-size: 0.6rem; color: rgba(255,255,255,.5); }

.dash-card-heading { font-size: 0.8125rem; font-weight: 600; color: var(--white); margin-bottom: 0.15rem; display: flex; align-items: center; gap: 0.4rem; }
.dash-card-sub { font-size: 0.75rem; color: rgba(255,255,255,.55); margin-bottom: 0.1rem; }
.dash-card-meta { font-size: 0.7rem; color: rgba(255,255,255,.4); grid-column: 1 / 3; }
.dash-btn { grid-column: 1 / 3; justify-self: start; background: var(--blue); color: var(--white); border: none; border-radius: 0.4rem; padding: 0.4rem 0.85rem; font-size: 0.7rem; font-weight: 600; margin-top: 0.35rem; }
.info-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); font-size: 0.6rem; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); }

.dash-section-label { font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 0.6rem; }
.dash-status { margin-bottom: 0.85rem; }
.dash-status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.status-chip { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 0.6rem; padding: 0.6rem 0.7rem; }
.status-chip span { display: block; font-size: 0.7rem; color: rgba(255,255,255,.5); margin-bottom: 0.2rem; }
.status-chip strong { font-size: 0.85rem; color: var(--white); }
.status-chip .bar { display: block; height: 3px; border-radius: 2px; margin-top: 0.4rem; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.status-chip .bar::after { content: ""; position: absolute; inset: 0; width: 38%; border-radius: 2px; }
.bar-pink::after { background: #ec4899; width: 38%; }
.bar-blue::after { background: var(--blue-light); width: 35%; }
.bar-green::after { background: var(--green); width: 27%; }

.dash-usage { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.85rem; }
.dash-usage-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: end; }
.dash-usage-stats { display: flex; flex-direction: column; gap: 0.4rem; }
.dash-usage-stats li { display: flex; justify-content: space-between; font-size: 0.7rem; color: rgba(255,255,255,.5); gap: 0.5rem; }
.dash-usage-stats li strong { color: rgba(255,255,255,.85); font-weight: 600; }
.usage-graph { width: 100%; height: 4.5rem; color: var(--blue-light); }
.dash-timestamp { text-align: right; font-size: 0.65rem; color: rgba(255,255,255,.35); margin-top: 0.5rem; }

.dash-search { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dash-search input { flex: 1; min-width: 8rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: rgba(255,255,255,.7); }
.dash-search input::placeholder { color: rgba(255,255,255,.35); }
.dash-filters { font-size: 0.7rem; color: rgba(255,255,255,.4); white-space: nowrap; }

/* =========================================================
   WHY YOUR PC FEELS SLOW
   ========================================================= */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.reason { display: flex; gap: 1rem; align-items: flex-start; }
.reason-icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.6rem;
  background: var(--lavender-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.reason-icon img { width: 1.25rem; height: 1.25rem; }
.reason h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.reason p { font-size: 0.875rem; color: var(--muted); }

.result-banner {
  border-top: 2px solid var(--pink);
  background: var(--lavender-bg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.result-banner h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.result-banner p { font-size: 0.875rem; color: var(--muted); }

/* ---------- Why-slow section: scoped overrides ---------- */
.why-slow .eyebrow { text-transform: uppercase; font-size: 0.75rem; color: #06082C; }
.why-slow .section-title { font-size: 2.5rem; font-weight: 700; color: #06082C; }
.why-slow .section-sub { font-size: 0.875rem; color: #333333; }

.why-slow .reason-icon { width: 4rem; height: 4rem; background: #F5F5FF; }
.why-slow .reason-icon img { width: 2rem; height: 2rem; }
.why-slow .reason h3 { font-size: 0.875rem; font-weight: 600; color: #06082C; }
.why-slow .reason p { color: #333333; }

.why-slow .result-banner { border-top-color: #EF0279; padding: 2rem 1.5rem; }
.why-slow .result-banner h3 { font-size: 0.875rem; font-weight: 600; color: #06082C; }
.why-slow .result-banner p { color: #333333; }

/* =========================================================
   MEET TURBOCHARGER
   ========================================================= */
.meet-grid {
  display: grid;
  grid-template-columns: 1fr 23.75rem;
  gap: 1.875rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
.meet-card { border-radius: 0.3125rem; position: relative; }
.meet-card--light {
  background: var(--white);
  border: 1px solid #06082C1F;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1.5rem;
  gap: 1.5rem;
}
.meet-card-text { display: flex; flex-direction: column; height: 100%; }
.meet-card-text h3 { font-size: 1.75rem; font-weight: 500; margin: 0.5rem 0 0.75rem; }
.meet-copy { font-size: 0.875rem; color: #333333; line-height: 1.5; margin-bottom: 3rem; }
.meet-card-image { border-radius: 0; overflow: hidden; }
.meet-card-image img { width: 100%; height: auto; }
.meet-footnote { font-size: 0.75rem; font-style: italic; text-transform: uppercase; color: #333333; margin-top: auto; padding-top: 0.5rem; }

.meet-card--dark {
  background: #06082C;
  color: var(--white);
  padding: 4rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 22rem;
}
.meet-card--dark h3 { color: var(--white); font-size: 1.75rem; font-weight: 500; line-height: 1.3; }
.meet-card--dark p { font-size: 0.875rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.meet-card--dark .btn { align-self: flex-start; }
.meet-card-mark { position: absolute; bottom: 2rem; right: 2rem; width: auto; height: 2rem; opacity: .8; }
.meet-card-mark img { display: block; width: auto; height: 100%; }

/* ---------- Meet section: heading typography matches "why-slow" section ---------- */
.meet .eyebrow { text-transform: uppercase; font-size: 0.75rem; color: #06082C; }
.meet .section-title { font-size: 2.5rem; font-weight: 700; color: #06082C; }

/* =========================================================
   FEATURES
   ========================================================= */
.features {
  background: url('../img/features-bg.webp') center / cover no-repeat;
  color: var(--white);
  padding-top: 9.75rem;
  padding-bottom: 11.75rem;
}

.features .eyebrow.light { text-transform: uppercase; font-size: 0.75rem; color: #FFFFFF; }
.features .section-title.light { font-size: 2.5rem; font-weight: 700; color: #FFFFFF; }
.features .section-sub.light { font-size: 0.875rem; color: #FFFFFF; }

.features-grid {
  display: grid;
  grid-template-columns: 27.8125rem 1fr;
  gap: 1.875rem;
  margin-top: 3rem;
  align-items: stretch;
}

.feature-accordion { display: flex; flex-direction: column; gap: 0.5rem; }
.acc-item {
  background: #FFFFFF1F;
  border: 1px solid #FFFFFF3D;
  border-radius: 0.3125rem;
  box-shadow: 0 2px 14px 0 #FFFFFF26 inset;
  overflow: hidden;
  transition: background-color .3s var(--ease);
}
.acc-item.is-open { background: #2E72DC; }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: none;
  color: #FFFFFF;
  padding: 0.8125rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1em;
  text-align: left;
}
.acc-icon { width: 0.75rem; height: 0.75rem; flex-shrink: 0; display: block; transition: transform .3s var(--ease); }
.acc-item.is-open .acc-icon { transform: rotate(180deg); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > p {
  overflow: hidden;
  font-size: 0.875rem;
  color: #FFFFFF;
  line-height: 1.5em;
  padding: 0 1.5rem;
}
.acc-item.is-open .acc-panel > p { padding: 0.25rem 1.5rem 1.5rem; }

.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF14;
  border: 1px solid #FFFFFF4D;
  border-radius: 0.3125rem;
  box-shadow: 0 2px 14px 0 #FFFFFF40 inset;
  padding: 7.5rem 5rem;
  min-width: 0;
}
.feature-visual img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
}

.features-cta { display: flex; justify-content: center; margin-top: 4rem; }

/* =========================================================
   USER PERSONAS
   ========================================================= */
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 3.75rem;
}
.section-head-row .section-title { margin-bottom: 0; }

.personas .eyebrow { text-transform: uppercase; font-size: 0.75rem; color: #06082C; }
.personas .section-title { font-size: 2.5rem; font-weight: 700; color: #06082C; }

/* .personas-sticky holds BOTH the "USER PERSONAS" heading (in its own
   .container, so it keeps the site's normal contained width/alignment) and
   the card viewport, so the two stay pinned together while the cards
   translate horizontally — see initPersonaSlider in script.js, which sticks
   this whole wrapper (not just the card row) for exactly the vertical
   distance needed to translate .persona-track through all 6 cards.
   .personas-viewport itself deliberately lives OUTSIDE any .container (see
   markup) so the card track can bleed to the full viewport width on
   desktop; it's re-constrained back to the container's width on
   tablet/mobile below, where the track is a plain contained grid instead. */
.personas-pin { position: relative; }
.personas-viewport { overflow: hidden; margin-top: 3rem; }
.persona-track {
  display: flex;
  gap: 1.875rem;
  width: 100%;
  box-sizing: border-box;
  padding-left: 1.5rem;
}
@media (min-width: 640px) {
  .persona-track { padding-left: 2rem; }
}

/* Desktop: pinned, scroll-driven horizontal reveal. */
@media (min-width: 1025px) {
  .personas-sticky { position: sticky; }
  .persona-track.is-pinned { will-change: transform; }
}

/* Tablet/mobile: no pinning — a swipeable row of cards (same as the
   features page "Who it's for" row). The row runs edge to edge and its own
   padding lines the first card up with the heading's .container. */
@media (max-width: 1024px) {
  .persona-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 20rem);
    gap: 1rem;
    padding-inline: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .persona-track::-webkit-scrollbar { display: none; }
  .persona-card { scroll-snap-align: start; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  .persona-track { padding-inline: 2rem; scroll-padding-inline: 2rem; grid-auto-columns: min(45%, 22rem); gap: 1.25rem; }
}
/* Touch screens can't hover, so always show the description there */
@media (hover: none) and (max-width: 1024px) {
  .persona-card .persona-desc { max-height: 8rem; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.75rem; }
}

.persona-card {
  position: relative;
  flex: 0 0 calc((100% - 3 * 1.875rem) / 4);
  border-radius: 0.3125rem;
  overflow: hidden;
  aspect-ratio: 3.4/4.5;
  background: var(--ink);
}
.persona-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.persona-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 8, 44, 0) 47%,
    rgba(6, 8, 44, 0.9) 80%
  );
  transition: transform .5s var(--ease);
  /* Anchor growth at the bottom edge, not the center: the overlay's own
     bottom (where its gradient/content sit) stays exactly in place, and a
     subtle scale only extends it a little further up — never all the way
     to the top of the card, and never touching the image or card size. */
  transform-origin: bottom;
}
/* Only the overlay zooms on hover — scoped to the direct child so this
   never touches the card's own size, the image, or the icon inside
   "Learn more". */
.persona-card:hover > .persona-overlay {
  transform: scale(1.06);
}
.persona-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 2.5rem 1.5rem 1.5rem;
  color: #FFFFFF;
}
.persona-content h3 { color: #FFFFFF; font-size: 1.5rem; font-weight: 500; margin-bottom: 0; }
.persona-desc {
  color: #9999A7;
  font-size: 0.875rem;
  line-height: 1.5em;
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s var(--ease), margin .35s var(--ease);
}
.persona-card:hover .persona-desc,
.persona-card:focus-within .persona-desc {
  max-height: 8rem;
  opacity: 1;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.persona-card .text-link { color: #FFFFFF; margin-top: 0.75rem; }
.persona-card .text-link span { background: #FFFFFF; }
.persona-card .text-link span img { width: 0.6875rem; height: 0.6875rem; display: block; }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how-it-works .eyebrow { text-transform: uppercase; font-size: 0.75rem; color: #06082C; }
.how-it-works .section-title { font-size: 2.5rem; font-weight: 700; color: #06082C; }
.how-it-works .section-sub { font-size: 0.875rem; color: #333333; }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; margin-top: 3rem; }

/* Each card is a static box (radius/sizing live here) around a 3D flip
   wrapper: .step-card-inner is rotated to a fixed 180deg so its front
   face (readable content) faces the viewer. Its two absolutely
   positioned .step-face children (back/front) are hidden via
   backface-visibility rather than the card's own overflow, so the flip
   never clips or breaks the rounded corners. This static 180deg is the
   resting / no-JS state; initHowItWorks in script.js drives the scroll
   animation (stack → spread → flip) on top of it. */
.step-card {
  border-radius: 0.3125rem;
  min-height: 31.25rem;
  position: relative;
  perspective: 1600px;
}
.step-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}
.step-face {
  position: absolute;
  inset: 0;
  border-radius: 0.3125rem;
  overflow: hidden;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.step-face--front { transform: rotateY(180deg); padding-right: 2.75rem; }

.step-label { font-size: 0.75rem; font-style: italic; font-weight: 600; opacity: .8; }
.step-face--front h3 { font-size: 1.75rem; margin-top: 4.375rem; margin-bottom: 0.75rem; min-height: 3.75rem; }
.step-face--front p { font-size: 0.875rem; }
.step-face--front .step-desc { margin-top: 1.875rem; }
/* Step label on the front face: 12px (the .step-face--front p rule above would otherwise make it 14px) */
.step-face--front .step-label { font-size: 0.75rem; }
.step-icon {
  margin-top: auto;
  align-self: flex-end;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.step-icon img { width: 3rem; height: 3rem; max-width: none; }

/* Back face: step label top-left, logo centered exactly in the middle of
   the card (absolutely positioned so the label's height doesn't offset it) */
.step-logo-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.step-logo {
  width: 5.5rem; height: 5.5rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.step-logo img { width: 5.5rem; height: 5.5rem; max-width: none; }

.step-card--dark .step-face { background: #020E0D; color: var(--white); }
.step-card--dark .step-face--front h3 { color: var(--white); }
.step-card--dark .step-face--front p { color: rgba(255,255,255,.6); }
.step-card--dark .step-icon { color: var(--white); }
.step-card--dark .step-logo { color: #0e1912; }

.step-card--blue .step-face { background: #2E72DC; color: var(--white); }
.step-card--blue .step-face--front h3 { color: var(--white); }
.step-card--blue .step-face--front p { color: rgba(255,255,255,.8); }
.step-card--blue .step-icon { color: var(--white); }

.step-card--light .step-face { background: #F5F5FF; color: var(--ink); }
.step-card--light .step-face--front p { color: var(--muted); }
.step-card--light .step-icon { color: var(--white); }
.step-card--light .step-logo { color: var(--white); }

/* =========================================================
   STATS / COMPARISON
   ========================================================= */
.stats { text-align: center; }
.stats .eyebrow { text-transform: uppercase; font-size: 0.75rem; color: #06082C; }

.stat-number {
  font-family: var(--font-display);
  font-size: 12.5rem; /* 200px */
  font-weight: 700;
  line-height: 1;
  color: #06082C;
  margin: 1.5rem 0 1rem;
}
.stat-number span { color: #06082C; }
.stat-caption { font-size: 1.5rem; font-weight: 500; color: #06082C; margin-top: 3rem; margin-bottom: 6.25rem; }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.875rem; text-align: left; }

/* Shared box padding/radius. Applied directly to the "Without" card, and
   to the "With" card's inner content wrapper (see below) so both boxes'
   visible content area matches exactly. */
.compare-card { border-radius: 0.3125rem; padding: 3rem 1.5rem; }

.compare-card--without { background: #F5F5FF; border: none; }

/* "With" card gradient border: the outer element carries the top-to-bottom
   gradient as its background plus a thin padding equal to the border
   thickness (1px); the actual content sits in the nested .compare-card--with-inner
   (which also gets the shared .compare-card padding/radius above, at a
   slightly smaller radius so it nests cleanly inside the outer corners and
   the gradient stays visible all the way around). */
.compare-card--with {
  border-radius: 0.3125rem;
  padding: 0.0625rem; /* 1px gradient border width */
  background: linear-gradient(180deg, #0078FF, #EF0279);
}
.compare-card--with-inner {
  height: 100%;
  border-radius: 0.25rem;
  /* Fallback fill until a background image is added; sizing/position are
     already set up to receive one, e.g. */
  background-image: url('../img/with-tc-bg.webp');
  background-color: #FFFFFF;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Badge + heading text sit on one line, vertically centered. */
.compare-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }

.compare-tag {
  display: inline-block;
  width: 4rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 0.3125rem;
  background: #000000;
  color: var(--white);
}
.compare-tag--with { background: linear-gradient(180deg, #0078FF, #EF0279); }

.compare-card h3 { font-size: 1.5rem; }
.compare-card ul { display: flex; flex-direction: column; gap: 0.6rem; }
.compare-card li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: #333333; }

/* Cross/tick <img> elements: sizing/alignment is set here, src to be
   provided later (img/cross-icon.svg, img/tick-icon.svg). */
.compare-icon {
  flex-shrink: 0;
  width: 0.6875rem;
  height: 0.5rem;
  display: block;
  object-fit: contain;
}
.compare-icon--cross { width: 0.5rem; height: 0.5rem; }
.compare-icon--tick { width: 0.6875rem; height: 0.5rem; }

.stats-cta { margin-top: 4.5rem; }

/* =========================================================
   PRICING — three plan cards (Starter / Professional / Premium)
   ========================================================= */
.pricing {
  background: url('../img/pricing-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pricing.section { padding-block: 6.5rem 10.25rem; }
.pricing .eyebrow.light { text-transform: uppercase; font-size: 0.75rem; color: #FFFFFF; margin-bottom: 0; }
.pricing .section-title.light { font-size: 2.5rem; font-weight: 700; line-height: 1.3; color: #FFFFFF; margin-bottom: 1.0625rem; }
.pricing .section-sub.light { font-size: 0.875rem; color: #FFFFFF99; max-width: none; }

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 4.8125rem;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #06082CE5;
  border: 1px solid #FFFFFF14;
  box-shadow: 0px 2px 14px 0px #FFFFFF26 inset;
  border-radius: 0.3125rem;
  padding: 2rem;
}
.price-card-details {
  background: #FFFFFF0F;
  padding: 1.25rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.price-plan { font-size: 0.75rem; font-style: italic; text-transform: uppercase; color: #FFFFFF99; margin-bottom: 0; }
.price-amount { font-size: 2.5rem; font-weight: 700; line-height: 1.3; color: #FFFFFF; font-family: var(--font-display); margin-top: 0.375rem; }
.price-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #FFFFFF99;
}
.price-card .btn { margin-top: 1.8125rem; min-width: 11.75rem; padding-block: 0.75rem; }

/* "Save 17%" tag next to the price */
.price-save {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 0.3125rem;
  margin-block: 0.1875rem;
  background: #FFC249;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #06082C;
}
/* "Best value" tag sitting on the top edge of the card */
.price-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.75rem;
  border-radius: 0.3125rem;
  background: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  color: #06082C;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  margin-top: 2.125rem;
  padding-left: 0.4375rem;
}
.price-features li { display: flex; align-items: center; gap: 0.9375rem; font-size: 0.875rem; line-height: 1.5; color: #FFFFFFE5; }
.price-features .price-check { flex-shrink: 0; width: 0.6875rem; height: auto; }

.price-card--highlight { background: #2E72DC; border-color: #2E72DC; }
.price-card--highlight .price-card-details { background: #FFFFFF14; }
.price-card--highlight .price-plan,
.price-card--highlight .price-after { color: #FFFFFF; }
.price-card--highlight .price-features li { color: #FFFFFF; }

/* Three columns side by side from small laptops up (incl. 1280px screens
   at 125% scaling, which report a 1024px-wide window) */
.pricing .pricing-grid { grid-template-columns: minmax(0, 87fr) minmax(0, 87fr) minmax(0, 89fr); }
/* Small laptops / tablet landscape: slimmer card padding so the 3 columns fit */
@media (max-width: 1199px) {
  .price-card { padding: 1.5rem; }
  .price-features { padding-left: 0.25rem; }
}
/* Phones and portrait tablets: one card per row, kept to a readable width */
@media (max-width: 899px) {
  .pricing .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; gap: 2.5rem; }
}
@media (max-width: 768px) {
  .pricing.section { padding-block: 4rem 5rem; }
  .pricing .section-title.light { font-size: 2rem; }
  .pricing .section-title.light br { display: none; }
  .pricing-grid { margin-top: 3.5rem; }
}
@media (max-width: 520px) {
  .price-card { padding: 1.5rem; }
  .price-features { padding-left: 0.25rem; }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials .eyebrow { text-transform: uppercase; font-size: 0.75rem; color: #06082C; }
.testimonials .section-title { font-size: 2.5rem; font-weight: 700; color: #06082C; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.875rem;
  margin-top: 3.75rem;
  align-items: start;
}
.testimonial-col { display: flex; flex-direction: column; gap: 1.875rem; }
.testimonial {
  background: #F5F5FF;
  border-radius: 0.3125rem;
  padding: 2rem;
  margin: 0;
}
.t-name { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.3rem;}
.t-role { font-size: 0.75rem; font-style: italic; text-transform: uppercase; color: #06082C; margin-bottom: 1.85rem; }
.t-copy { font-size: 0.875rem; color: #06082C; line-height: 1.5em; }
.t-copy::before { content: '"'; }
.t-copy::after { content: '"'; }
.testimonial--tall { height: 100%; }

/* =========================================================
   BLOG
   ========================================================= */
.blog .eyebrow { text-transform: uppercase; font-size: 0.75rem; color: #06082C; }
.blog .section-title { font-size: 2.5rem; font-weight: 700; color: #06082C; }
.blog .btn-white { border: 1px solid #CCCCCC; padding-block: 0.75rem; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; }
.blog-card { display: flex; flex-direction: column; }
.blog-card > img { width: 100%; aspect-ratio: 5/3; object-fit: cover; display: block; border-radius: 0.3125rem 0.3125rem 0 0; }
.blog-card-body {
  border: 1px solid #06082C1F;
  border-top: none;
  border-radius: 0 0 0.3125rem 0.3125rem;
  padding: 2rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card h3 { font-size: 1rem; font-weight: 600; line-height: 1.5em; margin-bottom: 0.5rem; }
.blog-card p { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.25rem; }
.blog-card .text-link { margin: auto 0 0; }
.blog-card .text-link span { background: #06082C; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta {
  background: url('../img/footer-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  padding-top: 6.25rem;
}
.final-cta-inner { display: grid; grid-template-columns: 45fr 55fr; gap: 6rem; align-items: center; margin-bottom: 6rem; }
.final-cta .eyebrow { text-transform: uppercase; font-size: 0.75rem; }
.final-cta .section-title { font-size: 2.5rem; font-weight: 700; }
.final-cta-content .section-title { margin-bottom: 1rem; }
.final-cta-content .section-sub { margin-bottom: 1.75rem; font-size: 0.875rem; }

.final-cta-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer-card-inner {
  background: var(--white);
  border-radius: 0.3125rem 0.3125rem 0 0;
  padding: 3.5rem 3rem 1rem;
}
.footer-grid { display: grid; grid-template-columns: 1fr auto auto auto; gap: 2rem 0; padding-bottom: 6.25rem; }
.footer-col-title { font-size: 0.75rem; font-style: italic; font-weight: 600; color: #333333; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { font-size: 0.875rem; color: #06082C; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--blue); }

@media (min-width: 1025px) {
  .footer-brand + .footer-col { margin-left: 2rem; }
  .footer-col + .footer-col { margin-left: 5.625rem; }
}

.footer-bottom {
  border-top: 1px solid #CCCCCC;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer-bottom p { font-size: 0.875rem; color: #06082C; }
.back-to-top {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.3125rem;
  background: var(--ink);
  color: var(--white);
  border: none;
  font-size: 1rem;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.back-to-top:hover { background: var(--blue); transform: translateY(-3px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  :root { --header-pad-x: 2rem; }

  .dash-body { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }

  .meet-grid { grid-template-columns: 1fr; }
  .meet-card--light { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .persona-card { flex: unset; }
  .steps-grid { grid-template-columns: 1fr; }
  .stat-number { font-size: 7.5rem; }
  .compare-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .testimonial--tall { grid-column: 1 / -1; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .final-cta-inner { grid-template-columns: 1fr; }
  .final-cta-visual { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --header-pad-x: 1.5rem; --header-pad-y: 1.25rem; --header-h: 4.5rem; }

  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    background: rgba(6,5,15,.97);
    padding: 1.5rem 2rem;
    gap: 1.25rem;
  }

  .section { padding-block: var(--space-7); }
  .reasons-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .result-banner { flex-direction: column; align-items: flex-start; }
  .stat-number { font-size: 5.625rem; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .dash-row { grid-template-columns: 1fr; }
  .dash-status-row { grid-template-columns: 1fr; }
  .dash-usage-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .header-cta .btn-sm { display: none; }
  .hero { min-height: auto; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .stat-number { font-size: 3.75rem; }
  .compare-card { padding: 2rem 1.25rem; }
}