/* ── HERO ── */
.hero { width: 100%; height: 300px; background: linear-gradient(135deg, #085041 0%, #1d9e75 60%, #5dcaa5 100%); display: flex; align-items: center; justify-content: center; }
.hero-inner { text-align: center; padding: 0 1rem; }
.hero-tag { font-size: 11px; letter-spacing: 0.15em; color: #9fe1cb; margin-bottom: 10px; }
.hero-title { font-size: 26px; font-weight: 500; color: #fff; letter-spacing: 0.06em; margin-bottom: 8px; }
.hero-sub { font-size: 13px; color: #9fe1cb; }

/* ── GRID ── */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 2.5rem 2rem; background: #fff; }
.card { border-radius: 12px; border: 0.5px solid #e0e0e0; background: #fff; aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.card-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.card-icon i { font-size: 22px; }
.card-label { font-size: 13px; color: #888; }
.c1 .card-icon { background: #e1f5ee; } .c1 .card-icon i { color: #0f6e56; }
.c2 .card-icon { background: #faeeda; } .c2 .card-icon i { color: #854f0b; }
.c3 .card-icon { background: #fbeaf0; } .c3 .card-icon i { color: #993556; }

@media (max-width: 768px) {
  .hero { height: 200px; }
  .hero-title { font-size: 18px; }
  .hero-tag { font-size: 10px; }
  .hero-sub { font-size: 12px; }
  .grid { grid-template-columns: 1fr; gap: 10px; padding: 12px 1rem 1.5rem; }
  .card { aspect-ratio: 16/7; }
}


.hero {
    width: 100%;
    overflow: hidden;
}

.hero-banner {
    width: 100%;
    height: auto;
    display: block;
}