/* =========================================================
   SPEEDNET FINAL RESPONSIVE SYSTEM
   One clean responsive layer for desktop, tablet and iPhone.
   Loaded after the legacy style sheets so older iterative rules
   cannot re-introduce layout overflow.
   ========================================================= */

html {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: 96px;
}

body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
  position: relative;
}

*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas, iframe { max-width: 100%; }

main,
main > section,
header,
footer,
.container,
.container-fluid { min-width: 0; }

/* Keep decorative artwork from becoming a document-width element. */
.hero,
.section,
.workflow-section,
.services,
.speednet-infra-visual,
.optical-coverage-stage,
.coverage-map,
.speednet-footer { overflow-x: clip; }

/* ---------------- Desktop baseline ---------------- */
@media (min-width: 1201px) {
  .container { width: min(1180px, calc(100% - 64px)); }
  .header .container.nav { min-height: 92px; }
  .header .logo img { width: 178px !important; max-height: 66px; }
  .header.scrolled .logo img { width: 164px !important; }
  .nav nav { gap: 24px; }
  .nav nav a { font-size: 13px; }
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(480px, .96fr); gap: 36px; }
  .hero h1 { font-size: clamp(62px, 5.2vw, 76px); }
  .hero-copy > p { max-width: 620px; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .container { width: min(1080px, calc(100% - 48px)); }
  .header .logo img { width: 170px !important; }
  .nav { gap: 20px; }
  .nav nav { gap: 18px; }
  .nav nav a { font-size: 12px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); gap: 24px; }
  .hero h1 { font-size: clamp(54px, 6vw, 68px); }
  .speednet-infra-visual { width: 100%; }
  .plans-grid { gap: 14px; }
  .plan { padding: 26px; }
}

/* ---------------- Tablet ---------------- */
@media (max-width: 900px) {
  .container { width: min(100% - 40px, 720px); }
  .topbar { display: none; }
  .header { height: 76px !important; }
  .nav { padding: 0; }
  .header .logo img { width: 160px !important; }
  .header-cta { display: none !important; }
  .menu-btn { display: grid !important; place-items: center; margin-left: auto; }

  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 58px 0 26px; }
  .hero h1 { font-size: clamp(48px, 8vw, 68px); }
  .hero-side { height: auto; padding: 12px 0 34px; }
  .speednet-infra-visual { width: 100%; max-width: 620px; margin: 0 auto; }

  .section-title { grid-template-columns: 1fr; gap: 18px; }
  .plans-grid { grid-template-columns: 1fr 1fr; }
  .plans-grid .plan:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
  .service-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Phone ---------------- */
