@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .strip-grid{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  /* header.hero{ padding: var(--space-5) 0 var(--space-4); } */ /* Removed first occurrence */
  .links{ display: none; }

  /* Mobile header compression: prevent brand from wrapping and keep CTA compact */
  .nav{ padding-top: calc(10px + var(--safe-t)); }
  .nav-inner{ gap: 10px; }
  .brand{
    max-width: 62%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav .cta{
    width: auto;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Mobile hero typography: reduce “heavy” feel and improve rhythm */
  header.hero h1{
    font-size: clamp(34px, 8.5vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .kicker{ padding: 10px 12px; font-size: 13px; gap: 10px; }
  .lead{ font-size: 16px; line-height: 1.55; }
  .hero-actions{ margin-top: 18px; }
  .micro{ margin-top: 16px; gap: 8px; }
  .micro > span{ padding: 9px 11px; font-size: 14px; }

  /* Mobile ergonomics: tighter rhythm + safer bottom spacing */
  body{ padding-bottom: var(--safe-b); }

  /* Reduce large desktop spacing tokens on small screens */
  :root{
    --space-0: 6px;
    --space-1: 10px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 36px;
    --space-5: 52px;
    --space-6: 72px;
  }

  header.hero{ padding: var(--space-4) 0 var(--space-4); }
  section{ padding: var(--space-4) 0; }
  .hero-grid > .cover-card{ order: -1; }

  /* Cards/strips: reduce heavy glass + oversized padding */
  .strip{ padding: var(--space-3); }
  .card{ padding: var(--space-2); border-radius: var(--radius); }
  .cover-card{ border-radius: var(--radius-lg); }
  .cover-card img{ height: clamp(280px, 72vw, 440px); }
  .cover-meta{ flex-wrap: wrap; row-gap: 6px; }

  /* Make CTAs easier to tap and keep them above browser chrome */
  .hero-actions{ gap: 12px; }
  .hero-actions .cta, .hero-actions .ghost{ width: 100%; justify-content: center; }

  /* Improve readability inside glass panels */
  .lead{ max-width: 60ch; }

  .foot-grid{ grid-template-columns: 1fr; }
  .foot-actions{ align-items: flex-start; text-align: left; }
  .info-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .info-val{ text-align: left; }

  section::before{ opacity: .22; inset: -24px 0; }
  body::after{ opacity: var(--bg-glow-opacity); }
  details{ padding: 14px 16px; }

  .cover-card{
    padding: 22px 18px 26px;
  }
  .cover-card img{
    margin: 10px auto 6px;
  }
}

@media (max-width: 640px){
  :root{
    --bg-stars-opacity: 0.045;
    --bg-glow-opacity: 0.14;
  }
}