.legal-page {
    background:
        radial-gradient(circle at 82% 8%, rgba(112, 76, 211, .22), transparent 27rem),
        radial-gradient(circle at 4% 46%, rgba(35, 67, 108, .13), transparent 32rem),
        var(--bg);
}

.legal-main {
    position: relative;
    min-height: 70vh;
    padding: 92px 0 40px;
}

.legal-main > .eyebrow {
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    color: var(--violet-soft);
    font: 800 12px/1 var(--display);
    letter-spacing: .24em;
    text-transform: uppercase;
}

.legal-main > .eyebrow::before {
    display: inline-block;
    width: 32px;
    height: 2px;
    margin: 0 10px 3px 0;
    content: "";
    background: var(--violet);
}

.legal-main > h1 {
    position: relative;
    z-index: 2;
    max-width: 950px;
    margin: 0;
    font: 900 clamp(46px, 6vw, 78px)/.94 var(--display);
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.legal-main > .subtitle {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 30px 0 0;
    color: #c0c1c8;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.7;
}

.legal-orbit {
    position: absolute;
    z-index: 0;
    top: 35px;
    right: 25px;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(156, 120, 255, .2);
    border-radius: 50%;
    pointer-events: none;
}

.legal-orbit i {
    position: absolute;
    border: 1px solid rgba(156, 120, 255, .24);
    border-radius: 50%;
}

.legal-orbit i:first-child { inset: 18%; }
.legal-orbit i:nth-child(2) { inset: 37%; }
.legal-orbit b {
    position: absolute;
    top: 30%;
    left: 63%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 24px var(--violet);
}

.legal-main .content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 82px;
    counter-reset: legal-section;
}

.legal-main .card {
    position: relative;
    min-height: 230px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(27, 29, 40, .94), rgba(13, 15, 22, .96));
    counter-increment: legal-section;
}

.legal-main .card::after {
    position: absolute;
    top: 22px;
    right: 25px;
    content: counter(legal-section, decimal-leading-zero);
    color: rgba(156, 120, 255, .2);
    font: 900 46px/1 var(--display);
}

.legal-main .card h2 {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 65px);
    margin: 0 0 20px;
    color: var(--violet-soft);
    font: 900 15px/1.25 var(--display);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.legal-main .card p,
.legal-main .card li {
    position: relative;
    z-index: 1;
    color: #c4c5cc;
    font-size: 15px;
    line-height: 1.75;
}

.legal-main .card p { margin: 0; }
.legal-main .card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.legal-main .card li { padding-left: 22px; }
.legal-main .card li::before { position: absolute; left: 0; content: "→"; color: var(--violet); font-weight: 900; }
.legal-main .card:last-child { grid-column: 1 / -1; min-height: auto; border-color: rgba(255, 184, 77, .28); background: linear-gradient(120deg, rgba(255, 184, 77, .08), rgba(17, 20, 29, .96)); }
.legal-main .card:last-child h2 { color: var(--amber); }

.contact {
    color: var(--ink);
    font-weight: 900;
    text-underline-offset: 4px;
    text-decoration-color: var(--violet);
}

.contact:hover { color: var(--violet-soft); }

.legal-main .content.support-page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legal-main .support-page .card { min-height: 260px; }
.legal-main .support-page .card:last-child { grid-column: 1 / -1; }
.support-email {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding: 17px 20px;
    border-radius: 9px;
    background: var(--ink);
    color: #0a0b10;
    text-decoration: none;
    font-weight: 900;
}
.support-email span { color: var(--violet); font-size: 20px; }

@media (max-width: 900px) {
    .legal-main .content,
    .legal-main .content.support-page { grid-template-columns: 1fr; }
    .legal-main .card:last-child,
    .legal-main .support-page .card:last-child { grid-column: auto; }
}

@media (max-width: 620px) {
    .legal-main { padding-top: 68px; }
    .legal-main > h1 { font-size: clamp(38px, 11vw, 50px); overflow-wrap: anywhere; }
    .legal-main > .subtitle { margin-top: 22px; font-size: 15px; }
    .legal-orbit { top: 20px; right: -150px; opacity: .65; }
    .legal-main .content { margin-top: 55px; }
    .legal-main .card { min-height: auto; padding: 27px 22px; border-radius: 18px; }
    .legal-main .card::after { top: 18px; right: 18px; font-size: 38px; }
    .legal-main .card p,
    .legal-main .card li { font-size: 14px; }
}