:root {
        --primary: #3bb1f7;
        --bg: #0b1220;
        --glass-bg: 255, 255, 255;
        /* rgb tuple */
    }

    html,
    body {
        height: 100%
    }

    body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
        color: #121418;
        background: #0b1220;
        overflow-x: hidden;
    }

    /* hero bg */
    .hero {
        min-height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 64px 16px;
        background:
            radial-gradient(1200px 600px at 80% -10%, rgba(59, 177, 247, .15), transparent 60%),
            radial-gradient(900px 500px at -10% 20%, rgba(88, 255, 188, .12), transparent 60%),
            #0b1220 url('images/hero-road.jpg') center/cover no-repeat fixed;
    }

    .hero::after {
        /* лёгкая дымка */
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(2px) saturate(110%);
        background: linear-gradient(180deg, rgba(11, 18, 32, .35), rgba(11, 18, 32, .65));
        pointer-events: none;
    }

    /* card */
    .glass {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 760px;
        background: rgba(var(--glass-bg), .18);
        border: 1px solid rgba(255, 255, 255, .25);
        box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 28px;
        padding: clamp(20px, 3vw, 36px);
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #e8f1ff;
        letter-spacing: .4px;
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 6px;
    }

    .title {
        color: #ffffff;
        font-weight: 800;
        font-size: clamp(28px, 4vw, 40px);
        line-height: 1.1;
        margin: 0 0 20px;
    }

    .subtitle {
        color: #cfe3ff;
        margin-bottom: 26px;
    }

    .form-label {
        color: #ffffff;
        font-weight: 600;
    }

    .form-control,
    .form-select {
        height: 54px;
        border-radius: 14px;
        border: 1px solid rgba(9, 28, 51, .12);
        background: rgba(255, 255, 255, .9);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 .2rem rgba(59, 177, 247, .25);
    }

    .btn-primary {
        --bs-btn-bg: var(--primary);
        --bs-btn-border-color: var(--primary);
        --bs-btn-hover-bg: #199cf0;
        --bs-btn-hover-border-color: #199cf0;
        --bs-btn-active-bg: #0d8fe6;
        border-radius: 16px;
        height: 56px;
        font-weight: 700;
        letter-spacing: .2px;
    }

    .helper {
        color: #6b7b8f;
        font-size: 14px;
        margin-top: 6px;
    }

    .footer-icons {
        display: flex;
        gap: 14px;
        margin-top: 18px;
        justify-content: center;
    }

    .footer-icons a {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .9);
        border: 1px solid rgba(9, 28, 51, .12);
        transition: transform .15s ease;
    }

    .footer-icons a:hover {
        transform: translateY(-2px)
    }

    .badge-top {
        position: absolute;
        right: 18px;
        top: 18px;
        background: rgba(255, 255, 255, .85);
        color: #0b2742;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid rgba(9, 28, 51, .12);
    }

    /* toasts */
    .toast-container {
        z-index: 1060;
    }