.hero {
    position: relative; min-height: 100vh; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
    background: linear-gradient(135deg, rgba(10,22,40,0.7) 0%, rgba(13,33,55,0.8) 100%),
                url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-content {
    position: relative; z-index: 2; text-align: center;
    color: var(--color-white); padding: var(--space-2xl); max-width: 900px;
}
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800;
    line-height: 1.15; margin-bottom: var(--space-md); color: var(--color-white);
}
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 300;
    opacity: 0.85; margin-bottom: var(--space-xl); line-height: 1.6;
}
.hero .btn-primary { background: var(--color-teal); font-size: var(--font-size-lg); padding: 1rem 2.5rem; }
.hero .btn-primary:hover { background: var(--color-blue-light); }