@layer components {

.hero--data .hero__inner { grid-template-columns: 1fr auto; gap: 48px; }
.hero--data .hero__data-cards { display: flex; flex-direction: column; gap: 20px; }
.data-card { padding: 24px 32px; border-radius: 12px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); min-width: 180px; }
.data-card__val { font-size: 30px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 4px; }
.data-card__label { font-size: 13px; color: rgba(255,255,255,.8); }

.adv-timeline { position: relative; max-width: 700px; margin: 0 auto; }
.adv-timeline::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: var(--primary-200); }
.adv-step { position: relative; padding: 0 0 32px 64px; }
.adv-step__dot { position: absolute; left: 20px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-600); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--primary-200); }
.adv-step h3 { font-size: 17px; font-weight: 700; color: var(--steel-800); margin-bottom: 4px; }
.adv-step p { font-size: 13px; color: var(--steel-500); line-height: 1.7; }

@media (max-width: 768px) {
    .hero--data .hero__inner { grid-template-columns: 1fr; }
    .hero--data .hero__data-cards { flex-direction: row; flex-wrap: wrap; }
    .data-card { min-width: 120px; flex: 1; }
}

}