:root{
  --cat-surface: rgba(12, 32, 23, .78);
  --cat-surface-2: rgba(15, 41, 29, .92);
  --cat-border: rgba(120, 220, 170, .14);
  --cat-border-strong: rgba(120, 220, 170, .28);
  --cat-shadow: 0 22px 48px rgba(0,0,0,.34);
}

main[data-hub-category]{
  padding-top: 26px;
  padding-bottom: 42px;
}

main[data-hub-category] > h1{
  margin: 0;
  padding: 24px 28px;
  border-radius: 28px;
  background:
    radial-gradient(1000px 70% at 20% 0%, rgba(107,208,140,.18), transparent 60%),
    linear-gradient(180deg, rgba(17,45,33,.96), rgba(10,24,18,.98));
  border: 1px solid var(--cat-border-strong);
  box-shadow: var(--cat-shadow);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

main[data-hub-category] > #hubPillar{ display:none !important; }

.page-hero{
  padding: 0 !important;
  margin-bottom: 16px;
}
.page-hero-inner,
main[data-hub-category] > h1{
  max-width: 980px;
}
.page-hero-inner{
  padding: 28px 30px !important;
  border-radius: 28px;
  background:
    radial-gradient(900px 65% at 15% 0%, rgba(107,208,140,.18), transparent 60%),
    linear-gradient(180deg, rgba(17,45,33,.96), rgba(10,24,18,.98));
  border: 1px solid var(--cat-border-strong);
  box-shadow: var(--cat-shadow);
}
.page-hero h1{ margin:0 0 10px !important; }
.page-hero .lead{ font-size: clamp(1rem, 1.3vw, 1.08rem); }

main[data-hub-category] > .hub-pillar,
.page-hero + .hub-pillar{
  margin-top: 16px !important;
}
.hub-pillar-card{
  border-radius: 24px;
  padding: 24px 24px 22px;
  background: linear-gradient(180deg, rgba(16,44,31,.98), rgba(10,25,18,.98));
  border: 1px solid var(--cat-border);
  box-shadow: var(--cat-shadow);
}
.hub-pillar-kicker{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  opacity: .95;
}
.hub-pillar-title{
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.15;
  margin: 6px 0 10px;
}
.hub-pillar-desc{
  max-width: 72ch;
  color: var(--muted);
}
.hub-pillar .btn,
.hub-cta .btn{
  border-radius: 14px !important;
  padding: 12px 18px !important;
}

.content-block{
  margin-top: 24px !important;
  padding: 24px 24px 26px !important;
  border-radius: 24px !important;
  background: var(--cat-surface) !important;
  border: 1px solid var(--cat-border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.content-block h2,
.grid-title,
.topic-section h2{
  margin: 0 0 14px !important;
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  line-height: 1.15;
}
.intro-block p + p{ margin-top: 12px !important; }
.intro-block p,
.topic-section p,
.hub-card p,
.vbk-desc,
.vbk-excerpt,
.content-block p{
  color: var(--muted) !important;
}

.hub-links .hub-grid,
.topic-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.hub-card,
.topic-card{
  height: 100%;
  padding: 18px 18px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(20,50,36,.96), rgba(13,31,23,.98)) !important;
  border: 1px solid rgba(120,220,170,.12) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
}
.hub-card:hover,
.topic-card:hover{
  transform: translateY(-4px);
  border-color: rgba(120,220,170,.3) !important;
}
.hub-card h3,
.topic-card h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-card p,
.topic-card p{
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vbk-grid,
.stories-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 18px !important;
}
.vbk-card,
.story-card{
  height: 100% !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(20,50,36,.98), rgba(13,31,23,.98)) !important;
  border: 1px solid rgba(120,220,170,.12) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.18) !important;
}
.vbk-card img,
.story-card img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
.vbk-card .vbk-body,
.story-card__body,
.story-card__content{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  padding: 18px 18px 20px !important;
  min-height: 220px;
}
.vbk-title,
.story-card__title,
.story-card h3{
  margin: 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.34 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vbk-title a,
.story-card h3 a{
  color: var(--ink) !important;
}
.vbk-desc,
.vbk-excerpt,
.story-card__excerpt,
.story-card p{
  margin: 0 !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vbk-meta,
.story-card__meta{
  margin-top: auto !important;
  padding-top: 4px;
}

.hub-mini{
  margin-top: 14px;
  font-size: .95rem;
}
.hub-mini a{ font-weight: 700; }

.faq details{
  background: rgba(9,19,14,.72) !important;
  border: 1px solid rgba(120,220,170,.12) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
}

@media (max-width: 980px){
  .hub-links .hub-grid,
  .topic-grid,
  .vbk-grid,
  .stories-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 680px){
  main[data-hub-category]{ padding-top: 18px; }
  main[data-hub-category] > h1,
  .page-hero-inner,
  .hub-pillar-card,
  .content-block{
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 20px !important;
  }
  .hub-links .hub-grid,
  .topic-grid,
  .vbk-grid,
  .stories-grid{
    grid-template-columns: 1fr !important;
  }
}