.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px var(--pad); }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:0.2px; }
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  background: var(--grad-brand);
  box-shadow: 0 10px 24px rgba(20,90,155,0.18);
}
.brand-name{ font-size:16px; color:var(--navy-900); }
.nav-links{ display:flex; gap:16px; align-items:center; }
.nav-links a{
  font-weight:600; font-size:14px;
  color: var(--navy-900);
  padding:10px 10px;
  border-radius:12px;
}
.nav-links a:hover{ background: rgba(16,48,85,0.06); }
.nav-toggle{ display:none; background:transparent; border:0; padding:10px; border-radius:12px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--navy-900); margin:5px 0; }

.hero{
  position:relative;
  min-height:82vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--grad-hero);
  z-index:1;
}
.hero-bg{
  position:absolute; inset:-40px;
  background-image: url('/assets/images/hero-network.jpg');
  background-size: cover;
  background-position:center;
  transform: translate3d(0,0,0);
  will-change: transform;
  z-index:0;
  filter:saturate(1.05) contrast(1.03);
}
.hero .container{ position:relative; z-index:2; padding:72px 0; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;
  font-weight:600; font-size:13px;
}
.hero h1{ margin:18px 0 10px; font-size: clamp(34px, 4.4vw, 56px); line-height:1.05; letter-spacing:-0.6px; }
.hero p{ max-width: 62ch; font-size: 16.5px; color: rgba(255,255,255,0.88); margin:0 0 20px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px; }

.section{ padding:72px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.section-title{ font-size:28px; margin:0; color:var(--navy-900); }
.section-desc{ margin:0; color:var(--muted); max-width:64ch; }

.grid{ display:grid; gap:16px; }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

.band{
  background: linear-gradient(180deg, rgba(16,48,85,0.06), rgba(16,48,85,0.02));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.page-hero{ padding:64px 0 36px; }
.page-hero h1{ margin:0 0 10px; font-size:40px; letter-spacing:-0.4px; color:var(--navy-900); }
.page-hero p{ margin:0; color:var(--muted); max-width:72ch; }

.footer{
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 40px 0 22px;
}
.footer-inner{
  width:min(var(--max), calc(100% - 2*var(--pad)));
  margin:0 auto;
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:18px;
}
.footer-title{ font-weight:700; margin-bottom:8px; color:var(--navy-900); }
.footer-muted{ color:var(--muted); font-size:14px; }
.footer-col a{ display:block; padding:6px 0; color:var(--navy-800); font-weight:600; font-size:14px; }
.footer-col a:hover{ text-decoration:underline; }
.footer-bottom{
  width:min(var(--max), calc(100% - 2*var(--pad)));
  margin:18px auto 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  color:var(--muted); font-size:13px;
}
.dot{ opacity:0.65; }

@media (max-width: 920px){
  .grid.cols-3{ grid-template-columns: 1fr; }
  .grid.cols-2{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; }
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-block; }
  .nav.open .nav-links{
    display:flex;
    position:absolute;
    top:62px; right:18px;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow: var(--shadow-soft);
    padding:10px;
    min-width: 220px;
  }
}