/* Layout: header, hero, sections */
.header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.28));
  border-bottom:1px solid rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
}
.header__content{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;padding:18px 0;min-height:var(--header-h);
}
.logo{font-weight:800;font-size:18px;color:var(--text)}

.nav{justify-self:center}
.nav__list{display:inline-flex;gap:22px;list-style:none;margin:0;padding:0}
.nav__link{color:rgba(255,255,255,.84);padding:8px 10px;border-radius:8px;font-weight:600}
.nav__link:hover{color:#fff}
.nav__link--active{color:#fff;box-shadow:inset 0 -3px 0 var(--accent-blue)}

.header__ctas{justify-self:end;display:flex;gap:10px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.04);font-weight:700;color:var(--text)}
.btn--urgent{background:var(--accent-red);border-color:var(--accent-red);color:#fff;box-shadow:0 6px 18px rgba(239,59,59,.12)}
.btn--outline{border:2px solid rgba(15,105,214,.14);color:var(--accent-blue);background:transparent}

/* Hero */
.hero{padding:58px 0}
.hero .container{display:flex;gap:48px;align-items:flex-start}
.hero__left{flex:0 0 48%}
.hero__title{font-size:56px;font-weight:800;letter-spacing:-.6px;margin:0 0 12px;color:#f2f6f8;line-height:1.02}
.hero__tagline{color:var(--muted);margin:0 0 8px}
.hero__subtitle{color:var(--muted);max-width:680px;margin:0 0 18px}

/* Sections */
.section{padding:34px 0}
.section__title{font-size:26px;margin:0 0 6px;font-weight:700}
.section__subtitle{color:var(--muted);margin:0 0 18px;font-weight:600;letter-spacing:.6px}

/* Footer */
.footer{padding:24px 0;border-top:1px solid rgba(255,255,255,.03);color:var(--muted);font-size:14px;text-align:center}

/* Responsive */
@media (max-width:1100px){
  .hero__left{flex-basis:55%}
  .hero__title{font-size:44px}
}
@media (max-width:720px){
  .header__content{grid-template-columns:1fr 1fr}
  .nav__list{display:none}
  .hero .container{flex-direction:column}
  .hero__title{font-size:28px}
  .container{padding:16px}
}