/* ============================================================
   MOBILE — responsive overrides for ≤ 900px
   Loaded LAST so it overrides previous panels.
   ============================================================ */

@media (max-width: 900px){

  :root{ --maxw: 100%; --gap: .65rem; --hud-h:0px; }

  /* ── Header — collapse dock to icons-only ───────────── */
  .head{
    padding: 10px 14px;
    gap:6px;
    flex-wrap:wrap;
  }
  .brand-text{ display:none; }
  .brand-mark{ width:30px; height:30px; }

  .dock{
    order:3;
    width:100%;
    margin-top:6px;
    padding:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    justify-content:flex-start;
    gap:2px;
  }
  .dock::-webkit-scrollbar{ display:none; }
  .dock-btn{
    flex:none;
    padding:7px 9px;
  }
  .dock-btn .kbd{ display:none; }
  .dock-btn .tip{ display:none; }
  .dock-btn svg{ width:18px; height:18px; }

  .head-cta .btn-ghost{ display:none; }
  .head-cta .btn-lime{ padding:6px 12px; font-size:12px; }
  .head-cta .btn-lime svg{ display:none; }

  /* ── Stage / panels — full bleed ────────────────────── */
  .stage{
    top: 110px;
    bottom: 0;
  }
  .panel{ padding: 0; }
  .panel-shell{
    padding: 16px 14px 24px;
    gap: .9rem;
  }
  .panel-shell.glass{
    backdrop-filter: blur(14px) saturate(120%);
    border-radius: 0;
    border-left:none; border-right:none;
    background:linear-gradient(180deg, rgba(12,16,24,.55), rgba(12,16,24,.40));
  }

  /* ── Typography — calmer scale ──────────────────────── */
  h1{ font-size: clamp(1.7rem, 7vw, 2.4rem) !important; line-height:1.05; }
  .h2{ font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }
  .lede{ font-size: .92rem; }
  .eyebrow{ font-size: 10.5px; }

  /* ── HUD — hide on mobile (too noisy) ───────────────── */
  .hud, .hud-corner-tr, .live-feed, .tele, .drag-hint, .progbar{
    display:none !important;
  }

  /* ── Earth canvas — keep but de-emphasise ───────────── */
  .earth-stage canvas{
    opacity:.5;
    filter: blur(.4px) saturate(85%);
  }

  /* ── HOME ───────────────────────────────────────────── */
  .home .panel-shell{
    align-items:flex-start;
    text-align:left;
    padding-top:18px;
  }
  .home-meta{ flex-wrap:wrap; gap:8px; }
  .home-cta-row{ flex-wrap:wrap; gap:8px; width:100%; }
  .home-cta-row .btn{ flex:1; justify-content:center; }
  .home-orbits{
    grid-template-columns: 1fr !important;
    gap:8px;
    width:100%;
    margin-top:6px;
  }
  .orbit{ padding:12px 14px !important; }

  /* ── BRAIN ──────────────────────────────────────────── */
  .brain .panel-shell{
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .brain-pillars{ grid-template-columns: 1fr !important; gap:8px; }
  .brain-right{ display:none; }

  /* ── INSIDE (CRM product) — stack ────────────────────── */
  .panel.inside .panel-shell{
    padding: 16px 12px 24px;
    gap: 12px;
  }
  .ide{
    border-radius: 10px;
    margin: 0 -2px;
  }
  .ide-bar{
    flex-wrap:wrap;
    gap:8px;
    padding:8px 10px;
  }
  .ide-url{
    flex:1;
    min-width:0;
    font-size:11px;
  }
  .ide-url .ide-tag{ display:none; }
  .ide-tabs{
    margin-left:0;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .ide-tabs::-webkit-scrollbar{ display:none; }
  .ide-tab{ flex:none; font-size:11px; padding:5px 10px; }

  .ide-body{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .ide-rail{
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    border-right:none;
    border-bottom:1px solid var(--line);
    padding: 8px 10px;
    gap: 14px;
    scrollbar-width:none;
  }
  .ide-rail::-webkit-scrollbar{ display:none; }
  .ide-rail-grp{
    flex:none;
    flex-direction:row;
    gap:4px;
    align-items:center;
  }
  .rg-label{ display:none; }
  .rg-item{
    flex:none;
    padding:5px 9px;
    font-size:11.5px;
    border-radius:99px;
    background:rgba(255,255,255,.04);
    color:var(--t-soft);
  }
  .rg-item.is-on{ background:var(--lime); color:var(--bg); }
  .rg-item.is-on svg{ color:var(--bg); }
  .rg-item svg{ width:12px; height:12px; }
  .rg-item b{ font-size:10px; padding:0 5px; }

  .ide-toolbar{
    flex-wrap:wrap;
    gap:8px;
    padding:10px 12px;
  }
  .ide-toolbar-r{ width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .ide-toolbar-r::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; }

  .row{ padding:10px 12px 10px 0; gap:10px; }
  .row-line{ flex-wrap:wrap; gap:6px; white-space:normal; }
  .row-meta{ font-size:11px; }
  .row-actions{ flex-direction:column; gap:4px; padding-right:8px; }
  .btn-mini{ padding:4px 8px; font-size:11px; }

  .ide-detail{
    border-top:1px solid var(--line);
    padding:14px 14px;
  }

  .ide-foot{
    flex-wrap:wrap;
    gap:8px 14px;
    padding:8px 12px;
    font-size:10.5px;
  }
  .ifx.ok{ margin-left:0; }

  .inside-cap{
    grid-template-columns: 1fr !important;
    gap:8px;
  }
  .inside-cap li{ font-size:12px; padding:10px 12px; }

  /* ── SYSTEM (3 layers) ───────────────────────────────── */
  .layers{ grid-template-columns: 1fr !important; gap:.7rem; }

  /* ── MODULES grid ────────────────────────────────────── */
  .mod-grid{ grid-template-columns: repeat(2, 1fr) !important; gap:.5rem; }
  .mod{ padding:.7rem .6rem; }
  .mod h4{ font-size:.95rem; }
  .mod p{ font-size:.78rem; }

  /* ── ARCHITECTURE ────────────────────────────────────── */
  .arch-grid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .arch-card{ padding:.85rem .8rem; }
  .arch-card[data-span]{ grid-column: auto !important; }

  /* ── SECURITY ────────────────────────────────────────── */
  .sec-grid{ grid-template-columns: 1fr !important; }

  /* ── PRICING ─────────────────────────────────────────── */
  .price-grid{ grid-template-columns: 1fr !important; gap:.7rem; }

  /* ── START ───────────────────────────────────────────── */
  .start-shell{ padding: 1.4rem 1rem !important; }
}

/* ============================================================
   TINY screens — phones in portrait
   ============================================================ */
@media (max-width: 480px){
  .head{ padding: 8px 10px; }
  .panel-shell{ padding: 12px 10px 20px; }
  h1{ font-size: 1.6rem !important; letter-spacing:-.025em; }
  .h2{ font-size: 1.3rem !important; }
  .lede{ font-size: .87rem; line-height:1.55; }

  .home-orbits .orbit .v{ font-size:1.6rem !important; }

  .ide{ font-size: 12.5px; }
  .ide-bar{ padding:7px 9px; }
  .ide-url{ padding:4px 8px; font-size:10.5px; }
  .ide-traffic i{ width:9px; height:9px; }

  .row-line{ font-size:12.5px; }
  .row-sub{ font-size:10.5px; }
  .row-tag{ font-size:9.5px; padding:1px 5px; }

  .dt-card{ padding:11px 12px; }
  .dt-card h4{ font-size:13.5px; }
  .dt-quote{ font-size:11px; padding:8px 10px; }
  .dt-rule{ font-size:11px; padding:5px 8px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}