:root{
  --primary:#2563eb;
  --accent:#0ea5e9;
  --bg:#020617;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:rgba(148,163,184,.22);
  --shadow:0 18px 40px rgba(15,23,42,.78);
  --grad:linear-gradient(135deg,#2563eb,#0ea5e9);
  --grad-cta:linear-gradient(135deg,#22c55e,#0ea5e9);
  --r-lg:18px;
  --r-pill:999px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:radial-gradient(circle at top,#0b1120 0,#020617 55%,#000 100%);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  scroll-behavior:smooth;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 10% 0%,rgba(59,130,246,.3),transparent 60%),
    radial-gradient(circle at 90% 10%,rgba(14,165,233,.35),transparent 60%);
  opacity:.85;
  pointer-events:none;
  z-index:-2;
}

a{color:inherit;text-decoration:none}

.page{max-width:1180px;margin:0 auto;padding:20px 20px 70px}

/* ======================
   Header + Nav
   ====================== */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:var(--r-pill);
  margin-top:18px;
  background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(15,23,42,.92));
  border:1px solid var(--border);
  box-shadow:0 14px 34px rgba(15,23,42,.85);
  backdrop-filter:blur(22px);
  position:sticky;
  top:16px;
  z-index:20;
  flex-wrap:wrap;
}

.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-img{width:auto;height:42px;max-height:42px;max-width:170px;object-fit:contain}

nav{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}

nav a{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:all .18s ease-out;
}

nav a:hover{
  color:#e5e7eb;
  border-color:rgba(148,163,184,.5);
  background:rgba(15,23,42,.7);
}

.nav-cta{
  padding:8px 14px;
  border-radius:999px;
  background:var(--grad-cta);
  color:#ecfdf5;
  font-weight:700;
  border:none;
  box-shadow:0 12px 24px rgba(16,185,129,.35);
}

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.88);
  color:#e5e7eb;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,.65);
}

.menu-toggle svg{width:20px;height:20px}

/* ======================
   Hero + Side card
   ====================== */
.hero{
  margin-top:34px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.hero h1{
  margin:0 0 10px;
  font-size:clamp(2rem,3vw + 1rem,3rem);
  line-height:1.05;
  letter-spacing:-.04em;
}

.hero .gradient{
  background-image:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  max-width:60ch;
}

.pill-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px 4px 4px;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 14px 38px rgba(15,23,42,.9);
  margin-bottom:12px;
  flex-wrap:wrap;
  row-gap:6px;
}

.pill-dot{
  width:26px;
  height:26px;
  border-radius:999px;
  background:conic-gradient(from 140deg,#22c55e,#0ea5e9,#2563eb,#22c55e);
  padding:2px;
}

.pill-dot-inner{
  width:100%;
  height:100%;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 20%,#e5e7eb,#020617);
}

.pill-label{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:52vw;
}

.pill-badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
  border:1px solid rgba(34,197,94,.5);
  white-space:nowrap;
}

.side-card{
  padding:16px;
  border-radius:22px;
  background:radial-gradient(circle at top left,rgba(37,99,235,.2),transparent 55%),rgba(15,23,42,.96);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:var(--shadow);
}

.side-card h3{margin:0 0 10px;font-size:14px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.92);
  color:var(--muted);
}

/* ======================
   Sections + Plans
   ====================== */
.section{margin-top:44px}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.section-head h2{
  margin:0;
  font-size:20px;
  letter-spacing:-.02em;
}

.section-head .desc{
  color:var(--muted);
  font-size:13px;
  max-width:62ch;
}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.plan{
  border-radius:var(--r-lg);
  background:radial-gradient(circle at top left,rgba(37,99,235,.2),transparent 55%),rgba(15,23,42,.96);
  border:1px solid rgba(148,163,184,.30);
  padding:16px;
  box-shadow:0 18px 34px rgba(15,23,42,.8);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:220px;
}

.plan .top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.plan .code{font-weight:800;font-size:13px}

.plan .badge{
  font-size:10px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  color:var(--muted);
  background:rgba(15,23,42,.92);
}

/* Badge variants (force winning styles) */
.plan .badge.badge--ok{
  border-color:rgba(34,197,94,.65)!important;
  color:#bbf7d0!important;
  background:rgba(34,197,94,.12)!important;
}
.plan .badge.badge--warn{
  border-color:rgba(245,158,11,.80)!important;
  color:#fde68a!important;
  background:rgba(245,158,11,.14)!important;
}
.plan .badge.badge--danger{
  border-color:rgba(239,68,68,.85)!important;
  color:#fecaca!important;
  background:rgba(239,68,68,.14)!important;
}

