.tag {
    font: 600 13px var(--b);
    letter-spacing: .14em;
    color: var(--cy);
    margin-bottom: 20px;
}
.hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 5vw;
    align-items: start;
    padding: 0px 0 20px !important;
}

.bul {
    list-style: none;
    padding: 0;
    margin: 30px 0
}

    .bul li {
        display: flex;
        gap: 14px;
        margin-bottom: 18px;
        color: #c9d6ec
    }

        .bul li:before {
            content: "✓";
            color: var(--li);
            font-weight: 700
        }

    .bul b {
        color: var(--ink)
    }

.gar {
    margin-top: 26px;
    display: grid;
    gap: 16px;
    font-size: 15px;
    color: var(--mut)
}

    .gar > div {
        display: flex;
        gap: 12px;
        align-items: flex-start
    }

        .gar > div > div {
            min-width: 0
        }

    .gar b {
        display: block;
        color: var(--ink)
    }

    .gar span {
        color: var(--li);
        font-weight: 700
    }

.card {
    background: var(--gl);
    border: 1px solid var(--ln);
    border-radius: 22px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)
}

.form {
    padding: 32px;
    position: sticky;
    top: 96px
}

    .form h3 {
        font: 800 28px var(--d);
        letter-spacing: -.03em;
        margin: 0 0 4px
    }

    .form > p {
        margin: 0 0 22px;
        color: var(--mut);
        font-size: 15px
    }

.fg {
    margin-bottom: 16px
}

    .fg label {
        display: block;
        font: 600 14px var(--b);
        margin-bottom: 6px
    }

        .fg label span {
            color: var(--mut);
            font-weight: 400;
            font-size: 12px
        }

    .fg input, .fg select, .fg textarea {
        width: 100%;
        border-radius: 12px;
        border: 1px solid var(--ln);
        background: rgba(3,9,22,.75);
        color: var(--ink);
        padding: 12px 14px;
        font: 16px var(--b);
        transition: border-color .2s,box-shadow .2s
    }

        .fg input:focus, .fg select:focus, .fg textarea:focus {
            outline: none;
            border-color: var(--cy);
            box-shadow: 0 0 0 3px rgba(34,211,245,.15)
        }

    .fg option {
        background: #0b1730
    }

.form .btn {
    width: 100%;
    margin-top: 6px;
    padding: 16px
}

.ok {
    display: none;
    text-align: center;
    padding: 50px 20px
}

    .ok b {
        display: block;
        font: 800 30px var(--d);
        color: var(--li);
        margin-bottom: 10px;
        letter-spacing: -.03em
    }

    .ok p {
        color: var(--mut)
    }

.sec {
    padding: 100px 0
}

.sub {
    max-width: 720px;
    margin: 20px auto 0;
    text-align: center;
    color: var(--mut)
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 20px;
    margin-top: 56px
}

.st {
    padding: 30px 26px;
    perspective: 900px;
    min-width: 0
}

    .st em {
        display: block;
        white-space: nowrap;
        font: 800 clamp(30px,3.4vw,50px)/1 var(--d);
        font-style: normal;
        letter-spacing: -.04em;
        margin-bottom: 12px
    }

    .st b {
        display: block;
        font-weight: 600;
        color: #c9d6ec
    }

    .st p {
        margin: 0;
        color: var(--mut);
        font-size: 14.5px
    }

    .st i {
        display: block;
        height: 3px;
        border-radius: 9px;
        margin-top: 20px;
        background: rgba(255,255,255,.08);
        overflow: hidden
    }

        .st i:after {
            content: "";
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg,var(--cy),var(--vi));
            transition: width 1.8s cubic-bezier(.3,.7,.2,1) .3s
        }

.in .st i:after {
    width: 100%
}

.tw {
    overflow-x: auto;
    margin-top: 48px
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
    border-radius: 20px;
    overflow: hidden
}

th, td {
    padding: 18px 22px;
    text-align: left;
    border-bottom: 1px solid var(--ln);
    font-size: 15px
}

th {
    font: 600 14px var(--b);
    color: var(--cy);
    background: rgba(34,211,245,.07)
}

td:first-child {
    color: var(--mut)
}

tr:last-child td {
    border: 0
}

.rv {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
    transition: opacity .9s,transform .9s cubic-bezier(.2,.8,.1,1),filter .9s
}

    .rv.in {
        opacity: 1;
        transform: none;
        filter: none
    }

footer {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--ln);
    background: rgba(4,10,24,.85);
    padding: 34px 5vw 44px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--mut);
    font-size: 14px
}

    footer a {
        color: var(--mut);
        text-decoration: none
    }

        footer a:hover {
            color: var(--ink)
        }

@media(max-width:900px) {
    .hero {
        grid-template-columns: 1fr;
        
    }

    .form {
        position: static;
        padding: 24px
    }

    .sec {
        padding: 76px 0
    }
}

@media(max-width:600px) {
    .nl {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    .rv {
        opacity: 1;
        transform: none;
        filter: none
    }

    .st i:after {
        width: 100%
    }
}