:root {
    --cf-ink: #0b1220;
    --cf-ink-soft: rgba(11,18,32,.72);
    --cf-surface: rgba(255,255,255,.82);
    --cf-surface-2: rgba(246,249,255,.74);
    --cf-surface-3: rgba(255,255,255,.62);
    --cf-line: rgba(88,166,255,.24);
    --cf-line-strong: rgba(88,166,255,.38);
    --cf-ring: rgba(88,166,255,.22);
    --cf-shadow-sm: 0 12px 28px rgba(10,22,40,.12);
    --cf-shadow-md: 0 22px 56px rgba(10,22,40,.18);
    --cf-shadow-lg: 0 34px 90px rgba(10,22,40,.24);
    --cf-radius-xl: 28px;
    --cf-radius-lg: 22px;
    --cf-radius-md: 16px;
    --cf-accent: #79b8ff;
    --cf-accent-2: #4f8ff5;
    --cf-accent-3: #dbeafe;
    --cf-overlay: rgba(8,16,28,.22);
}

.modal.fade.modal-site-contact {
    background: transparent;
    z-index: 999999 !important;
}

.modal-site-contact {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999999 !important;
    background: radial-gradient(1200px 700px at 15% 0%, rgba(121,184,255,.16), transparent 52%), radial-gradient(900px 620px at 100% 10%, rgba(79,143,245,.14), transparent 50%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), var(--cf-overlay);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

    .modal-site-contact:not(.show) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .modal-site-contact .modal-dialog {
        max-width: 640px;
        margin: 8vh auto 4vh auto;
        padding: 0 18px;
        z-index: 1000000 !important;
    }

    .modal-site-contact .modal-content {
        position: relative;
        border: 1px solid rgba(255,255,255,.48);
        border-radius: var(--cf-radius-xl);
        box-shadow: var(--cf-shadow-lg);
        font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
        background: linear-gradient(180deg, var(--cf-surface) 0%, var(--cf-surface-2) 100%);
        overflow: hidden;
    }

        .modal-site-contact .modal-content::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(900px 520px at 18% 0%, rgba(121,184,255,.14), transparent 56%), radial-gradient(720px 460px at 92% 10%, rgba(79,143,245,.10), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 28%), url('/images/noise/noise.png');
            opacity: .12;
            mix-blend-mode: overlay;
            pointer-events: none;
        }

        .modal-site-contact .modal-content::after {
            content: "";
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 18px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--cf-line-strong), transparent);
            opacity: .95;
            pointer-events: none;
        }

    .modal-site-contact .modal-header {
        position: relative;
        padding: 22px 22px 18px 22px;
        border-bottom: 1px solid rgba(88,166,255,.12);
        background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
    }

        .modal-site-contact .modal-header::after {
            content: "";
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--cf-line), transparent);
            pointer-events: none;
        }

    .modal-site-contact .modal-title {
        margin: 0;
        font-size: clamp(1.22rem, 1.1rem + .45vw, 1.55rem);
        font-weight: 800;
        letter-spacing: -.03em;
        line-height: 1.05;
        color: var(--cf-ink);
        text-wrap: balance;
    }

    .modal-site-contact .modal-body {
        position: relative;
        padding: 22px;
    }

    .modal-site-contact form {
        margin: 0;
    }

    .modal-site-contact .mb-3:last-of-type {
        margin-bottom: 1.1rem !important;
    }

    .modal-site-contact .form-label {
        margin-bottom: .48rem;
        font-size: .97rem;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--cf-ink);
    }

    .modal-site-contact .form-control {
        min-height: 54px;
        padding: .92rem 1rem;
        border-radius: var(--cf-radius-md);
        border: 1px solid rgba(11,18,32,.10);
        background: rgba(255,255,255,.9);
        box-shadow: 0 10px 22px rgba(10,22,40,.08), inset 0 1px 0 rgba(255,255,255,.7);
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
        color: var(--cf-ink);
        font-size: 1rem;
        font-weight: 500;
    }

    .modal-site-contact textarea.form-control {
        min-height: 140px;
        resize: vertical;
        line-height: 1.55;
    }

    .modal-site-contact .form-control::placeholder {
        color: rgba(11,18,32,.44);
        opacity: 1;
    }

    .modal-site-contact .form-control:hover {
        border-color: rgba(88,166,255,.22);
        box-shadow: 0 14px 26px rgba(10,22,40,.10), inset 0 1px 0 rgba(255,255,255,.75);
    }

    .modal-site-contact .form-control:focus {
        border-color: rgba(88,166,255,.46);
        background: rgba(255,255,255,.96);
        box-shadow: 0 0 0 4px var(--cf-ring), 0 16px 34px rgba(10,22,40,.12), inset 0 1px 0 rgba(255,255,255,.8);
        outline: none;
        transform: translateY(-1px);
    }

    .modal-site-contact .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        padding: .84rem 1.25rem;
        border: 1px solid rgba(88,166,255,.16);
        border-radius: 999px;
        background: linear-gradient(135deg, var(--cf-accent-3) 0%, var(--cf-accent) 38%, var(--cf-accent-2) 100%);
        color: #061527;
        font-size: .98rem;
        font-weight: 800;
        letter-spacing: -.01em;
        box-shadow: 0 14px 30px rgba(79,143,245,.22), 0 8px 18px rgba(10,22,40,.10), inset 0 1px 0 rgba(255,255,255,.42);
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
    }

        .modal-site-contact .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 18px 38px rgba(79,143,245,.28), 0 10px 22px rgba(10,22,40,.12), 0 0 0 4px rgba(88,166,255,.10), inset 0 1px 0 rgba(255,255,255,.5);
            filter: saturate(1.04);
        }

        .modal-site-contact .btn-primary:focus {
            box-shadow: 0 0 0 4px var(--cf-ring), 0 18px 38px rgba(79,143,245,.24), inset 0 1px 0 rgba(255,255,255,.5);
        }

        .modal-site-contact .btn-primary:active {
            transform: translateY(0);
        }

    .modal-site-contact .btn-close {
        width: 40px;
        height: 40px;
        margin-left: 16px;
        background-color: rgba(255,255,255,.92);
        border-radius: 999px;
        opacity: .94;
        box-shadow: 0 10px 20px rgba(10,22,40,.12), inset 0 1px 0 rgba(255,255,255,.6);
        transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
    }

        .modal-site-contact .btn-close:hover {
            opacity: 1;
            transform: translateY(-1px);
            box-shadow: 0 14px 24px rgba(10,22,40,.14), inset 0 1px 0 rgba(255,255,255,.7);
        }

        .modal-site-contact .btn-close:focus {
            box-shadow: 0 0 0 4px rgba(88,166,255,.12), 0 14px 24px rgba(10,22,40,.14);
        }

    .modal-site-contact .text-danger,
    .modal-site-contact .invalid-feedback {
        font-weight: 600;
    }

    .modal-site-contact .alert {
        border: 1px solid rgba(11,18,32,.08);
        border-radius: 18px;
        box-shadow: var(--cf-shadow-sm);
    }

