/* ═══════════════════════════════════════════════════════════════
   ASLY TECHNIEK — Component: hero.css
   BEM blok: .hero
   ═══════════════════════════════════════════════════════════════ */

/* ── .hero (blok) ── */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Sfeervolle magenta/paarse glow — opgebouwd in lagen */
    background:
        /* Centrale radiale glow (magenta) — de sfeer-laag */
        radial-gradient(
            ellipse 70% 60% at 50% 45%,
            rgba(160, 20, 120, 0.22) 0%,
            transparent 65%
        ),
        /* Lichte rechtsboven glow */
        radial-gradient(
            ellipse 55% 50% at 80% 15%,
            rgba(233, 30, 140, 0.16) 0%,
            transparent 60%
        ),
        /* Subtiele linksonder glow (violet accent) */
        radial-gradient(
            ellipse 40% 35% at 10% 90%,
            rgba(120, 40, 200, 0.08) 0%,
            transparent 60%
        ),
        /* Diepe donkere achtergrond */
        var(--color-bg-root);
}

/* ── .hero__glow-bg (element): extra geanimeerde glow-ballen ── */
.hero__glow-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Rechtsboven glow-blob */
.hero__glow-bg::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 700px;
    height: 700px;
    background: radial-gradient(
        circle,
        rgba(233, 30, 140, 0.18),
        transparent 65%
    );
    filter: blur(60px);
    border-radius: 50%;
    animation: floatBlob 8s ease-in-out infinite;
}

/* Linksonder secundaire glow */
.hero__glow-bg::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(120, 40, 200, 0.10),
        transparent 65%
    );
    filter: blur(80px);
    border-radius: 50%;
    animation: floatBlob 11s ease-in-out infinite reverse;
}

/* ── .hero__container (element) ── */
.hero__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
    /* Vertic. centrering via min-height + flexbox op .hero */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── .hero__content (element) — centred text block ── */
.hero__content {
    max-width: 760px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── .hero__badge (element) — pill-shaped eyebrow badge ── */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-pink);
    background: var(--color-pink-subtle);
    border: 1px solid var(--color-pink-border);
    padding: 0.42rem 1.1rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.5rem;
    /* Inkomst animatie */
    animation: fadeInUp 0.6s var(--ease-brand) both;
}

/* ── .hero__title (element) ── */
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6.5vw, 6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: 1.75rem;
    animation: fadeInUp 0.7s var(--ease-brand) 0.1s both;
}

/* Modifier: gradient woord in de titel — "Elektrotechniek" */
.hero__title-accent {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

/* ── .hero__description (element) ── */
.hero__description {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    color: var(--color-text-2);
    line-height: 1.8;
    max-width: 580px;
    font-weight: 300;
    margin-bottom: 0;
    animation: fadeInUp 0.7s var(--ease-brand) 0.2s both;
}

/* ── .hero__cta-group (element) — knoppen naast elkaar ── */
.hero__cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.5rem;
    animation: fadeInUp 0.7s var(--ease-brand) 0.3s both;
}

/* ════ RESPONSIVE ════ */

/* Kleine schermen: knoppen onder elkaar */
@media (max-width: 480px) {
    .hero__cta-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
    }

    .hero__cta-group .btn,
    .hero__cta-group .btn--primary,
    .hero__cta-group .btn--outline {
        width: 100%;
        justify-content: center;
    }
}