/* Spiral Pop 2K / large desktop tuning
   Keeps the accepted 1920x1080 desktop composition untouched.
   These rules only wake up at 2000px+ so the interface does not feel tiny on 2K/large displays. */

@media (min-width: 2000px) {
  :root {
    --large-screen-edge: max(24px, calc((100vw - 1760px) / 2 + 24px));
    --large-screen-pad: max(8vw, calc((100vw - 1760px) / 2 + 112px));
  }

  .topbar {
    left: var(--large-screen-edge);
    right: var(--large-screen-edge);
    top: clamp(24px, 1.7vw, 38px);
  }

  .brand-pill {
    padding: clamp(11px, 0.75vw, 14px) clamp(15px, 1vw, 20px);
    font-size: clamp(13px, 0.62vw, 15px);
  }

  .flavour-nav {
    gap: clamp(8px, 0.55vw, 12px);
  }

  .nav-pill {
    padding: clamp(10px, 0.65vw, 14px) clamp(12px, 0.85vw, 17px);
    font-size: clamp(11px, 0.52vw, 13px);
  }

  .hero-stage {
    grid-template-columns: minmax(440px, 780px) minmax(380px, 1fr);
    gap: clamp(64px, 5vw, 112px);
    padding-top: clamp(120px, 11vh, 180px);
    padding-right: var(--large-screen-pad);
    padding-bottom: clamp(90px, 9vh, 150px);
    padding-left: var(--large-screen-pad);
  }

  .copy-stack {
    width: min(700px, 100%);
  }

  .direction-chip {
    padding: clamp(10px, 0.65vw, 14px) clamp(14px, 0.9vw, 18px);
    font-size: clamp(12px, 0.55vw, 14px);
  }

  .hero-title {
    font-size: clamp(106px, 6.5vw, 148px);
  }

  .hero-copy {
    max-width: 50ch;
    font-size: clamp(18px, 0.95vw, 22px);
  }

  .feature-badges {
    gap: clamp(10px, 0.6vw, 14px);
    margin-top: clamp(24px, 1.6vw, 34px);
    margin-bottom: clamp(25px, 1.7vw, 36px);
  }

  .badge {
    min-height: clamp(42px, 2.4vw, 50px);
    padding: clamp(11px, 0.65vw, 14px) clamp(14px, 0.9vw, 18px);
    font-size: clamp(13px, 0.62vw, 15px);
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(172px, 218px));
    gap: clamp(14px, 0.85vw, 18px);
    padding-bottom: clamp(56px, 5vh, 92px);
  }

  .stat-card {
    min-height: clamp(112px, 6.3vw, 132px);
    border-radius: clamp(24px, 1.35vw, 30px);
  }

  .stat-card__content {
    padding: clamp(16px, 0.9vw, 20px);
  }

  .stat-card strong {
    font-size: clamp(26px, 1.45vw, 32px);
  }

  .stat-card span {
    font-size: clamp(13px, 0.7vw, 15px);
  }

  .side-progress {
    right: var(--large-screen-edge);
    top: clamp(98px, 6vw, 140px);
    bottom: clamp(42px, 3vw, 70px);
  }

  .progress-caption {
    font-size: clamp(11px, 0.55vw, 13px);
  }

  .snap-hint {
    right: var(--large-screen-edge);
    bottom: clamp(20px, 1.6vw, 38px);
  }
}

@media (min-width: 2400px) {
  :root {
    --large-screen-edge: max(28px, calc((100vw - 1880px) / 2 + 28px));
    --large-screen-pad: max(9vw, calc((100vw - 1880px) / 2 + 128px));
  }

  .hero-stage {
    grid-template-columns: minmax(470px, 820px) minmax(420px, 1fr);
    gap: clamp(76px, 5vw, 128px);
  }

  .hero-title {
    font-size: clamp(118px, 5.9vw, 156px);
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(184px, 230px));
  }
}