* {
    box-sizing: border-box;
}

html,
body {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "DM Sans", sans-serif;
}

.hero-mesh {
    background-image: radial-gradient(circle at 20% 20%, rgba(54, 85, 143, 0.12), transparent 45%),
        radial-gradient(circle at 80% 0, rgba(212, 228, 188, 0.35), transparent 35%);
}

.hero-select-menu {
    animation: dropdownIn 0.16s ease;
}

.hero-option-btn:hover {
    background-color: #D4E4BC;
    color: #36558F;
}

.hero-option-btn.is-selected {
    background-color: #96ACB7;
    color: #21355a;
}

.field-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

[data-pressable]:active,
button:active {
    transform: none;
    transition: box-shadow 120ms ease, background-color 120ms ease, filter 120ms ease;
    box-shadow: 0 6px 18px rgba(54, 85, 143, 0.12);
    filter: brightness(0.98);
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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