/* =========================================================
   SPEEDNET — MOBILE HARD VIEWPORT FIX
   Final responsive containment layer. Loaded LAST.
   ========================================================= */
@media (max-width: 900px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }

  body{
    margin:0 !important;
    position:relative !important;
    left:0 !important;
    right:0 !important;
    transform:none !important;
    touch-action:pan-y pinch-zoom !important;
  }

  /* Nothing in the document is allowed to establish a wider layout viewport. */
  header, main, footer, section, .section, .hero,
  .container, .container-fluid, .row,
  .speednet-footer, .workflow-section,
  .contact-form-section, .services, .network-premium,
  .light-services, .management-team-section{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Desktop topology SVG: never use its legacy 760px mobile canvas. */
  .optical-network-lines,
  .optical-network-lines svg{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    transform:none !important;
  }

  /* Oversized decorative layers stay inside their own visual stage. */
  .hero,
  .workflow-section,
  .network-box,
  .fiber-visual,
  .fiber-ecosystem,
  .speednet-infra-visual,
  .optical-coverage-stage,
  .coverage-box,
  .contact-form-section,
  .speednet-footer,
  .services,
  .light-services{
    overflow-x:hidden !important;
    contain:paint;
  }

  /* Disable all interactive/parallax tilt on touch devices. */
  .family-wrap,
  .fiber-visual,
  .speednet-infra-visual,
  .optical-coverage-stage{
    transform:none !important;
    perspective:none !important;
    transform-style:flat !important;
  }

  /* Prevent fixed utilities from becoming horizontal scroll sources. */
  .float, .sn-top, .sn-progress, .sn-press-overlay{
    max-width:100% !important;
  }
}

