
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(circle at 14% 16%,rgba(0,212,255,.18),transparent 26%),
    radial-gradient(circle at 84% 18%,rgba(143,26,26,.28),transparent 32%),
    linear-gradient(120deg,rgba(6,22,44,.98),rgba(7,25,48,.88)),
    url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=2000&q=85');
  background-size:cover;background-position:center;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,212,255,.06) 1px,transparent 1px),
    linear-gradient(rgba(0,212,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
}
.hero .container{position:relative;z-index:2;min-height:690px;display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;padding-block:80px}
.hero-chip{
  display:inline-flex;padding:9px 14px;border-radius:999px;border:1px solid rgba(0,212,255,.3);
  background:rgba(255,255,255,.06);color:#9cecff;font-size:.78rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;
}
.hero h1{font-size:clamp(2.8rem,5.4vw,5rem);color:#fff;letter-spacing:-.055em;margin-bottom:20px}
.hero p{font-size:1.13rem;color:#dce8f5;max-width:720px;margin-bottom:28px}
.hero-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0}
.hero-kpi{
  padding:15px;border-radius:16px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)
}
.hero-kpi strong{display:block;color:#fff;font-size:1.02rem;margin-bottom:3px}
.hero-kpi span{color:#c7d7e8;font-size:.8rem}
.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.network-orbit{
  width:min(500px,90vw);aspect-ratio:1;border-radius:50%;position:relative;
  border:1px dashed rgba(0,212,255,.25);animation:spin 26s linear infinite;
}
.network-orbit::before{
  content:"";position:absolute;inset:65px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);animation:spinReverse 18s linear infinite;
}
.network-core{
  position:absolute;inset:50%;transform:translate(-50%,-50%);
  width:132px;height:132px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 35%,#14dfff,var(--brand) 70%);
  color:#fff;font-weight:900;font-size:1.35rem;letter-spacing:.08em;
  border:7px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 18px rgba(0,212,255,.07),0 16px 38px rgba(0,0,0,.3);
  animation:pulseCore 3.5s ease-in-out infinite;
}
.orbit-node{
  position:absolute;padding:9px 12px;border-radius:999px;background:rgba(10,37,64,.9);
  border:1px solid rgba(0,212,255,.3);color:#fff;font-weight:800;font-size:.78rem;
  box-shadow:0 12px 24px rgba(0,0,0,.2)
}
.n1{left:42%;top:-18px}.n2{right:-10px;top:26%}.n3{right:6%;bottom:10%}
.n4{left:40%;bottom:-18px}.n5{left:-16px;bottom:25%}.n6{left:2%;top:13%}
.hero-float{
  position:absolute;padding:14px 16px;width:220px;border-radius:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.22);animation:float 7s ease-in-out infinite;
}
.hero-float strong{display:block;color:#fff;font-size:.92rem}.hero-float span{font-size:.8rem;color:#cfdded}
.hf1{top:8px;right:-16px}.hf2{bottom:30px;right:10px;animation-delay:-2s}.hf3{bottom:20px;left:-12px;animation-delay:-4s}
.page-hero{
  padding:86px 0;background:
  radial-gradient(circle at 15% 20%,rgba(0,212,255,.15),transparent 25%),
  linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
}
.page-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4.3rem);margin-bottom:14px}
.page-hero p{max-width:760px;color:#d9e5f3;font-size:1.08rem}
.trust-strip{
  margin-top:-30px;position:relative;z-index:4;
}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.trust-item{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:17px;
  display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow)
}
.trust-item span{font-size:1.25rem}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.plan-card{display:flex;flex-direction:column;min-height:100%}
.plan-card.featured{
  background:linear-gradient(145deg,#a71d1d,var(--accent));color:#fff;border-color:#ff5555;
  transform:translateY(-9px)
}
.plan-card.featured h3,.plan-card.featured .price,.plan-card.featured p,.plan-card.featured li{color:#fff}
.plan-card .speed{font-size:3rem;font-weight:900;color:var(--brand);line-height:1;margin:16px 0 8px}
.plan-card.featured .speed{color:#fff}
.plan-card .speed small{font-size:1rem}
.plan-card .plan-actions{margin-top:auto;padding-top:20px}
.comparison{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)
}
.cta-panel{
  padding:36px;border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at right top,rgba(0,212,255,.18),transparent 30%),
    linear-gradient(135deg,var(--brand),#123861);
  color:#fff;display:grid;grid-template-columns:1.5fr .5fr;gap:28px;align-items:center;box-shadow:var(--shadow-lg)
}
.cta-panel h2{color:#fff;font-size:2.1rem;margin-bottom:10px}
.cta-panel p{color:#d8e5f4}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat-card{text-align:center;padding:24px;border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.stat-value{font-size:2.3rem;font-weight:900;color:var(--brand)}
.map-shell{display:grid;grid-template-columns:420px 1fr;gap:24px;align-items:stretch}
.map-panel,.form-panel{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.form-panel{padding:26px}
#coverageMap{min-height:570px}
.result-box{margin-top:16px;padding:16px;border-radius:12px;background:#f8fafc;border:1px solid var(--border)}
.speedtest-shell{background:#fff;border:1px solid var(--border);border-radius:18px;padding:10px;box-shadow:var(--shadow);overflow:hidden}
.speedtest-shell iframe{width:100%;height:560px;border:0}
.marquee{overflow:hidden;border-radius:16px;background:linear-gradient(90deg,var(--brand),#123861);box-shadow:var(--shadow)}
.marquee-track{display:flex;gap:14px;min-width:max-content;padding:14px;animation:marquee 28s linear infinite}
.marquee-track span{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.09);color:#fff;font-weight:800}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes pulseCore{50%{transform:translate(-50%,-50%) scale(1.05)}}
@keyframes float{50%{transform:translateY(-14px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:1120px){
  .hero .container{grid-template-columns:1fr}.hero-visual{min-height:520px}
  .hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-shell{grid-template-columns:1fr}
}
@media(max-width:760px){
  .hero .container{min-height:auto;padding-block:70px}.hero h1{font-size:2.7rem}
  .hero-kpis,.trust-grid,.plan-grid,.stats-grid{grid-template-columns:1fr}
  .hero-visual{min-height:430px}.network-orbit{width:360px}.hero-float{display:none}
  .cta-panel{grid-template-columns:1fr;padding:24px}.plan-card.featured{transform:none}
  .speedtest-shell iframe{height:430px}
}