@media (max-width: 991.98px) {
    .modal-site-contact .modal-dialog {
        max-width: 600px;
        margin-top: 7vh;
    }
}

@media (max-width: 767.98px) {
    .modal-site-contact {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 14px;
        overflow-y: auto;
    }

        .modal-site-contact .modal-dialog {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            padding: 0;
        }

        .modal-site-contact .modal-content {
            border-radius: 22px;
        }

        .modal-site-contact .modal-header {
            padding: 18px 18px 16px 18px;
        }

        .modal-site-contact .modal-body {
            padding: 18px;
        }

        .modal-site-contact .modal-title {
            font-size: 1.18rem;
        }

        .modal-site-contact .form-control {
            min-height: 52px;
            font-size: .98rem;
            padding: .88rem .95rem;
        }

        .modal-site-contact textarea.form-control {
            min-height: 132px;
        }

        .modal-site-contact .btn-primary {
            width: 100%;
            min-height: 52px;
        }
}

@media (max-width: 479.98px) {
    .modal-site-contact {
        padding: 10px;
    }

        .modal-site-contact .modal-content {
            border-radius: 20px;
        }

        .modal-site-contact .modal-header {
            padding: 16px 16px 14px 16px;
        }

        .modal-site-contact .modal-body {
            padding: 16px;
        }

        .modal-site-contact .modal-content::after {
            left: 16px;
            right: 16px;
            bottom: 14px;
        }

        .modal-site-contact .form-label {
            font-size: .95rem;
        }
}

@media (min-width: 768px) and (max-width: 1366px) {
    .modal-site-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        min-height: 100vh;
    }

        .modal-site-contact .modal-dialog {
            width: 100%;
            max-width: 560px;
            margin: 0 auto;
            padding: 0;
        }
}

@media (min-width: 1367px) {
    .modal-site-contact .modal-dialog {
        max-width: 640px;
    }
}