/* ============ Enriched Home ============ */
.title-xxl{font-size:40px;line-height:1.1;margin:6px 0 10px}
.lead{font-size:18px}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25)}
.hero-xl .wrap{grid-template-columns:1.2fr .8fr}
.hero-copy .chips{display:flex;gap:8px;margin-bottom:8px}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(5,auto);gap:16px;margin-top:14px}
.stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;text-align:center}
.stat .num{font-weight:800;font-size:18px}
.stat .lbl{font-size:12px;color:var(--muted)}
.hero-media .thumb.tall{aspect-ratio:3/4;border-radius:16px;border:1px solid rgba(255,255,255,.12)}

.card-hover{transition:transform .25s ease, box-shadow .25s ease}
.card-hover:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.25)}

.badge{display:inline-block;background:#12306a;border:1px solid rgba(255,255,255,.18);padding:4px 8px;border-radius:999px;font-size:11px;color:#d7e3ff}
.card-meta{margin-top:8px;display:grid;gap:6px}

/* Tabs */
.tabs{display:flex;gap:8px;margin:8px 0 12px}
.tab{background:#112a58;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 12px;font-size:14px}
.tab.active{background:#1b3f8e}
.tabpanes{margin-top:8px}
.tabpane{display:none}
.tabpane.show{display:grid}

/* Masonry */
.masonry{column-count:4;column-gap:12px}
.masonry-item{display:block;break-inside:avoid;margin-bottom:12px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0f2550}
.masonry img,.masonry video{width:100%;height:auto;display:block}

/* Quote */
.quote .quote-wrap{display:grid;grid-template-columns:.3fr .7fr;gap:16px;align-items:center}
.quote .quote-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.12)}
.quote .quote-body h4{margin:6px 0 8px}

@media (max-width: 1024px){
  .masonry{column-count:3}
  .stats{grid-template-columns:repeat(3,auto)}
}
@media (max-width: 768px){
  .masonry{column-count:2}
  .hero-xl .wrap{grid-template-columns:1fr}
  .quote .quote-wrap{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .masonry{column-count:1}
  .stats{grid-template-columns:repeat(2,auto)}
}