.btn {
    display: inline-block;
    font-family: var(--font);
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: normal;
    letter-spacing: 0.3em;
    text-transform: lowercase;
    text-decoration: none;
    color: var(--white-color);
    cursor: pointer;

    padding: 0.85em 2.2em 0.85em 2.5em;
    border: 1px solid var(--white-color);
    background: transparent;

    position: relative;
    overflow: hidden;
    transition: color 0.35s ease, border-color 0.35s ease;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white-color);
    transform: translateX(-101%);
    transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 0;
}

.btn:hover::before {
    transform: translateX(0);
}

.btn:hover {
    color: var(--primary-color);
}

.btn span,
.btn-label {
    position: relative;
    z-index: 1;
}


.btn-dark {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-dark::before {
    background: var(--primary-color);
}

.btn-dark:hover {
    color: var(--white-color);
}

.btn-ghost {
    color: var(--semi-white-color);
    border-color: rgba(207, 227, 228, 0.4);
}

.btn-ghost::before {
    background: rgba(207, 227, 228, 0.15);
}

.btn-ghost:hover {
    color: var(--white-color);
    border-color: var(--semi-white-color);
}

/* ── Groepen ─────────────────────────────────────────────── */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}