:root{
  --bg:#06101b;
  --bg-2:#0b1628;
  --panel:rgba(14,25,43,.78);
  --panel-2:rgba(17,37,66,.92);
  --line:rgba(255,255,255,.09);
  --text:#eef4ff;
  --muted:#b7c5dc;
  --blue:#1d4ed8;
  --blue-2:#2563eb;
  --gold:#f4b63d;
  --gold-2:#ffd36d;
  --success:#84d8b4;
  --shadow:0 20px 48px rgba(0,0,0,.32);
  --radius:24px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(244,182,61,.12), transparent 20%),
    radial-gradient(circle at 10% 10%, rgba(37,99,235,.13), transparent 24%),
    linear-gradient(180deg,#06101b 0%,#091425 45%,#06101b 100%);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--container), calc(100% - 2rem)); margin:0 auto}

.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(6,16,27,.76);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{display:flex; align-items:center; gap:1rem}
.brand img{height:50px; width:auto}
.brand-text{display:none}
.nav-links{list-style:none; display:flex; gap:1.3rem; margin:0; padding:0; align-items:center; flex-wrap:wrap}
.nav-links a{
  color:var(--muted); font-weight:700; transition:.2s ease; position:relative;
}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:999px;
}
.btn, .btn-outline, button, input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:999px; padding:1rem 1.35rem; font-weight:800; border:0; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn{
  color:#0f1930;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 12px 28px rgba(244,182,61,.24);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(244,182,61,.28)}
.btn-outline{
  border:1px solid rgba(255,255,255,.14);
  color:var(--text); background:rgba(255,255,255,.03);
}
.btn-outline:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.24)}
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100vh - 84px);
  display:flex; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,16,27,.88) 0%, rgba(6,16,27,.78) 45%, rgba(6,16,27,.56) 100%),
    url('assets/images/infra.jpg') center/cover no-repeat;
  transform:scale(1.02);
}
.hero::after{
  content:""; position:absolute; inset:auto -10% -25% auto; width:580px; height:580px;
  background:radial-gradient(circle, rgba(37,99,235,.18), transparent 60%);
  filter:blur(16px);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; padding:5.5rem 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .95rem;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  border-radius:999px; color:var(--success); font-size:.95rem; margin-bottom:1rem;
}
.hero h1, .page-hero h1{
  margin:0 0 1rem; font-size:clamp(2.7rem, 5vw, 5rem); line-height:1.02; letter-spacing:-.045em;
}
.hero p, .page-hero p, .section-lead{
  color:var(--muted); font-size:1.08rem; max-width:720px;
}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem}
.glass-card,.stat-card,.card,.feature-card,.client-card,.timeline-card,.contact-card,.package{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.glass-card{padding:1.35rem}
.glass-card h3{margin:.1rem 0 .5rem}
.check-list,.service-list,.contact-list,.mini-list{list-style:none; margin:0; padding:0}
.check-list li,.service-list li,.contact-list li,.mini-list li{
  position:relative; padding-left:1.25rem; margin:.75rem 0; color:var(--muted);
}
.check-list li::before,.service-list li::before,.contact-list li::before,.mini-list li::before{
  content:"•"; position:absolute; left:0; color:var(--gold);
}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem}
.stat-card{padding:1rem}
.stat-card strong{display:block; font-size:1.45rem; margin-bottom:.15rem}
.section,.page-hero{padding:5rem 0}
.page-hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.section-title{font-size:clamp(2rem, 3vw, 3rem); margin:0 0 .8rem}
.grid-2,.grid-3,.grid-4{display:grid; gap:1.2rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card,.feature-card,.package,.client-card,.timeline-card,.contact-card{padding:1.4rem}
.card-icon{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(37,99,235,.24), rgba(244,182,61,.2));
  border:1px solid rgba(255,255,255,.08); font-size:1.35rem; margin-bottom:1rem;
}
.card h3,.feature-card h3,.package h3,.client-card h3,.timeline-card h3,.contact-card h3{margin:.15rem 0 .55rem}
.card p,.feature-card p,.package p,.client-card p,.timeline-card p,.contact-card p,.small{color:var(--muted)}
.highlight{color:var(--gold)}
.client-logo-box{
  background:#f4f6fb; border-radius:18px; padding:1rem; display:flex; align-items:center; justify-content:center;
  min-height:130px; margin-bottom:1rem;
}
.client-logo-box img{max-height:95px; width:auto}
.kpi-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.4rem;
}
.kpi{
  padding:1rem; text-align:center; border-radius:20px; background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.kpi strong{display:block; font-size:1.6rem; margin-bottom:.2rem}
.package.popular{
  outline:2px solid rgba(244,182,61,.48);
  background:linear-gradient(180deg, rgba(17,37,66,.95), rgba(11,22,40,.95));
}
.badge{
  display:inline-block; padding:.35rem .7rem; border-radius:999px; font-size:.85rem; font-weight:800;
  background:rgba(244,182,61,.14); color:var(--gold); margin-bottom:.8rem;
}
.client-band{
  padding:1rem 1.2rem; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.contact-layout{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.contact-form{display:grid; gap:.9rem}
.contact-form input,.contact-form textarea{
  width:100%; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  background:rgba(255,255,255,.03); color:var(--text); font:inherit; padding:1rem 1rem;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(183,197,220,.85)}
.contact-form input:focus,.contact-form textarea:focus{
  outline:2px solid rgba(244,182,61,.35); border-color:rgba(244,182,61,.4)
}
.form-status{
  display:none; padding:.95rem 1rem; border-radius:14px; font-weight:700; border:1px solid transparent;
}
.form-status.success{display:block; background:rgba(132,216,180,.12); border-color:rgba(132,216,180,.28); color:#baf3da}
.form-status.error{display:block; background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.28); color:#ffc0c0}
.cta-box{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:2rem; border-radius:28px;
  background:linear-gradient(135deg, rgba(29,78,216,.18), rgba(244,182,61,.1), rgba(6,16,27,.9));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
footer{
  margin-top:2rem; padding:2rem 0; border-top:1px solid var(--line); color:var(--muted)
}
.footer-grid{display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:1.2rem}
.footer-links{list-style:none; margin:0; padding:0}
.footer-links li{margin:.5rem 0}
.footer-grid h4{margin-top:0; color:var(--text)}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}

@media (max-width: 1024px){
  .hero-grid,.grid-4,.grid-3,.grid-2,.footer-grid,.contact-layout,.kpi-strip,.stats{grid-template-columns:1fr 1fr}
  .cta-box{flex-direction:column; align-items:flex-start}
}
@media (max-width: 760px){
  .nav-inner{flex-direction:column; align-items:flex-start; padding:1rem 0}
  .hero{min-height:auto}
  .hero-grid,.grid-4,.grid-3,.grid-2,.footer-grid,.contact-layout,.kpi-strip,.stats{grid-template-columns:1fr}
  .hero-grid{padding:4rem 0}
  .brand img{height:42px}
}


.tech-logo-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
}
.tech-logo{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem .9rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow:var(--shadow);
  color:var(--text);
  font-weight:800;
  letter-spacing:-.02em;
  position:relative;
  overflow:hidden;
}
.tech-logo::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
}
.tech-logo.ms::before{background:linear-gradient(135deg,#7FBA00,#00A4EF,#FFB900,#F25022);}
.tech-logo.az::before{background:linear-gradient(135deg,#2563eb,#38bdf8);}
.tech-logo.vm::before{background:linear-gradient(135deg,#f59e0b,#f97316);}
.tech-logo.hv::before{background:linear-gradient(135deg,#2563eb,#1d4ed8);}
.tech-logo.so::before{background:linear-gradient(135deg,#10b981,#22c55e);}
.tech-logo.fo::before{background:linear-gradient(135deg,#ef4444,#f97316);}
.tech-logo.ve::before{background:linear-gradient(135deg,#22c55e,#84cc16);}
.tech-logo.mi::before{background:linear-gradient(135deg,#0ea5e9,#8b5cf6);}
.tech-logo.es::before{background:linear-gradient(135deg,#14b8a6,#22c55e);}
.tech-logo.ws::before{background:linear-gradient(135deg,#60a5fa,#2563eb);}
.tech-logo.dn::before{background:linear-gradient(135deg,#f59e0b,#eab308);}
.tech-logo.ad::before{background:linear-gradient(135deg,#3b82f6,#06b6d4);}

.tech-note{
  margin-top:1.25rem;
  padding:1rem 1.2rem;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--muted);
}
.tech-note strong{color:var(--text)}

@media (max-width: 1024px){
  .tech-logo-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 760px){
  .tech-logo-grid{grid-template-columns:repeat(2,1fr)}
}


.network-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.55;
  pointer-events:none;
}
.hero-grid{position:relative; z-index:2}