@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

* {
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box;
}

:root {
    color-scheme: dark
}


html {
    scroll-behavior: smooth
}

body {
    font-family: "Bricolage Grotesque", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-feature-settings: "kern";
    font-weight: 300 !important;
    scroll-behavior: smooth;
}

.glass-panel {
    background: radial-gradient(circle at top, rgba(56, 189, 248, .08), transparent 55%), linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(15, 23, 42, .92));
    border: 1px solid rgba(148, 163, 184, .25);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .85), 0 0 0 1px rgba(15, 23, 42, .95);
    backdrop-filter: blur(18px)
}

.card-hover {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .9);
    border-color: rgba(45, 212, 191, .5)
}

.cta-button {
    position: relative;
    overflow: hidden
}

.cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0 0, rgba(255, 255, 255, .35), transparent 55%);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    transform: translate3d(-10%, -20%, 0)
}

.cta-button:hover::before {
    opacity: 1;
    transform: translate3d(-5%, -10%, 0)
}

.faq-item {
    border-radius: .75rem;
    border: 1px solid rgba(148, 163, 184, .35);
    background: radial-gradient(circle at top left, rgba(45, 212, 191, .05), transparent 55%), rgba(15, 23, 42, .96)
}

.input-field {
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease
}

.input-field:focus {
    outline: none;
    border-color: rgb(34, 197, 94);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .4), 0 0 0 10px rgba(34, 197, 94, .1);
    background-color: rgba(15, 23, 42, .9)
}

.error {
    border-color: rgb(248, 113, 113) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, .4) !important
}

.badge-soft {
    background: rgba(45, 212, 191, .12);
    border: 1px solid rgba(45, 212, 191, .4);
    color: rgb(45, 212, 191)
}

.badge-soft-alt {
    background: rgba(59, 130, 246, .12);
    border: 1px solid rgba(59, 130, 246, .4);
    color: rgb(96, 165, 250)
}

.backdrop-blur-support {
    backdrop-filter: blur(18px)
}

#hero img {
    max-width: fit-content;
    width: 600px !important;
}

@media (max-width:640px) {
    .nav-blur {
        backdrop-filter: blur(12px)
    }
    #hero img {
        width: 100% !important;
    }
}