/* ============================================================
   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;
    }
}

The user wants me to refresh a CSS snippet, but it's only a media query with a few rules. The original CSS is:

```css
@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;
    }
}
```

Now, I need to refresh this visually while preserving all selectors and layout. The constraints say I can only change colors, shadows, radius, transitions, gradients, opacity, outline, caret-color, accent-color, CSS custom properties values.

However, the original CSS contains:
- `text-align: center` — this is a layout/typography property (text-align is in the never-change list)
- `font-size: 0.85rem` — typography, never change
- `padding: var(--space-md) !important` — padding, can change within ±20%

But I can change the CSS custom properties `--space-md` value? Actually the rule says "CSS custom properties (--color-*, --shadow-*) values" — only color and shadow custom properties. So I shouldn't change `--space-md` since it's a spacing variable.

Hmm, but the task is to "refresh the visual identity" — with such a small snippet, I need to add visual properties that don't exist yet? The instructions say the HTML is fixed, layouts unchanged. I can add new properties like box-shadow, border-radius, etc. to existing selectors without breaking the layout.

Wait, but the request says: "Output the rewritten CSS now (no markdown, no preamble)". The target style is masonry-flow with glow effects. The original CSS is a media query. I should preserve the media query conditions and selectors, and add visual flair.

I should be careful: `text-align: center` is a never-change property, so keep it. `font-size: 0.85rem` is typography, keep it. `padding: var(--space-md) !important` — I can adjust the padding value slightly (within ±20%). But `--space-md` is a custom property; if it's defined elsewhere, changing its value in this media query would be risky but allowed if it's a spacing variable? Actually the constraint says only `--color-*`, `--shadow-*` values. `--space-md` is neither, so I shouldn't redefine it.

However, I could add `!important` overrides with a padding value that's within 20% of the current value. But I don't know the value of `--space-md`. It's typically 1rem or 1.5rem. Without knowing, I can't safely adjust. I'll keep the padding as `var(--space-md)` or maybe add a fallback.

Actually, the safest approach: preserve all existing declarations exactly, and add new visual declarations (box-shadow, border-radius, transitions, etc.) to the selectors. That gives a visual refresh without touching layout.

But wait — the instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Adding new declarations is a change. I think adding is acceptable since the goal is a visual refresh and the existing declarations are mostly non-visual (text-align, font-size, padding).

Let me think about what to add:

1. `.app-hero-section .row .col-lg-7` — I could add a text-shadow? Center-aligned hero text. Maybe add a subtle text-shadow for the hero. But this could affect readability. The target style is "masonry-flow" with "glow-effects". Hmm, this media query is for mobile (max-width 575.98px). The hero section centered text — I can add a subtle glow text-shadow.

2. `.app-hero-section .badge.bg-warning` — badge. I can add box-shadow glow, border-radius, maybe a transition. The badge is bg-warning (Bootstrap warning color). I can add `box-shadow: 0 0 24px rgba(255, 193, 7, 0.4)` to give it a glow. Also border-radius. Keep font-size.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. I can add box-shadow, border-radius, transition, maybe a background gradient. But careful: if I add a background, it might override existing backgrounds. Actually I can add `background` but that's a color change — allowed. But I don't know the original background. Adding a background could be safe if it's a card on a light gray bg. The target palette is "white cards, soft shadows on light gray bg". I could set `background: #ffffff` — but this is inside a media query for mobile, and it would force white on all cards. That might be okay. But I don't know if the article already has a background. Adding a white background with a shadow is a safe, common card treatment.

Wait, but padding is `var(--space-md) !important` — with `!important`, so if I add box-shadow etc., that's fine.

I need to be conservative. Let me only add:
- `box-shadow` with glow effects
- `border-radius`
- `transition`
- maybe `background` for cards
- `text-shadow` for hero
- `backdrop-filter`? Not necessary.

I also need to consider the "no AI-REWRITTEN comments" and output only CSS.

Let me also double-check: The `transition` property — allowed to change timing/easing/duration. Adding transitions is fine.

Let me write the new CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.45);
        border-radius: 12px;
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }
}
```

Wait — `transform` is a layout property? The list says "float, clear" etc. Transform isn't in the never-change list. Actually, the never-change list includes display, position, grid, flex, width, height, padding, margin, gap, justify, align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, text-align, vertical-align. Transform is not listed, so I can change/add it. But adding `transform` in a hover state would need a hover selector, which I can't add because selectors must be preserved exactly. So I shouldn't add a new `:hover` rule. I can add a transition on transform but without a hover rule to change it, it's pointless. I'll just transition box-shadow.

Actually, I could add a `:hover` pseudo-class? No — "Pseudo-classes (:hover, :focus, ::before, ::after)" — "keep exactly" meaning I can't add new ones? The instruction says selectors must be preserved exactly. Adding a new selector like `.badge:hover` would be adding a selector not in the original. That's risky. The self-check says "Every selector character-for-character preserved?" — so I should not add new selectors. Only add declarations to existing selectors.

So I'll add declarations only.

Let me reconsider the `background: #ffffff` — the target palette is white cards on light gray. But this is mobile-only and cards might already have backgrounds. To be safe and visually effective, I could use a semi-transparent white with backdrop blur? But `backdrop-filter` might have varying support. I'll use a soft white with a subtle border.

Actually, adding `background` could break a card that has an image or gradient background. But since this is a generic article element, setting a white background is fine in the context of Pinterest-like cards. However, the conversation is about a masonry/glow effect — the cards should be white with soft shadows.

But wait: I must not change the layout. Setting `background` doesn't change layout. OK.

Also, I should keep `padding: var(--space-md) !important` — yes, keeping it.

For the badge, keep `font-size: 0.85rem`, add glow. Also, `border-radius: 12px` — is that medium radius? Yes, 8-16px range. Good.

For the hero text, add a text-shadow. The original text-align center remains.

One concern: The instructions say "border-color and border-style (NOT border-width)" — I can add a border-style/color but not width. Better not to add borders to avoid layout shift. Box-shadow with inset is safer.

Let me think about the "masonry-flow" target: it mentions grid/flex patterns, but those are layout — I can't change them. The "Aggressive only" label seems to be for a different mode. The request ID says "conservative mode". So minimal visual changes.

Let me refine the shadow design:

Badge glow:
```css
box-shadow: 0 0 24px rgba(255, 193, 7, 0.4), 0 2px 8px rgba(0, 0, 0, 0.06);
border-radius: 999px;
```
Actually Bootstrap badges are already pill-shaped (border-radius: 50rem). But if I change border-radius to 12px, it makes it less pill-like. The target is medium radius 8-16px. But .badge.bg-warning in Bootstrap already has border-radius. Hmm, original CSS likely relies on Bootstrap's default pill. Changing to 12px would square it off — a visual change allowed. But maybe better to keep it subtle. The instruction says border-radius can change. I'll set it to 12px for the new identity.

For contact cards:
```css
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02), 0 0 24px rgba(99, 102, 241, 0.08);
transition: box-shadow 0.3s ease;
```

But the accent color for glow — target says "accent color". I'll use a soft indigo/violet accent (Pinterest-like uses red/pink). Pinterest brand is red (#E60023). Glow effects with red accent: `rgba(230, 0, 35, 0.4)`. That fits Pinterest-like. Let me use a red/pink accent for the glow. White cards on light gray bg — but I can't change the body background. I can add a card shadow.

Actually, the original CSS doesn't set background colors anywhere. The body background is probably defined elsewhere. I can't change it. So the "light gray bg" must come from elsewhere. My job: make the cards pop with white background and soft shadows. Setting the card background to white is a color change allowed.

Let me also add a subtle gradient to the hero? Hmm, `.col-lg-7` is a flex column. Adding a background gradient might make it look like a banner. But it could conflict. Better keep it minimal.

I'll also add `transition` to the badge and cards for hover effects. But without hover rules, transitions on box-shadow won't trigger unless there's an existing hover rule elsewhere that changes shadow. Actually transitions will still apply if any other CSS changes these properties on hover. But there might be no hover rule. Adding a transition is harmless.

Should I add `animation`? The target variant mentions "Subtle pulsing animations". I can add a `@keyframes` — but the rules say "@keyframes names (values inside CAN change)" — that implies keyframes already exist. Adding a new keyframe name would be adding a new selector? Keyframes aren't selectors per se. But adding an animation to an existing selector with a new keyframe could be risky because if the keyframe doesn't exist elsewhere, I need to define it. The instruction says only output the rewritten CSS for this file block. Adding `@keyframes glowPulse` and `animation: glowPulse 3s ease-in-out infinite` on the badge would be a visual enhancement. But is that safe? It changes opacity via animation... The instruction allows opacity changes and animation values. Adding a keyframe might be acceptable but the self-check says "Every selector character-for-character preserved" — keyframes aren't selectors. Hmm.

But a pulsing animation on a badge could be annoying and might not be desired. The target variant is "glow-effects" which includes "Subtle pulsing animations". I'll add a subtle pulse to the badge glow. Let me define a keyframe:

```css
@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 24px rgba(230, 0, 35, 0.45); }
    50% { box-shadow: 0 0 32px rgba(230, 0, 35, 0.65); }
}
```

But wait — the media query is at max-width 575.98px. Adding @keyframes inside a media query is valid. But animations on mobile can be fine.

However, the instruction "🎬 ANIMATION & MEDIA: • @keyframes names (values inside CAN change)" — This suggests I should preserve keyframe names if they exist in the original. The original has no keyframes. Adding a new one might be considered adding a new name. But since there are none, adding a keyframe could be acceptable. To be safe, I'll avoid adding keyframes and instead just use static glow shadows. The variant says "Subtle pulsing animations" but conservative mode with fixed selectors makes adding hover/pulse rules tricky. I could still add `animation` referencing a keyframe I define. Let me weigh the risk.

The instructions at the top: "Refresh the visual identity WITHOUT changing layout structure or class names." Adding keyframes doesn't change layout. It's a decorative change. I think it's fine. But the output must be valid CSS and preserve existing selectors. Adding new @keyframes and animation declarations is within the "visual identity" scope.

I'll add a subtle pulse to the contact cards? No, cards shouldn't pulse. Badge could. Let me do badge glow pulse. But on mobile, a continuously pulsing badge might be distracting. I'll make it very subtle and slow.

Actually, I'll be more conservative and skip animations, since the original snippet has no animations and adding them could alter the perceived behavior. The variant is a guide, not a mandate. Conservative mode: prioritize safety.

Let me make the final CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 16px rgba(255, 255, 255, 0.35), 0 0 32px rgba(230, 0, 35, 0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.45), 0 2px 8px rgba(0, 0, 0, 0.06);
        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: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 0 24px rgba(230, 0, 35, 0.06);
        transition: box-shadow 0.35s ease;
    }
}
```

Wait, `transform` transition without a transform change is useless. And adding `transition: transform` doesn't change layout. Fine, but I'll drop transform to keep it clean.

Also, setting `background: #ffffff` on articles might override a background image set elsewhere. But since this is a card, white is the target. However, if the article had a background image, forcing white would hide it. Is that a "layout" change? No. It's a visual change. I'll keep it, but maybe use a semi-transparent white to be safe? `background: rgba(255, 255, 255, 0.9)` could look odd if there's a busy background. Hmm.

Actually, I don't know the original context. The media query only adjusts padding. The card likely already has a background defined in base CSS. Overriding it with white in mobile could change visual identity — which is the goal. I'll use white.

But there's a risk: if the card already has a gradient background that's part of the brand, replacing it with white could be too aggressive. The target palette explicitly says "white cards, soft shadows on light gray bg". So white is correct.

Let me also consider adding `border: none` or `outline`? Not needed.

Also, `-webkit-backdrop-filter`? Not needed.

Let me double-check the constraints on padding: "padding, margin (keep similar values, ±20% maximum)". I am keeping `var(--space-md)` exactly — good. Since I don't