.plan .price{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
}

.plan .per{
  font-size:11px;
  color:var(--muted);
  margin-top:-6px;
}

.plan ul{
  list-style:none;
  padding:0;
  margin:0;
  color:var(--muted);
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.plan ul li:before{
  content:"•";
  color:#22c55e;
  margin-right:6px;
}

.small{font-size:11px;color:var(--muted)}

.group-title{
  margin:26px 0 10px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Buttons (even if hidden now) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(15,23,42,.92);
  color:#e5e7eb;
}

.btn.primary{
  border-color:transparent;
  background:var(--grad);
  box-shadow:0 18px 36px rgba(37,99,235,.45);
}

.btn.primary:hover{transform:translateY(-1px)}

/* ======================
   Map card
   ====================== */
.dc-map{
  margin-top:10px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.30);
  background:rgba(15,23,42,.96);
  box-shadow:0 18px 34px rgba(15,23,42,.8);
  overflow:hidden;
}

.dc-map-head{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:baseline;
  justify-content:space-between;
  padding:14px 16px 10px;
}

.dc-map-title{font-weight:800;letter-spacing:-.02em}
.dc-map-sub{color:var(--muted);font-size:12px;line-height:1.4}

#dcMap{width:100%;height:360px}
@media (max-width:720px){#dcMap{height:300px}}

/* Animated fibre links */
.leaflet-overlay-pane path.fiber-line{
  stroke:rgba(34,197,94,.95);
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:10 14;
  animation:fiberDash 1.2s linear infinite;
  filter:drop-shadow(0 0 6px rgba(34,197,94,.55));
  opacity:.95;
}

.leaflet-overlay-pane path.fiber-line.fiber-line--alt{
  stroke:rgba(34,197,94,.55);
  stroke-width:3;
  stroke-dasharray:4 18;
  animation:fiberDashAlt .9s linear infinite;
  filter:drop-shadow(0 0 4px rgba(34,197,94,.35));
  opacity:.9;
}

@keyframes fiberDash{to{stroke-dashoffset:-120}}
@keyframes fiberDashAlt{to{stroke-dashoffset:120}}

/* Pulse nodes */
.dc-pulse{
  width:14px;
  height:14px;
  border-radius:999px;
  background:rgba(34,197,94,1);
  box-shadow:0 0 0 3px rgba(34,197,94,.22),0 0 18px rgba(34,197,94,.55);
  position:relative;
}

.dc-pulse:after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  border:2px solid rgba(34,197,94,.55);
  animation:pulseRing 1.6s ease-out infinite;
}

@keyframes pulseRing{
  0%{transform:scale(.7);opacity:.9}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}

/* Packets */
.dc-packet{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(187,247,208,1);
  box-shadow:0 0 10px rgba(34,197,94,.9),0 0 18px rgba(34,197,94,.45);
  border:1px solid rgba(34,197,94,.65);
}

/* Custom enquiry callout */
.custom-enquiry-box{
  margin-top:26px;
  padding:18px 20px;
  border-radius:14px;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.35);
  color:#bbf7d0;
  font-size:14px;
  line-height:1.5;
  box-shadow:0 0 22px rgba(34,197,94,.25);
}
.custom-enquiry-box a{color:#22c55e;font-weight:800}

/* ======================
   Footer
   ====================== */
footer{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid rgba(31,41,55,.9);
  font-size:11px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
}

.footer-links{display:flex;flex-wrap:wrap;gap:10px}

/* ======================
   Responsive
   ====================== */
@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pill-label{max-width:100%;white-space:normal}
}

@media (max-width:720px){
  .plan-grid{grid-template-columns:minmax(0,1fr)}

  nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding-top:8px;
  }

  header.nav-open nav{display:flex}

  .menu-toggle{display:inline-flex}

  nav a{
    padding:10px 12px;
    border-radius:14px;
    background:rgba(15,23,42,.72);
    border:1px solid rgba(148,163,184,.18);
  }

  nav a.nav-cta{
    text-align:center;
    padding:12px 14px;
    border-radius:14px;
  }

  /* ✅ Fix: when the mobile menu opens, stop the header becoming a giant pill/circle */
  header.nav-open{
    border-radius:18px;
    align-items:flex-start;
  }
}