.hub-hero {
  padding: 150px 24px 78px;
  color: #fff;
  background: radial-gradient(circle at 82% 12%, rgba(45, 212, 191, .23), transparent 30%), linear-gradient(135deg, #071827 0%, #0c2940 55%, #123752 100%);
}
.hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 52px; align-items: center; }
.hub-hero h1 { max-width: 820px; margin: 21px 0; font: 700 clamp(2.7rem, 5.1vw, 5.3rem)/.94 "Bricolage Grotesque", sans-serif; letter-spacing: -.055em; }
.hub-hero p { max-width: 690px; color: #cadde8; font-size: 1.1rem; line-height: 1.72; }
.hub-cover { overflow: hidden; border: 1px solid rgba(126, 245, 221, .3); border-radius: 28px; background: rgba(255,255,255,.07); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.hub-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hub-cover figcaption { padding: 18px 20px; color: #d9e9f0; font-size: .78rem; line-height: 1.55; }
.hub-summary { width: min(1180px, calc(100% - 48px)); margin: -24px auto 0; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid #dce6ec; border-radius: 22px; background: #fff; box-shadow: 0 18px 55px rgba(13,38,58,.12); }
@media (min-width: 901px) { .hub-summary:has(> div:nth-child(5)) { grid-template-columns: repeat(5, 1fr); } }
.hub-summary div { padding: 23px; border-right: 1px solid #e5edf1; }
.hub-summary div:last-child { border: 0; }
.hub-summary strong { display: block; margin-bottom: 5px; color: #071827; font: 700 1.4rem "Bricolage Grotesque", sans-serif; }
.hub-summary span { color: #647887; font-size: .76rem; line-height: 1.5; }
.hub-section { scroll-margin-top: 115px; padding: 38px; border: 1px solid #dce6ec; border-radius: 24px; background: #fff; box-shadow: 0 16px 45px rgba(13,38,58,.06); }
.hub-section + .hub-section { margin-top: 28px; }
.hub-section h2 { margin: 8px 0 13px; font: 700 clamp(1.85rem, 3vw, 2.65rem)/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -.04em; }
.hub-section .lead { color: #536a79; line-height: 1.72; }
.hub-path { display: grid; gap: 14px; margin-top: 25px; }
.hub-path-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 17px; padding: 18px; border: 1px solid #dce7ec; border-radius: 17px; color: inherit; background: #f9fbfc; text-decoration: none; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.hub-path-card:hover { transform: translateY(-2px); border-color: #69cfbd; box-shadow: 0 14px 32px rgba(13,38,58,.09); }
.hub-path-number { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: #0a2841; font: 700 .78rem "JetBrains Mono", monospace; }
.hub-path-card h3 { margin: 0 0 5px; color: #102636; font: 700 1.15rem "Bricolage Grotesque", sans-serif; }
.hub-path-card p { margin: 0; color: #607483; font-size: .82rem; line-height: 1.55; }
.hub-path-link { color: #087f70; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.hub-callout { margin-top: 24px; padding: 22px; border-radius: 18px; color: #d6eaf0; background: linear-gradient(135deg, #09243a, #0a4652); line-height: 1.65; }
.hub-callout strong { color: #7ff1dd; }
.hub-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0c67d7, #0aa99c); }
.hub-share h3 { margin: 0 0 6px; font: 700 1.8rem "Bricolage Grotesque", sans-serif; }
.hub-share p { margin: 0; color: #e1f5f7; }
.hub-share button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; color: #09243a; background: #fff; font-weight: 800; cursor: pointer; }
@media (max-width: 900px) { .hub-hero-grid { grid-template-columns: 1fr; } .hub-summary { grid-template-columns: repeat(2, 1fr); } .hub-summary div:nth-child(2) { border-right: 0; } }
@media (max-width: 640px) { .hub-hero { padding: 125px 20px 62px; } .hub-summary { grid-template-columns: 1fr; } .hub-summary div { border-right: 0; border-bottom: 1px solid #e5edf1; } .hub-section { padding: 26px 20px; } .hub-path-card { grid-template-columns: 48px 1fr; } .hub-path-number { width: 44px; height: 44px; } .hub-path-link { grid-column: 2; } }