.rules-page {
        max-width: 1300px;
        margin: 0 auto;
        padding: 34px 20px 56px;
    }

    .rules-hero {
        position: relative;
        overflow: hidden;
        margin-bottom: 24px;
        padding: 34px 36px;
        border-radius: 18px;
        color: #fff;
        background: linear-gradient(135deg, #314a37 0%, #425f47 62%, #f5b342 180%);
        box-shadow: 0 14px 34px rgba(0, 37, 59, .14);
    }

    .rules-hero::after {
        position: absolute;
        right: -70px;
        bottom: -95px;
        width: 250px;
        height: 250px;
        border: 32px solid rgba(255, 255, 255, .1);
        border-radius: 50%;
        content: '';
    }

    .rules-kicker {
        position: relative;
        z-index: 1;
        margin: 0 0 8px;
        color: #f5b342;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .rules-hero h1 {
        position: relative;
        z-index: 1;
        margin: 0;
        color: #fff;
        font-size: clamp(26px, 4vw, 38px);
        line-height: 1.12;
    }

    .rules-lead {
        position: relative;
        z-index: 1;
        max-width: 700px;
        margin: 14px 0 0;
        color: rgba(255, 255, 255, .86);
        font-size: 16px;
        line-height: 1.6;
    }

    .rules-card {
        margin-bottom: 16px;
        padding: 24px 28px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 5px 18px rgba(0, 37, 59, .05);
    }

    .rules-card h2 {
        display: flex;
        gap: 11px;
        align-items: center;
        margin: 0 0 12px;
        color: #00253b;
        font-size: 20px;
    }

    .rules-card h2 i { color: var(--primary, #f5b342); font-size: 17px; }
    .rules-card p, .rules-card li { color: #334e5f; font-size: 14px; line-height: 1.7; }
    .rules-card p { margin: 0 0 10px; }
    .rules-card p:last-child { margin-bottom: 0; }
    .rules-card ul { margin: 8px 0 0; padding-left: 22px; }
    .rules-card li + li { margin-top: 5px; }
    .rules-card a { color: #0b6c8f; text-decoration: underline; text-underline-offset: 2px; }

    .rules-note {
        border-left: 4px solid #f5b342;
        background: #fffaf0;
    }

    @media (max-width: 640px) {
        .rules-page { padding: 22px 12px 40px; }
        .rules-hero { padding: 26px 22px; }
        .rules-card { padding: 20px 18px; }
    }