/* SBW PROJECT — responsive.css */

@media (max-width: 1100px) {
  .hero-grid, .ecosystem-grid, .about-grid, .contact-grid { gap: 54px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-system { max-width: 820px; }
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .brand-card:last-child { grid-column: 1 / -1; }
  .brand-card:last-child .brand-media { height: 220px; }
  .section-heading { gap: 40px; }
  .future-box { grid-template-columns: 1fr 1fr; }
  .future-plus { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 32px), var(--max)); }
  .section { padding: 82px 0; }
  .header-inner { min-height: 72px; }
  .menu-toggle { display: block; position: relative; z-index: 102; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 101;
    padding: 120px 28px 40px;
    background: rgba(243,244,246,.98);
    backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    font-size: 1.4rem;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .site-nav.is-open { transform: translateX(0); }
  body.menu-open { overflow: hidden; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { padding-top: 132px; }
  .hero-copy h1 { font-size: clamp(3.4rem, 15vw, 5.8rem); }
  .hero-stats { margin-top: 42px; }
  .hero-system { padding: 34px 22px 24px; border-radius: 24px; }
  .system-nodes { grid-template-columns: 1fr 1fr; }
  .system-line::after { min-width: 220px; }

  .section-heading, .ecosystem-grid, .about-grid, .contact-grid, .content-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr; }
  .brand-card:last-child { grid-column: auto; }
  .brand-card:last-child .brand-media { height: 280px; }
  .principles { grid-template-columns: 1fr; }
  .principles article { min-height: 190px; }
  .principles h3 { margin-top: 38px; }
  .about-visual { min-height: 430px; }
  .future-box { grid-template-columns: 1fr; padding: 34px; }
  .future-plus { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-brand { align-items: center; }
  .content-grid aside { position: static; }
  .contact-options { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .section { padding: 68px 0; }
  .hero { padding: 116px 0 64px; }
  .hero-copy h1 { font-size: 3.35rem; }
  .hero-lead { font-size: 1rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats div { display: flex; align-items: baseline; gap: 14px; }
  .system-root { padding: 20px 14px; }
  .system-nodes { grid-template-columns: 1fr; }
  .system-line { height: 30px; }
  .system-line::after { display: none; }
  .system-node { min-height: 110px; }
  .brand-media { height: 220px !important; }
  .brand-card h3 { font-size: 1.7rem; }
  .section h2 { font-size: 2.7rem; }
  .about-visual { min-height: 340px; }
  .future-box { padding: 26px; gap: 30px; }
  .page-hero { padding: 130px 0 62px; }
  .page-hero h1 { font-size: 3.4rem; }
  .brand-detail { grid-template-columns: 1fr; }
}