/* /css/resources.css */
.hero { position: relative; overflow: hidden; }
.hero--resources {
  background: radial-gradient(1200px 600px at 70% 15%, rgba(255,255,255,.05), transparent 60%), linear-gradient(180deg, #b20e10 0%, #7a0b0d 100%);
  color:#fff; padding: 4.5rem 0 3.5rem;
}
.hero__video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; pointer-events:none;
}
.hero__content { position:relative; z-index:2; }
.hero__content h1 { font-size: clamp(2rem, 3vw, 3rem); margin:0 0 .25rem; }
.hero__content p { max-width: 56ch; }
.hero__signin { display:inline-block; margin-top:.8rem; color:#fff; text-decoration:underline; }

.playpulse {
  position:absolute; left:18%; top:68%; width:60px; height:60px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 0 12%, transparent 13% 100%);
  animation: pulse 2.6s ease-out infinite; opacity:.9;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  100% { box-shadow: 0 0 0 26px rgba(255,255,255,0); }
}

/* stock bars */
.stock-bars { position:absolute; right:8%; bottom:18%; width:160px; height:90px; display:flex; align-items:flex-end; gap:10px; opacity:.35; z-index:2; }
.stock-bars span { width:12px; background:#fff; height: var(--h,40%); border-radius:6px; transform-origin: bottom; animation: bar 3.8s ease-in-out infinite; }
.stock-bars span:nth-child(2){ animation-delay:.3s }
.stock-bars span:nth-child(3){ animation-delay:.6s }
.stock-bars span:nth-child(4){ animation-delay:.9s }
.stock-bars span:nth-child(5){ animation-delay:1.2s }
@keyframes bar {
  0%,100% { transform: scaleY(.85) }
  50% { transform: scaleY(1.15) }
}

/* cards grid + members box */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin:1rem 0 2rem; }
@media (max-width: 1024px){ .card-grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 720px){ .card-grid{ grid-template-columns:1fr } }

.card{ background:#fff; border-radius:14px; padding:1rem; box-shadow: var(--shadow, 0 12px 30px rgba(0,0,0,.08)); }
.card h3{ margin:.5rem 0 .25rem; }

.pill{ display:inline-block; padding:.25rem .6rem; font-size:.8rem; border-radius:999px; background:#eee; }
.pill--rose{ background:#ffe3ea }
.pill--lav{ background:#efe6ff }
.pill--mint{ background:#e5fbef }

.members{ display:grid; grid-template-columns: 2fr 1fr; align-items:center; gap:1rem; margin:1.5rem 0 3rem; }
.members__list{ margin:0; padding-left:1.25rem }
.lock{ width:22px; height:28px; background: linear-gradient(#fff,#e7e7e7); border:1px solid #ddd; border-radius:6px; margin-bottom:.35rem }
@media (max-width: 900px){ .members{ grid-template-columns: 1fr } }