:root{
    --ink:#0B2224;
    --ink-2:#123638;
    --signal:#39D98A;
    --signal-dim:#1F7A54;
    --amber:#F5A623;
    --paper:#F7F4EC;
    --slate:#16292B;
    --slate-soft:#4C6669;
    --line: rgba(57,217,138,0.25);
    --radius: 14px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--slate);
    background:var(--paper);
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Space Grotesk', sans-serif;
    letter-spacing:-0.02em;
  }
  .mono{
    font-family:'JetBrains Mono', monospace;
  }
  .bn{ font-family:'Hind Siliguri', sans-serif; }

  a{ text-decoration:none; }
  ::selection{ background:var(--signal); color:var(--ink); }

  /* ===== Scrollbar / focus ===== */
  :focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }

  /* ===== NAVBAR ===== */
  .navbar{
    background:rgba(11,34,36,0.92);
    backdrop-filter:blur(10px);
    padding:14px 0;
    transition:padding .3s ease;
  }
  .navbar.scrolled{ padding:8px 0; box-shadow:0 6px 24px rgba(0,0,0,0.25); }
  .navbar-brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700; font-size:1.35rem; color:#fff !important;
  }
  .navbar-brand .dot-mark{
    width:14px;height:14px;border-radius:50%;
    background:var(--signal);
    box-shadow:0 0 0 4px rgba(57,217,138,0.18);
    position:relative;
  }
  .navbar-brand .dot-mark::after{
    content:'';
    position:absolute; inset:-8px;
    border:1px solid var(--signal-dim);
    border-radius:50%;
    animation:ping 2.4s ease-out infinite;
  }
  @keyframes ping{
    0%{ transform:scale(0.6); opacity:0.9; }
    100%{ transform:scale(1.8); opacity:0; }
  }
  .navbar .nav-link{
    color:rgba(255,255,255,0.78) !important;
    font-weight:500; font-size:0.95rem;
    margin:0 4px; padding:8px 12px !important;
    transition:color .2s ease;
  }
  .navbar .nav-link:hover{ color:var(--signal) !important; }
  .btn-signal{
    background:var(--signal); color:var(--ink); font-weight:600;
    border:none; padding:10px 22px; border-radius:999px;
    transition:transform .18s ease, box-shadow .18s ease, background .2s;
  }
  .btn-signal:hover{
    background:#4EF0A0; transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(57,217,138,0.35); color:var(--ink);
  }
  .btn-outline-light-line{
    border:1px solid rgba(255,255,255,0.35); color:#fff;
    padding:9px 20px; border-radius:999px; font-weight:500; font-size:.95rem;
  }
  .btn-outline-light-line:hover{ background:rgba(255,255,255,0.08); color:#fff; }

  /* ===== HERO ===== */
  .hero{
    background:radial-gradient(ellipse at 15% 20%, #163B3D 0%, var(--ink) 55%), var(--ink);
    position:relative; overflow:hidden;
    padding:150px 0 100px;
    color:#fff;
  }
  .hero .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-size:.78rem;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--signal); border:1px solid var(--line);
    padding:6px 14px; border-radius:999px; background:rgba(57,217,138,0.06);
  }
  .hero h1{
    font-size:clamp(2.2rem, 5vw, 3.6rem);
    font-weight:700; line-height:1.08; margin:22px 0 20px;
  }
  .hero h1 .accent{ color:var(--signal); }
  .hero p.lead{
    color:rgba(255,255,255,0.72); font-size:1.12rem; max-width:520px;
    line-height:1.65;
  }
  .hero-stats{ display:flex; gap:34px; margin-top:38px; flex-wrap:wrap; }
  .hero-stats .stat-num{
    font-family:'JetBrains Mono', monospace; font-size:1.7rem; font-weight:700; color:var(--signal);
  }
  .hero-stats .stat-label{ font-size:.8rem; color:rgba(255,255,255,0.55); }

  /* --- Network map signature element --- */
  .net-map-wrap{
    position:relative; height:460px; width:100%;
  }
  .net-map-wrap svg{ width:100%; height:100%; }
  .node-label{
    font-family:'JetBrains Mono', monospace; font-size:11px; fill:rgba(255,255,255,0.65);
  }
  .node-label-main{
    font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; fill:#fff;
  }
  .mesh-line{
    stroke:var(--signal-dim); stroke-width:1.4; fill:none;
    stroke-dasharray:5 6;
    animation:dash 18s linear infinite;
    opacity:.65;
  }
  @keyframes dash{ to{ stroke-dashoffset:-400; } }
  .pulse-line{
    stroke:var(--signal); stroke-width:2; fill:none;
    stroke-dasharray:6 500;
    animation:pulseflow 3.2s ease-in-out infinite;
  }
  @keyframes pulseflow{
    0%{ stroke-dashoffset:0; opacity:0; }
    5%{ opacity:1; }
    60%{ stroke-dashoffset:-360; opacity:1; }
    75%{ opacity:0; }
    100%{ stroke-dashoffset:-360; opacity:0; }
  }
  .node-dot{ fill:var(--ink); stroke:var(--signal); stroke-width:2; }
  .node-dot.main{ fill:var(--signal); stroke:#fff; stroke-width:2; }
  .node-ring{
    fill:none; stroke:var(--signal); stroke-width:1;
    opacity:0; transform-origin:center;
    animation:ringpulse 3.2s ease-out infinite;
  }
  @keyframes ringpulse{
    0%{ transform:scale(0.4); opacity:.9; }
    100%{ transform:scale(2.6); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .mesh-line,.pulse-line,.node-ring,.dot-mark::after{ animation:none !important; }
  }

  section{ padding:96px 0; }
  .section-tag{
    font-family:'JetBrains Mono', monospace; font-size:.78rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--signal-dim);
  }
  .section-title{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; color:var(--slate); margin-top:8px; }
  .section-sub{ color:var(--slate-soft); max-width:560px; }

  /* ===== FEATURES ===== */
  .feat-card{
    background:#fff; border:1px solid #E7E2D6; border-radius:var(--radius);
    padding:30px 26px; height:100%; transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  }
  .feat-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(11,34,36,0.08); border-color:var(--signal); }
  .feat-icon{
    width:52px;height:52px;border-radius:12px;
    background:var(--ink); color:var(--signal);
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;
    margin-bottom:18px;
  }
  .feat-card h4{ font-size:1.12rem; font-weight:600; margin-bottom:8px; }
  .feat-card p{ color:var(--slate-soft); font-size:.95rem; margin:0; }

  /* ===== PACKAGES ===== */
  .packages-section{ background:var(--ink); color:#fff; position:relative; }
  .packages-section .section-sub{ color:rgba(255,255,255,0.6); }
  .pkg-card{
    background:var(--ink-2); border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius); padding:34px 28px; height:100%;
    position:relative; transition:transform .25s ease, border-color .25s;
  }
  .pkg-card:hover{ transform:translateY(-6px); border-color:var(--signal); }
  .pkg-card.featured{ border-color:var(--signal); background:linear-gradient(180deg, #16413F, var(--ink-2)); }
  .pkg-badge{
    position:absolute; top:-13px; right:24px;
    background:var(--amber); color:var(--ink); font-weight:700; font-size:.72rem;
    padding:5px 12px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase;
  }
  .pkg-speed{ font-family:'JetBrains Mono', monospace; font-size:2.6rem; font-weight:700; color:var(--signal); line-height:1; }
  .pkg-speed span{ font-size:1rem; color:rgba(255,255,255,0.6); font-weight:500; }
  .pkg-name{ color:rgba(255,255,255,0.7); font-size:.85rem; margin-top:6px; text-transform:uppercase; letter-spacing:.08em; }
  .pkg-price{ font-family:'JetBrains Mono', monospace; font-size:1.5rem; font-weight:700; margin-top:18px; }
  .pkg-price span{ font-size:.85rem; color:rgba(255,255,255,0.55); font-weight:400; }
  .pkg-card ul{ list-style:none; padding:0; margin:22px 0 26px; }
  .pkg-card ul li{ font-size:.9rem; color:rgba(255,255,255,0.75); margin-bottom:10px; display:flex; gap:9px; }
  .pkg-card ul li i{ color:var(--signal); margin-top:2px; }

  /* ===== COVERAGE ===== */
  .coverage-list{ list-style:none; padding:0; margin:0; }
  .coverage-list li{
    display:flex; align-items:center; gap:14px;
    padding:16px 0; border-bottom:1px dashed #D8D2C2;
    font-weight:500;
  }
  .coverage-list li:last-child{ border-bottom:none; }
  .coverage-list i{ color:var(--signal-dim); font-size:1.2rem; }

  .map-frame{
    border-radius:var(--radius); overflow:hidden; border:1px solid #E7E2D6;
    box-shadow:0 20px 50px rgba(11,34,36,0.08);
  }

  /* ===== STEPS ===== */
  .step-item{ position:relative; padding-left:64px; margin-bottom:38px; }
  .step-item:last-child{ margin-bottom:0; }
  .step-num{
    position:absolute; left:0; top:0; width:46px; height:46px; border-radius:12px;
    background:var(--ink); color:var(--signal);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.05rem;
  }
  .step-item h5{ font-weight:600; margin-bottom:6px; }
  .step-item p{ color:var(--slate-soft); margin:0; font-size:.95rem; }
  .step-line{
    position:absolute; left:22px; top:46px; bottom:-38px; width:1px;
    background:repeating-linear-gradient(to bottom, #D8D2C2 0 4px, transparent 4px 9px);
  }
  .step-item:last-child .step-line{ display:none; }

  /* ===== TESTIMONIALS ===== */
  .test-card{
    background:#fff; border:1px solid #E7E2D6; border-radius:var(--radius);
    padding:28px; height:100%;
  }
  .test-card p.quote{ font-size:.98rem; color:var(--slate); line-height:1.7; }
  .test-stars{ color:var(--amber); font-size:.85rem; margin-bottom:12px; }
  .test-person{ display:flex; align-items:center; gap:12px; margin-top:18px; }
  .test-avatar{
    width:42px;height:42px;border-radius:50%;
    background:var(--ink); color:var(--signal);
    display:flex;align-items:center;justify-content:center; font-weight:700;
    font-family:'Space Grotesk', sans-serif;
  }
  .test-person small{ color:var(--slate-soft); }

  /* ===== CONTACT ===== */
  .contact-section{ background:#fff; }
  .contact-card{
    background:var(--ink); color:#fff; border-radius:var(--radius);
    padding:40px; height:100%;
  }
  .contact-row{ display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; }
  .contact-row:last-child{ margin-bottom:0; }
  .contact-row .ic{
    width:44px;height:44px;border-radius:10px; background:rgba(57,217,138,0.12);
    color:var(--signal); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .contact-row h6{ margin:0 0 4px; font-weight:600; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
  .contact-row p{ margin:0; font-size:1.05rem; font-weight:500; }
  .contact-row p a{ color:#fff; }
  .contact-row p a:hover{ color:var(--signal); }

  .form-control, .form-select{
    background:var(--paper); border:1px solid #DDD6C4; border-radius:10px;
    padding:12px 14px; font-size:.95rem;
  }
  .form-control:focus, .form-select:focus{
    border-color:var(--signal); box-shadow:0 0 0 3px rgba(57,217,138,0.15); background:#fff;
  }
  label{ font-weight:600; font-size:.85rem; color:var(--slate); margin-bottom:6px; }

  /* ===== FOOTER ===== */
  footer{ background:var(--ink); color:rgba(255,255,255,0.55); padding:44px 0 26px; font-size:.9rem; }
  footer a{ color:rgba(255,255,255,0.7); }
  footer a:hover{ color:var(--signal); }
  .footer-brand{ font-family:'Space Grotesk', sans-serif; font-weight:700; color:#fff; font-size:1.15rem; }
  .social-btn{
    width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:all .2s ease;
  }
  .social-btn:hover{ background:var(--signal); border-color:var(--signal); color:var(--ink); }

  /* ===== Floating call button ===== */
  .float-call{
    position:fixed; right:22px; bottom:22px; z-index:999;
    width:58px; height:58px; border-radius:50%;
    background:var(--signal); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; box-shadow:0 10px 30px rgba(57,217,138,0.45);
    animation:floatbob 2.6s ease-in-out infinite;
  }
  @keyframes floatbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

  /* Reveal on scroll */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (max-width: 991px){
    .net-map-wrap{ height:320px; margin-top:40px; }
    section{ padding:70px 0; }
    .hero{ padding:130px 0 60px; }
  }
  @media (max-width: 576px){
    .hero-stats{ gap:22px; }
    .contact-card{ padding:28px; }
  }