/* ============================================================
   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 rewrite the CSS with an editorial-magazine style, gradient-rich variant. Let me analyze the original CSS:

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

The original is quite minimal. It's a media query block. I need to preserve:
- The @media query condition
- The selectors
- The properties that are layout: text-align (can't change), font-size (can't change), padding (can change within ±20%)

Actually, wait. Let me re-read the rules:

📐 LAYOUT (HTML cannot adapt to changes):
  • text-align, vertical-align — these are in the "never change" list
  • font-size — in typography, never change
  • padding — keep similar values, ±20% maximum

So the property values themselves are mostly locked. What can I change?
- Colors: there are no colors in the original
- Shadows: none
- Border-radius: none
- Transitions: none
- Gradients: none

Since the original CSS only has text-align, font-size, and padding, there's essentially nothing visual to change within the constraints. But the task says to refresh the visual identity.

Hmm. This is tricky. The original CSS is a media query with three rules. The properties are all in the "never change" list. What CAN I do?

Let me look more carefully:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is locked. No colors, no shadows. Nothing to change.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is locked.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is locked (can vary ±20%, but var(--space-md) is a custom property reference; I could change it to something within 20%, like `calc(var(--space-md) * 1.1)`? That seems hacky.)

Actually, wait. Let me re-read the rules. There's also:

🎨 TARGET STYLE: editorial-magazine
✨ EFFECT VARIANT: gradient-rich

The instructions say:
"Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But the original CSS has none of those properties. The only "changeable" thing I can see:

- `transition` — could add transitions? But the rules say "transition timing, easing, duration" CAN change, but adding a transition to a rule that doesn't have one... Hmm. Adding a new property like transition could affect layout? No, transitions don't affect layout. But the selector's rules would now include a transition. The instruction says "Only change colors, shadows, radius, transitions, gradients" — this could mean I can add transitions to elements.

Wait, but the spirit is: keep all selectors, keep all layout-affecting properties and their values, and refresh the visual identity by altering color/shadow/radius/transition/gradient values.

Since the original has no colors, shadows, radius, transitions, or gradients... I could ADD them. The instructions say "All color values: background, color, border-color, fill, stroke, outline-color" — these need to be replaced with fresh palette. If they don't exist, adding them would introduce visual identity.

But that's tricky because I'd be adding properties that weren't there. Is that allowed? The instruction says "You MUST change (visual identity only): All color values..." If there are no color values, there's nothing to change. But the goal is to refresh the visual identity.

I think the reasonable interpretation: Since the original CSS is minimal, I should enhance the visual styling within the constraints — adding color, shadows, gradients, transitions where they don't break layout. However, there's a risk of overstepping.

Let me think about what makes sense for each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — In an editorial-magazine style, centered text is fine. I could add:
   - A gradient text effect? But that would change text color... The original didn't set color. If I set `color` with a gradient (background-clip: text), that changes the visual significantly. But the rule says "color" is something I MUST change/refresh. Adding a text-shadow could also work.
   - Actually, adding `background` with gradient and `background-clip: text; color: transparent;` would make the text a gradient. That's a visual refresh while keeping text-align: center.

2. `.app-hero-section .badge.bg-warning` — font-size locked. I could add:
   - A gradient background (but bg-warning is a Bootstrap class that sets background-color: #ffc107; I could override with a gradient)
   - Border-radius for a pill shape
   - Box-shadow for depth
   - A border with gradient via border-image

3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding locked. I could add:
   - Background gradient
   - Border-radius
   - Box-shadow
   - Border-color (if there's a border; but border-width isn't set, so adding border-width would change layout... actually, border-width would change layout because it adds to the box size. Unless box-sizing: border-box, which is Bootstrap default. In Bootstrap 5, box-sizing: border-box is set globally, so adding a border-width wouldn't change the padding box. But the rules say "border-color and border-style (NOT border-width)" can change. So I can add border-style and border-color but NOT border-width. If border-width is 0 by default, setting border-style: solid with no width would show nothing. So that doesn't work without border-width.)

Hmm. Wait, but the rules say I can change border-color and border-style, not border-width. This implies the original had borders. In this case, the original doesn't. So I shouldn't add borders.

Similarly, box-shadow doesn't affect layout, so I can add that. Background-color and gradient don't affect layout. Border-radius doesn't affect layout. Transition doesn't affect layout. Text-shadow doesn't affect layout.

Let me reconsider the task. The original CSS has three rules inside a media query. The best approach is to add visual enhancements that don't affect layout:

1. For `.app-hero-section .row .col-lg-7`:
   - Add a text-shadow for editorial feel
   - Maybe gradient text? But text-align is center, and editorial style often uses centered text with a drop cap or shadow. I'll add text-shadow.

2. For `.app-hero-section .badge.bg-warning`:
   - Add a gradient background (override the Bootstrap warning color)
   - Add border-radius
   - Add box-shadow
   - Add a transition

3. For the contact cards:
   - Add a gradient background
   - Add border-radius
   - Add box-shadow (multi-layer)
   - Add a transition

But I need to be careful: the original CSS is inside `@media (max-width: 575.98px)`. These are mobile styles. Adding heavy shadows might be odd on mobile, but it's a visual identity refresh.

Also, the padding rule uses `var(--space-md) !important`. I could change it to `var(--space-md)`? No, that's the same. The ±20% rule: `var(--space-md)` is a variable, I can't change its value here. I could change the padding to `calc(var(--space-md) * 1.15)` which is within 20%? That seems too clever and might break things. Actually, the rule says "keep similar values, ±20% maximum" — so I could change it. But `var(--space-md)` is a reference; changing it to a calc or a fixed value would be within the spirit. However, `!important` must be preserved? The rules don't mention !important, but it's part of the declaration. I should preserve it.

Actually, since padding is layout, and the rule says "keep similar values, ±20% maximum", changing `var(--space-md)` to something else would be risky since I don't know the value of `--space-md`. Best to leave padding as-is. Since the task says "Only change colors, shadows, radius, transitions, gradients", I should only modify/add those properties.

So for rule 3, I'll add visual properties while keeping padding exactly.

But here's the issue: the instruction says "Every selector character-for-character preserved?" Yes. And "Only change colors, shadows, radius, transitions, gradients" — so I can add these properties to existing rules.

Let me think about what CSS properties to add:

For `.app-hero-section .row .col-lg-7`:
- No colors in original. I can add `color` — but wait, the text color. Editorial-magazine style uses ink black on cream. But this is a hero section; adding a text-shadow might be enough. Adding a `color` property would override the inherited color, which could be intentional for a refresh. Let me add a deep ink color and a subtle text-shadow.

Actually, for editorial-magazine with gradient-rich variant, I could use a gradient text effect:
```css
background: linear-gradient(135deg, #1a1a1a 0%, #c44536 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
```
But this might make text unreadable if background-clip isn't supported. Also, text-align remains center. However, the instructions say NOT to change font-family, font-size, font-weight, line-height, etc. Background-clip: text doesn't affect those. But is this too aggressive? It's a visual identity change.

Hmm. The effect variant is "gradient-rich", so gradient text would fit. But I worry about changing `color` — the original didn't have color, so adding `color: transparent` is a change. But the goal is to refresh the visual identity. I think it's acceptable.

Actually, let me reconsider. The hero section's `.col-lg-7` — in mobile view, text is centered. A gradient text effect on a large hero heading would be striking and fits the editorial-magazine style with the deep red accent.

But the property `text-align: center` is locked. Adding a gradient text... the background-clip: text would apply to the whole column, not just the heading. The column contains a row with maybe a badge, h1, paragraph, buttons. If I set background-clip: text on the column, all descendant text would become gradient and transparent. That could be too much. And it might not show background if the children have their own backgrounds.

Actually, `background-clip: text` on a container element... the background of the container would be clipped to the text of all inline content and inline-block descendants. Block children would each get the background? No, background-clip: text clips the element's own background to the text within the element, including descendants' text. This could work but might have unpredictable rendering across browsers for complex content.

Let me be more conservative. I'll add a text-shadow:
```css
text-shadow: 0 1px 3px rgba(26, 26, 26, 0.12);
```

And maybe set the color to ink:
```css
color: #1a1a1a;
```

That changes the text color to ink black, which is the editorial palette. But if the site already had a color, this would override it. Since we're refreshing the identity, that's fine.

Hmm, but I'm worried about overstepping. Let me look at the actual file: `assets/css/saishi.css`. This is probably a "赛事" (saishi = competition/matches) page. The media query is just a small portion of the file. The task says "File: assets/css/saishi.css#块2/2" — block 2 of 2. So this is the last block. The original CSS for this block is only this media query. The rest of the file (block 1) was presumably already rewritten or is unchanged.

Given the constraints, I'll produce a refresh that:
1. Keeps all selectors identical
2. Keeps text-align, font-size, padding values identical
3. Adds/refreshes colors, shadows, gradients, radius, transitions

Let me draft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 2px 20px rgba(245, 241, 232, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536 0%, #e08d79 100%);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(196, 69, 54, 0.28);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 6px 22px rgba(196, 69, 54, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #faf7f0 100%);
        border-radius: 18px;
        box-shadow: 0 12px 32px -12px rgba(26, 26, 26, 0.18), 0 2px 6px rgba(26, 26, 26, 0.06);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        background: linear-gradient(145deg, #ffffff 0%, #f0ece2 100%);
        box-shadow: 0 20px 40px -14px rgba(26, 26, 26, 0.24), 0 4px 10px rgba(26, 26, 26, 0.08);
    }
}
```

Wait — I added a `:hover` pseudo-class. The rules say pseudo-classes are in the "NEVER CHANGE" list: "Pseudo-classes (:hover, :focus, ::before, ::after)". This means I must preserve existing pseudo-classes, not necessarily that I can't add new ones. But adding `:hover` changes the selector list... The instruction says "Selectors: keep EXACTLY". Adding a new rule with a `:hover` selector is adding a new selector, which might violate "Every selector character-for-character preserved?" Since the original has no `:hover` rule, adding one would introduce a new selector that wasn't there. The conservative mode says HTML is fixed, selectors preserved. I think adding new selectors is risky and violates the spirit.

Let me remove the `:hover` rules to be safe. Instead, I can only modify existing selectors. So:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 2px 20px rgba(245, 241, 232, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536 0%, #e08d79 100%);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(196, 69, 54, 0.28);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #faf7f0 100%);
        border-radius: 18px;
        box-shadow: 0 12px 32px -12px rgba(26, 26, 26, 0.18), 0 2px 6px rgba(26, 26, 26, 0.06);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

But wait — the original `.contact-channels-section article` selector has a comma list. The original is:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
```

I must keep that exact selector list. Good.

Also the `.app-hero-section .badge.bg-warning` rule has `font-size: 0.85rem;` — I keep it exactly.

Now, about adding `color`, `text-shadow`, `background`, `border-radius