*{margin:0;padding:0;box-sizing:border-box}
body{
 font-family:Poppins;
 background:#060b14;
 color:#fff;
 overflow-x:hidden;
}

strong{color:#daa725}

/* HEADER */
.header{
 position:fixed;top:0;width:100%;
 display:flex;justify-content:space-between;
 align-items:center;padding:12px 6%;
 backdrop-filter:blur(12px);
 z-index:100;
}
.header img{
	height: 153px;
    margin-top: -40px;
    margin-bottom: -49px;
}
.header nav a{
 color:#fff;margin:0 15px;text-decoration:none;
}

/* BUTTON */
.btn{
 padding:12px 28px;border-radius:30px;
 background:linear-gradient(90deg,#00c6ff,#ffa200);
 color:#000;font-weight:600;
 transition:0.4s;
}
.btn:hover{transform:translateY(-2px)}
.btn.glow{box-shadow:none}
.btn.glow:hover{box-shadow:0 0 28px rgba(0,198,255,0.6)}

/* HERO */
.hero{
 height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 position:relative;
 overflow:hidden;
 padding:0 8%;
}

/* HERO PACKETS */
.hero-packet{
  fill:#00c6ff;
  filter:drop-shadow(0 0 6px #00c6ff);
  opacity:0.95;
}


.network-wires{
 position:absolute;inset:0;z-index:1;
}
.network-wires path{
 fill:none;
 stroke:#00c6ff44;
 stroke-width:1.2;
 stroke-dasharray:6 12;
 animation:wireMove 45s linear infinite;
}
.network-wires path:nth-child(2){stroke:#ffaa0044;animation-duration:60s}
.network-wires path:nth-child(3){animation-duration:75s}

@keyframes wireMove{
 to{stroke-dashoffset:-600}
}

/* PACKETS */
.packet{
 fill:#00c6ff;
 filter:drop-shadow(0 0 6px #00c6ff);
}

/* HERO CONTENT */
.hero-content{
 position:relative;z-index:2;
 text-align:center;
 max-width:900px;
}
.hero h1{
 font-family:Orbitron;
 font-size:clamp(34px,5vw,54px);
}
.hero span{color:#ffa200}
.hero p{
 font-size:clamp(14px,2vw,18px);
 margin-top:20px;
}

/* SECTIONS */
.about,.services,.testimonials,.gallery,.faq,.contact{
 padding:140px 10%;
}

/* ABOUT */
.about{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:80px;
 align-items:center;
}
.about img{
 width:100%;
 border-radius:30px;
 transition:0.7s;
}
.about-image:hover img{
 transform:rotateY(-10deg) scale(1.04);
 box-shadow:0 40px 90px rgba(0,198,255,0.35);
}

/* SERVICES */
.service-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:30px;
}
.service-card{
 background:#0c1526;
 padding:40px;border-radius:24px;
 text-align:center;
 transition:0.4s;
}
.service-card:hover{
 transform:translateY(-10px);
 box-shadow:0 30px 80px rgba(0,198,255,0.25);
}

/* TESTIMONIAL */
.testimonial-card.premium{
 max-width:620px;
 margin:auto;
 padding:45px;
 border-radius:32px;
 background:rgba(255,255,255,0.06);
 backdrop-filter:blur(14px);
 border:1px solid rgba(0,198,255,0.35);
 animation:float 6s ease-in-out infinite;
}
@keyframes float{
 50%{transform:translateY(-14px)}
}

/* GALLERY */
.gallery-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:30px;
}
.gallery-card{
 height:220px;
 border-radius:26px;
 background:#0c1526;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:0.4s;
}
.gallery-card:hover{
 transform:translateY(-10px) scale(1.03);
 box-shadow:0 30px 70px rgba(0,198,255,0.25);
}

/* FAQ */
.faq-item{
 background:#0c1526;
 margin-bottom:18px;
 padding:28px;
 border-radius:20px;
 cursor:pointer;
}
.faq-item p{
 max-height:0;
 overflow:hidden;
 opacity:0;
 transition:0.5s;
}
.faq-item.open p{
 max-height:200px;
 opacity:1;
}

/* CONTACT */
.contact form{
 max-width:520px;
 margin:auto;
 display:flex;
 flex-direction:column;
 gap:18px;
}
.contact input,
.contact select,
.contact textarea{
 background:#0c1526;
 color:#fff;
 border:1px solid #1f2f4f;
 padding:16px;
 border-radius:14px;
}
.contact input:focus,
.contact textarea:focus,
.contact select:focus{
 outline:none;
 border-color:#00c6ff;
 box-shadow:0 0 15px #00c6ff44;
}

/* FOOTER */
.footer{
 background:#05080f;
 padding:80px 10% 30px;
}
.footer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:40px;
}
.footer img{
	height: 153px;
    margin-top: -40px;
    margin-bottom: -49px;
}
.footer a{
 display:block;
 color:#ccc;
 margin:6px 0;
}
.footer a:hover{color:#00c6ff}
.footer p{
 text-align:center;
 margin-top:40px;
}

/* RESPONSIVE */
@media(max-width:900px){
 .about{grid-template-columns:1fr}
 .header nav{display:none}
 .about,.services,.testimonials,.gallery,.faq,.contact{
   padding:120px 6%;
 }
}





/* ================= MOBILE MENU ================= */
.hamburger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}
.hamburger span{
  width:26px;height:2px;
  background:#fff;
}

.mobile-menu{
  position:fixed;
  top:0;right:-100%;
  width:70%;
  height:100vh;
  background:#060b14;
  z-index:999;
  padding:100px 40px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.mobile-menu a{
  color:#fff;
  font-size:20px;
  text-decoration:none;
}

/* ================= WORLD MAP ================= */
.world-map{
  padding:140px 10%;
  text-align:center;
}
.map-svg{
  max-width:100%;
  margin-top:60px;
}

.map-land{
  fill:none;
  stroke:#1f2f4f;
  stroke-width:1.5;
}

.route{
  fill:none;
  stroke:#00c6ff88;
  stroke-width:2;
  stroke-dasharray:5 10;
  animation:routeMove 25s linear infinite;
}

@keyframes routeMove{
  to{stroke-dashoffset:-400}
}

.route-packet{
  fill:#00c6ff;
  filter:drop-shadow(0 0 6px #00c6ff);
}

.hub{
  fill:#ffaa00;
  filter:drop-shadow(0 0 12px #ffaa00);
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .desktop-nav{display:none}
  .hamburger{display:flex}
  .world-map{padding:120px 6%}
}