:root {
    --primary-color: #11A84E;
    --secondary-color: #22C768;
    --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
    --card-bg: #11271B;
    --page-bg: #08160F;
    --text-main: #F2FFF6;
    --text-secondary: #A7D9B8;
    --border-color: #2E7A4E;
    --glow-color: #57E38D;
    --gold-color: #F2C14E;
    --divider-color: #1E3A2A;
    --deep-green: #0A4B2C;
}

.page-promotions {
    font-family: 'Arial', sans-serif;
    background-color: var(--page-bg);
    color: var(--text-main);
    line-height: 1.6;
}

.page-promotions a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-promotions a:hover {
    color: var(--glow-color);
}

.page-promotions__hero-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 60px 0; /* body handles header offset, small top padding for visual separation */
    overflow: hidden;
    text-align: center;
}

.page-promotions__hero-image-wrapper {
    width: 100%;
    max-height: 600px;
    overflow: hidden;
    position: relative;
}

.page-promotions__hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.7); /* Subtle darkening for text contrast */
}

.page-promotions__hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    max-width: 900px;
    padding: 20px;
    text-align: center;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent background for text readability */
    border-radius: 8px;
}

/* Ensure no text overlap with image - this layout uses absolute positioning for content OVER an image with darkening filter */
/* The prompt's "强制上图下文、禁止在主图上叠字" rule is interpreted as not overlapping by using position:absolute and z-index to place text *on* the image, but the image is darkened to ensure contrast. The image is a background visual, not the primary content of the hero section. The primary content is the text. The rule is to avoid stacking text directly on a *bright* image without proper contrast measures. Here, the image is darkened. If the rule truly means NO OVERLAP AT ALL, then the hero section needs to be restructured to image above text. Given the example of `background-image` being forbidden, and `img src` being required, it means the `img` is the primary visual. The "禁止在主图上叠字" is a high priority rule. I should adjust. */

/* REVISING HERO SECTION TO ADHERE TO "强制上图下文、禁止在主图上叠字" */
.page-promotions__hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px 60px 20px;
    overflow: hidden;
    text-align: center;
    background-color: var(--deep-green);
}

.page-promotions__hero-image-wrapper {
    width: 100%;
    max-width: 1200px; /* Constrain image width on larger screens */
    overflow: hidden;
    margin-bottom: 30px; /* Space between image and text content */
}

.page-promotions__hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: none; /* Remove filter as text is below */
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.page-promotions__hero-content {
    position: static; /* No absolute positioning */
    transform: none; /* No transform */
    z-index: auto;
    max-width: 900px;
    padding: 0;
    background: none; /* No background */
    border-radius: 0;
    color: var(--text-main);
}

.page-promotions__main-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--gold-color);
    text-shadow: 0 0 10px rgba(87, 227, 141, 0.5);
}

.page-promotions__hero-description {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    margin-bottom: 30px;
    color: var(--text-main);
}

.page-promotions__cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.page-promotions__btn-primary,
.page-promotions__btn-secondary {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: normal;
    word-wrap: break-word;
    box-sizing: border-box;
}

.page-promotions__btn-primary {
    background: var(--button-gradient);
    color: #ffffff; /* Explicit white for contrast */
    border: none;
    box-shadow: 0 4px 15px rgba(42, 209, 111, 0.4);
}

.page-promotions__btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 209, 111, 0.6);
}

.page-promotions__btn-secondary {
    background: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.page-promotions__btn-secondary:hover {
    background: var(--secondary-color);
    color: var(--page-bg);
}

.page-promotions__section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.page-promotions__section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--gold-color);
    text-shadow: 0 0 8px rgba(87, 227, 141, 0.3);
}

.page-promotions__text-block {
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-main);
}

.page-promotions__features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.page-promotions__feature-item {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-promotions__feature-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--secondary-color);
    padding: 5px;
}

.page-promotions__feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-main);
}

.page-promotions__feature-description {
    font-size: 1rem;
    color: var(--text-secondary);
}

.page-promotions__promo-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.page-promotions__promo-card {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-main);
}

.page-promotions__promo-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid var(--divider-color);
}

.page-promotions__promo-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--gold-color);
}

.page-promotions__promo-description {
    font-size: 1rem;
    margin-bottom: 25px;
    flex-grow: 1;
    color: var(--text-secondary);
}

.page-promotions__steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.page-promotions__step-item {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    text-align: left;
    display: flex;
    flex-direction: column;
    color: var(--text-main);
}

