/* ============================================================
   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 transform the CSS. The original is a small media query block. We need to refresh visual identity: colors, shadows, border-radius, transitions, etc. But the original CSS only has layout-ish properties (text-align, font-size, padding). However, we are allowed to change colors, shadows, radius, transitions, gradients, but not layout. The original doesn't contain colors, shadows, etc. We need to add visual properties? The instructions say "Only change colors, shadows, radius, transitions, gradients." But we must preserve selectors and layout. Since there are no visual properties to change, we could add new visual properties that don't affect layout? But we must keep layout unchanged. We can add background, border-radius, box-shadow, transition, etc. But careful: adding padding? No, padding is layout, and we are not allowed to change padding beyond ±20%. Original padding is var(--space-md) !important, which we should preserve. We can add visual props.

The target style: horizontal-strips with alternating background colors per strip. But this is a media query with specific selectors. We can apply background colors to the sections/articles. We need to ensure layout structure unchanged. The selectors are:

- .app-hero-section .row .col-lg-7
- .app-hero-section .badge.bg-warning
- .contact-channels-section article,
- .contact-quick-section .contact-card

We need to add visual identity. Since the original is small, we can produce a rewritten CSS that includes only those selectors, with additional visual properties. But we must not change display, position, grid, widths, etc. Adding background, border-radius, box-shadow, transition is fine.

But note: The target style says "Full-width sections (width: 100%)" and "Each strip with distinct padding (60-100px vertical)" - that would be layout changes. However, we're in conservative mode, so we cannot change padding/margin beyond ±20%. Original padding for contact cards is var(--space-md) !important. We can't change that. Also width 100% would be layout change if not already. So we should not add width: 100% because it might alter layout. The instruction says "Layout pattern (Aggressive only)" — so we should not apply aggressive layout changes. We only take the color palette and effect variant.

Color palette: alternating white / cream / dark / white pattern. We can set background colors on the sections? But the sections aren't necessarily full-width strips? We can add background to the elements targeted. However, adding background to .contact-card might be okay. But we need to be careful: The original CSS is inside a media query for small screens. We can add visual properties within that media query.

Let's design:

- .app-hero-section .row .col-lg-7: maybe text-align center (already), add color? Actually the hero section text color might be inherited. We can set a subtle text-shadow? But we should not change font-size, etc. We can add color: #2d2a26? But that might affect readability if background is dark. We need to know the base theme. Since we don't know full context, we can add neutral colors. But we must "refresh visual identity" — perhaps add background to the hero column? That might break layout? Adding background doesn't break layout. But the target horizontal-strips suggests alternating backgrounds for sections. We can apply background to .contact-channels-section article (cream) and .contact-quick-section .contact-card (dark or white) to create alternating pattern. But these are separate sections, so maybe article gets cream background, contact-card gets dark background? But contact-card could be a card with dark background; text color would need to be light, but we can't change font color? Actually we can change color. But we don't know original text color. We can set color to a light color for dark background, but that could hurt if original text is dark. Better to use white/cream backgrounds with subtle shadows, and keep text dark. The dark strip could be on the hero badge? The badge is bg-warning, we can change to a dark background? But the class bg-warning is from Bootstrap; we can override background-color. If we set dark, the text might be dark? Bootstrap warning text is dark. We could set a dark background with light text? But the badge has a default color? We can set color: #fff. That might be okay.

But we need to be conservative: we must not change layout, but colors are allowed. Let's create a fresh visual identity with soft shadows and rounded corners.

We need to preserve all selectors exactly. We can add properties to each rule. We should not add new selectors or change selectors.

Let's think of a coherent palette. "horizontal-strips": alternating white / cream / dark / white. We can apply:

- .app-hero-section .row .col-lg-7: no background, maybe a subtle text-shadow? But maybe not.
- .app-hero-section .badge.bg-warning: change to a rich accent color, with box-shadow and border-radius.
- .contact-channels-section article: cream background (#faf7f2), border-radius, soft shadow.
- .contact-quick-section .contact-card: white background (#fff), border-radius, soft shadow. Or alternate: maybe article cream, card white.

But original padding is var(--space-md) !important, so adding border-radius and shadow is fine. We must not change padding. But we can add background-clip? Not needed.

Also we need to ensure that the media query remains. We'll output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a26;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #e8a13a, #d97c2b);
        color: #1f1c18;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #faf7f2;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
}

But wait, the combined rule applies the same background to both article and contact-card. For alternating pattern, we might want different backgrounds. We cannot split the combined selector? We can keep the selector list as-is? The rule .contact-channels-section article, .contact-quick-section .contact-card is a single rule. If we want different backgrounds, we need to add separate rules with the same selector? That would be extra selectors? Actually we can add a second rule for .contact-quick-section .contact-card specifically. But the original CSS only has that combined rule. We are allowed to add new rules? The instruction says "Keep ALL selectors and layout exactly as-is" and "Only change colors, shadows, radius, transitions, gradients." It doesn't forbid adding new selectors? It says "Selectors: preserve exactly." The safest is to only use existing selectors. But we could add an additional rule for .contact-quick-section .contact-card to override background. That would be a new selector, but it's a subset of an existing selector, so it's arguably preserving the original selectors while adding new ones? The instruction says "Every selector character-for-character preserved?" We should not add new selectors? The output should be rewritten CSS with same selectors. Better to avoid new selectors. But we can still create alternating pattern by using the combined selector to set a default, and then use the existing `.app-hero-section .badge.bg-warning` for dark? That gives three zones: hero text (maybe default), badge (dark/amber), article/card (cream). But pattern says alternating white/cream/dark/white. We only have two elements. Could set article as cream, card as white by adding a new selector. Is that allowed? The prompt: "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly forbid adding rules. But self-check says "Every selector character-for-character preserved?" If we add a selector, then existing selectors are preserved, but there are extra selectors. That's probably fine as long as we don't alter existing ones. However, the system says "The HTML is FIXED — only colors, shadows, and decorative properties may change." Adding a selector is okay if it targets existing elements? But it's not a property change; it's a new rule. But the request says "Rewrite this CSS visually" and "Output the rewritten CSS". We can add new rules to achieve the target style, as long as layout/class names don't change. But to be safe, maybe we keep it minimal and just use the combined selector with one background. Yet target style "horizontal-strips" likely wants alternating backgrounds. Let's examine the original CSS: it's a media query for small screens. It targets:

1. .app-hero-section .row .col-lg-7 — hero content column
2. .app-hero-section .badge.bg-warning — badge in hero
3. .contact-channels-section article and .contact-quick-section .contact-card — contact sections.

We can assign:

- Hero column: white (or transparent with white background? Actually hero section often has a background already. We shouldn't override background because we don't know. Maybe set a subtle text-shadow? But that's decorative.)

- Badge: dark strip? Set background: #1f1c18; color: #faf7f2; border-radius: 999px; box-shadow: soft. That would be a dark zone.

- Contact article: cream background with soft shadow.
- Contact card: white background with soft shadow.

But the combined rule would set both to cream. Then we need another rule for contact card white. We can add a new rule with the original selector .contact-quick-section .contact-card to override. That selector already appears in the combined list, but as an individual rule it's a subset. Is that considered preserving? Yes, the original selector still appears. I think it's acceptable. But the instruction "Selector lists (commas)" are preserved? We're preserving the combined list and adding a separate selector. That's fine.

But we must be careful not to change padding. So we'll keep padding: var(--space-md) !important in the combined rule. For the extra contact-card rule, we might not need padding, just background and radius.

Alternatively, we can keep the combined rule with common props (padding, border-radius, box-shadow) and then add individual background rules:

.contact-channels-section article {
    background: #faf7f2;
}

.contact-quick-section .contact-card {
    background: #ffffff;
    box-shadow: ... maybe stronger
}

But adding new selectors increases complexity. However, the output should be visually refreshed. Let's do it.

Also, we need to consider transitions. The original has no transitions. We can add transition to badge and cards for hover? But no :hover selectors exist in the media query. We could add transitions that will apply on hover from global CSS (if there are hover rules elsewhere). Adding transition property is safe.

Also border-radius: We can add large radius 18-24px for cards. But the "large border-radius (12-24px)" variant. We'll set 18px for articles, 24px for cards maybe.

We must not change font-size, line-height, etc. The original has font-size: 0.85rem for badge, keep it. It also has text-align center for hero column, keep it.

Now let's craft a fresh palette. "horizontal-strips" with alternating white/cream/dark/white.

Colors:
- White: #ffffff
- Cream: #faf7f2 (warm off-white) or #f8f4ed
- Dark: #1f1c18 (espresso dark)
- Accent: #d97c2b (burnt orange) for badge.

Shadows:
- Soft multi-layer: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)

Border-radius:
- Badge: 999px (pill)
- Article/card: 18px or 24px.

Transitions:
- 0.3s ease.

We should also consider the hero column: maybe add a subtle text-shadow for depth? "text-shadow" allowed. We can add a soft text-shadow: 0 1px 2px rgba(0,0,0,0.06). But if text color is dark on light, text-shadow light not needed. Could add color: #2d2a26 to hero text. But that changes color, allowed. However, maybe the hero text color is already defined; overriding could be okay. We'll set a refined dark color.

But wait: The media query is for max-width 575.98px. On mobile, the hero column might be stacked. Adding text-align center. We can add color and text-shadow. That's fine.

Also, for the badge: We can set background to dark (or gradient). The target "strong color zones" suggests using dark. But if the badge is warning, changing to dark might be confusing semantically. But we are refreshing visual identity; it's okay. We can use a warm gradient that is not yellow but still accent. Let's pick a rich amber/copper gradient: linear-gradient(135deg, #d97c2b, #b85c1e). That's strong. Or dark: linear-gradient(135deg, #2d2a26, #1f1c18) with text: #faf7f2. Actually "strong color zones" could be dark. Let's make the badge dark for contrast: background: #1f1c18; color: #faf7f2. But then it's not a warning badge. But that's fine.

We can also add box-shadow to the badge: soft shadow.

Now, let's write the CSS preserving original properties and adding new ones. We need to output only CSS, no markdown.

Let's structure:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a26;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #d97c2b, #b85c1e);
        color: #fff8f0;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article {
        background: #faf7f2;
    }

    .contact-quick-section .contact-card {
        background: #ffffff;
        border-radius: 24px;
    }
}

But wait: This adds new selectors .contact-channels-section article and .contact-quick-section .contact-card separately. The original combined selector remains. Is that okay? I think yes. But we need to ensure the combined rule's padding is not overridden by the later rules? It doesn't include padding, so fine. But the later rules add background and border-radius. The combined rule already set border-radius: 18px; then .contact-quick-section .contact-card overrides border-radius to 24px. That's okay.

However, the combined rule sets transition: background-color 0.3s ease, transform... It applies to both. But if we later set background, transition still applies.

But do we risk changing layout because we added border-radius? No, border-radius doesn't affect layout. Box-shadow doesn't affect layout. Background doesn't affect layout. Color doesn't affect layout. Text-shadow doesn't affect layout. Transition doesn't affect layout. So it's safe.

But we must check: The original CSS had no visual properties, so we are adding them. That's within "only colors, shadows, radius, transitions, gradients" — yes.

But the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." Adding new rules could be seen as not keeping exactly? It says "selectors" not "rules". We keep the existing selectors exactly as-is in the combined rule. The new rules use existing classes, so no new HTML. I'd argue it's fine.

Alternatively, to avoid adding new selectors, we could set both article and card to same background, but then alternating pattern suffers. I think adding new rules is acceptable. The target style specifically wants alternating backgrounds per strip, so we need to differentiate. Let's proceed.

Now, let's consider the "horizontal-strips" pattern: Full-width sections with alternating backgrounds. We could also add background to the hero column? But the hero section might already have a background. Setting background to white might override a gradient. We don't know. But the