@layer components {

.hero--centered { text-align: center; }
.hero--centered .hero__center { padding: 100px 0 60px; max-width: 800px; margin: 0 auto; }
.hero--centered .hero__title { font-size: 48px; margin-bottom: 16px; }
.hero--centered .hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 24px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; margin-bottom: 24px; }
.hero--centered .hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); }
.hero--centered .hero__desc { margin-bottom: 32px; }
.hero--centered .hero__actions { justify-content: center; gap: 16px; margin-top: 8px; }
.hero--centered .hero__stats { padding: 0 0 48px; margin-top: 0; }

.adv-grid--big3 { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.adv-item--big3 { text-align: center; padding: 32px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--steel-100); transition: all .3s; }
.adv-item--big3:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.adv-item--big3 .adv-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--primary-50); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 32px; }
.adv-item--big3 h3 { font-size: 18px; font-weight: 700; color: var(--steel-800); margin-bottom: 8px; }
.adv-item--big3 p { font-size: 13px; color: var(--steel-500); line-height: 1.6; }

@media (max-width: 768px) {
    .hero--centered .hero__title { font-size: 30px; }
    .hero--centered .hero__center { padding: 88px 0 48px; }
    .adv-grid--big3 { grid-template-columns: 1fr; }
}

}