/* ==========================================================================
   ZOTOM TECH — Responsive
   Breakpoints: 1080 (small desktop/tablet landscape), 780 (tablet), 540 (mobile)
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin: 0 auto; order: -1; }
  .hero { padding-top: 130px; }

  .case-feature { grid-template-columns: 1fr; gap: 40px; }
  .story-block { grid-template-columns: 1fr; gap: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .team-row { grid-template-columns: 1fr 1fr; }
  .case-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-layout { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; }
  .explorer-list { border-right: none; border-bottom: 1px solid var(--border); }
  .service-block { grid-template-columns: 1fr; gap: 28px; }
  .service-block .service-index { font-size: 40px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card.is-featured { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .nav-links { 
    position: fixed;
    top: 0; right: 0;
    height: 100svh;
    width: min(78vw, 340px);
    background: var(--drawer-bg);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    border-left: 1px solid var(--border);
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { font-size: 20px; }
  .nav-toggle { display: flex; }
  .header-actions .btn-ghost { display: none; }
  .header-actions { gap: 10px; }

  .values-grid { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: 1fr; }
  .advantage-row { grid-template-columns: 1fr; gap: 12px; }
  .advantage-row .idx { padding-top: 0; }
  .case-detail { padding: 28px; }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  :root { --gutter: 20px; }
  .section { padding: 84px 0; }
  .section-tight { padding: 64px 0; }
  .hero { padding-top: 118px; padding-bottom: 64px; min-height: auto; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { gap: 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .page-hero { padding: 128px 0 56px; }
  .case-frame { aspect-ratio: 4/3.4; }
  .cta-band { padding: 76px 0; }
  .marquee-track span { font-size: 12px; }
  .brand img { height: 20px; }
}