/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the given CSS visually without changing selectors, layout, typography, etc. The original CSS is a small media query block with three rules. We need to apply the target style "horizontal-strips" and effect variant "glow-effects" but only to visual properties. Since the original CSS only has text-align, font-size, padding, we need to modify colors/shadows/radius etc. Not much to change. But we can add visual properties like background, border-radius, box-shadow, transitions within the existing rules without changing layout. Also might need to adjust padding within ±20%, but we can keep same or adjust slightly. The selectors are:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 { text-align: center; }
    .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
    .contact-channels-section article,
    .contact-quick-section .contact-card { padding: var(--space-md) !important; }
}

We need to output a rewritten CSS with visual changes. Since original has no colors, we must introduce some. But careful: the HTML is fixed, we shouldn't change layout, only colors, shadows, radius, transitions. We can add background, border-radius, box-shadow, etc. to these elements. But we must preserve the exact selectors and existing property declarations? We can modify values and add new properties. But we need to ensure we don't change layout-related properties like text-align, font-size, padding? Actually font-size is typography, should be unchanged. text-align is layout, unchanged. padding is layout, keep within ±20%. We can leave them as is. To satisfy "refresh visual identity" we can add a glow effect via box-shadow on the elements, background with alternating colors? But these are small elements.

Let's think: The target style "horizontal-strips" often refers to full-width sections with alternating backgrounds. But within this media query, we have specific elements. Maybe we should give the hero content a background strip, the badge a glow, and contact cards a background/glow. But we must not alter layout structure. Adding background colors and shadows is fine.

We can add:

- .app-hero-section .row .col-lg-7: center text already; maybe add a subtle background with backdrop-filter? But that might be visual enhancement. Could add border-radius, box-shadow glow, but it's a column; adding background may create a strip effect. However, the column is a flex item; adding background may be okay. But safer to add a text-shadow? Hmm.

Given the variant "glow-effects", we can apply box-shadows to the badge and contact cards. For the col-lg-7, we can perhaps set a custom property or apply text-shadow? But let's be conservative: only change visual properties that don't alter layout. Adding background, border-radius, box-shadow to container elements doesn't alter layout except for background painting, but box-shadow doesn't affect layout. Border-radius doesn't affect layout. So we can add.

We also need to consider that the original uses CSS custom properties like var(--space-md). We can keep that or adjust? Padding must stay within ±20%, so if --space-md is unknown, we can keep it. Could change to calc? Better keep same.

We should include a transition for glow on hover? The original doesn't have hover rules, but we can add a transition property to the existing rules to make any future hover smooth. But if we add :hover selectors, that would be new selectors, not allowed. We can add transition to the existing selectors.

Let's craft a new CSS that:

- For .app-hero-section .row .col-lg-7: keep text-align:center; add maybe a subtle background gradient, border-radius, box-shadow glow, padding? But padding changes? The original doesn't specify padding. We could add padding but that changes layout. Better not add padding. Just add background, border-radius, box-shadow, transition. A full-width strip might be achieved with background on the column? It's within a row. We can set background with a liner gradient, maybe rounded corners. But to avoid layout change, don't adjust width. A background on a column inside a container may look like a strip.

- .app-hero-section .badge.bg-warning: keep font-size:0.85rem; add background color? Actually badge.bg-warning already has a Bootstrap background-warning. We can override background with a gradient? Changing the background color of the badge could be a visual change. We can also add box-shadow glow in accent color, border-radius, transition. Perhaps add a pulsing animation? But adding animation would require @keyframes, and the original doesn't have. We can add a new @keyframes? That's allowed? The rules say @keyframes names cannot change, but we can add new @keyframes? The instruction says "animation-name (values like duration/timing CAN change)" and "No @keyframes names" in protected list. We can add new @keyframes if we also add animation properties. But the selectors are fixed, we can add animation to existing selectors. That's okay. We need to be careful not to change @media breakpoints or import. Adding @keyframes inside media query? Yes, possible. But maybe overkill.

- For contact cards: keep padding: var(--space-md) !important; add background, border-radius, box-shadow glow, transition.

We need to ensure we don't change display, position, grid, flex, width, height, margins, paddings too much. Adding box-shadow and border-radius is fine.

