/* =================================================================== LIVE FINAL section css =================================================================== */
.live-final {
    padding-block: var(--sectionGap);

    & .live-final__panel {
        position: relative;
        display: flex; flex-direction: column; align-items: center;
        gap: var(--sp20);
        padding: var(--sp80) var(--sp40);
        background: var(--surface-1);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        overflow: hidden;
        text-align: center;

        &::before, &::after {
            position: absolute;
            border: 1px solid var(--blue-100);
            border-radius: var(--r-full);
            content: "";
        }
        &::before { top: -140px; left: -100px; width: 360px; height: 360px; }
        &::after { right: -120px; bottom: -180px; width: 420px; height: 420px; }

        & > * { position: relative; z-index: 1; }
    }

    & .live-final__title { max-width: 760px; }

    & .live-final__text { max-width: 640px; font-size: var(--f18); }

    & .live-final__panel .btn { margin-top: var(--sp15); }

    & .live-final__perks {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: var(--sp10) var(--sp30);
        margin-top: var(--sp10);

        & li {
            display: flex; align-items: center;
            gap: var(--sp8);
            font-size: var(--f14);
            font-weight: 600;
            color: var(--ink);

            &::before {
                width: 18px; height: 18px;
                background: var(--primary) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 12.5l3 3 7-7" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 12px no-repeat;
                border-radius: var(--r-full);
                content: "";
            }
        }
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 575.98px) {
    .live-final {
        & .live-final__panel { padding: var(--sp60) var(--sp20); }
        & .live-final__perks { flex-direction: column; align-items: center; }
    }
}