.legal-page {
    position: relative;
    padding-top: calc(var(--showcase-nav-height, 74px) + 18px);
    background:
        radial-gradient(1200px 500px at 0% 0%, rgba(176, 200, 44, 0.16), transparent 62%),
        radial-gradient(1100px 420px at 100% 0%, rgba(43, 45, 66, 0.08), transparent 66%),
        #f4f7fb;
    color: var(--text-main);
}

.legal-hero {
    padding: 0 0 34px;
}

.legal-hero-inner {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(130deg, #0f1f38 0%, #173054 58%, #1b3b65 100%);
    color: #ecf4ff;
    box-shadow: 0 24px 48px -30px rgba(15, 31, 56, 0.75);
    padding: clamp(24px, 4vw, 44px);
    overflow: hidden;
}

.legal-hero-inner::before {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 230, 161, 0.3), rgba(168, 230, 161, 0) 70%);
    pointer-events: none;
}

.legal-tag {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #dff0ff;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px;
}

.legal-title {
    margin: 0 0 12px;
    font-size: clamp(34px, 4.8vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.legal-subtitle {
    margin: 0;
    max-width: 66ch;
    font-size: 1.06rem;
    line-height: 1.8;
    color: rgba(228, 240, 255, 0.86);
}

.legal-hero-meta {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.legal-hero-meta span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    margin-top: 22px;
    margin-bottom: clamp(32px, 5vw, 72px);
}

.legal-sidebar {
    position: sticky;
    top: 95px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-panel {
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 20px;
    box-shadow: 0 14px 30px -28px rgba(15, 31, 56, 0.55);
    padding: 18px;
}

.legal-panel h2 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.legal-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-nav a {
    text-decoration: none;
    color: #2c3e58;
    padding: 10px 12px;
    border-radius: 10px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    border: 1px solid transparent;
    font-size: 0.94rem;
}

.legal-nav a:hover {
    transform: translateX(3px);
    background: #f0f6ff;
    border-color: #dbe8fa;
    color: #0f2748;
}

.legal-panel-contact p {
    margin: 0 0 10px;
    color: #596b84;
    font-size: 0.93rem;
}

.legal-panel-contact a {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: #18365f;
    margin-bottom: 8px;
}

.legal-panel-contact a:hover {
    color: var(--primary-dark);
}

.legal-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-card {
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 22px;
    box-shadow: 0 18px 34px -30px rgba(15, 31, 56, 0.6);
    padding: clamp(20px, 2.8vw, 30px);
    scroll-margin-top: 108px;
}

.legal-card-lead {
    border-color: #d8e8ff;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.legal-card h2 {
    margin: 0 0 12px;
    font-size: clamp(1.24rem, 2vw, 1.48rem);
    color: #102744;
}

.legal-card p {
    margin: 0 0 10px;
    line-height: 1.74;
    color: #334b67;
}

.legal-card a {
    color: #2b5f94;
    font-weight: 600;
}

.legal-card a:hover {
    color: #1f4b76;
}

.legal-muted {
    color: #5d7088;
}

.legal-grid {
    margin-top: 14px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legal-item {
    border-radius: 14px;
    border: 1px solid #e3ebf7;
    background: #f8fbff;
    padding: 13px 14px;
}

.legal-label {
    margin: 0 0 5px;
    color: #60748f;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-value {
    margin: 0;
    color: #1f3551;
    font-weight: 600;
    line-height: 1.56;
}

.legal-list {
    margin: 0;
    padding-left: 18px;
    color: #334b67;
}

.legal-list li {
    margin-bottom: 8px;
    line-height: 1.62;
}

.cta-section {
    padding-top: 28px;
}

.cta-content {
    border-radius: 26px;
    background: linear-gradient(125deg, #112946 0%, #17365b 55%, #1f4675 100%);
    color: #eaf2ff;
    padding: clamp(24px, 3.6vw, 40px);
    text-align: center;
    box-shadow: 0 24px 44px -32px rgba(10, 24, 44, 0.9);
}

.cta-content h2 {
    color: #ffffff;
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.cta-content p {
    margin: 0;
    color: rgba(228, 239, 255, 0.86);
}

.cta-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-actions .btn-secondary {
    color: #123156;
    border-color: transparent;
}

@media (max-width: 1080px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        position: relative;
        top: 0;
    }
}

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

    .legal-panel,
    .legal-card {
        border-radius: 18px;
    }

    .legal-hero-inner {
        border-radius: 20px;
    }
}