:root{--navy:#05204a;--sky:#2b8cff;--accent:#e63946;--bg:#f6fbff;--muted:#6b7280;--card:#fff}
*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter, Poppins, system-ui; background:var(--bg);color:var(--navy);-webkit-font-smoothing:antialiased}
.container{width:92%;max-width:1200px;margin:0 auto;padding:1.25rem 0}
.site-header{position:sticky;top:0;background:rgb(246, 248, 248);backdrop-filter:blur(6px);border-bottom:1px solid rgba(11,61,145,0.06);z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:1rem}
.brand img.logo-inline{height:200px}
.nav{display:flex;gap:.6rem;align-items:center}
.nav-link{padding:.4rem .6rem;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600}
.nav-link.active{background:linear-gradient(90deg,rgba(43,140,255,0.08),rgba(230,57,70,0.03));color:var(--navy)}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--navy),var(--sky));color:#fff;box-shadow:0 12px 30px rgba(43,140,255,0.06);transition:transform .18s,box-shadow .18s}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(43,140,255,0.12)}
.btn-cta{background:var(--accent);color:#fff;transition:box-shadow .18s}
.btn-cta:hover{box-shadow:0 16px 40px rgba(230,57,70,0.14);transform:translateY(-3px)}
.hero{padding:3rem 0}
.hero-inner{display:grid;grid-template-columns:1fr 520px;gap:2rem;align-items:center}
.lead{color:var(--muted);margin-top:.4rem;margin-bottom:1rem}
.wifi-anim{position:relative;display:flex;align-items:center;justify-content:center;height:340px}
.router{position:relative;width:260px;height:160px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff,#f3fbff);box-shadow:0 20px 50px rgba(11,61,145,0.06)}
.router img{width:220px;height:auto}
.wifi-signal{position:absolute;border-radius:999px;border:3px solid rgba(43,140,255,0.25);width:120px;height:120px;animation:ping 2.4s infinite ease-out;opacity:0;pointer-events:none}
.wifi-signal:nth-child(1){width:120px;height:120px;animation-delay:0s}
.wifi-signal:nth-child(2){width:180px;height:180px;animation-delay:.4s}
.wifi-signal:nth-child(3){width:240px;height:240px;animation-delay:.8s}
@keyframes ping{0%{opacity:.8;transform:scale(.4)}70%{opacity:.12;transform:scale(1.05)}100%{opacity:0;transform:scale(1.2)}}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.plan{background:var(--card);padding:1.25rem;border-radius:12px;border:1px solid rgba(11,61,145,0.04);box-shadow:0 12px 30px rgba(11,61,145,0.03);transition:transform .18s,box-shadow .18s}
.plan:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(11,61,145,0.08)}
.price{font-weight:800;color:var(--navy);margin-top:.6rem;font-size:1.15rem}
.loading-overlay{position:fixed;inset:0;background:linear-gradient(180deg,#8cc3dd94,rgba(106, 169, 199, 0.407));display:flex;align-items:center;justify-content:center;z-index:120}
.loading-overlay .logo-wrap img{height:400px;animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.95}100%{transform:scale(1);opacity:1}}
.site-footer{background:#05122a;color:#75bee3;padding:1.25rem 0;margin-top:2.5rem}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;text-align:center}.nav{display:none}.nav-toggle{display:inline-block}body.nav-open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:64px;background:#fff;padding:1rem;box-shadow:0 12px 30px rgba(0,0,0,0.08)}}