<section class="hero">
    <div class="hero__content">
        <h1 class="hero__title">
            KI verstehen.<br>KI anwenden.
        </h1>
        <p class="hero__subtitle">
            Wir machen Künstliche Intelligenz für Unternehmen und Startups zugänglich
        </p>
        <div class="hero__buttons">
            <a href="#" class="btn btn--primary btn--large">Jetzt starten</a>
            <a href="#" class="btn btn--ghost btn--large">Mehr erfahren</a>
        </div>
    </div>
</section>

/* Gradient Background */
.hero {
    background: linear-gradient(180deg, 
        var(--ai-dark-bg) 0%, 
        rgba(152, 54, 255, 0.1) 100%
    );
}

/* Glow Effect */
.hero::before {
    content: '';
    position: absolute;
    background: radial-gradient(circle, 
        rgba(152, 54, 255, 0.3) 0%, 
        transparent 70%
    );
}

/* Text Gradient */
.hero__title {
    background: linear-gradient(135deg, 
        var(--ai-text-primary) 0%, 
        var(--ai-purple) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}