.hero { position: relative; }
.hero__title { margin-bottom: 1rem; }
.hero__subtitle { margin-bottom: 2rem; max-width: 600px; }

.hero--variant-a { 
    min-height: 80vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    background-size: cover; 
    background-position: center; 
    color: var(--color-text-inverse); 
}
.hero--variant-a .hero__title { color: var(--color-text-on-primary); }
.hero--variant-a .hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero--variant-b { padding: 4rem 0; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero__image { 
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
    border-radius: var(--radius); 
    box-shadow: var(--shadow); 
}
@media (max-width: 768px) { .hero__grid { grid-template-columns: 1fr; } }

.hero--variant-c { 
    height: 100vh; 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    align-items: flex-end; 
    padding-bottom: 4rem; 
    color: var(--color-text-inverse); 
}
.hero--variant-c .hero__overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, var(--color-bg-overlay), transparent); 
}
.hero--variant-c .hero__content-bottom { position: relative; z-index: 2; text-align: center; width: 100%; }
.hero--variant-c .hero__title { color: var(--color-text-on-primary); }

.hero--variant-d { padding: 6rem 0; text-align: center; background: var(--color-bg); }
.hero__tag { 
    display: inline-block; 
    background: var(--color-bg-alt); 
    color: var(--color-primary); 
    padding: 0.5rem 1rem; 
    border-radius: var(--radius-full); 
    font-size: 0.875rem; 
    font-weight: 600; 
    margin-bottom: 1.5rem; 
}

.stats-bar { 
    background: var(--color-primary); 
    color: var(--color-text-on-primary); 
    padding: 2rem 0; 
    margin-top: -2rem; 
    position: relative; 
    z-index: 10; 
    border-radius: var(--radius); 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: var(--shadow-lg); 
}
.stats-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 1rem; }
.stat-item__value { 
    display: block; 
    font-size: 1.75rem; 
    font-weight: 700; 
    color: var(--color-accent); 
}
.stat-item__label { font-size: 0.9rem; opacity: 0.9; }
@media (max-width: 768px) { .stats-bar__grid { grid-template-columns: repeat(2, 1fr); } }