/* ─── TOKENS ─────────────────────────────────────────────────────────── */
  :root {
      --c-bg: #FAFAF9;
      --c-surface: #FFFFFF;
      --c-border: #E8E6E1;
      --c-border-light: #F0EEE9;
      --c-text-primary: #18181B;
      --c-text-secondary: #6B7280;
      --c-text-muted: #9CA3AF;
      --c-accent: #1A6B4A;
      --c-accent-light: #E8F5EF;
      --c-accent-hover: #155E3E;
      --c-amber: #D97706;
      --c-amber-light: #FEF3C7;

      --r-sm: 6px;
      --r-md: 10px;
      --r-lg: 16px;
      --r-xl: 24px;
      --r-full: 100px;

      --sh-xs: 0 1px 2px rgba(0, 0, 0, .05);
      --sh-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
      --sh-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
      --sh-lg: 0 12px 32px rgba(0, 0, 0, .10), 0 4px 8px rgba(0, 0, 0, .04);

      --font-display: 'Sora', 'Inter', sans-serif;
      --font-body: 'Inter', sans-serif;

      --nav-h: 56px;

      /* Responsive spacing scale */
      --space-section-y: clamp(48px, 8vh, 80px);
      --space-inner-x: clamp(16px, 4vw, 40px);
      --content-max: 1120px;
  }

  [data-theme="dark"] {
      --c-bg: #111110;
      --c-surface: #1C1C1A;
      --c-border: #2A2A28;
      --c-border-light: #232321;
      --c-text-primary: #F4F3F0;
      --c-text-secondary: #A09F99;
      --c-text-muted: #6B6A64;
      --c-accent: #22C278;
      --c-accent-light: #0D2B1F;
      --c-accent-hover: #1EAA69;
      --c-amber: #F59E0B;
      --c-amber-light: #1F1500;
      --sh-xs: 0 1px 2px rgba(0, 0, 0, .2);
      --sh-sm: 0 1px 3px rgba(0, 0, 0, .3);
      --sh-md: 0 4px 12px rgba(0, 0, 0, .4);
      --sh-lg: 0 12px 32px rgba(0, 0, 0, .5);
  }

  /* ─── RESET ───────────────────────────────────────────────────────────── */
  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      /* Prevent horizontal scroll at all sizes */
      overflow-x: hidden;
  }

  body {
      font-family: var(--font-body);
      background: var(--c-bg);
      color: var(--c-text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      transition: background .2s, color .2s;
      overflow-x: hidden;
      /* Ensure body never exceeds viewport width */
      width: 100%;
      min-width: 320px;
  }

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

  a {
      color: inherit;
      text-decoration: none;
  }

  ul {
      list-style: none;
  }

  button {
      cursor: pointer;
      font-family: inherit;
      border: none;
      background: none;
  }

  /* ─── NAV ─────────────────────────────────────────────────────────────── */
  .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      height: var(--nav-h);
      background: rgba(250, 250, 249, .92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--c-border);
      transition: background .2s;
  }

  [data-theme="dark"] .nav {
      background: rgba(17, 17, 16, .92);
  }

  .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 var(--space-inner-x);
      gap: 12px;
  }

  .nav-logo {
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 700;
      color: var(--c-text-primary);
      letter-spacing: -.02em;
      flex-shrink: 0;
  }

  .nav-logo-mark {
      width: 30px;
      height: 30px;
      background: var(--c-accent);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .nav-logo-mark svg {
      width: 16px;
      height: 16px;
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      /* Allow links to shrink on smaller desktops */
      flex-wrap: nowrap;
      overflow: hidden;
  }

  .nav-link {
      font-size: 13px;
      font-weight: 500;
      color: var(--c-text-secondary);
      padding: 5px 10px;
      border-radius: var(--r-sm);
      transition: color .12s, background .12s;
      white-space: nowrap;
  }

  .nav-link:hover {
      color: var(--c-text-primary);
      background: var(--c-border-light);
  }

  .nav-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
  }

  .nav-theme-btn {
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--c-text-secondary);
      border: 1px solid var(--c-border);
      transition: all .12s;
      flex-shrink: 0;
  }

  .nav-theme-btn:hover {
      color: var(--c-text-primary);
      border-color: var(--c-text-muted);
  }

  .nav-menu-btn {
      display: none;
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
      align-items: center;
      justify-content: center;
      color: var(--c-text-primary);
      border: 1px solid var(--c-border);
      flex-shrink: 0;
  }

  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 600;
      border-radius: var(--r-md);
      padding: 8px 16px;
      transition: all .15s ease;
      white-space: nowrap;
      line-height: 1;
  }

  .btn-primary {
      background: var(--c-accent);
      color: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
  }

  .btn-primary:hover {
      background: var(--c-accent-hover);
      transform: translateY(-1px);
      box-shadow: var(--sh-md);
  }

  .btn-secondary {
      background: var(--c-surface);
      color: var(--c-text-primary);
      border: 1px solid var(--c-border);
      box-shadow: var(--sh-xs);
  }

  .btn-secondary:hover {
      border-color: var(--c-text-muted);
  }

  /* Mobile drawer */
  .nav-mobile {
      display: none;
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      background: var(--c-surface);
      border-bottom: 1px solid var(--c-border);
      padding: 16px 20px 20px;
      z-index: 199;
      box-shadow: var(--sh-lg);
  }

  .nav-mobile.open {
      display: block;
  }

  .nav-mobile-links {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 16px;
  }

  .nav-mobile-link {
      font-size: 15px;
      font-weight: 500;
      color: var(--c-text-secondary);
      padding: 10px 12px;
      border-radius: var(--r-sm);
  }

  .nav-mobile-link:hover {
      background: var(--c-bg);
      color: var(--c-text-primary);
  }

  .nav-mobile-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .nav-mobile-actions .btn {
      width: 100%;
      font-size: 15px;
      padding: 12px 20px;
      border-radius: var(--r-lg);
  }

  /* ─── FULL-SCREEN SECTIONS ────────────────────────────────────────────── */
  /*
         * Changed from min-height: 100svh to min-height: auto with padding.
         * Reason: 100svh forces sections to be full-screen height which creates
         * excessive whitespace on wide monitors and tablets. Sections should be
         * as tall as their content needs, with generous but proportional padding.
         */
  .fs-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
  }

  .fs-section:first-of-type {
      padding-top: var(--nav-h);
      /* Hero gets a minimum height to feel grand, not full-screen forced */
      min-height: min(100svh, 900px);
  }

  .fs-section+.fs-section {
      border-top: 1px solid var(--c-border-light);
  }

  /*
         * Unified inner container.
         * Using clamp() for horizontal padding so it scales from 16px on mobile
         * to 40px on wide screens without needing breakpoints.
         * Max-width prevents content from stretching on ultra-wide displays.
         */
  .fs-inner {
      width: 100%;
      max-width: var(--content-max);
      margin: 0 auto;
      padding: var(--space-section-y) var(--space-inner-x);
  }

  /* ─── EYEBROW ─────────────────────────────────────────────────────────── */
  .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--c-accent);
      margin-bottom: 10px;
  }

  .eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--c-accent);
      flex-shrink: 0;
  }

  /* ─── HERO ────────────────────────────────────────────────────────────── */
  .hero {
      background: var(--c-bg);
  }

  /*
         * Hero layout uses CSS Grid for two-column on large screens.
         * min() on column sizes prevents the visual from overflowing on tablets.
         */
  .hero-layout {
      display: grid;
      grid-template-columns: 1fr min(48%, 520px);
      gap: clamp(28px, 5vw, 64px);
      align-items: center;
  }

  .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--c-amber-light);
      border: 1px solid rgba(217, 119, 6, .2);
      border-radius: var(--r-full);
      padding: 4px 12px 4px 8px;
      font-size: 12px;
      font-weight: 500;
      color: var(--c-amber);
      margin-bottom: 18px;
  }

  .hero-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--c-amber);
      animation: pulse 2s infinite;
  }

  @keyframes pulse {

      0%,
      100% {
          opacity: 1
      }

      50% {
          opacity: .4
      }
  }

  .hero-headline {
      font-family: var(--font-display);
      font-size: clamp(28px, 4.5vw, 52px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.03em;
      color: var(--c-text-primary);
      margin-bottom: 16px;
  }

  .hero-headline em {
      font-style: normal;
      color: var(--c-accent);
  }

  .hero-sub {
      font-size: clamp(14px, 1.5vw, 17px);
      color: var(--c-text-secondary);
      line-height: 1.65;
      margin-bottom: 28px;
      max-width: 460px;
  }

  .hero-cta-group {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 32px;
  }

  .btn-hero-primary {
      background: var(--c-accent);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      padding: 13px 24px;
      border-radius: var(--r-lg);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
      transition: all .15s;
  }

  .btn-hero-primary:hover {
      background: var(--c-accent-hover);
      transform: translateY(-1px);
      box-shadow: var(--sh-md);
  }

  .btn-hero-secondary {
      background: var(--c-surface);
      color: var(--c-text-primary);
      font-size: 15px;
      font-weight: 600;
      padding: 13px 24px;
      border-radius: var(--r-lg);
      border: 1px solid var(--c-border);
      box-shadow: var(--sh-xs);
      transition: all .15s;
  }

  .btn-hero-secondary:hover {
      border-color: var(--c-text-muted);
  }

  .hero-trust {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
  }

  .hero-avatars {
      display: flex;
      flex-shrink: 0;
  }

  .hero-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid var(--c-surface);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--c-text-secondary);
      margin-left: -7px;
  }

  .hero-avatar:first-child {
      margin-left: 0;
  }

  .avatar-unn {
      background: #DBEAFE;
      color: #1D4ED8;
  }

  .avatar-ui {
      background: #FCE7F3;
      color: #9D174D;
  }

  .avatar-abu {
      background: #D1FAE5;
      color: #065F46;
  }

  .avatar-lasu {
      background: #FEF3C7;
      color: #92400E;
  }

  .avatar-more {
      background: var(--c-border);
      color: var(--c-text-secondary);
  }

  .hero-trust-text {
      font-size: 12px;
      color: var(--c-text-secondary);
      line-height: 1.4;
  }

  .hero-trust-text strong {
      color: var(--c-text-primary);
      font-weight: 600;
  }

  /* Hero visual */
  .hero-visual {
      position: relative;
      /* Ensure the card column never causes overflow */
      min-width: 0;
  }

  .hero-card-stack {
      position: relative;
      padding: 20px 12px;
  }

  .hero-main-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--r-xl);
      padding: clamp(14px, 2.5vw, 20px);
      box-shadow: var(--sh-lg);
  }

  .hmc-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      gap: 8px;
  }

  .hmc-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--c-text-muted);
      text-transform: uppercase;
      letter-spacing: .06em;
  }

  .hmc-badge {
      font-size: 11px;
      font-weight: 600;
      background: var(--c-accent-light);
      color: var(--c-accent);
      padding: 3px 8px;
      border-radius: var(--r-full);
      white-space: nowrap;
  }

  .service-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .service-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: var(--r-md);
      border: 1px solid var(--c-border-light);
      background: var(--c-bg);
  }

  .si-icon {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
  }

  .si-info {
      flex: 1;
      min-width: 0;
  }

  .si-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--c-text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .si-school {
      font-size: 11px;
      color: var(--c-text-muted);
  }

  .si-price {
      font-size: 13px;
      font-weight: 700;
      color: var(--c-accent);
      flex-shrink: 0;
  }

  /*
         * Float badges: positioned relative to card-stack.
         * Hidden below 900px to prevent overflow on narrow viewports.
         */
  .hero-float {
      position: absolute;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg);
      padding: 10px 14px;
      box-shadow: var(--sh-md);
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      white-space: nowrap;
      z-index: 2;
  }

  .hero-float-1 {
      top: 0;
      right: 0;
  }

  .hero-float-2 {
      bottom: 0;
      left: 0;
  }

  .hf-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
  }

  .hf-green {
      background: #22C55E;
  }

  .hf-amber {
      background: var(--c-amber);
  }

  .hf-text {
      font-weight: 600;
      color: var(--c-text-primary);
  }

  .hf-sub {
      font-size: 11px;
      color: var(--c-text-muted);
  }

  /* ─── PROOF / STATS ───────────────────────────────────────────────────── */
  .proof-section {
      background: var(--c-surface);
  }

  .proof-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(24px, 4vw, 40px);
      text-align: center;
  }

  .proof-headline {
      font-family: var(--font-display);
      font-size: clamp(20px, 3vw, 32px);
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--c-text-primary);
  }

  /*
         * Stats grid: 4 columns on desktop, 2 on tablet, 2 on mobile.
         * Using auto-fit with minmax so intermediate sizes get sane layouts.
         */
  .proof-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      width: 100%;
      border: 1px solid var(--c-border);
      border-radius: var(--r-xl);
      overflow: hidden;
  }

  .proof-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: clamp(18px, 3vw, 28px) 16px;
      background: var(--c-bg);
  }

  .proof-stat+.proof-stat {
      border-left: 1px solid var(--c-border);
  }

  .proof-stat-number {
      font-family: var(--font-display);
      font-size: clamp(22px, 3.5vw, 36px);
      font-weight: 700;
      color: var(--c-text-primary);
      letter-spacing: -.03em;
      line-height: 1;
  }

  .proof-stat-number span {
      color: var(--c-accent);
  }

  .proof-stat-label {
      font-size: 12px;
      color: var(--c-text-muted);
      margin-top: 5px;
  }

  .uni-list {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      flex-wrap: wrap;
  }

  .uni-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border: 1px solid var(--c-border);
      border-radius: var(--r-full);
      font-size: 12px;
      font-weight: 500;
      color: var(--c-text-secondary);
      background: var(--c-surface);
  }

  .uni-tag-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
  }

  .uni-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--c-text-muted);
      margin-bottom: 12px;
      text-align: center;
  }

  /* ─── FEATURES ────────────────────────────────────────────────────────── */
  .features-section {
      background: var(--c-bg);
  }

  .section-header {
      margin-bottom: clamp(24px, 4vw, 40px);
  }

  .section-headline {
      font-family: var(--font-display);
      font-size: clamp(22px, 3.5vw, 36px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.02em;
      color: var(--c-text-primary);
      margin-bottom: 10px;
  }

  .section-sub {
      font-size: clamp(14px, 1.5vw, 15px);
      color: var(--c-text-secondary);
      max-width: 520px;
      line-height: 1.65;
  }

  /*
         * Features grid: 3 columns → 2 → 1.
         * auto-fill with minmax handles intermediate breakpoints naturally.
         */
  .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(8px, 1.5vw, 14px);
  }

  .feat-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg);
      padding: clamp(16px, 2.5vw, 24px);
      transition: box-shadow .15s, border-color .15s;
  }

  .feat-card:hover {
      box-shadow: var(--sh-md);
  }

  .feat-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      margin-bottom: 14px;
  }

  .feat-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--c-text-primary);
      margin-bottom: 6px;
      letter-spacing: -.01em;
  }

  .feat-desc {
      font-size: 13px;
      color: var(--c-text-secondary);
      line-height: 1.6;
  }

  /* ─── CATEGORIES ──────────────────────────────────────────────────────── */
  .categories-section {
      background: var(--c-surface);
  }

  .categories-layout {
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 3vw, 32px);
  }

  .categories-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
  }

  .cat-chip {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 16px;
      background: var(--c-bg);
      border: 1px solid var(--c-border);
      border-radius: var(--r-full);
      font-size: 13px;
      font-weight: 500;
      color: var(--c-text-secondary);
      transition: all .12s;
  }

  .cat-chip:hover {
      border-color: var(--c-accent);
      color: var(--c-accent);
      background: var(--c-accent-light);
  }

  /* ─── HOW IT WORKS ────────────────────────────────────────────────────── */
  .hiw-section {
      background: var(--c-bg);
  }

  .hiw-layout {
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 4vw, 48px);
  }

  .hiw-steps {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: start;
  }

  .hiw-step {
      text-align: center;
      padding: 0 12px;
  }

  .hiw-step-num {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid var(--c-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: var(--c-accent);
      margin: 0 auto 14px;
      background: var(--c-accent-light);
      flex-shrink: 0;
  }

  .hiw-step-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--c-text-primary);
      margin-bottom: 6px;
  }

  .hiw-step-desc {
      font-size: 13px;
      color: var(--c-text-secondary);
      line-height: 1.6;
  }

  .hiw-arrow {
      display: flex;
      align-items: center;
      padding-top: 12px;
      color: var(--c-border);
  }

  .hiw-arrow svg {
      width: 24px;
      height: 24px;
  }

  /* ─── TESTIMONIALS ────────────────────────────────────────────────────── */
  .testi-section {
      background: var(--c-surface);
  }

  .testi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(8px, 1.5vw, 14px);
  }

  .testi-card {
      background: var(--c-bg);
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg);
      padding: clamp(16px, 2.5vw, 24px);
  }

  .testi-quote {
      font-size: 14px;
      color: var(--c-text-primary);
      line-height: 1.65;
      margin-bottom: 18px;
  }

  .testi-quote::before {
      content: '\201C';
      color: var(--c-accent);
      font-size: 20px;
      line-height: 0;
      vertical-align: -5px;
      margin-right: 2px;
  }

  .testi-quote::after {
      content: '\201D';
      color: var(--c-accent);
      font-size: 20px;
      line-height: 0;
      vertical-align: -5px;
      margin-left: 2px;
  }

  .testi-author {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .testi-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
  }

  .testi-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--c-text-primary);
  }

  .testi-role {
      font-size: 11px;
      color: var(--c-text-muted);
  }

  .testi-rating {
      margin-left: auto;
      font-size: 12px;
      color: var(--c-amber);
      letter-spacing: 1px;
      flex-shrink: 0;
  }

  /* ─── FINAL CTA ───────────────────────────────────────────────────────── */
  .cta-section {
      background: var(--c-accent);
  }

  [data-theme="dark"] .cta-section {
      background: #0D2B1F;
      border-top: 1px solid #1A6B4A;
  }

  .cta-content {
      text-align: center;
      max-width: 520px;
      margin: 0 auto;
  }

  .cta-eyebrow {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .65);
      margin-bottom: 14px;
  }

  [data-theme="dark"] .cta-eyebrow {
      color: var(--c-accent);
  }

  .cta-headline {
      font-family: var(--font-display);
      font-size: clamp(24px, 4vw, 40px);
      font-weight: 700;
      letter-spacing: -.025em;
      color: #fff;
      line-height: 1.15;
      margin-bottom: 14px;
  }

  [data-theme="dark"] .cta-headline {
      color: var(--c-text-primary);
  }

  .cta-sub {
      font-size: clamp(14px, 1.5vw, 16px);
      color: rgba(255, 255, 255, .75);
      margin-bottom: 32px;
      line-height: 1.6;
  }

  [data-theme="dark"] .cta-sub {
      color: var(--c-text-secondary);
  }

  .cta-btns {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
  }

  .btn-cta-primary {
      background: #fff;
      color: var(--c-accent);
      font-size: 15px;
      font-weight: 700;
      padding: 13px 26px;
      border-radius: var(--r-lg);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
      transition: all .15s;
  }

  .btn-cta-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  }

  [data-theme="dark"] .btn-cta-primary {
      background: var(--c-accent);
      color: #fff;
  }

  .btn-cta-secondary {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, .85);
      padding: 13px 20px;
      border-radius: var(--r-lg);
      border: 1px solid rgba(255, 255, 255, .25);
      transition: all .15s;
  }

  .btn-cta-secondary:hover {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(255, 255, 255, .5);
  }

  [data-theme="dark"] .btn-cta-secondary {
      color: var(--c-text-secondary);
      border-color: var(--c-border);
  }

  [data-theme="dark"] .btn-cta-secondary:hover {
      color: var(--c-text-primary);
  }

  /* ─── FOOTER ──────────────────────────────────────────────────────────── */
  .footer {
      background: var(--c-surface);
      border-top: 1px solid var(--c-border);
      padding: clamp(32px, 5vw, 48px) 0 clamp(20px, 3vw, 28px);
  }

  .footer-inner {
      max-width: var(--content-max);
      margin: 0 auto;
      padding: 0 var(--space-inner-x);
  }

  .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: clamp(24px, 4vw, 48px);
      margin-bottom: clamp(24px, 3vw, 36px);
  }

  .footer-brand-desc {
      font-size: 13px;
      color: var(--c-text-muted);
      line-height: 1.7;
      margin-top: 10px;
      max-width: 240px;
  }

  .footer-col-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--c-text-muted);
      margin-bottom: 12px;
  }

  .footer-links {
      display: flex;
      flex-direction: column;
      gap: 7px;
  }

  .footer-link {
      font-size: 13px;
      color: var(--c-text-secondary);
      transition: color .1s;
  }

  .footer-link:hover {
      color: var(--c-text-primary);
  }

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

  .footer-copy {
      font-size: 12px;
      color: var(--c-text-muted);
  }

  .footer-legal {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
  }

  .footer-legal a {
      font-size: 12px;
      color: var(--c-text-muted);
  }

  .footer-legal a:hover {
      color: var(--c-text-secondary);
  }

  /* ─── SCROLL INDICATOR ────────────────────────────────────────────────── */
  .scroll-indicator {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      opacity: .45;
      animation: fadeInUp .6s ease .8s both;
  }

  .scroll-indicator span {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--c-text-muted);
  }

  .scroll-chevron {
      animation: bounce 1.8s ease-in-out infinite;
      color: var(--c-text-muted);
  }

  @keyframes bounce {

      0%,
      100% {
          transform: translateY(0)
      }

      50% {
          transform: translateY(5px)
      }
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateX(-50%) translateY(8px)
      }

      to {
          opacity: .45;
          transform: translateX(-50%) translateY(0)
      }
  }

  /* ─── RESPONSIVE BREAKPOINTS ──────────────────────────────────────────── */

  /*
         * 1100px — Small laptops / large tablets landscape
         * Nav links start to crowd, switch to hamburger earlier.
         * Features can stay 3-col but footer collapses to 2+2.
         */
  @media (max-width: 1100px) {
      .footer-top {
          grid-template-columns: 1fr 1fr 1fr;
      }

      .footer-brand {
          grid-column: 1 / -1;
      }

      .footer-brand-desc {
          max-width: 100%;
      }
  }

  /*
         * 900px — Tablets and small laptops
         * Hero goes single column (visual above copy for visual hierarchy).
         * Features → 2 columns. HIW steps → vertical list.
         * Stats → 2×2 grid.
         */
  @media (max-width: 900px) {
      .hero-layout {
          grid-template-columns: 1fr;
          gap: 32px;
      }

      /* Visual first on tablet/mobile so user sees the product immediately */
      .hero-visual {
          order: -1;
      }

      /* Constrain float badges so they don't overflow the narrower card */
      .hero-float-1 {
          top: 0;
          right: 4px;
      }

      .hero-float-2 {
          bottom: 0;
          left: 4px;
      }

      .features-grid {
          grid-template-columns: 1fr 1fr;
      }

      .testi-grid {
          grid-template-columns: 1fr 1fr;
      }

      /* HIW vertical list on tablet */
      .hiw-steps {
          grid-template-columns: 1fr;
      }

      .hiw-arrow {
          display: none;
      }

      .hiw-step {
          text-align: left;
          padding: 18px 0;
          border-bottom: 1px solid var(--c-border-light);
          display: flex;
          align-items: flex-start;
          gap: 16px;
      }

      .hiw-step:last-child {
          border-bottom: none;
      }

      .hiw-step-num {
          margin: 0;
      }

      /* Stats: 2×2 with correct border resets */
      .proof-stats {
          grid-template-columns: repeat(2, 1fr);
      }

      .proof-stat+.proof-stat {
          border-left: none;
      }

      .proof-stat:nth-child(odd) {
          border-right: 1px solid var(--c-border);
      }

      .proof-stat:nth-child(n+3) {
          border-top: 1px solid var(--c-border);
      }

      .footer-top {
          grid-template-columns: 1fr 1fr;
          gap: 24px;
      }

      .footer-brand {
          grid-column: 1 / -1;
      }

      .footer-brand-desc {
          max-width: 100%;
      }
  }

  /*
         * 640px — Phones
         * Single column everything.
         * Float badges hidden (too small to fit without overflow).
         * CTA buttons go full-width stacked.
         */
  @media (max-width: 640px) {
      :root {
          --nav-h: 52px;
          /* Tighter section padding on mobile */
          --space-section-y: clamp(36px, 7vw, 56px);
      }

      /* Nav: hide desktop links, show hamburger */
      .nav-links,
      .nav-desktop-cta {
          display: none;
      }

      .nav-menu-btn {
          display: flex;
      }

      /* Hero: single column, stacked */
      .hero-layout {
          grid-template-columns: 1fr;
          gap: 24px;
      }

      /* Float badges hidden on small phones — they'd clip */
      .hero-float {
          display: none;
      }

      /* Remove excess padding from card stack since floats are gone */
      .hero-card-stack {
          padding: 0;
      }

      /* CTA buttons: full width stacked */
      .hero-cta-group {
          flex-direction: column;
          align-items: stretch;
      }

      .btn-hero-primary,
      .btn-hero-secondary {
          width: 100%;
          justify-content: center;
      }

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

      /* Testimonials: 1 column */
      .testi-grid {
          grid-template-columns: 1fr;
      }

      /* Stats: keep 2 columns even on small phones (numbers are short) */
      .proof-stats {
          grid-template-columns: repeat(2, 1fr);
      }

      /* Footer: fully stacked */
      .footer-top {
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .footer-brand {
          grid-column: auto;
      }

      .footer-brand-desc {
          max-width: 100%;
      }

      .footer-bottom {
          flex-direction: column;
          text-align: center;
      }

      .footer-legal {
          justify-content: center;
      }

      /* CTA section buttons: full width */
      .cta-btns {
          flex-direction: column;
          align-items: stretch;
      }

      .btn-cta-primary,
      .btn-cta-secondary {
          width: 100%;
          justify-content: center;
      }

      /* Scroll indicator: hidden on mobile (redundant on touch) */
      .scroll-indicator {
          display: none;
      }
  }

  /*
         * 400px — Very small phones (320px–400px)
         * Extra adjustments for extremely narrow viewports.
         */
  @media (max-width: 400px) {
      .hero-badge {
          font-size: 11px;
          padding: 4px 10px 4px 7px;
      }

      /* Ensure nav logo text doesn't wrap */
      .nav-logo {
          font-size: 15px;
      }

      .cat-chip {
          font-size: 12px;
          padding: 8px 12px;
      }

      /* Stack testi-author on very small screens */
      .testi-author {
          flex-wrap: wrap;
      }

      .testi-rating {
          margin-left: 0;
      }
  }

  /*
         * 1400px+ — Ultra-wide monitors
         * Content is capped at 1120px by --content-max, so sections just get
         * more breathing room in the background. No layout shifts needed.
         * Increase section padding slightly for a more spacious feel.
         */
  @media (min-width: 1400px) {
      :root {
          --space-section-y: clamp(72px, 6vw, 96px);
      }
  }

  /* ─── UTILITY ─────────────────────────────────────────────────────────── */
  .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
  }

  /* Focus styles for keyboard accessibility */
  :focus-visible {
      outline: 2px solid var(--c-accent);
      outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
          animation-duration: .01ms !important;
          transition-duration: .01ms !important;
      }
  }