html, body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.btn-primary {
    background-image: linear-gradient(to right, #7c3aed, #db2777); /* from-purple-600 to-pink-600 */
    color: #fff;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 9999px; /* rounded-full */
    font-weight: 600; /* font-semibold */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;

    /* Extra: voelbare hover-animatie */
    background-size: 200% auto;
    transition:
            transform .18s ease,
            box-shadow .18s ease,
            opacity .18s ease,
            background-position .18s ease;
}

.btn-primary:hover {
    transform: translateY(-1px) scale(1.04);
    background-position: right center;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.45);
}

/* Optioneel: toetsenbord-focus gelijk trekken met hover */
.btn-primary:focus-visible {
    outline: 0;
    transform: translateY(-1px) scale(1.04);
    background-position: right center;
    box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.6);
}


/* SECONDARY */

.btn-secondary {
    background-color: #ffffff; /* bg-white */
    color: #6b21a8; /* text-purple-700 */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 9999px; /* rounded-full */
    font-weight: 600; /* font-semibold */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;

    border: 2px solid #e9d5ff; /* licht paars randje */
    transition:
            transform .18s ease,
            box-shadow .18s ease,
            opacity .18s ease,
            background-color .18s ease,
            color .18s ease,
            border-color .18s ease;
}

.btn-secondary:hover {
    transform: translateY(-1px) scale(1.04);
    background-color: #6b21a8;
    color: #ffffff;
    border-color: #6b21a8;
    box-shadow: 0 10px 25px rgba(107, 33, 168, 0.35);
}

.btn-secondary:focus-visible {
    outline: 0;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.4);
}

.chip {
    background-color: #f3e8ff; /* bg-purple-100 */
    color: #6b21a8; /* text-purple-700 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    border-radius: 9999px; /* rounded-full */
    display: inline-block;
}

.card {
    background-color: #ffffff; /* bg-white */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 24px rgba(17, 24, 39, 0.06); /* shadow-md-ish */
    border: 1px solid #f3e8ff; /* border-purple-100 */
}

.section {
    max-width: 80rem; /* max-w-7xl */
    margin-left: auto; /* mx-auto */
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
}

.section-title {
    font-size: 2.25rem; /* text-4xl */
    line-height: 2.5rem;
    font-weight: 700; /* font-bold */
    text-align: center; /* text-center */
    color: #111827; /* text-gray-900 */
}

.section-sub {
    text-align: center; /* text-center */
    color: #4b5563; /* text-gray-600 */
}