@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #071426;
  --navy2: #0b1d35;
  --blue: #1687ff;
  --cyan: #4bc7ff;
  --orange: #ff7a18;
  --white: #f7fbff;
  --muted: #9fb1c7;
  --line: rgba(255,255,255,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background: var(--navy);
  color: var(--white);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, 92%); margin: auto; }

.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
}
.nav { height: 82px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width:44px; height:44px; display:block; object-fit:contain;
  border-radius:11px;
  box-shadow: 0 0 24px rgba(22,135,255,.25);
}
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-text strong { font-size:20px; letter-spacing:.5px; }
.brand-text strong em { color:var(--orange); font-style:normal; }
.brand-text small { font-size:9px; letter-spacing:4px; margin-top:5px; color:var(--cyan); }
nav { display:flex; align-items:center; gap:30px; font-size:14px; color:#d9e7f5; }
nav a:hover { color:white; }
.nav-cta { border:1px solid rgba(75,199,255,.5); padding:10px 17px; border-radius:8px; }

.hero {
  min-height: 760px; display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(circle at 75% 45%, rgba(22,135,255,.16), transparent 30%),
    linear-gradient(135deg, #061323 0%, #0b203a 55%, #071426 100%);
}
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:30px; align-items:center; padding-top:70px; }
.eyebrow { color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:3px; margin:0 0 15px; }
h1 { font-size:clamp(44px,6vw,76px); line-height:1.03; letter-spacing:-3px; margin:0 0 25px; }
h1 span { color:var(--blue); }
.hero-lead { color:var(--muted); max-width:620px; font-size:18px; }
.hero-actions { display:flex; gap:14px; margin-top:32px; }
.button { display:inline-block; padding:13px 21px; border-radius:8px; font-weight:700; font-size:14px; }
.primary { background:linear-gradient(100deg,var(--blue),#36a7ff); box-shadow:0 10px 30px rgba(22,135,255,.22); }
.secondary { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.03); }

.network-visual { height:470px; position:relative; }
.core {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:110px; height:110px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,#0e3159,#09203a); border:2px solid var(--blue);
  font-size:32px; font-weight:800; box-shadow:0 0 60px rgba(22,135,255,.35);
}
.orbit { position:absolute; border:1px solid rgba(75,199,255,.18); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.orbit-1 { width:300px; height:300px; }
.orbit-2 { width:450px; height:450px; border-color:rgba(255,122,24,.12); }
.node {
  position:absolute; padding:10px 13px; border-radius:8px; background:#0c223d;
  border:1px solid rgba(75,199,255,.3); color:#cfeaff; font-size:11px; font-weight:700;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}
.node-a { top:65px; left:55px; } .node-b { top:85px; right:45px; }
.node-c { bottom:75px; left:85px; } .node-d { bottom:60px; right:75px; }
.line { position:absolute; height:1px; transform-origin:left center; background:linear-gradient(90deg,rgba(22,135,255,.55),transparent); }
.line-1 { width:190px; left:115px; top:115px; transform:rotate(30deg); }
.line-2 { width:200px; right:100px; top:130px; transform:rotate(150deg); }
.line-3 { width:175px; left:130px; bottom:130px; transform:rotate(-28deg); }
.line-4 { width:190px; right:105px; bottom:125px; transform:rotate(205deg); }

.services { background:#f5f8fc; color:#102238; padding:100px 0; }
.section-heading { max-width:680px; margin-bottom:45px; }
.section-heading .eyebrow { color:#167bdc; }
.section-heading h2, .about h2, .contact h2 { font-size:clamp(32px,4vw,48px); line-height:1.1; letter-spacing:-1.5px; margin:0 0 12px; }
.section-heading p:last-child { color:#66778d; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-card {
  background:white; border:1px solid #e3eaf2; border-radius:16px; padding:26px 22px;
  min-height:190px; transition:.2s ease; box-shadow:0 8px 25px rgba(13,39,67,.04);
}
.service-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(13,39,67,.10); }
.icon { width:40px; height:40px; display:grid; place-items:center; }
.icon svg { width:32px; height:32px; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon.blue svg { stroke:var(--blue); color:var(--blue); }
.icon.orange svg { stroke:var(--orange); color:var(--orange); }
.service-card h3 { font-size:17px; margin:14px 0 6px; letter-spacing:-.2px; }
.service-card p { color:#66778d; font-size:13.5px; margin:0; }

.about { padding:100px 0; background:#0a192c; }
.about .eyebrow { color:var(--cyan); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about p { color:var(--muted); }
.values { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.values span { border:1px solid rgba(75,199,255,.25); background:rgba(255,255,255,.03); padding:9px 13px; border-radius:999px; font-size:12px; color:#d9e9f8; }

.contact { background:#f5f8fc; color:#102238; padding:70px 0; }
.contact-box { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.contact .eyebrow { color:#167bdc; }
.contact p:last-child { color:#66778d; }

footer { background:#050f1d; border-top:1px solid var(--line); padding:28px 0; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; color:#7f93aa; font-size:12px; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-brand img { width:34px; height:34px; border-radius:9px; }
.footer-brand > div { display:flex; flex-direction:column; gap:3px; }
.footer-inner strong { color:#eaf4ff; font-size:14px; }
.footer-inner span { color:#6eaedc; }

@media (max-width: 850px) {
  nav a:not(.nav-cta) { display:none; }
  .hero { min-height:auto; padding:140px 0 80px; }
  .hero-grid, .about-grid { grid-template-columns:1fr; }
  .network-visual { height:360px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .contact-box { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px) {
  h1 { letter-spacing:-2px; }
  .service-grid { grid-template-columns:1fr; }
  .network-visual { transform:scale(.85); margin:-20px 0; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}