/* ==========================================================================
   XHYPHER TECH — RESPONSIVE
   Tablet breakpoints (1024px / 860px) are unchanged from the original
   design. Everything from 767px down is the dedicated mobile rebuild.
   ========================================================================== */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .stack-grid { grid-template-columns: repeat(4, 1fr); }
  .culture-grid { grid-template-columns: repeat(2, 1fr); }
  .level-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top-5 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-dropdown-menu { display: none; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { justify-self: center; max-width: 320px; margin-top: 20px; order: -1; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .stack-grid { grid-template-columns: repeat(3, 1fr); }

  .project-feature { grid-template-columns: 1fr; }
  .project-visual { border-left: none; border-top: 1px solid var(--line); }
  .project-features { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .distinguish-row { grid-template-columns: 1fr; }
  .culture-grid { grid-template-columns: 1fr 1fr; }

  .form-row { grid-template-columns: 1fr; }
  .proof-list { columns: 1; }
}

/* ==========================================================================
   MOBILE (≈320px–767px) — rebuilt layout behavior, not a shrunk desktop.
   ========================================================================== */
@media (max-width: 767px) {
  html, body { width: 100%; overflow-x: hidden; }

  /* Full-bleed edge-to-edge: no section, nav, or hero should be narrower
     than the viewport, and no fixed desktop widths should linger. */
  .navbar, .nav-inner, section, .hero, .hero-grid, .mobile-menu {
    width: 100%;
    max-width: 100%;
  }

  /* --- Navbar: keep the CTA in the slide-out menu, not crowding the bar --- */
  .nav-actions .btn { display: none; }
  .nav-inner { padding: 0 20px; }

  .container { padding: 0 20px; max-width: 100%; }

  section { padding: 64px 0; }

  /* --- Hero: fills the screen, visual on top, copy + CTAs below --- */
  .hero {
    min-height: 100vh;   /* fallback for browsers without svh/dvh */
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    align-items: stretch;
    padding-top: var(--nav-height);
    padding-bottom: 28px;
    overflow: hidden;
  }

  .hero .container.hero-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex: 1;
    gap: 0;
    width: 100%;
  }

  .hero-visual {
    order: -1;
    justify-self: unset;
    width: 50vw;
    max-width: 210px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 20px;
    flex-shrink: 0;
  }

  .hero-eyebrow { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(28px, 8.2vw, 42px); margin-bottom: 14px; }
  .hero p.lead { font-size: 15px; max-width: 100%; margin-bottom: 20px; }
  .hero-actions { margin-bottom: 22px; gap: 12px; }
  .hero-actions .btn { padding: 13px 22px; }
  .hero-meta { gap: 18px; row-gap: 14px; }
  .hero-meta div { padding-left: 12px; }

  /* Keep the hero from overshooting short viewports: the meta row is the
     least essential piece, so it's the first to go on compact screens. */
  @media (max-height: 720px) {
    .hero-visual { margin-bottom: 20px; }
    .hero-meta { display: none; }
  }
  @media (max-height: 620px) {
    .hero-actions { margin-bottom: 18px; }
    .hero p.lead { margin-bottom: 16px; }
  }

  /* --- Buttons + content use the full available width --- */
  .btn { width: 100%; justify-content: center; }
  .hero-actions, .join-cta .btn-row { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .join-cta .btn-row .btn { width: 100%; }

  .grid-3, .grid-4, .why-grid, .stack-grid, .culture-grid, .level-grid {
    grid-template-columns: 1fr;
  }

  .app-form, .contact-form { padding: 26px 20px; }
  .project-copy { padding: 28px 22px; }
  .project-visual { padding: 28px 22px; }

  .projects-grid { grid-template-columns: 1fr; }
  .project-card-body { padding: 22px 20px 24px; }

  .team-avatar-ring { width: 84px; height: 84px; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-top-5 { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .vision-big { word-break: break-word; }

  /* --- Decorative elements must never force horizontal scroll --- */
  .bg-light { width: 70vw; height: 70vw; max-width: 420px; max-height: 420px; }

  /* --- Pretty-MD hub: same "no fixed desktop widths" rule on mobile --- */
  .hub-shell, .hub-main, .term-window, .term-body, .cmd-toolbar, .cmd-table-wrap {
    width: 100%;
    max-width: 100%;
  }
  .cmd-table-wrap { overflow-x: auto; }
  .cmd-search-wrap { max-width: 100%; }
}

/* --- Extra-small phones (≈320px–374px): tighter but still comfortable --- */
@media (max-width: 374px) {
  .container { padding: 0 16px; }
  .hero h1 { font-size: clamp(28px, 9vw, 34px); }
  .hero-visual { width: 54vw; max-width: 200px; }
  .hero-meta { gap: 14px; }
  section { padding: 56px 0; }
}