*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#E4E6EB;
  --text:#050505;
  --muted:#65676B;
  --card:#FFFFFF;
  --stroke:#DADDE1;

  --navLink:#1f2a44;
  --navLinkHover:#0f172a;

  --navy:#1f2a44;
  --softBlue:#F2F7FF;
  --wrapBorder:#D6E4FF;

  --shadow:0 1px 2px rgba(0,0,0,0.06);
  --radius:8px;

  --bannerImage:url("../images/hub-banner.jpg");
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 0.7px, transparent 1px),
    var(--bg);
  background-size:12px 12px;
  color:var(--text);
  line-height:1.5;
}

a{text-decoration:none}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:14px 20px 20px;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.muted{color:var(--muted)}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--card);
  border-bottom:1px solid var(--stroke);
}

.topnav{
  max-width:1100px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.brand{
  font-weight:800;
  font-size:16px;
  letter-spacing:-0.2px;
  color:var(--text);
}

.navlinks{
  display:flex;
  align-items:center;
}

.navlinks a{
  margin-left:14px;
  font-size:14px;
  font-weight:600;
  color:var(--navLink);
  white-space:nowrap;
}
.navlinks a:hover{color:var(--navLinkHover)}

/* Facebook icon link */
.iconlink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin-left:12px;
  border-radius:8px;
  border:1px solid var(--stroke);
  background:#fff;
  color:var(--navLink);
}
.iconlink:hover{
  background:#F0F2F5;
  color:var(--navLinkHover);
}
.iconlink svg{display:block}


/* Banner */
.banner{padding:10px 20px}
.banner-inner{
  max-width:1100px;
  margin:0 auto;
  height:150px;
  background:var(--stroke) var(--bannerImage) center right/cover no-repeat;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Shared page wrap */
.page-wrap{
  margin-top:12px;
  padding:16px;
  background:#F9FBFF;
  border:1px solid var(--wrapBorder);
  border-radius:var(--radius);
}

/* Shared section card */
.section-card{
  margin-top:14px;
  border:1.5px solid var(--navy);
  background:var(--softBlue);
  border-radius:var(--radius);
  overflow:hidden;
}

.hd{
  padding:14px 16px 10px;
  background:rgba(255,255,255,0.55);
  border-bottom:1px solid rgba(31,42,68,0.25);
}

.hd h2{
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.2px;
  margin-bottom:6px;
}

.hd p{
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}

.bd{
  padding:14px 16px;
  background:transparent;
}

/* Footer */
footer{
  margin-top:34px;
  background:#fff;
  border-top:1px solid var(--stroke);
}

.footer-content{
  max-width:1100px;
  margin:0 auto;
  padding:18px 20px;
  font-size:13px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.footer-links{
  display:flex;
  align-items:center;
}

.footer-links a{
  margin-left:14px;
  font-size:13px;
  font-weight:600;
  color:var(--navLink);
}
.footer-links a:hover{color:var(--navLinkHover)}

/* Responsive */
@media(max-width:900px){
  .banner-inner{background-position:center}
}

@media(max-width:680px){
  .container{padding:12px 14px 18px}
  .topnav{flex-direction:column;align-items:flex-start}
  .navlinks{
    flex-wrap:wrap;
    gap:8px;
  }
  .navlinks a{
    margin-left:0;
    margin-right:14px;
  }
  .banner{padding:10px 14px}
  .banner-inner{
    height:120px;
    background-position:center;
  }
  .page-wrap{padding:14px}
}