/* ============================================
   Vouchet Landing Page – Accent & Overrides
   ============================================ */

/* ── Accent gradient for the hero headline ── */
.vouchet-gradient-text {
    background: linear-gradient(120deg, #9D8CFF 0%, #C4B5FD 50%, #F0ABFC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Studio pill badge ── */
.vouchet-badge {
    display: inline-block;
    background: rgba(157, 140, 255, 0.15);
    border: 1px solid rgba(157, 140, 255, 0.3);
    color: #C4B5FD;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 999px;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

/* ── Nav logo text ── */
.vouchet-logo-text {
    background: linear-gradient(90deg, #fff, #C4B5FD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Phone frame glow tinted to Vouchet purple ── */
.vouchet-phone-glow {
    box-shadow:
        0 0 0 2px #000,
        0 25px 50px -12px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(157, 140, 255, 0.25);
}

/* ── Feature cards: subtle purple tint on hover ── */
.vouchet-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vouchet-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        0 0 24px rgba(157, 140, 255, 0.15);
}

/* ── Tweak hero h1 to be bigger on wider screens ── */
@media (min-width: 768px) {
    .hero h1 {
        font-size: 3.5rem;
    }
}

/* ── FAQ details open state ── */
details[open] summary {
    color: #C4B5FD;
}