:root{
  --brand:#011E44;
  --ink:#FFFFFF;
  --ink-dim:#E8EEF7;

  /* defaults (must be relative to css/site.css) */
  --hero-image: url("../images/home-hero.jpg");
  --hero-pos: center 10%;
  --hero-overlay: rgba(0,0,0,.55);
  --hero-pad: 4rem 1.25rem 8rem;
}

*{box-sizing:border-box}
html, body{height:100%; margin:0; padding:0; background: var(--brand);}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background: transparent;
}

/* Fixed background */
.bg-fixed{
  position:fixed;
  inset:0;
  z-index:0;
  background-image: var(--hero-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position: var(--hero-pos);
}
.bg-fixed::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-overlay);
}
@media (max-width: 900px){
  .bg-fixed{ position:absolute; }
}

/* Header + tabs */
header{
  position: sticky;
  top: 0;
  z-index: 10;

  display:flex;
  flex-direction: row-reverse;
  align-items:flex-end;
  justify-content: space-between;
  gap: 1rem;

  padding: .45rem .9rem 0;
  background: rgba(1,30,68,.96);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
header img{
  max-width: 190px;
  height:auto;
  display:block;
  margin:0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
nav{
  display:flex;
  gap: 1.1rem;
  justify-content:flex-start;
  align-items:flex-end;
  flex-wrap:wrap;
  margin:0;
  line-height:1.1;
  padding-bottom:0;
}
nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size: 1.08rem;
  padding: .45rem .65rem;
  white-space: nowrap;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-bottom: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  margin-bottom: -2px;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
nav a:hover{
  text-decoration:none;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
}
nav a:focus-visible{
  outline: 3px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}
nav a[aria-current="page"]{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}

/* Hero */
.hero{
  position: relative;
  z-index: 1;
  max-width: 1024px;
  margin: 0 auto;
  padding: var(--hero-pad);
}
.hero h1{
  font-size: 2.6rem;
  margin: 0 0 .75rem;
  letter-spacing: .2px;
}
.hero p{
  color: #e7edf7;
  line-height: 1.65;
  font-size: 1.06rem;
  margin: .5rem 0 1.25rem;
  max-width: 900px;
}
.cta{
  display:inline-block;
  padding:.7rem 1.05rem;
  background:#fff;
  color:var(--brand);
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
}
.cta:focus,.cta:hover{ outline:3px solid #dbe5f1 }

/* Surface */
.surface{
  position: relative;
  z-index: 1;
  background: rgba(1,30,68,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: .25rem;
  padding-top: .25rem;
}
main{
  max-width:1024px;
  margin:0 auto;
  padding: .25rem 1.25rem 2.0rem;
}
h2{font-size:1.5rem;margin:.6rem 0 .6rem}
h3{margin:.2rem 0 .4rem}
p{line-height:1.65;font-size:1.02rem;margin:.5rem 0 1rem}
ul{margin:.5rem 0 1rem; padding-left: 1.15rem;}
.grid{display:grid;gap:1rem}
@media (min-width: 860px){
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
.card{
  background: var(--brand);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:1rem 1.05rem;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.card h2, .card h3{ color:#fff; }
.card p, .card li{ color: rgba(255,255,255,.88); }
footer{
  opacity:.9;
  text-align:center;
  padding:2rem 1.25rem;
  font-size:.9rem;
  color:#E8EEF7;
}

/* Mobile fixes */
@media (max-width: 1100px){
  nav a{ font-size: 1.0rem; padding: .40rem .58rem; }
  header img{ max-width: 175px; }
}
@media (max-width: 820px){
  header{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .65rem .75rem .45rem;
  }
  header img{ max-width: 170px; }
  nav{ justify-content: center; gap: .45rem; }
  nav a{
    font-size: .92rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: none;
    margin-bottom: 0;
    background: rgba(255,255,255,.10);
  }
  nav a:hover{ transform:none; }
  .hero{ padding: 2.2rem 1rem 3.0rem; }
  .hero h1{ font-size: 2.0rem; line-height: 1.15; }
  .hero p{ font-size: 1.0rem; }
  .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr !important; }
}
@media (max-width: 420px){
  nav a{ font-size: .88rem; padding: .32rem .48rem; }
  .hero{ padding: 1.9rem .9rem 2.6rem; }
}