@media (max-width:767px){
  /* Mobile content always fits the visual viewport including iOS safe areas. */
  .container, .container-fluid{
    width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Remove the old fixed-width orbit/cable canvas. */
  .optical-network-lines,
  .optical-network-lines *{
    max-width:100% !important;
  }

  /* Never let animated pseudo-elements enlarge the page. */
  .hero::before, .hero::after,
  .section::before, .section::after,
  .workflow-section::before, .workflow-section::after,
  .contact-form-section::before, .contact-form-section::after,
  .speednet-footer::before, .speednet-footer::after{
    pointer-events:none !important;
  }

  .hero-dots{
    right:0 !important;
    width:55% !important;
    max-width:55vw !important;
  }

  .float{
    right:max(12px, env(safe-area-inset-right)) !important;
    bottom:max(78px, calc(78px + env(safe-area-inset-bottom))) !important;
  }
}


/* =========================================================
   SPEEDNET — MOBILE MENU CLICK/TOUCH FINAL PATCH
   Keep the hamburger above every visual layer and use native
   browser hit testing without global touch interception.
   ========================================================= */
@media (max-width: 900px){
  .header{
    position: sticky !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
  }
  .nav{
    position: relative !important;
    z-index: 2147483001 !important;
  }
  .menu-btn{
    position: relative !important;
    z-index: 2147483003 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
  }
  .nav nav{
    z-index: 2147483002 !important;
    pointer-events: auto !important;
  }
  .nav nav.open{
    pointer-events: auto !important;
  }
}

/* ===== Final mobile service-ecosystem spacing polish =====
   Keep the fiber glow visible in the gap between the upper and middle cards. */
@media (max-width: 767px) {
  .speednet-infra-visual .node-b,
  .speednet-infra-visual .node-e {
    top: 312px !important;
  }

  /* Give the central infrastructure core its own clear visual zone. */
  .speednet-infra-visual .infra-core {
    top: 430px !important;
  }

  .speednet-infra-visual .node-c,
  .speednet-infra-visual .node-f {
    top: 540px !important;
  }
}

@media (max-width: 390px) {
  .speednet-infra-visual .node-b,
  .speednet-infra-visual .node-e {
    top: 302px !important;
  }
  .speednet-infra-visual .infra-core {
    top: 418px !important;
  }
  .speednet-infra-visual .node-c,
  .speednet-infra-visual .node-f {
    top: 528px !important;
  }
}


/* =========================================================
   SPEEDNET — MOBILE HAMBURGER HIT AREA FINAL
   Keep the three-line menu button above all header/hero artwork.
   ========================================================= */
@media (max-width: 767px){
  .header{
    position:sticky !important;
    top:0 !important;
    z-index:2147483640 !important;
    isolation:isolate !important;
  }
  .header .nav{
    position:relative !important;
    z-index:2147483641 !important;
    isolation:isolate !important;
  }
  .header .menu-btn{
    position:relative !important;
    z-index:2147483647 !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    margin-left:auto !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-user-select:none !important;
    user-select:none !important;
  }
  .header .menu-btn i{
    pointer-events:none !important;
  }
}

/* =========================================================
   SPEEDNET — MOBILE OPTICAL ALIGNMENT FINAL REPAIR
   Restore the real SVG fiber topology on mobile and align
   the cards to the actual optical routes. Desktop untouched.
   ========================================================= */
@media (max-width: 767px){
  /* ---------- Connected Services / Infrastructure ---------- */
  .speednet-infra-visual .infra-lines{
    display:block !important;
    z-index:2 !important;
    opacity:1 !important;
    pointer-events:none !important;
  }
  .speednet-infra-visual .fiber-cable{
    stroke-width:10px !important;
    opacity:.28 !important;
  }
  .speednet-infra-visual .fiber-light{
    stroke-width:3px !important;
    stroke-dasharray:55 300 !important;
    filter:drop-shadow(0 0 8px rgba(237,28,36,.9)) !important;
  }

  /* Middle pair sits directly on the middle optical wave. */
  .speednet-infra-visual .node-b{
    top:344px !important;
    bottom:auto !important;
  }
  .speednet-infra-visual .node-e{
    top:344px !important;
    bottom:auto !important;
  }
  .speednet-infra-visual .infra-core{
    top:50% !important;
    z-index:25 !important;
  }

  /* ---------- Live Network Coverage ---------- */
  /* The previous mobile CSS hid the actual SVG; that removed the optical waves. */
  .optical-coverage-stage .optical-network-lines{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:6 !important;
    min-width:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    pointer-events:none !important;
  }
  .optical-coverage-stage .fiber-cables-glow path{
    stroke-width:14px !important;
    opacity:.42 !important;
    filter:blur(6px) !important;
  }
  .optical-coverage-stage .fiber-cables-core path{
    stroke:#ed1c24 !important;
    stroke-width:5px !important;
    opacity:1 !important;
    filter:drop-shadow(0 0 5px rgba(237,28,36,.8)) drop-shadow(0 0 12px rgba(237,28,36,.35)) !important;
    stroke-dasharray:none !important;
    animation:none !important;
  }
  .optical-coverage-stage .fiber-flow-paths{
    display:block !important;
    opacity:1 !important;
  }
  .optical-coverage-stage .flow-light{
    fill:#fff !important;
    stroke:#ed1c24 !important;
    stroke-width:2.5 !important;
    filter:drop-shadow(0 0 8px rgba(237,28,36,.95)) !important;
  }

  /* Hide the old hand-drawn pseudo connectors so only the real SVG topology shows. */
  .optical-coverage-stage .infrastructure-core::before,
  .optical-coverage-stage .infrastructure-core::after,
  .optical-coverage-stage .coverage-node::after{
    display:none !important;
    content:none !important;
  }

  /* Exact mobile route/card alignment for a 760–820px visual stage. */
  .optical-coverage-stage .n-deoghar{
    top:82px !important;
  }
  .optical-coverage-stage .n-madhupur,
  .optical-coverage-stage .n-rohini{
    top:180px !important;
  }
  .optical-coverage-stage .n-sarath,
  .optical-coverage-stage .n-jasidih{
    top:540px !important;
    bottom:auto !important;
  }
  .optical-coverage-stage .n-devipur{
    top:665px !important;
    bottom:auto !important;
  }
  .optical-coverage-stage .infrastructure-core{
    top:390px !important;
    left:50% !important;
    z-index:25 !important;
  }
}

@media (max-width:390px){
  .optical-coverage-stage{
    height:800px !important;
    min-height:800px !important;
  }
  .optical-coverage-stage .n-sarath,
  .optical-coverage-stage .n-jasidih{
    top:535px !important;
  }
  .optical-coverage-stage .n-devipur{
    top:665px !important;
  }
}