:root {
  --navy:#06152f;
  --navy-2:#071d43;
  --blue:#087cff;
  --blue-2:#0b5fff;
  --cyan:#19b7ff;
  --white:#ffffff;
  --text:#0c1940;
  --muted:#667085;
  --light:#f6f8fc;
  --border:#e7ecf5;
  --shadow:0 18px 45px rgba(8, 31, 73, .10);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:"Inter",sans-serif;
  color:var(--text);
  background:#fff;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(1380px, calc(100% - 48px)); margin:auto; }

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(5,18,44,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.nav-wrap {
  min-height:76px;
  display:flex;
  align-items:center;
  gap:32px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:white;
  min-width:220px;
}
.brand-mark {
  width:45px;
  height:45px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:800;
  color:white;
  background:linear-gradient(135deg,#00a4ff,#0759ff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand strong { display:block; font-size:18px; letter-spacing:.2px; }
.brand strong span { color:#168dff; }
.brand small { display:block; font-size:9px; margin-top:2px; letter-spacing:.7px; opacity:.9; }

.nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:26px;
}
.nav a {
  color:#fff;
  font-size:12px;
  font-weight:600;
  position:relative;
  padding:30px 0 26px;
}
.nav a::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:17px;
  height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transition:.25s;
}
.nav a:hover::after,.nav a.active::after { transform:scaleX(1); }
.nav-cta { margin-left:14px; white-space:nowrap; }
.menu-btn { display:none; }

.btn {
  border:0;
  border-radius:8px;
  min-height:46px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-weight:700;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
  transition:.25s;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary {
  color:#fff;
  background:linear-gradient(90deg,var(--blue),var(--blue-2));
  box-shadow:0 12px 25px rgba(8,124,255,.25);
}
.btn-outline {
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.04);
}
.btn-light {
  border:1px solid #b9c8e1;
  color:#123365;
  background:white;
}

.hero {
  min-height:560px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  color:white;
  background:
    radial-gradient(circle at 78% 46%, rgba(0,126,255,.30), transparent 28%),
    linear-gradient(90deg,#041329 0%,#061c45 46%,#062b6b 100%);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,126,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,126,255,.10) 1px, transparent 1px);
  background-size:55px 55px;
  transform:perspective(600px) rotateX(60deg) translateY(280px) scale(1.6);
  transform-origin:center bottom;
  opacity:.45;
}
.hero-glow {
  position:absolute;
  right:10%;
  top:10%;
  width:600px;
  height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,153,255,.25), transparent 64%);
  filter:blur(20px);
}
.city-silhouette {
  position:absolute;
  right:-2%;
  bottom:0;
  width:58%;
  height:78%;
  opacity:.7;
  background:
    linear-gradient(90deg,transparent 0 8%,#0d56a2 8% 13%,transparent 13% 16%,#0e3f81 16% 20%,transparent 20% 24%,#0a4d96 24% 30%,transparent 30% 34%,#0b61bd 34% 41%,transparent 41% 45%,#0a4286 45% 51%,transparent 51% 56%,#0b5aad 56% 62%,transparent 62% 67%,#0b4083 67% 73%,transparent 73% 78%,#0c5bb1 78% 86%,transparent 86%);
  clip-path:polygon(0 100%,0 78%,5% 78%,5% 52%,10% 52%,10% 67%,15% 67%,15% 30%,21% 30%,21% 57%,27% 57%,27% 22%,34% 22%,34% 48%,40% 48%,40% 10%,47% 10%,47% 41%,54% 41%,54% 28%,62% 28%,62% 55%,69% 55%,69% 36%,76% 36%,76% 63%,84% 63%,84% 46%,91% 46%,91% 70%,100% 70%,100% 100%);
  filter:drop-shadow(0 0 18px #0a83ff);
}
.hero-content { position:relative; z-index:2; }
.hero-copy { max-width:690px; padding:86px 0; }
.eyebrow {
  color:var(--blue);
  font-weight:800;
  font-size:13px;
  letter-spacing:.4px;
  margin:0 0 20px;
}
.hero h1 {
  font-size:58px;
  line-height:1.05;
  margin:0 0 24px;
  letter-spacing:-2.5px;
}
.hero h1 span { color:#1678ff; }
.lead {
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.88);
  max-width:650px;
}
.hero-actions { display:flex; gap:18px; margin-top:34px; }

.section { padding:78px 0; }
.section-sm { padding:42px 0; }
.section-heading { margin-bottom:38px; }
.section-heading.center { text-align:center; }
.section-heading h2 {
  margin:0;
  font-size:32px;
  line-height:1.25;
}

.cards {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px;
}
.card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px 24px 24px;
  min-height:245px;
  box-shadow:var(--shadow);
  transition:.25s;
}
.card:hover { transform:translateY(-7px); border-color:#b9d8ff; }
.icon {
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  font-size:22px;
  font-weight:800;
  background:#eaf3ff;
  margin-bottom:18px;
}
.card h3 { margin:0 0 12px; font-size:17px; }
.card p { color:#35405c; font-size:13.5px; line-height:1.55; min-height:90px; }
.card > a { color:var(--blue); font-size:24px; }

.stats {
  background:linear-gradient(90deg,#061b44,#052c68);
  color:white;
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat {
  padding:28px 34px;
  display:flex;
  gap:20px;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.18);
}
.stat:last-child { border-right:0; }
.stat-icon { font-size:38px; color:var(--blue); }
.stat strong,.stat b { font-size:28px; }
.stat small {
  display:block;
  margin-top:4px;
  line-height:1.4;
  color:rgba(255,255,255,.8);
  font-size:11px;
}

.reference-row {
  display:flex;
  align-items:center;
  gap:40px;
}
.ref-title {
  min-width:210px;
  font-size:12px;
}
.ref-title span {
  display:block;
  width:74px;
  height:2px;
  margin-top:12px;
  background:var(--blue);
}
.logos {
  flex:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.logo-pill {
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid #dfe6f2;
  font-weight:800;
  color:#1d447d;
  font-size:13px;
}
.references .center { text-align:center; margin-top:20px; }

.about-contact {
  background:linear-gradient(90deg,#f7f9fd 0 50%,#061b44 50% 100%);
}
.about-contact-grid {
  display:grid;
  grid-template-columns:1fr .55fr 1.45fr;
  min-height:400px;
  align-items:stretch;
}
.about {
  padding:55px 45px 55px 0;
}
.about h2,.contact-card h2 { margin:0 0 12px; font-size:25px; }
.underline { width:45px; height:3px; background:var(--blue); margin:0 0 20px; }
.about p { color:#3a4662; font-size:13px; line-height:1.7; }
.about-image {
  margin:28px 0;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 45%,rgba(20,139,255,.55),transparent 30%),
    linear-gradient(140deg,#b5d9ff,#0e5bb0);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.network-lines {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(35deg, transparent 45%, rgba(255,255,255,.32) 46% 47%, transparent 48%),
    linear-gradient(145deg, transparent 45%, rgba(255,255,255,.25) 46% 47%, transparent 48%);
  background-size:90px 90px;
}
.silhouettes { color:#051b3e; font-size:45px; letter-spacing:3px; opacity:.7; }

.contact-card {
  color:white;
  padding:50px 0 50px 48px;
}
.contact-card .eyebrow { color:#19a1ff; }
.contact-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:28px;
}
.contact-details { font-size:12px; line-height:2.2; color:#eef5ff; }
.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.contact-form input,.contact-form textarea {
  width:100%;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.03);
  color:white;
  border-radius:5px;
  padding:12px 14px;
  outline:0;
}
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--blue); }
.contact-form textarea { grid-column:1/-1; min-height:90px; resize:vertical; }
.contact-form button { grid-column:1/-1; width:100%; }

.footer {
  background:#041229;
  color:white;
  padding:22px 0 14px;
}
.footer-grid {
  display:grid;
  grid-template-columns:260px 1fr 160px;
  gap:30px;
  align-items:center;
}
.footer-links {
  display:flex;
  justify-content:center;
  gap:28px;
  font-size:11px;
  text-transform:uppercase;
}
.socials { display:flex; justify-content:flex-end; gap:22px; font-weight:800; }
.copyright { text-align:center; font-size:10px; color:rgba(255,255,255,.6); padding-top:18px; }

@media (max-width:1100px) {
  .nav { display:none; }
  .menu-btn {
    display:block;
    margin-left:auto;
    background:none;
    color:white;
    border:0;
    font-size:28px;
  }
  .nav.open {
    display:flex;
    position:absolute;
    left:0;
    right:0;
    top:76px;
    flex-direction:column;
    padding:18px 24px 28px;
    background:#06152f;
    gap:0;
  }
  .nav.open a { width:100%; padding:14px 0; }
  .nav-cta { display:none; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .cards .card:last-child { grid-column:1/-1; }
  .logos { grid-template-columns:repeat(4,1fr); }
  .about-contact { background:#f7f9fd; }
  .about-contact-grid { grid-template-columns:1fr; }
  .about { padding-right:0; }
  .about-image { min-height:260px; }
  .contact-card {
    padding:40px;
    background:#061b44;
    border-radius:18px;
    margin-bottom:40px;
  }
}

@media (max-width:760px) {
  .container { width:min(100% - 28px, 1380px); }
  .hero { min-height:620px; }
  .city-silhouette { width:100%; opacity:.28; }
  .hero-copy { padding:70px 0; }
  .hero h1 { font-size:42px; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .section { padding:55px 0; }
  .cards { grid-template-columns:1fr; }
  .cards .card:last-child { grid-column:auto; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat { border-bottom:1px solid rgba(255,255,255,.18); }
  .reference-row { flex-direction:column; align-items:flex-start; }
  .logos { grid-template-columns:repeat(2,1fr); width:100%; }
  .contact-layout { grid-template-columns:1fr; }
  .contact-form { grid-template-columns:1fr; }
  .contact-form input,.contact-form textarea,.contact-form button { grid-column:1; }
  .footer-grid { grid-template-columns:1fr; text-align:center; }
  .footer .brand { justify-content:center; margin:auto; }
  .footer-links { flex-wrap:wrap; }
  .socials { justify-content:center; }
}

@media (max-width:520px) {
  .stats-grid { grid-template-columns:1fr; }
  .stat { border-right:0; }
  .hero h1 { font-size:35px; }
  .section-heading h2 { font-size:26px; }
}

.contact-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid #22c55e;
    color: #86efac;
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}

.contact-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid #ef4444;
    color: #fca5a5;
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}