Let's target a fresh color palette with "horizontal-strips" alternating white/cream/dark/white and strong color zones. But this media query is for mobile. We can use backgrounds: the col gets a dark gradient? But then text color? We don't know text color. Maybe better to stick to creams and accents.

Let's create a cohesive visual identity:

- col-lg-7: background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,248,235,0.8)); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 24px rgba(255, 177, 66, 0.4); backdrop-filter: blur(8px); transition: box-shadow 0.4s ease, transform 0.4s ease; But transform would change layout? transform doesn't affect layout but could be disallowed? It's a visual property, can change? The protected properties don't include transform, but changing transform on hover would require a new :hover rule. Adding transform to existing rule might move the element, that's layout-adjacent but not layout property. Safer to avoid transform. Use only box-shadow, background, border-radius, transition on box-shadow.

- badge: background: linear-gradient(135deg, #ffb142, #ff7e5f); border-radius: 12px; box-shadow: 0 0 24px rgba(255, 126, 95, 0.6); transition: box-shadow 0.3s ease; maybe an animation pulse. But adding animation requires keyframes. We can add an infinity pulse with a new @keyframes, but the original media query only includes three rules. We could place @keyframes inside the media query, but that may be weird. We can add `animation: glowPulse 2s ease-in-out infinite;` and define `@keyframes glowPulse` inside the media query. That's valid CSS. The rule about @keyframes says names preserved, but we can create new names? It says "@keyframes names (values inside CAN change)" under "ANIMATION & MEDIA" which is protected? Actually the protected list says "@keyframes names (values inside CAN change)" — meaning the names themselves cannot change if present in original, but values can change. It doesn't forbid adding new keyframes. The instruction "Only change colors, shadows, radius, transitions, gradients" suggests we should only modify those. Adding animation is within the allowed list? Actually allowed changes include "transition timing, easing, duration" and "filter" and "animation" maybe? The list of "MUST CHANGE" includes "transition timing, easing, duration" but not animation. "filter, backdrop-filter" is allowed. "opacity" allowed. So adding animation might be beyond scope. Safer to not add animation. The variant says "Subtle pulsing animations" but we can implement with transition on hover? But no hover. Could add `animation` but we must ensure it's allowed. Since the instruction says "only colors, shadows, and decorative properties may change" in the intro. "decorative properties" may include animation. But we have a specific list. I'd lean to adding just a subtle transition and box-shadow glow, no animation to be safe.

But the variant explicitly says "Subtle pulsing animations" — we might need to include it. We can add a `transition` to box-shadow, and on hover? No hover selectors allowed. Could do a continuous `animation` with `@keyframes pulseGlow`. The original CSS has no @keyframes, so we can add. But the "protected" list includes "@keyframes names" — this means if the input has @keyframes, we must keep the names. Since there are none, we can add new ones. It's allowed. We'll add a simple pulse.

Let's craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 247, 230, 0.9));
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 24px rgba(255, 177, 66, 0.35);
        backdrop-filter: blur(6px);
        transition: box-shadow 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb142, #ff7e5f);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 126, 95, 0.5);
        transition: box-shadow 0.3s ease;
        animation: badgePulse 2s ease-in-out infinite;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fff8f0;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 24px rgba(255, 177, 66, 0.2);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }

    @keyframes badgePulse {
        0%, 100% { box-shadow: 0 0 24px rgba(255, 126, 95, 0.5); }
        50% { box-shadow: 0 0 32px rgba(255, 126, 95, 0.7); }
    }
}
```

But wait, adding `background` to .col-lg-7 might affect text visibility? It's okay. But text-align is still center. We didn't change size. The `backdrop-filter` may not be supported but okay.

We need to ensure the padding for contact cards remains within ±20%. Original padding var(--space-md), we keep same. Good.

Could we add border to these elements? Border-color and border-style are allowed to change, but we didn't add border-width. Adding a border would require border-width property, which is protected? The protected list says "border-color and border-style (NOT border-width)" — we can change border-color/style but not add border-width if original didn't have. Actually the rule says NEVER CHANGE border-width. It doesn't say we can't add border-width if absent? Better not add.

Also "outline styles (color, type)" allowed, but no outline.

Let's verify all protected properties: display, position, grid, flex, width, height, margin, padding, gap, justify/align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit/position, text-align, vertical-align, font*, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break. We didn't change those. We added background, border-radius, box-shadow, backdrop-filter, transition, animation, keyframes. These are allowed.

One issue: The original media query is at max-width 575.98px. We must preserve the @media condition exactly. Yes.

Another issue: We need to ensure no AI marker comments. None.

Also, is the `@keyframes` allowed inside the media query? Yes, it can be nested. But maybe better to put it outside? It would still work. However, the original file only has this media query; we can add @keyframes at top level to avoid nested animation issues. But the original CSS starts with `@media`, so if we add @keyframes outside before it, the first character is not a media query. The instruction says "First character = first CSS character", no requirement to match original start. We can add @keyframes at top level. But to keep output clean and preserve ordering? We can place @keyframes after the media query or before. Since the original file is only this media query, adding @keyframes at the end is fine. But "File: assets/css/saishi.css#块2/2" doesn't matter.

Let's think about the "horizontal-strips" target: Maybe the contact cards should have alternating background colors for the articles. But we have two selectors: one article and one card. We can make one cream, one dark? But they share the same rule, so we can't differentiate without additional selectors. But we can use `:nth-child`? That would be a new selector, not allowed. So keep same.

We could use CSS variables to create alternating backgrounds? Not possible.

Maybe instead of adding background to `.contact-channels-section article, .contact-quick-section .contact-card`, we can set a background color that contrasts with the page. That's fine.

Let's also ensure the badge's new background overrides Bootstrap's `.bg-warning` background-color, but the original selector `.badge.bg-warning` has specific background color. Adding `background: linear-gradient(...)` is okay, but note that `background` shorthand resets background-image and color. It might lose some Bootstrap properties, but it's fine. We could use `background-image` instead to preserve original background-color, but visual refresh can change background color. The protected list says "background" is not protected; we can change colors. So okay.

We should also adjust `text-shadow` for the badge? Not needed.

Potential issue: Adding `box-shadow` to the col-lg-7 might cause overflow within the container on mobile? box-shadow doesn't affect layout, so okay.

Let's produce final CSS.

But let's double-check: The original CSS has a declaration block for `.app-hero-section .row .col-lg-7` with only text-align. We add properties. We need to preserve the exact selector, and "text-align: center;" remains. Good.

Need to preserve `font-size: 0.85rem;` exactly. Good.

Need to preserve `padding: var(--space-md) !important;` with !important. We keep that.

Let's ensure the output has no markdown fences, no comments, no explanations. Just CSS.

Let's also think about whether adding `backdrop-filter` could be considered layout? No.

Let's refine colors to fit "white / cream / dark / white pattern". We can use:

- col: white-ish with cream gradient.
- badge: strong accent (orange/red) with glow.
- contact: cream background with dark text? We don't know text color, but can set background to a light cream. The dark zone maybe missing. To incorporate dark, we could add a dark background to contact cards? But then text might be dark on dark. Not good. Maybe we can set the contact cards to a dark gradient with light text? But we don't control text color because font-size/color are typography? Color is not protected? Actually color values can change, so we could set `color: white` on the cards. But that would be a visual change? The protected list doesn't include color (it's in must change). So we can set color. But if the original text is dark, changing to white could be a visual identity change, allowed. However, we must not change font-size, but color is allowed. So we could make the contact cards dark with cream text. That would give alternating dark strip. But the original CSS doesn't set a color. Adding a dark background and light color might be too aggressive and affect readability if the card contains mixed content. But it's a visual refresh. Let's consider.

The target style says "Alternating: white / cream / dark / white pattern" and "Strong color zones". Within a mobile media query, we can apply:

- col-lg-7: light/cream background (white/cream strip)
- badge: strong accent (strong color zone)
- contact cards: dark background with light text? That would be a dark strip.

Let's do that. But we must be careful: `.contact-channels-section article` may contain headings, paragraphs, links. If we set color: #fff, then all text becomes white, which might be okay if background is dark. But it could be an article with images or other content; still, visual identity. The instruction says we can change colors. So we can.

Let's define:

For contact cards:
```css
background: linear-gradient(145deg, #1a1a2e, #16213e);
color: #f8f9fa;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 24px rgba(255,177,66,0.15);
```

But wait, these cards already have padding var(--space-md) with !important