.bonus-hero {
    padding: 60rem 0;
    background: var(--bonus-hero-background, var(--color-primary));
    text-align: center;
}

.bonus-hero__content h1 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 700;
    font-size: 32rem;
    line-height: 40rem;
    color: var(--bonus-hero-title, var(--color-white));
    margin-bottom: 16rem;
}

.bonus-hero__subtitle {
    font-size: 18rem;
    line-height: 28rem;
    color: var(--bonus-hero-subtitle, var(--color-white));
    opacity: 0.9;
    margin-bottom: 40rem;
    max-width: 600rem;
    margin-left: auto;
    margin-right: auto;
}

.bonus-hero .button {
    margin-left: auto;
    margin-right: auto;
}

.bonus-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24rem;
    max-width: 400rem;
    margin: 0 auto 32rem;
}

.highlight-item {
    text-align: center;
}

.highlight-number {
    display: block;
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 700;
    font-size: 24rem;
    line-height: 32rem;
    color: var(--bonus-hero-number, var(--color-accent));
    margin-bottom: 4rem;
}

.highlight-text {
    display: block;
    font-size: 14rem;
    line-height: 20rem;
    color: var(--bonus-hero-text, var(--color-white));
    opacity: 0.8;
}

.bonus-types {
    padding: 65rem 0;
    background: var(--bonus-types-background, var(--color-primary-dark));
}

.bonus-types h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--bonus-types-title, var(--color-white));
    text-align: center;
    margin-bottom: 16rem;
}

.section-subtitle {
    font-size: 16rem;
    line-height: 24rem;
    color: var(--bonus-types-subtitle, var(--color-white));
    opacity: 0.8;
    text-align: center;
    margin-bottom: 48rem;
    max-width: 600rem;
    margin-left: auto;
    margin-right: auto;
}

.bonus-types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24rem;
}

.bonus-type-card {
    background: var(--bonus-types-card-background, var(--color-primary));
    border: 1rem solid var(--bonus-types-card-border, var(--color-secondary));
    border-radius: var(--global-border-radius);
    padding: 24rem;
    text-align: center;
}

.bonus-type-icon {
    font-size: 40rem;
    margin-bottom: 16rem;
    display: block;
}

.bonus-type-card h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 18rem;
    line-height: 26rem;
    color: var(--bonus-types-card-title, var(--color-white));
    margin-bottom: 12rem;
}

.bonus-type-card p {
    font-size: 14rem;
    line-height: 22rem;
    color: var(--bonus-types-card-text, var(--color-white));
    opacity: 0.9;
    margin-bottom: 16rem;
}

.bonus-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bonus-features li {
    font-size: 12rem;
    line-height: 18rem;
    color: var(--bonus-types-card-text, var(--color-white));
    opacity: 0.8;
    margin-bottom: 6rem;
    position: relative;
    padding-left: 16rem;
}

.bonus-features li::before {
    content: '✓ ';
    display: inline;
    color: var(--bonus-types-card-border, var(--color-accent));
    font-weight: 700;
}

.top-bonuses {
    padding: 65rem 0;
    background: var(--top-bonuses-background, var(--color-black));
}

.top-bonuses h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--top-bonuses-title, var(--color-white));
    text-align: center;
    margin-bottom: 16rem;
}

.top-bonus-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24rem;
}

.top-bonus-card {
    background: var(--top-bonuses-card-background, var(--color-primary));
    border: 1rem solid var(--top-bonuses-card-border, var(--color-secondary));
    border-radius: var(--global-border-radius);
    padding: 24rem;
    position: relative;
}

.top-bonus-card .button {
    margin-left: auto;
    margin-right: auto;
}

.top-bonus-card.featured {
    border: 2rem solid var(--top-bonuses-card-featured-border, var(--color-accent));
    background: var(--top-bonuses-card-background, var(--color-primary-dark));
}

.bonus-badge {
    position: absolute;
    top: -8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--top-bonuses-badge-background, var(--color-accent));
    color: var(--top-bonuses-badge-text, var(--color-black));
    font-weight: 700;
    font-size: 10rem;
    padding: 4rem 16rem;
    border-radius: var(--global-border-radius);
}

.bonus-casino {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8rem;
    position: relative;
    min-height: 80rem;
    padding-left: 96rem;
    margin-bottom: 20rem;
}

.bonus-casino h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 20rem;
    line-height: 28rem;
    color: var(--top-bonuses-casino-title, var(--color-white));
}

.bonus-rating {
    font-size: 14rem;
    color: var(--top-bonuses-rating, var(--color-accent));
}

.bonus-offer {
    text-align: center;
    margin-bottom: 20rem;
    padding: 20rem;
    background: var(--top-bonuses-offer-background, var(--color-black));
    border-radius: var(--global-sm-border-radius);
}

.bonus-amount {
    display: block;
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 700;
    font-size: 24rem;
    line-height: 32rem;
    color: var(--top-bonuses-amount, var(--color-accent));
    margin-bottom: 8rem;
}

