header{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  padding:12px 0; position:sticky; top:0; z-index:20;
}
header .brand{display:flex; gap:12px; align-items:center}
header .brand img{height:48px; width:auto}
header nav{display:flex; gap:16px; flex-wrap:wrap}
header nav a{color:#000; font-weight:700}
.btn{
  background:linear-gradient(180deg,var(--brand),var(--brand-2)); color:#000;
  padding:10px 18px; border-radius:6px; font-weight:800; box-shadow:var(--shadow);
}
.hero{padding:24px 0 8px}
.content{background:var(--bg-2); border-radius:var(--radius); padding:20px; margin:24px auto}
.content h1{font-family:var(--font-display); color:var(--brand); text-align:center; font-size:clamp(22px,3vw,28px)}
.fixed-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; gap:6px; padding:6px 8px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow)
}
.fixed-footer a{display:flex; flex-direction:column; align-items:center; gap:4px; color:#000; font-weight:700; font-size:12px}
.fixed-footer img{width:22px; height:22px}
@media (min-width:992px){
  .hero img{border-radius:var(--radius);}
}