/* ══════════════════════════════════════════════════════════════════════
   BRAHMASTRA — MOBILE FIXES
   Load LAST, after every other stylesheet.
   Fixes real layout bugs + adds a proper mobile nav drawer.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 0. GLOBAL GUARDS ──────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* Fixed/decorative layers must never create scroll on small screens */
@media (max-width: 900px) {
  .space-vfx, .aurora, .fx-cursor { display: none !important; }
}

/* ─── 1. MOBILE NAV DRAWER ──────────────────────────────────────────── */
.mnav-toggle {
  display: none;
  width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.mnav-toggle span {
  position: relative; display: block;
  width: 18px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .3s ease, background .3s ease;
}
.mnav-toggle span::before,
.mnav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .3s ease, opacity .2s ease;
}
.mnav-toggle span::before { top: -6px; }
.mnav-toggle span::after  { top: 6px; }

body.mnav-open .mnav-toggle span { background: transparent; }
body.mnav-open .mnav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.mnav-open .mnav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .mnav-toggle { display: flex; }

  /* keep the bar a single compact row — do NOT stack it */
  .nav-container {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
  }
  .navbar { padding: 10px 0 !important; }
  .nav-logo { height: 38px !important; }
  .nav-title { font-size: 1rem !important; white-space: nowrap; }
  .nav-badge-releasing { display: none !important; }

  /* links become a slide-down drawer */
  .nav-links {
    position: fixed; left: 0; right: 0; top: var(--mnav-top, 62px);
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 16px 18px;
    background: rgba(2, 3, 10, .97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
    transform: translateY(-14px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
    z-index: 99;
  }
  body.mnav-open .nav-links {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav-links a {
    display: block; padding: 15px 6px;
    font-size: 1rem !important; color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a::after { display: none; }
  body.mnav-open { overflow: hidden; }
}

/* ─── 2. HERO ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero {
    min-height: auto;
    padding-top: 110px !important;
    padding-bottom: 60px;
  }
  .hero-content { padding: 0 18px; }
  .hero-title {
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    letter-spacing: -.5px;
    line-height: 1.15;
    overflow-wrap: break-word;
  }
  .hero-desc { font-size: .95rem; margin-bottom: 28px; }
  .releasing-inner { padding: 8px 18px; gap: 9px; }
  .releasing-text { font-size: .7rem; letter-spacing: 1.5px; }
  .hero-tags { gap: 6px; }
  .tag { font-size: .65rem; padding: 4px 10px; }
}

/* iOS: 100vh includes browser chrome and causes a jump */
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
  @media (max-width: 860px) { .hero { min-height: auto; } }
}

/* ─── 3. SECTION RHYTHM ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .features, .ai-section { padding: 60px 16px !important; }
  .dashboard-section, .developer-section { padding: 55px 16px !important; }
  .section-header { margin-bottom: 36px; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; }
  .section-subtitle { font-size: .92rem; }
}

/* ─── 4. FEATURE CARDS ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .features-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}
@media (max-width: 620px) {
  .features-grid { grid-template-columns: 1fr !important; }
}
@media (hover: none) {
  /* no cursor to track — kill tilt/spotlight so cards sit flat and legible */
  .feature-card { transform: none !important; }
  .feature-card .card-fx { opacity: 0 !important; }
  .feature-card .fx-corner { opacity: .5; transform: none; }
}

/* ─── 5. DASHBOARD — flatten the 3D tilt on touch ───────────────────── */
@media (max-width: 860px) {
  .dashboard-3d-inner {
    transform: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(168, 85, 247, .28) !important;
  }
  .dashboard-3d-container { perspective: none; }
  .dash-chip { display: none !important; }
}

/* ─── 6. AI SECTION ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ai-container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding: 34px 22px !important;
    gap: 30px !important;
    border-radius: 20px;
  }
  .ai-features { text-align: left; }
  .ai-features li { font-size: .93rem; }
  .ai-desc { font-size: .95rem; }
}
@media (max-width: 620px) {
  .ai-core-container { width: 170px !important; height: 170px !important; }
  .ai-core-logo { width: 105px !important; height: 105px !important; }
  .orbit-1 { width: 140px !important; height: 140px !important; }
  .orbit-2 { width: 172px !important; height: 172px !important; }
}

/* ─── 7. DEVELOPER SECTION — the align-items bug ────────────────────── */
@media (max-width: 900px) {
  .dev-container {
    flex-direction: column !important;
    /* the real fix: flex-end was pushing everything to the right edge */
    align-items: center !important;
    text-align: center;
    padding: 30px 22px !important;
    gap: 24px !important;
  }
  .dev-visual-3d {
    width: 170px !important;
    align-self: center !important;
    margin: 0 auto;
  }
  .dev-info { width: 100%; }
  .dev-name { justify-content: center !important; }
  .dev-title { font-size: 1.6rem !important; }
  .dev-bio { font-size: .93rem; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-item { padding: 14px 16px; justify-content: center; }
}
@media (max-width: 620px) {
  .dev-container { padding: 26px 18px !important; }
  .dev-visual-3d { width: 148px !important; }
}
/* the 3D tilt has no meaning without a cursor */
@media (hover: none) {
  .dev-card-inner { transform: none !important; }
  .dev-photo { transform: none !important; }
}

/* ─── 8. THREAT RADAR ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .radar-section { padding: 30px 16px 60px; }
  .radar-wrap { grid-template-columns: 1fr !important; gap: 26px !important; }
  .radar-scope { width: min(280px, 78vw) !important; height: min(280px, 78vw) !important; }
  .radar-panel { padding: 18px 16px !important; }
  .radar-head { gap: 9px; flex-wrap: wrap; }
  .radar-head h3 { font-size: .95rem; }
  .radar-count { font-size: .66rem; }
  .radar-feed { height: 250px !important; }
  .radar-row { padding: 9px 11px; gap: 9px; font-size: .68rem; }
  .radar-row .host { min-width: 0 !important; flex-shrink: 0; }
  .radar-row .ms { display: none; }
}
@media (max-width: 480px) {
  .radar-row .host { display: none; }
  .radar-feed { height: 220px !important; }
}

/* ─── 9. CREATOR FX ON MOBILE ───────────────────────────────────────── */
@media (max-width: 860px) {
  .dev-halo { display: none !important; }
  .dev-hud {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap; justify-content: center;
    gap: 6px; margin-bottom: 14px;
  }
  .dev-hud span,
  .dev-hud span:nth-child(2),
  .dev-hud span:nth-child(3) { align-self: auto !important; }
  .dev-stamp {
    right: 14px !important; top: 14px !important;
    font-size: .52rem !important; padding: 5px 9px !important;
  }
  .dev-container::after { display: none; } /* sheen is costly + clipped */
}

/* ─── 10. TOUCH TARGETS & TYPE ──────────────────────────────────────── */
@media (max-width: 860px) {
  .btn-primary, .btn-secondary {
    width: 100% !important; text-align: center;
    padding: 15px 24px !important; font-size: .98rem !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important; width: 100%;
  }
  a, button { -webkit-tap-highlight-color: rgba(168, 85, 247, .18); }
}

/* ─── 11. KILL HOVER-ONLY LIFTS ON TOUCH ────────────────────────────── */
@media (hover: none) {
  .btn-primary:hover, .btn-secondary:hover,
  .contact-item:hover, .fx-stat:hover, .nav-logo:hover {
    transform: none !important;
  }
  .fx-reticle { display: none !important; }
}

/* ─── 12. PERFORMANCE TRIM ──────────────────────────────────────────── */
@media (max-width: 620px) {
  /* heavy blurs are the main cause of jank on mid-range phones */
  .dev-container, .ai-container, .radar-panel { backdrop-filter: blur(8px); }
  .dashboard-screen-glow { filter: blur(12px); opacity: .35; }
}