:root{
  --ink:#0f1b2d;
  --ink-soft:#43536b;
  --line:#e3e8ef;
  --bg:#ffffff;
  --bg-alt:#f6f8fb;
  --accent:#1b4d89;
  --accent-soft:#e8f0fa;
  --radius:10px;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:720px}

/* header */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;letter-spacing:-.2px}
.brand svg{color:var(--accent)}
.brand-dot{color:var(--accent)}
.site-header nav{display:flex;gap:26px}
.site-header nav a{color:var(--ink-soft);text-decoration:none;font-size:14.5px}
.site-header nav a:hover{color:var(--accent)}

/* hero */
.hero{
  background:linear-gradient(180deg,var(--bg-alt) 0%, #ffffff 100%);
  border-bottom:1px solid var(--line);
  padding:86px 0 64px;
}
.eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:600;
  color:var(--accent);margin:0 0 16px;
}
.hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.18;margin:0 0 20px;letter-spacing:-.9px;font-weight:700}
.lede{font-size:17px;color:var(--ink-soft);max-width:600px;margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:11px 22px;border-radius:8px;font-size:14.5px;font-weight:600;
  text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:#153d6c}
.btn.ghost{border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

.stats{display:flex;gap:44px;margin:52px 0 0;padding:0;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column-reverse}
.stats dt{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.stats dd{margin:0;font-size:26px;font-weight:700;letter-spacing:-.5px}

/* sections */
.section{padding:74px 0}
.section.alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:26px;margin:0 0 12px;letter-spacing:-.4px}
.section-lede{color:var(--ink-soft);max-width:620px;margin:0 0 38px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{
  border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.card:hover{border-color:#c9d6e8;box-shadow:0 4px 18px rgba(15,27,45,.05)}
.card h3{margin:0 0 8px;font-size:16px;letter-spacing:-.2px}
.card p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* network */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.lane{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:14px 18px;font-size:14.5px;
}
.lane span:first-child,.lane span:last-child{font-weight:600}
.lane .arrow{color:var(--accent);margin-left:auto;margin-right:auto}

/* about */
.section p{color:var(--ink-soft);font-size:15.5px}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;margin-top:6px}
.contact-grid h4{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.contact-grid p{margin:0 0 10px;font-size:14.5px}
.contact-grid a{color:var(--accent);text-decoration:none}
.contact-grid a:hover{text-decoration:underline}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:32px 0;background:#fff}
.site-footer p{margin:0;font-size:13.5px;color:var(--ink-soft)}
.site-footer .small{font-size:12px;color:#8a97a8;margin-top:6px}

@media (max-width:640px){
  .site-header nav{display:none}
  .hero{padding:60px 0 46px}
  .stats{gap:28px}
  .section{padding:56px 0}
}