/* ==========================================================================
   RESPONSIVE — mobile-first overrides
   ========================================================================== */

@media (max-width: 1024px) {
  .detail__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .devices { max-width: 540px; margin-inline: auto; min-height: 320px; }
  .feature__grid { grid-template-columns: 1fr 1fr; }
  .feature__center { grid-column: 1 / -1; order: -1; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav { display: none; }
  /* Mobile header: keep only the logo and the menu button (far right) */
  .header__actions .btn--cta-desktop { display: none; }
  .header__actions .icon-btn.util { display: none; }
  .header__actions > .theme-toggle { display: none; }
  .nav-toggle { display: grid; }

  .nav.is-open {
    display: flex;
    position: absolute;
    inset: calc(100% + 8px) var(--sp-4) auto var(--sp-4);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: var(--sp-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-overlay);
    animation: dropIn 0.25s var(--ease-out);
  }
  .nav.is-open .nav__link { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }
  @keyframes dropIn { from { opacity: 0; transform: translateY(-10px); } }

  /* Theme toggle as a row inside the drawer */
  .nav.is-open .nav__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--fs-base);
    text-align: left;
  }

}

/* Hero background: shift focus + strengthen overlay so copy stays readable */
@media (max-width: 860px) {
  .hero { background-position: 40% center; min-height: clamp(440px, 92vw, 560px); }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(28,12,4,.5) 0%, rgba(28,12,4,.72) 55%, rgba(28,12,4,.9) 100%);
  }
  .hero__content { max-width: 100%; margin-left: 0; margin-right: 0; }
}

@media (max-width: 560px) {
  .container { padding-inline: var(--sp-4); }
  .feature__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .spark-stage { height: 230px; }
  .spark__title { font-size: var(--fs-2xl); }
  .hero__meta { gap: var(--sp-5); }
  .devices { min-height: 320px; }
  .devices .shot { width: 92%; }
  .footer__links { gap: var(--sp-5) var(--sp-6); }
  .footer__bar { justify-content: center; text-align: center; }
  .topbar__inner { font-size: var(--fs-xs); }
}