/* ============================================================
   WebTechAxis — Responsive Safety Net (v4)
   The site already has mobile CSS. This file only adds fixes
   that the existing CSS is missing, without fighting it.
   ============================================================ */

html, body { max-width: 100% !important; overflow-x: hidden !important; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* Prevent any section from clipping text */
section, main, header, footer, .container { overflow-x: hidden; }

/* ========= Headings always wrap, never clip ========= */
h1, h2, h3, .hero h1 {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}
h1 span, h2 span, .grad {
  display: inline !important;
  word-break: break-word !important;
}

/* ========= Mobile nav open state (JS toggles .menu.open) ========= */
@media (max-width: 900px) {
  nav .menu.open {
    display: flex !important;
    position: fixed !important;
    top: 62px !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important;
    background: rgba(5, 6, 15, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    padding: 22px 6% !important;
    gap: 14px !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
    z-index: 49 !important;
    max-height: 85vh;
    overflow-y: auto;
  }
  nav .menu.open a {
    font-size: 14px !important;
    padding: 8px 0 !important;
    width: 100%;
  }
  nav .burger { cursor: pointer; padding: 6px; }

  /* Hero: force single-column and wrap */
  .hero { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hero h1 { font-size: clamp(26px, 7vw, 40px) !important; line-height: 1.2 !important; }
  .hero p, section p { font-size: 15px !important; max-width: 100% !important; }

  .cta-row, .ind-cta, [class*="buttons"] { flex-wrap: wrap !important; gap: 12px !important; }
}

/* ========= Phones ( <= 640px ) ========= */
@media (max-width: 640px) {
  section { padding: 70px 5% 40px !important; }
  #home { padding-top: 95px !important; }
  nav { padding: 12px 4% !important; }
  .brand { font-size: 17px !important; }
  h1, .hero h1 { font-size: clamp(24px, 7.5vw, 32px) !important; }
  h2 { font-size: clamp(20px, 6vw, 26px) !important; }
  h3 { font-size: 17px !important; }
  .btn { padding: 11px 22px !important; font-size: 11px !important; }

  .ind-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .feat-grid { grid-template-columns: 1fr 1fr !important; }
  .contact-grid, .stats { grid-template-columns: 1fr !important; }

  input, textarea, select { width: 100% !important; font-size: 16px !important; }
  .aud-wrap { padding: 28px 18px !important; }

  footer { padding: 30px 18px !important; }
  .flinks { gap: 12px !important; }
}

/* ========= Small phones ( <= 400px ) iPhone SE, compact ========= */
@media (max-width: 400px) {
  section { padding: 60px 4% 30px !important; }
  h1, .hero h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  .btn { padding: 10px 18px !important; font-size: 10px !important; }
  .ind-grid { grid-template-columns: 1fr !important; }
}

/* ========= Ultra-narrow / foldables ( <= 360px ) ========= */
@media (max-width: 360px) {
  section { padding: 50px 3% 25px !important; }
  .feat-grid { grid-template-columns: 1fr !important; }
  h1, .hero h1 { font-size: 20px !important; }
}

/* Landscape short phones */
@media (max-height: 500px) and (orientation: landscape) {
  section { min-height: auto !important; padding: 60px 5% 30px !important; }
  #home { padding-top: 80px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}