@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#075cff;
  --blue2:#00c8ff;
  --navy:#06142e;
  --navy2:#0b2455;
  --text:#283852;
  --muted:#6c7b92;
  --soft:#f3f8ff;
  --white:#ffffff;
  --glass:rgba(255,255,255,.16);
  --shadow:0 24px 70px rgba(6,20,46,.14);
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',Arial,sans-serif;
  background:#fff;
  color:var(--text);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92%);margin:auto}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:200;
  background-image:radial-gradient(#000 1px,transparent 1px);
  background-size:4px 4px;
}
.page-loader{
  position:fixed;inset:0;z-index:999;background:linear-gradient(135deg,#06142e,#075cff);
  display:flex;align-items:center;justify-content:center;flex-direction:column;color:white;
  transition:.7s ease;
}
.page-loader.hide{opacity:0;visibility:hidden}
.loader-orb{
  width:78px;height:78px;border-radius:50%;
  background:conic-gradient(from 0deg,#fff,#00c8ff,#075cff,#fff);
  animation:spin 1.1s linear infinite;
  margin-bottom:18px;
}
.loader-orb:after{content:"";display:block;width:56px;height:56px;background:#071638;border-radius:50%;margin:11px}
.page-loader h2{font-size:30px}
.page-loader p{opacity:.75;margin-top:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Top + Nav */
.top-strip{background:#06142e;color:#dceaff;font-size:13px}
.top-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;flex-wrap:wrap}
.navbar{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.74);
  backdrop-filter:blur(24px);border-bottom:1px solid rgba(7,92,255,.12);
  transition:.35s ease;
}
.navbar.scrolled{box-shadow:0 14px 40px rgba(6,20,46,.08)}
.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand,.footer-brand{display:flex;align-items:center;gap:13px}
.brand-mark{
  width:52px;height:52px;border-radius:19px;background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px;
  box-shadow:0 15px 36px rgba(7,92,255,.34);position:relative;overflow:hidden;
}
.brand-mark:before{content:"";position:absolute;inset:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(35deg);animation:shineMove 4s infinite}
.brand-mark span{position:relative}
.brand-mark.small{width:44px;height:44px;border-radius:15px}
.brand-text strong{display:block;color:var(--navy);font-size:20px;letter-spacing:-.4px}
.brand-text small{display:block;color:var(--blue);font-weight:800}
.nav-links{display:flex;align-items:center;gap:22px;font-weight:800;font-size:14px}
.nav-links a{color:#14284b;transition:.25s}.nav-links a:hover{color:var(--blue)}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-login,.nav-cta{
  padding:12px 16px;border-radius:999px;font-weight:900;font-size:13px;
}
.nav-login{background:#edf5ff;color:var(--blue)}
.nav-cta{background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;box-shadow:0 12px 28px rgba(7,92,255,.28)}
.mobile-menu{display:none;width:42px;height:42px;border:0;border-radius:14px;background:#edf5ff;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.mobile-menu span{width:20px;height:2px;background:var(--blue);border-radius:4px}

/* Hero */
.hero{
  min-height:calc(100vh - 122px);position:relative;overflow:hidden;
  background:radial-gradient(circle at 75% 20%,rgba(0,200,255,.28),transparent 35%),
             radial-gradient(circle at 20% 80%,rgba(7,92,255,.2),transparent 33%),
             linear-gradient(135deg,#f8fbff 0%,#eff7ff 45%,#ffffff 100%);
  padding:92px 0 82px;
}
.hero-aurora{
  position:absolute;width:800px;height:800px;right:-300px;top:-260px;border-radius:50%;
  background:conic-gradient(from 180deg,rgba(7,92,255,.35),rgba(0,200,255,.2),transparent,rgba(7,92,255,.32));
  filter:blur(10px);animation:slowFloat 8s ease-in-out infinite alternate;
}
.fiber-lines span{
  position:absolute;height:2px;width:55vw;background:linear-gradient(90deg,transparent,rgba(7,92,255,.28),transparent);
  transform:rotate(-18deg);animation:lineMove 7s linear infinite;
}
.fiber-lines span:nth-child(1){top:20%;left:-10%;animation-delay:0s}
.fiber-lines span:nth-child(2){top:42%;left:12%;animation-delay:1.4s}
.fiber-lines span:nth-child(3){top:63%;left:-20%;animation-delay:2.8s}
.fiber-lines span:nth-child(4){top:78%;left:25%;animation-delay:4.2s}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.hero-badges span,.eyebrow{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  background:#eaf4ff;color:var(--blue);font-weight:900;font-size:13px;
}
.eyebrow{margin-bottom:17px}.eyebrow.white{background:rgba(255,255,255,.16);color:white;border:1px solid rgba(255,255,255,.22)}
.hero h1{
  color:var(--navy);font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-2.8px;
  max-width:800px;
}
.hero p{font-size:19px;line-height:1.75;color:#52637d;margin:24px 0;max-width:690px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  padding:16px 24px;border-radius:999px;font-weight:950;transition:.25s ease;font-size:15px;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;box-shadow:0 18px 42px rgba(7,92,255,.3)}
.btn-glass{background:rgba(255,255,255,.72);color:var(--blue);border:1px solid rgba(7,92,255,.16);backdrop-filter:blur(14px)}
.btn-white{background:white;color:var(--blue);box-shadow:0 15px 38px rgba(0,0,0,.14)}
.full{width:100%}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;max-width:650px}
.hero-metrics div{
  background:rgba(255,255,255,.74);border:1px solid rgba(7,92,255,.13);backdrop-filter:blur(18px);
  border-radius:24px;padding:18px;box-shadow:0 16px 40px rgba(6,20,46,.08)
}
.hero-metrics strong{display:block;color:var(--navy);font-size:24px}
.hero-metrics span{display:block;color:#6b7890;font-size:13px;font-weight:800;margin-top:4px}
.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.wifi-halo{
  position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(7,92,255,.16),transparent 62%);
  border:1px solid rgba(7,92,255,.12);animation:pulse 3s ease-in-out infinite
}
.router-card{
  width:min(440px,100%);min-height:410px;border-radius:42px;padding:38px;
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(238,247,255,.66));
  border:1px solid rgba(7,92,255,.18);box-shadow:var(--shadow);backdrop-filter:blur(18px);
  position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.router{position:relative;width:260px;height:180px;margin-top:40px}
.antenna{position:absolute;width:12px;height:118px;background:linear-gradient(#06142e,#075cff);border-radius:99px;top:-52px}
.antenna.left{left:45px;transform:rotate(-23deg)}.antenna.right{right:45px;transform:rotate(23deg)}
.router-body{
  position:absolute;bottom:0;width:100%;height:120px;border-radius:34px 34px 24px 24px;
  background:linear-gradient(145deg,#071638,#0d2e6c);box-shadow:inset 0 0 28px rgba(255,255,255,.08),0 24px 50px rgba(6,20,46,.25);
}
.router-body:before{content:"";position:absolute;inset:15px 22px;border-radius:22px;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent)}
.router-leds{position:absolute;left:30px;bottom:26px;display:flex;gap:10px}
.router-leds i{width:10px;height:10px;border-radius:50%;background:#00ffba;box-shadow:0 0 14px #00ffba;animation:blink 1.6s infinite}
.router-leds i:nth-child(2){animation-delay:.2s}.router-leds i:nth-child(3){animation-delay:.4s}.router-leds i:nth-child(4){animation-delay:.6s}
.router-logo{position:absolute;right:28px;bottom:22px;color:#fff;font-weight:950;font-size:31px}
.speed-widget{
  margin-top:22px;text-align:center;background:#fff;border-radius:24px;padding:20px 24px;width:100%;
  box-shadow:0 16px 38px rgba(7,92,255,.12);border:1px solid #e6f1ff;
}
.speed-widget span{color:var(--blue);font-weight:900;font-size:13px}.speed-widget strong{display:block;color:var(--navy);font-size:27px;margin:5px 0}.speed-widget small{font-weight:800;color:#718198}
.floating-chip{
  position:absolute;background:#fff;border:1px solid #e7f1ff;border-radius:999px;padding:12px 16px;
  box-shadow:0 18px 45px rgba(6,20,46,.12);font-weight:900;color:#173057;animation:chipFloat 3.5s ease-in-out infinite;
}
.chip-one{left:0;top:90px}.chip-two{right:0;top:150px;animation-delay:.8s}.chip-three{left:40px;bottom:90px;animation-delay:1.5s}

/* Shared sections */
.section{padding:95px 0}
.section-heading{text-align:center;max-width:760px;margin:0 auto 48px}
.section-heading h2,.ott-copy h2,.franchise-copy h2,.coverage-copy h2,.contact-copy h2{
  font-size:clamp(32px,4vw,52px);line-height:1.08;color:var(--navy);letter-spacing:-1.4px;margin-bottom:15px;
}
.section-heading p,.franchise-copy>p,.contact-copy>p{font-size:18px;line-height:1.7;color:var(--muted)}
.quick-actions{margin-top:-44px;position:relative;z-index:10}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.quick-card{
  background:white;border:1px solid #e8f1ff;border-radius:28px;padding:24px;box-shadow:0 18px 50px rgba(6,20,46,.09);
  transition:.25s ease
}
.quick-card:hover{transform:translateY(-8px)}
.quick-card span{font-size:34px}.quick-card strong{display:block;color:var(--navy);font-size:18px;margin:12px 0 4px}.quick-card small{color:var(--muted);font-weight:700}

/* Plans */
.plans-section{background:linear-gradient(180deg,#fff,#f5faff)}
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.plan{
  position:relative;overflow:hidden;background:white;border:1px solid #e5efff;border-radius:34px;padding:30px;
  box-shadow:0 18px 55px rgba(6,20,46,.08);transition:.28s ease;
}
.plan:hover{transform:translateY(-10px);box-shadow:0 26px 70px rgba(7,92,255,.14)}
.plan.featured{background:linear-gradient(160deg,#06142e,#075cff);color:white;border-color:transparent;transform:translateY(-14px)}
.plan.featured .plan-price,.plan.featured h3,.plan.featured p{color:white}.plan.featured li{border-color:rgba(255,255,255,.14);color:#e9f4ff}.plan.featured .plan-top span{background:rgba(255,255,255,.14);color:white}
.shine{position:absolute;inset:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:rotate(35deg);animation:shineMove 4.4s infinite}
.ribbon{position:absolute;right:18px;top:18px;background:#fff;color:var(--blue);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:950}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}
.plan h3{color:var(--navy);font-size:26px}.plan-top span{background:#edf5ff;color:var(--blue);padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900}
.plan-price{font-size:43px;font-weight:950;color:var(--blue);letter-spacing:-1.5px}.plan-price small{font-size:15px;color:inherit;opacity:.75}
.plan p{font-weight:900;color:#33445e;margin:8px 0 18px}
.plan ul{list-style:none;margin-bottom:24px}
.plan li{padding:10px 0;border-bottom:1px solid #edf3ff;color:#63728a;font-weight:700}
.plan a{display:flex;justify-content:center;padding:14px 16px;border-radius:999px;background:#eef6ff;color:var(--blue);font-weight:950}
.plan.featured a{background:#fff;color:var(--blue)}

/* OTT */
.ott-premium{
  background:radial-gradient(circle at 18% 20%,rgba(0,200,255,.16),transparent 34%),
             linear-gradient(135deg,#06142e,#0b3da2 62%,#009bff);
  color:white;overflow:hidden;
}
.ott-premium-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.ott-copy h2,.coverage-copy h2{color:white}.ott-copy p,.coverage-copy p{font-size:18px;line-height:1.75;color:#d9e9ff;margin-bottom:25px}
.ott-pills{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.ott-pills span{padding:11px 15px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.17);font-weight:900}
.tv-frame{border:14px solid #071638;border-radius:36px;background:#071638;padding:10px;box-shadow:0 35px 80px rgba(0,0,0,.35)}
.tv-screen{
  min-height:310px;border-radius:22px;background:
  radial-gradient(circle at 70% 30%,rgba(0,200,255,.45),transparent 34%),
  linear-gradient(135deg,#0b2455,#071638);
  display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;
}
.play-btn{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);font-size:30px;margin-bottom:18px;box-shadow:0 0 0 15px rgba(255,255,255,.1)}
.tv-screen h3{font-size:34px}.tv-screen p{color:#cfe4ff;margin-top:8px}
.ott-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.ott-icons span{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:20px;display:grid;place-items:center;font-size:28px}

/* Franchise */
.franchise{background:#f7fbff}
.franchise-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.earning-card{
  background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;border-radius:28px;padding:25px;margin:30px 0;
  box-shadow:0 24px 60px rgba(7,92,255,.25)
}
.earning-card span,.earning-card small{display:block;opacity:.86;font-weight:700}.earning-card strong{display:block;font-size:24px;margin:8px 0}
.partner-benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.partner-benefits div{background:white;border:1px solid #e5f0ff;border-radius:24px;padding:22px;box-shadow:0 14px 38px rgba(6,20,46,.06)}
.partner-benefits b{color:var(--blue);font-size:14px}.partner-benefits strong{display:block;color:var(--navy);margin:7px 0}.partner-benefits p{color:var(--muted);line-height:1.55}
.apply-panel,.enquiry-panel{
  background:white;border:1px solid #dfeeff;border-radius:34px;padding:34px;box-shadow:var(--shadow)
}
.apply-panel h3,.enquiry-panel h3{font-size:30px;color:var(--navy);margin-bottom:8px}
.apply-panel p{color:var(--muted);margin-bottom:20px}
.apply-panel input,.apply-panel select,.apply-panel textarea,.enquiry-panel input,.enquiry-panel select{
  width:100%;border:1px solid #dcecff;background:#f8fbff;border-radius:16px;padding:15px 16px;margin-bottom:13px;
  font:inherit;font-weight:700;color:#1d3152;outline:none;
}
.apply-panel textarea{min-height:95px;resize:vertical}

/* Business */
.business-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.business-card,.testimonial{
  background:white;border:1px solid #e7f1ff;border-radius:28px;padding:28px;box-shadow:0 18px 50px rgba(6,20,46,.07);
}
.business-card span{font-size:36px}.business-card h3{font-size:22px;color:var(--navy);margin:14px 0 8px}.business-card p,.testimonial p{color:var(--muted);line-height:1.65}

/* Coverage */
.coverage-section{
  padding:95px 0;background:linear-gradient(135deg,#071638,#075cff);color:white;overflow:hidden;
}
.coverage-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center}
.coverage-map{
  position:relative;min-height:420px;border-radius:45px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.24);
}
.map-ring{position:absolute;border:1px solid rgba(255,255,255,.3);border-radius:50%;inset:80px;animation:pulse 2.8s infinite}
.ring2{inset:42px;animation-delay:.8s}.map-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:28px;
  background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:950;font-size:30px;
}
.map-pin{position:absolute;width:18px;height:18px;border-radius:50%;background:#00ffba;box-shadow:0 0 0 10px rgba(0,255,186,.13),0 0 30px rgba(0,255,186,.8)}
.pin1{left:24%;top:29%}.pin2{right:22%;top:41%}.pin3{left:52%;bottom:24%}

/* Testimonials + Contact */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial div{color:#ffbd00;font-size:20px;margin-bottom:12px}.testimonial strong{display:block;margin-top:16px;color:var(--navy)}
.contact{background:#f7fbff}
.contact-layout{display:grid;grid-template-columns:1fr .9fr;gap:42px;align-items:center}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.contact-cards div{background:white;border:1px solid #e4efff;border-radius:24px;padding:20px;box-shadow:0 14px 40px rgba(6,20,46,.06)}
.contact-cards span{font-size:28px}.contact-cards strong,.contact-cards a{display:block}.contact-cards strong{color:var(--navy);margin:8px 0}.contact-cards a{font-size:13px;color:var(--blue);font-weight:900}

/* CTA + Footer */
.final-cta{
  padding:70px 0;background:
  radial-gradient(circle at 80% 20%,rgba(0,200,255,.23),transparent 35%),
  linear-gradient(135deg,#06142e,#075cff);color:white;
}
.final-cta-box{text-align:center}.final-cta h2{font-size:clamp(32px,5vw,56px);letter-spacing:-1.5px}.final-cta p{color:#dcecff;font-size:18px;margin:14px 0 25px}
.final-cta-box div{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.footer{background:#050d1e;color:#bed0eb;padding-top:70px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer h3,.footer h4{color:white;margin-bottom:14px}.footer-about{line-height:1.7;margin-top:16px}.footer a{display:block;color:#bed0eb;margin:11px 0;font-weight:700}.footer a:hover{color:white}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.08);margin-top:46px;padding:22px;color:#8da4c7}
.floating-actions{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:12px;z-index:120}
.float-call,.float-whatsapp{
  width:56px;height:56px;
  border-radius:50%;
  display:grid;place-items:
  center;
  color:white;font-size:23px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  transition:.25s
}
.float-call:hover,.float-whatsapp:hover{transform:translateY(-4px)}
.float-call{background:var(--blue)}.float-whatsapp{background:#25d366}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease, transform .75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@keyframes slowFloat{to{transform:translate(-20px,35px) rotate(20deg)}}
@keyframes pulse{0%,100%{transform:scale(.98);opacity:.7}50%{transform:scale(1.04);opacity:1}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes lineMove{0%{opacity:0;transform:translateX(-16vw) rotate(-18deg)}20%{opacity:1}100%{opacity:0;transform:translateX(42vw) rotate(-18deg)}}
@keyframes shineMove{0%{transform:translateX(-120%) rotate(35deg)}45%,100%{transform:translateX(120%) rotate(35deg)}}

/* Responsive */
@media(max-width:1080px){
  .nav-actions{display:none}
  .nav-links{gap:15px}
  .plans-grid,.business-grid,.quick-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.ott-premium-grid,.franchise-layout,.coverage-grid,.contact-layout{grid-template-columns:1fr}
  .hero-visual{min-height:450px}
}
@media(max-width:800px){
  .top-strip-inner{justify-content:center;text-align:center}
  .mobile-menu{display:flex}
  .nav-links{
    position:absolute;top:82px;left:4%;right:4%;display:none;flex-direction:column;background:white;padding:22px;
    border:1px solid #e5efff;border-radius:24px;box-shadow:0 22px 55px rgba(6,20,46,.12)
  }
  .nav-links.active{display:flex}
  .hero{padding:58px 0 75px}
  .hero-metrics,.partner-benefits,.contact-cards,.testimonial-grid,.footer-grid{grid-template-columns:1fr}
  .plans-grid,.business-grid,.quick-grid{grid-template-columns:1fr}
  .quick-actions{margin-top:0;padding:26px 0}
  .plan.featured{transform:none}
  .router-card{padding:24px}
  .floating-chip{display:none}
}
@media(max-width:520px){
  .brand-text strong{font-size:16px}.brand-text small{font-size:11px}.brand-mark{width:46px;height:46px}
  .hero h1{letter-spacing:-1.5px}
  .hero-buttons,.final-cta-box div{flex-direction:column}
  .btn{width:100%}
  .hero-metrics div{text-align:center}
  .router{transform:scale(.88)}
  .speed-widget strong{font-size:22px}
  .section{padding:72px 0}
}
/* ===== HERO FIX (critical) ===== */

.hero{
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero .container{
  position: relative;
  z-index: 2;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* VERY IMPORTANT: remove accidental stretching */
.hero *{
  height: auto !important;
}