.bonus-description {
    font-size: 14rem;
    line-height: 20rem;
    color: var(--top-bonuses-description, var(--color-white));
    opacity: 0.9;
}

.bonus-terms {
    margin-bottom: 20rem;
}

.top-bonus-card .bonus-terms {
    background: var(--top-bonuses-offer-terms-background, var(--color-black));
}

.term-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12rem;
    line-height: 18rem;
    color: var(--top-bonuses-term-text, var(--color-white));
    margin-bottom: 8rem;
    padding: 8rem 0;
    border-bottom: 1rem solid var(--top-bonuses-term-border, var(--color-secondary));
}

.term-label {
    opacity: 0.7;
}

.term-value {
    font-weight: 600;
    color: var(--top-bonuses-term-value, var(--color-accent));
}

.bonus-guide {
    padding: 65rem 0;
    background: var(--bonus-guide-background, var(--color-primary-dark));
}

.guide-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40rem;
    align-items: center;
}

.guide-text h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--bonus-guide-title, var(--color-white));
    margin-bottom: 16rem;
}

.guide-text h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 20rem;
    line-height: 28rem;
    color: var(--bonus-guide-subtitle, var(--color-white));
    margin: 32rem 0 20rem;
}

.guide-text p {
    font-size: 16rem;
    line-height: 24rem;
    color: var(--bonus-guide-text, var(--color-white));
    opacity: 0.9;
    margin-bottom: 16rem;
}

.guide-tips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20rem;
}

.guide-tip {
    background: var(--bonus-guide-tip-background, var(--color-primary));
    border-radius: var(--global-border-radius);
    padding: 20rem;
}

.guide-tip h4 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 16rem;
    line-height: 24rem;
    color: var(--bonus-guide-tip-title, var(--color-accent));
    margin-bottom: 8rem;
}

.guide-tip p {
    font-size: 14rem;
    line-height: 20rem;
    color: var(--bonus-guide-tip-text, var(--color-white));
    opacity: 0.9;
    margin: 0;
}

.guide-image img {
    width: 100%;
    height: auto;
    border-radius: var(--global-border-radius);
}

.bonus-tips {
    padding: 65rem 0;
    background: var(--bonus-tips-background, var(--color-primary));
}

.bonus-tips h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--bonus-tips-title, var(--color-white));
    text-align: center;
    margin-bottom: 48rem;
}

.tips-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24rem;
}

.tip-card {
    background: var(--bonus-tips-card-background, var(--color-primary-dark));
    border-radius: var(--global-border-radius);
    padding: 24rem;
    text-align: center;
}

.tip-icon {
    font-size: 40rem;
    margin-bottom: 16rem;
    display: block;
}

.tip-card h3 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 18rem;
    line-height: 26rem;
    color: var(--bonus-tips-card-title, var(--color-white));
    margin-bottom: 12rem;
}

.tip-card p {
    font-size: 14rem;
    line-height: 22rem;
    color: var(--bonus-tips-card-text, var(--color-white));
    opacity: 0.9;
}

.bonus-cta {
    padding: 65rem 0;
    background: var(--bonus-cta-background, var(--color-black));
}

.cta-content {
    text-align: center;
    max-width: 600rem;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--heading-font-family, var(--font-main));
    font-weight: 600;
    font-size: 28rem;
    line-height: 36rem;
    color: var(--bonus-cta-title, var(--color-white));
    margin-bottom: 16rem;
}

.cta-content p {
    font-size: 16rem;
    line-height: 24rem;
    color: var(--bonus-cta-text, var(--color-white));
    opacity: 0.9;
}

.cta-content p:not(:last-child) {
    margin-bottom: 32rem;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 16rem;
    align-items: center;
}

.cta-buttons:not(:last-child) {
    margin-bottom: 24rem;
}


.cta-disclaimer {
    font-size: 12rem;
    line-height: 18rem;
    color: var(--bonus-cta-disclaimer, var(--color-white));
    opacity: 0.6;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .bonus-hero__content h1 {
        font-size: 48rem;
        line-height: 56rem;
    }

    .bonus-hero__subtitle {
        font-size: 20rem;
        line-height: 30rem;
    }

    .bonus-highlights {
        grid-template-columns: repeat(3, 1fr);
        max-width: 600rem;
    }

    .highlight-number {
        font-size: 32rem;
        line-height: 40rem;
    }

    .bonus-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-bonus-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .guide-tips {
        grid-template-columns: repeat(2, 1fr);
    }

    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    .bonus-hero {
        padding: 100rem 0;
    }

    .bonus-hero__content h1 {
        font-size: 56rem;
        line-height: 64rem;
    }

    .guide-content {
        grid-template-columns: 2fr 1fr;
        gap: 60rem;
    }

    .bonus-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .top-bonus-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .tips-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}