/* ============================================================
   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 refresh the given CSS while preserving selectors and layout. The original CSS is a small media query block. We need to apply editorial-magazine style with glow effects. However, the original CSS only includes a media query with three rules: text-align, font-size, padding. There are no colors, shadows, radius, transitions, gradients directly. But the mission says to change visual identity only, but if no visual properties exist, we may need to add new visual properties? Wait, the instructions say "Only change colors, shadows, radius, transitions, gradients." But the original has none of those. We are allowed to add decorative properties? The mission says "Refresh the visual identity WITHOUT changing layout structure or class names." The original CSS is a media query for small screens. It sets text-align center, font-size, and padding. We cannot change those values (font-size, padding) because they are typography/layout. But we can add visual properties to those selectors, like color, background, box-shadow, border-radius, transition? However, adding properties to these selectors might alter layout? Not really. But the instruction says "keep ALL selectors and layout exactly as-is." 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 can add new visual declarations to these selectors, but we must be careful: adding box-shadow or background to a column could affect layout? No, box-shadow doesn't affect layout. But if we add padding? We can't change padding beyond ±20%; original padding is var(--space-md) !important, we don't know value. We can keep as is. We can add color, background, border-radius, box-shadow, transition, etc. But does that fit the target style? We need to make it editorial-magazine with glow effects. The media query is for small screens, so maybe we want to add subtle glow to cards, etc.

But the original CSS is very minimal. We are expected to output a rewritten CSS that preserves all selectors and layout exactly. Since there are no colors/shadows to change, perhaps we should add new visual properties to these selectors to align with the target style. However, the instructions say "ALL color values, box-shadow, etc." from original must be replaced. There are none. So we can insert new ones. But we must not change the existing declarations. The existing declarations are:
- text-align: center (this is layout/typography? text-align is listed under never change: text-align, vertical-align. So we keep it.)
- font-size: 0.85rem (typography, keep)
- padding: var(--space-md) !important (padding, keep within ±20%? Actually the rule says keep similar values, ±20% maximum. Since we don't know the value of --space-md, but we can keep it as is. It says "padding, margin (keep similar values, ±20% maximum)" - so changing is allowed but not required. We'll keep.)

We must output CSS with the same selectors. We can add new declarations inside each rule. But is that allowed? The mission says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding visual properties is okay. But we must preserve all existing declarations? The instructions say "You MUST CHANGE (visual identity only): ..." It doesn't say we must add. It says "Only change colors, shadows, radius, transitions, gradients." If there are no existing colors, we can add new colors. But the output should be a rewritten CSS, not necessarily identical in property count. I think we should add some visual flair.

But wait, the file fingerprint and the context "assets/css/saishi.css#块2/2" suggests this is a chunk of a larger CSS file. The user provided only this media query block. We need to rewrite this block. The target style is editorial-magazine with glow effects. We need to apply to these elements within the media query.

Let's think about what these elements are:
- .app-hero-section .row .col-lg-7: This is a column inside a hero section on small screens, text-align center. We could add a subtle text glow? Maybe color? But changing color of text might be okay. We can set color to the ink black (#1a1a1a) maybe. But the original likely inherited color. We can add color: #1a1a1a to ensure editorial look. Or maybe we add a text-shadow for glow? But text-shadow might affect readability. Could add a subtle glow to the badge.

- .app-hero-section .badge.bg-warning: A badge with Bootstrap bg-warning. We can override background with a deep red or olive accent, add box-shadow glow, border-radius, transition. But we must not change the class name; we can add CSS to override. The bg-warning class is a Bootstrap utility; our rule can override its background. That's fine. The font-size is already 0.85rem. We can add background: #c44536 (deep red), color: #f5f1e8 (cream), box-shadow: 0 0 24px rgba(196,69,54,0.4), border-radius: 8px, padding? The padding is not set here; the badge has its own padding. We shouldn't add padding? We can, but it might affect layout. The rule says padding changes allowed ±20% only if existing. There's no padding here. Adding padding would change layout, so not allowed? Actually the "NEVER CHANGE" section says padding, margin (keep similar values, ±20% maximum). This implies if we add new padding, it changes layout from default, not allowed. So we shouldn't add padding. We can add color, background, box-shadow, border-radius, transition, text-shadow.

- .contact-channels-section article and .contact-quick-section .contact-card: These are cards. We can add background, border-radius, box-shadow, transition, maybe a subtle hover glow. Since the media query is for small screens, we might adjust padding? Already padding is set to var(--space-md) !important. We can keep. We can add background: #fff or cream, border-radius: 12px, box-shadow: 0 4px 20px rgba(0,0,0,0.05), border? Maybe border: 1px solid #e8e0d0. But adding border changes layout? Border affects box size unless box-sizing border-box; but we don't know. Better not add border. Add box-shadow only. Also add transition for hover states? There is no :hover selector in original, but we can't add pseudo-classes? The rule says "Selectors: keep exactly" and "Pseudo-classes (:hover, :focus, ::before, ::after)" under never change. Does that mean we cannot add new pseudo-class selectors? It says keep exact, so adding new selectors is not allowed. We can only modify existing rules. So we cannot add a separate :hover rule. But we can add transition property so that if there is a hover rule elsewhere, it transitions. But we can't define the hover effect here. We can include transitions on existing selectors.

- We can also add a subtle pulsing animation to the badge? The effect variant says "Subtle pulsing animations." We can add an animation property to the badge, but the @keyframes must be defined somewhere. Can we add @keyframes? The original CSS doesn't include any. The "Animation & Media" section says @keyframes names (values inside CAN change). But if there is no existing @keyframes, adding new one would be a new selector? Actually @keyframes is not a selector in the same sense, but output CSS can include @keyframes. However, the instruction says "Preserving ALL selectors" and "Only change colors, shadows, radius, transitions, gradients." Adding @keyframes is not a color/shadow/radius/transition/gradient change. But it is a decorative animation. The effect variant explicitly calls for "Subtle pulsing animations." But if we add @keyframes, we are adding new code. Is that allowed? The task says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding a keyframe animation doesn't change layout structure. But the output guidelines say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." It doesn't say we can't add new @keyframes. However, the "NEVER CHANGE" list includes "@keyframes names (values inside CAN change)" meaning if they exist, we can change values. But adding new @keyframes might be considered new CSS not in original. The user expects a rewritten version of the given CSS. I think it's safer to not add new @keyframes unless necessary. Instead, we can use existing transitions for glow on hover? But no hover selector.

Let's read the user request carefully: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original CSS has none of those. So we need to change the visual properties that are there? But there are none. Maybe the original CSS is a subset and we are expected to simply output the same CSS because there's nothing to change? That seems pointless. More likely, we are allowed to add properties to achieve the target style, as long as we don't change layout (padding, margin, etc.). The instruction "Only change colors, shadows, radius, transitions, gradients" implies the modifications should be limited to those properties. So we can add colors, backgrounds, shadows, border-radius, transitions, and gradients. We cannot add animation, because animation is not listed. But the effect variant mentions "Subtle pulsing animations" - but that's part of the target style. The user says "✨ EFFECT VARIANT: glow-effects" including "Subtle pulsing animations." So we should incorporate that. But animation is not in the allowed change list? The list says "transition timing, easing, duration" can change, but animation is in "NEVER CHANGE: animation-name (values like duration/timing CAN change)". That means existing animation names must stay. But we can add new animation? It doesn't explicitly forbid. However, the allowed changes list doesn't include animation. So perhaps we should avoid adding animation. Maybe we can simulate pulsing via transition on hover? But no hover.

Another approach: Since the original CSS is just a media query, perhaps the "visual refresh" is to be applied to the entire block by adding new rules with the same selectors but with visual properties. But we need to keep the existing declarations. We can add new declarations to each rule. For example:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 0 24px rgba(196,69,54,0.2);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536, #a43324);
        color: #f5f1e8;
        box-shadow: 0 0 24px rgba(196,69,54,0.4), 0 4px 12px rgba(0,0,0,0.1);
        border-radius: 8px;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(245,241,232,0.8);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196,69,54,0.15), 0 4px 16px rgba(0,0,0,0.05);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But is adding color to .col-lg-7 okay? text-align center is preserved. The text-shadow might be too much. Editorial style maybe no text-shadow. But glow effects call for glow shadows. We can apply a subtle glow.

However, we must be careful: The .col-lg-7 is a Bootstrap column. Adding color might affect inherited color. That's okay. But if the original site uses dark text on light background, adding color #1a1a1a is fine. But we don't know the context. The target palette says ink black #1a1a1a.

The .contact-channels-section article / .contact-quick-section .contact-card: These are likely card components. Adding background to them may change appearance but not layout. Border-radius is visual. Box-shadow no layout.

But wait, the original has `padding: var(--space-md) !important;` on those cards. That's a layout property. We must keep it. We can add background, border-radius, box-shadow, transition.

What about the selectors themselves? The rule `.contact-channels-section article, .contact-quick-section .contact-card` is a selector list. We must preserve exactly the comma and spaces. Yes.

Now, should we change the font-size? No, that's typography, keep. Should we change padding value? No, keep var(--space-md) !important. Text-align? Keep center.

The request ID and fingerprint indicate this is a specific file chunk. The original CSS is very small. Maybe the expected output is simply the same with added visual properties. But we should not invent selectors. Let's craft a response that satisfies the "editorial-magazine" and "glow-effects" variant.

Let's decide on a fresh palette:
- Background cream: #f5f1e8
- Ink: #1a1a1a
- Accent deep red: #c44536
- Secondary olive: #6b705c maybe for some elements.

For the hero column, we can add `color: #1a1a1a;` and a subtle text-shadow? Editorial style often has no text-shadow. But the glow variant wants glow shadows. Maybe a faint accent text-shadow on the hero heading? But this selectors targets the col-lg-7, which is a container, not a heading. Text-shadow would apply to all text inside. Could be too much. We could instead add a background? No, changing column background could affect layout? No, but it would create a block with background, maybe not desirable. Better to keep it simple: just color.

For the badge, we'll override the warning background with deep red gradient and glow.

For the contact cards, we'll give them an editorial card look: off-white background, subtle border? Border might affect layout. Use box-shadow instead to create a card boundary. We can also use `backdrop-filter`? But that might not be supported; it's allowed. But for small screens, maybe no. We'll use background, border-radius, box-shadow, transition.

Also, we can add a subtle pulsing animation to the badge via `animation` property. But the allowed changes list doesn't mention animation. However, the "NEVER CHANGE" list says "animation-name (values like duration/timing CAN change)". It doesn't say we cannot add new animation. But to be safe, we could avoid animation. The "glow-effects" variant says "Subtle pulsing animations" but maybe just the glow effect is enough. We can use `transition` on box-shadow to give a smooth pulse on hover? But no hover.

Alternatively, we can define a `@keyframes glowPulse` and apply to the badge with animation. But is adding @keyframes considered changing selectors? It's not a CSS selector, it's an at-rule. The instruction says "No markdown fences, no explanations" and "Only the rewritten CSS, preserving ALL selectors and layout exactly." Adding @keyframes might be acceptable if it's part of the visual refresh. But the "Animation & Media" section says "@keyframes names (values inside CAN change)" which implies there were existing @keyframes. If there are none, adding them could be considered outside the scope. I think we should not add @keyframes to avoid violating "Only change colors, shadows, radius, transitions, gradients." But transitions are allowed, so we can add transition to the badge for a hover effect. But the hover effect itself is not defined here. Yet if there is an existing hover rule elsewhere (e.g., .badge:hover) that changes box-shadow, our transition will animate it. That's fine.

Let's think about the final output. We need to rewrite the CSS. The original has three rules. We'll keep them in the same order, same media query, same selectors, same existing declarations. We'll add new visual declarations.

Let's construct:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 0 24px rgba(196, 69, 54, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536 0%, #a43324 100%);
        color: #f5f1e8;
        border-radius: 8px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(245, 241, 232, 0.9);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.12), 0 4px 20px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But wait: The `.badge.bg-warning` has `background` from bg-warning utility. We override it. That's fine. But we also set `color` to cream.