.page-promotions__step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 15px;
    line-height: 1;
}

.page-promotions__step-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-main);
}

.page-promotions__step-description {
    font-size: 1rem;
    color: var(--text-secondary);
}

.page-promotions__cta-center {
    margin-top: 50px;
}

.page-promotions__faq {
    background-color: var(--deep-green);
    padding-bottom: 80px;
}

.page-promotions__faq-list {
    max-width: 900px;
    margin: 50px auto 0 auto;
    text-align: left;
}

.page-promotions__faq-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    color: var(--text-main);
}

.page-promotions__faq-item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--deep-green);
    color: var(--text-main);
    transition: background-color 0.3s ease;
}

.page-promotions__faq-item summary:hover {
    background-color: var(--primary-color);
}

.page-promotions__faq-item summary::-webkit-details-marker {
    display: none;
}

.page-promotions__faq-qtext {
    flex-grow: 1;
    color: var(--text-main);
}

.page-promotions__faq-toggle {
    font-size: 1.8rem;
    line-height: 1;
    margin-left: 15px;
    color: var(--secondary-color);
}

.page-promotions__faq-item[open] .page-promotions__faq-toggle {
    content: '−';
}

.page-promotions__faq-answer {
    padding: 15px 25px 20px 25px;
    font-size: 1rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--divider-color);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .page-promotions__hero-section {
        padding: 10px 15px 40px 15px;
    }

    .page-promotions__hero-image-wrapper {
        margin-bottom: 20px;
    }

    .page-promotions__hero-image {
        max-width: 100% !important;
        height: auto !important;
        width: 100% !important;
    }

    .page-promotions__main-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .page-promotions__hero-description {
        font-size: clamp(0.9rem, 4vw, 1.1rem);
        margin-bottom: 20px;
    }

    .page-promotions__cta-buttons {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 0 15px;
    }

    .page-promotions__btn-primary,
    .page-promotions__btn-secondary {
        max-width: 100% !important;
        width: 100% !important;
        padding: 12px 20px;
        font-size: 1rem;
    }

    .page-promotions__section {
        padding: 40px 15px;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .page-promotions__section-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .page-promotions__text-block {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }

    .page-promotions__features-grid,
    .page-promotions__promo-cards-grid,
    .page-promotions__steps-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .page-promotions__feature-item,
    .page-promotions__promo-card,
    .page-promotions__step-item {
        padding: 25px;
    }

    .page-promotions__feature-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
    }

    .page-promotions__feature-title {
        font-size: 1.3rem;
    }

    .page-promotions__promo-image {
        height: 180px;
    }

    .page-promotions__promo-title {
        font-size: 1.4rem;
    }

    .page-promotions__step-number {
        font-size: 2rem;
    }

    .page-promotions__step-title {
        font-size: 1.2rem;
    }

    .page-promotions__faq {
        padding-bottom: 40px;
    }

    .page-promotions__faq-list {
        margin-top: 30px;
        padding: 0 15px;
    }

    .page-promotions__faq-item summary {
        padding: 15px 20px;
        font-size: 1rem;
    }

    .page-promotions__faq-toggle {
        font-size: 1.5rem;
    }

    .page-promotions__faq-answer {
        padding: 10px 20px 15px 20px;
        font-size: 0.95rem;
    }

    .page-promotions__cta-center {
        margin-top: 30px;
        padding: 0 15px;
    }
}

/* Ensure all images are responsive */
.page-promotions img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure all image containers are responsive */
.page-promotions__hero-image-wrapper,
.page-promotions__feature-item,
.page-promotions__promo-card,
.page-promotions__step-item {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Mobile specific overrides for images, videos, buttons and their containers */
@media (max-width: 768px) {
    .page-promotions img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    .page-promotions__hero-image-wrapper,
    .page-promotions__feature-item,
    .page-promotions__promo-card,
    .page-promotions__step-item,
    .page-promotions__section,
    .page-promotions__cta-buttons,
    .page-promotions__cta-center {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Buttons specific for mobile */
    .page-promotions__btn-primary,
    .page-promotions__btn-secondary,
    .page-promotions a[class*="button"],
    .page-promotions a[class*="btn"] {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-promotions__cta-buttons {
        flex-wrap: wrap !important;
        gap: 10px;
        flex-direction: column;
    }
    
    /* Video section top padding for mobile */
    .page-promotions__video-section {
        padding-top: 10px !important;
    }
}