:root {
    --bg-cream: #fffdf5;
    --bg-sky: #e7f5ff;
    --ink: #1f2937;
    --brand: #0b5f9c;
    --brand-accent: #d97706;
}

body {
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 10%, rgba(217, 119, 6, 0.24), transparent 30%),
        radial-gradient(circle at 85% 0%, rgba(11, 95, 156, 0.2), transparent 35%),
        linear-gradient(140deg, var(--bg-cream), var(--bg-sky));
    min-height: 100vh;
}

.glass-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 18px 45px rgba(31, 41, 55, 0.15);
}

.reveal-up {
    opacity: 0;
    transform: translateY(14px);
    animation: riseIn 550ms ease-out forwards;
}

.reveal-up:nth-child(2) { animation-delay: 90ms; }
.reveal-up:nth-child(3) { animation-delay: 180ms; }

@keyframes riseIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-meter {
    transition: width 240ms ease;
}

.input-invalid {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}

.modal-open {
    overflow: hidden;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    z-index: 50;
}

.modal-overlay.is-visible {
    display: flex;
}

.modal-card {
    width: min(30rem, 100%);
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #ffffff;
    padding: 1.4rem;
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.22);
}