@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
  }

  body { touch-action: pan-y pinch-zoom; }

  main,
  main > section,
  header,
  footer,
  .section,
  .hero,
  .workflow-section,
  .services,
  .speednet-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Header */
  .header {
    height: 78px !important;
    min-height: 78px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
  }

  .header.scrolled { height: 70px !important; }

  .nav {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    gap: 12px !important;
  }

  .logo { min-width: 0; flex: 1 1 auto; }
  .logo img,
  .header.scrolled .logo img {
    width: 142px !important;
    max-width: 142px !important;
    max-height: 54px !important;
  }

  .menu-btn {
    display: grid !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin-left: auto !important;
    place-items: center !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.97) !important;
    border: 1px solid #e2e6eb !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.08) !important;
  }

  /* Menu is a contained sheet, not a page-width element. */
  .nav nav,
  .header.scrolled .nav nav {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 90px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100svh - 106px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 10px 20px 16px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid #e2e6eb !important;
    box-shadow: 0 28px 80px rgba(15,23,42,.20), 0 0 0 100vmax rgba(15,23,42,.14) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .nav nav.open { display: flex !important; }
  .nav nav a,
  .header.scrolled .nav nav a {
    width: 100% !important;
    min-height: 56px !important;
    padding: 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #edf0f3 !important;
    font-size: 17px !important;
  }
  .nav nav a:last-child { border-bottom: 0 !important; }
  .nav nav a::after { bottom: 0 !important; }

  /* Hero */
  .hero {
    min-height: 0 !important;
    overflow: clip !important;
  }

  .hero-grid {
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .hero-copy { padding: 58px 0 14px !important; }
  .eyebrow { margin-bottom: 20px !important; }
  .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(40px, 11.8vw, 54px) !important;
    line-height: .98 !important;
    letter-spacing: -.058em !important;
  }
  .hero-copy > p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
  }

  .benefits {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 24px 0 26px !important;
  }
  .benefits div {
    min-width: 0 !important;
    width: auto !important;
    padding: 8px 8px !important;
  }
  .benefits div:nth-child(3) { border-right: 0 !important; }
  .benefits div:nth-child(4) { grid-column: 1; }
  .benefits div:nth-child(5) { grid-column: 2; }
  .benefits b { font-size: 12px !important; }
  .benefits small { font-size: 10px !important; }

  .hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .hero-actions > a { width: 100% !important; min-height: 50px; }

  /* Mobile infrastructure visual: fixed internal coordinate system. */
  .hero-side {
    width: 100% !important;
    height: auto !important;
    padding: 8px 0 28px !important;
    margin: 0 !important;
  }
  .speednet-infra-visual {
    width: 100% !important;
    max-width: 100% !important;
    height: 700px !important;
    margin: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    animation: none !important;
  }
  .speednet-infra-visual .infra-grid { opacity: .58; }
  .speednet-infra-visual .infra-orbit.orbit-1 { width: 290px !important; height: 290px !important; }
  .speednet-infra-visual .infra-orbit.orbit-2 { width: 390px !important; height: 320px !important; }
  .speednet-infra-visual .infra-orbit.orbit-3 { width: 510px !important; height: 390px !important; }
  .speednet-infra-visual .infra-label { top: 18px !important; font-size: 7px !important; }
  .speednet-infra-visual .infra-left { left: 16px !important; }
  .speednet-infra-visual .infra-right { right: 16px !important; }
  .speednet-infra-visual .infra-node {
    width: calc(50% - 22px) !important;
    min-height: 82px !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
    grid-template-columns: 28px minmax(0,1fr) !important;
    column-gap: 7px !important;
    overflow: hidden !important;
  }
  .speednet-infra-visual .node-a { left: 12px !important; right: auto !important; top: 78px !important; }
  .speednet-infra-visual .node-d { right: 12px !important; left: auto !important; top: 78px !important; }
  .speednet-infra-visual .node-b { left: 12px !important; right: auto !important; top: 274px !important; }
  .speednet-infra-visual .node-e { right: 12px !important; left: auto !important; top: 274px !important; }
  .speednet-infra-visual .node-c { left: 12px !important; right: auto !important; top: 470px !important; bottom: auto !important; }
  .speednet-infra-visual .node-f { right: 12px !important; left: auto !important; top: 470px !important; bottom: auto !important; }
  .speednet-infra-visual .infra-node b { font-size: 10px !important; line-height: 1.25 !important; }
  .speednet-infra-visual .infra-node small { font-size: 7px !important; line-height: 1.25 !important; }
  .speednet-infra-visual .infra-node i { font-size: 18px !important; }
  .speednet-infra-visual .infra-core {
    width: 124px !important;
    height: 124px !important;
    left: 50% !important;
    top: 376px !important;
    transform: translate(-50%,-50%) !important;
    animation: none !important;
  }
  .speednet-infra-visual .infra-core b { font-size: 11px !important; }
  .speednet-infra-visual .infra-core small { font-size: 6px !important; }
  .speednet-infra-visual .infra-core em { font-size: 5.5px !important; }
  .speednet-infra-visual .infra-lines { inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
  .speednet-infra-visual .infra-status {
    left: 12px !important; right: 12px !important; bottom: 12px !important;
    width: auto !important; max-width: none !important;
    padding: 9px 10px !important; border-radius: 14px !important;
  }
  .speednet-infra-visual .infra-status small { font-size: 5px !important; }

  /* Sections */
  .section { padding: 68px 0 !important; }
  .section-title { display: block !important; margin-bottom: 30px !important; }
  .section-title > p { margin-top: 14px !important; }
  .section h2 { font-size: clamp(30px, 8vw, 40px) !important; }

  .plans-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .plans-grid .plan:last-child { grid-column: auto; max-width: none; justify-self: stretch; }
  .plan { min-height: 0 !important; padding: 24px !important; }

  .service-grid { grid-template-columns: 1fr !important; }
  .service-grid article { min-height: 0 !important; }

  /* Coverage: do not use the desktop SVG topology on phones. */
  .optical-coverage-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: 720px !important;
    min-height: 720px !important;
    margin: 14px 0 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }
  .optical-coverage-stage .optical-network-lines { display: none !important; }
  .optical-coverage-stage .coverage-node {
    width: calc(50% - 22px) !important;
    min-width: 0 !important;
    padding: 12px 9px 11px 34px !important;
    border-radius: 16px !important;
    animation: none !important;
  }
  .optical-coverage-stage .coverage-node strong { font-size: 10px !important; white-space: nowrap !important; }
  .optical-coverage-stage .coverage-node small { font-size: 6.5px !important; }
  .optical-coverage-stage .coverage-node em { font-size: 5px !important; }
  .optical-coverage-stage .coverage-node > i { left: 10px !important; top: 14px !important; font-size: 15px !important; }
  .optical-coverage-stage .n-deoghar { left: 50% !important; right: auto !important; top: 70px !important; transform: translateX(-50%) !important; }
  .optical-coverage-stage .n-madhupur { left: 12px !important; right: auto !important; top: 166px !important; }
  .optical-coverage-stage .n-rohini { right: 12px !important; left: auto !important; top: 166px !important; }
  .optical-coverage-stage .n-sarath { left: 12px !important; right: auto !important; top: 430px !important; bottom: auto !important; }
  .optical-coverage-stage .n-jasidih { right: 12px !important; left: auto !important; top: 430px !important; bottom: auto !important; }
  .optical-coverage-stage .n-devipur { left: 50% !important; right: auto !important; top: 590px !important; bottom: auto !important; transform: translateX(-50%) !important; }
  .optical-coverage-stage .infrastructure-core {
    left: 50% !important; top: 335px !important;
    width: 112px !important; height: 112px !important;
    transform: translate(-50%,-50%) !important;
  }
  .optical-coverage-stage .infrastructure-core b { font-size: 8.5px !important; }
  .optical-coverage-stage .infrastructure-core small { font-size: 5px !important; }
  .optical-coverage-stage .infrastructure-core em { font-size: 4.8px !important; }

  .coverage-infra-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 9px 10px !important;
    gap: 7px !important;
    border-radius: 14px !important;
  }
  .coverage-infra-bar b { font-size: 8px !important; }
  .coverage-infra-bar small { display: none !important; }
  .coverage-infra-bar strong { font-size: 6px !important; }

  /* Contact / footer */
  .contact-layout { grid-template-columns: 1fr !important; }
  .contact-map-wrap.static-map-wrap { height: 250px !important; min-height: 250px !important; flex-basis: 250px !important; }
  .speednet-footer .footer-grid { grid-template-columns: 1fr !important; }

  /* Floating buttons stay inside the safe visual area. */
  .float {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    width: 52px !important;
    max-width: 52px !important;
  }
  .float a { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; }

  .sn-top { right: 12px !important; bottom: calc(18px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 390px) {
  .container { width: calc(100% - 28px) !important; margin-left: 14px !important; margin-right: 14px !important; }
  .speednet-infra-visual { height: 680px !important; }
  .speednet-infra-visual .infra-node { width: calc(50% - 19px) !important; }
  .speednet-infra-visual .node-a,.speednet-infra-visual .node-b,.speednet-infra-visual .node-c { left: 9px !important; }
  .speednet-infra-visual .node-d,.speednet-infra-visual .node-e,.speednet-infra-visual .node-f { right: 9px !important; }
  .optical-coverage-stage { height: 690px !important; min-height: 690px !important; }
  .optical-coverage-stage .coverage-node { width: calc(50% - 19px) !important; }
  .optical-coverage-stage .n-madhupur,.optical-coverage-stage .n-sarath { left: 9px !important; }
  .optical-coverage-stage .n-rohini,.optical-coverage-stage .n-jasidih { right: 9px !important; }
  .optical-coverage-stage .n-devipur { top: 565px !important; }
}

/* Never let an element with a transform/animation enlarge the page. */
@media (max-width: 767px) {
  [data-aos], .reveal, .stagger > *,
  .hero-dots, .hero::before, .hero::after,
  .services::before, section::before, section::after {
    max-width: 100vw;
  }
}

/* ===== MOBILE COVERAGE: 3 TOP / 3 BOTTOM PROFESSIONAL LAYOUT ===== */
@media (max-width: 800px) {
  .optical-coverage-stage {
    height: 720px !important;
    min-height: 720px !important;
    position: relative !important;
  }

  /* TOP GROUP: Deoghar + Madhupur + Rohini */
  .optical-coverage-stage .n-deoghar {
    left: 50% !important;
    right: auto !important;
    top: 68px !important;
    transform: translateX(-50%) !important;
  }
  .optical-coverage-stage .n-madhupur {
    left: 12px !important;
    right: auto !important;
    top: 166px !important;
  }
  .optical-coverage-stage .n-rohini {
    right: 12px !important;
    left: auto !important;
    top: 166px !important;
  }

  /* CENTRAL CORE — clearly separates the two groups */
  .optical-coverage-stage .infrastructure-core {
    left: 50% !important;
    top: 350px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* BOTTOM GROUP: Sarath + Jasidih + Devipur */
  .optical-coverage-stage .n-sarath {
    left: 12px !important;
    right: auto !important;
    top: 470px !important;
    bottom: auto !important;
  }
  .optical-coverage-stage .n-jasidih {
    right: 12px !important;
    left: auto !important;
    top: 470px !important;
    bottom: auto !important;
  }
  .optical-coverage-stage .n-devipur {
    left: 50% !important;
    right: auto !important;
    top: 590px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Keep the six nodes visually independent and never overlapping. */
  .optical-coverage-stage .coverage-node {
    z-index: 12 !important;
  }
  .optical-coverage-stage .infrastructure-core {
    z-index: 15 !important;
  }
}

@media (max-width: 390px) {
  .optical-coverage-stage {
    height: 700px !important;
    min-height: 700px !important;
  }
  .optical-coverage-stage .n-deoghar { top: 64px !important; }
  .optical-coverage-stage .n-madhupur,
  .optical-coverage-stage .n-rohini { top: 158px !important; }
  .optical-coverage-stage .infrastructure-core { top: 342px !important; }
  .optical-coverage-stage .n-sarath,
  .optical-coverage-stage .n-jasidih { top: 455px !important; }
  .optical-coverage-stage .n-devipur { top: 570px !important; }
}