.hero {
    position: relative; min-height: 90vh; display: flex; align-items: center;
    overflow: hidden; padding: 120px 0 80px;
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
}
.hero-glow {
    position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.4;
}
.hero-glow--1 {
    width: 600px; height: 600px; top: -200px; right: -100px;
    background: radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
}
.hero-glow--2 {
    width: 400px; height: 400px; bottom: -100px; left: -50px;
    background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, transparent 70%);
    animation: float 10s ease-in-out infinite reverse;
}
.hero-grid-pattern {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}
.hero-content { position: relative; z-index: 1; max-width: 700px; }
.hero-badge {
    display: inline-block; padding: 6px 16px; border-radius: 20px;
    font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2);
    color: var(--accent); margin-bottom: 24px;
}
.hero-title {
    font-size: clamp(40px, 6vw, 72px); font-weight: 800;
    line-height: 1.05; letter-spacing: -2px; margin-bottom: 24px;
}
.hero-subtitle {
    font-size: 18px; color: var(--text-muted); line-height: 1.7;
    max-width: 540px; margin-bottom: 36px;
}
.hero-actions { display: flex; gap: 16px; margin-bottom: 56px; flex-wrap: wrap; }
.hero-stats {
    display: flex; gap: 48px;
    padding-top: 32px; border-top: 1px solid var(--border);
}
.hero-stat strong {
    display: block; font-size: 24px; font-weight: 700; color: var(--text-heading);
    margin-bottom: 4px;
}
.hero-stat span { font-size: 13px; color: var(--text-muted); }
@media (max-width: 768px) {
    .hero { min-height: auto; padding: 120px 0 60px; }
    .hero-stats { gap: 24px; flex-wrap: wrap; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
}