/* ==========================================================================
   SKY — Responsive Rules
   ========================================================================== */

/* Large desktop refinement */
@media (min-width: 1600px){
  :root{ --container: 1360px; }
}

/* Laptop / small desktop */
@media (max-width: 1180px){
  .footer-top{ grid-template-columns: 1fr; gap: 2rem; }
  .footer-nav{ justify-content: flex-start; }
  .ecosystem-detail{ grid-template-columns: 1fr; }
  .founder-preview{ grid-template-columns: 0.9fr 1.1fr; }
}

/* Tablet */
@media (max-width: 1024px){
  .nav-links{ display: none; }
  .nav-cta{ display: none; }
  .hamburger{ display: block; }
  .split{ grid-template-columns: 1fr; gap: 2.5rem; }
  .split.reverse .split-media{ order: 0; }
  .accordion-body{ grid-template-columns: 1fr; gap: 1.2rem; }
  .pathway-caps{ grid-template-columns: 1fr; }
  .founder-preview{ grid-template-columns: 1fr; }
  .founder-preview img{ max-width: 260px; aspect-ratio: 4/5; margin-inline: auto; }
}

/* Ecosystem: switch from curved desktop path to vertical mobile timeline */
@media (max-width: 760px){
  .eco-desktop{ display: none; }
  .eco-mobile{ display: block; }
  .ecosystem-detail{ grid-template-columns: 1fr; }
  .builds-item{ grid-template-columns: 48px 1fr; gap: 1.1rem; }
  .builds-icon{ width: 44px; height: 44px; }
  .builds-icon svg{ width: 19px; height: 19px; }
}

/* Journey timeline tightens on small screens */
@media (max-width: 860px){
  .journey-item{ grid-template-columns: 54px 1fr; gap: 1.1rem; }
}

/* Mobile */
@media (max-width: 640px){
  .h1{ font-size: clamp(2.1rem, 9vw, 3rem); }
  .section{ padding-block: clamp(3rem, 12vw, 5rem); }
  .row-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .accordion-trigger{ gap: 0.8rem; }
  .accordion-trigger .idx{ display: none; }
  .contact-grid{ grid-template-columns: 1fr; }
  .intent-grid{ grid-template-columns: 1fr; }
  .explore-grid{ grid-template-columns: 1fr; }
  .pathway-flow{ gap: 0.4rem; }
  .pathway-flow .step{ padding: 0.6rem 0.9rem; font-size: 0.85rem; }
}

/* Very small phones */
@media (max-width: 380px){
  .wrap{ padding-inline: 1.1rem; }
  .brand span{ display: none; }
  /* Safety net: a long button label should wrap rather than overflow */
  .btn{ white-space: normal; text-align: center; }
}

/* Prevent any accidental horizontal scroll */
html, body{ max-width: 100%; }