/* ============================================================
   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 a small CSS snippet with a "card-mosaic" target style and "gradient-rich" effect variant. 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;
    }
}
```

This is a media query with three rules. The constraints:
- Keep selectors exactly
- Keep layout (display, position, etc.)
- Keep typography (font-size, line-height, etc.)
- text-align is listed under "Typography" section: "text-align, vertical-align" — so I must NOT change text-align: center.
- font-size: 0.85rem must not change.
- padding: var(--space-md) !important — padding is "keep similar values, ±20% maximum". But this uses a CSS custom property. I could change the value but keeping it is safest. Actually the instruction says width, height, padding, margin keep similar ±20%. Since it's var(--space-md), I should probably keep it as is, or I could adjust within 20%. But changing var reference could break things. Better to keep it.

So what can I change? Colors, shadows, radius, transitions, gradients. But this CSS has no colors, shadows, radius, transitions, or gradients defined directly. It only uses var() references.

Hmm. So the task is to "refresh" this CSS visually. But there's very little to change. The only mutable properties here:
- text-align: center — restricted, can't change.
- font-size: 0.85rem — restricted, can't change.
- padding: var(--space-md) !important — padding restricted to ±20%, but using custom property.

Wait, but the custom properties section: "CSS custom properties (--color-*, --shadow-*) values" — I can change CSS custom property values! But there are none declared in this snippet. Could I add some? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". I could add new declarations within the existing rules that don't break layout.

Actually, I can add visual-only properties:
- For .contact-channels-section article and .contact-quick-section .contact-card: I can add border-radius, box-shadow, background gradients, border, transitions — but these are inside a media query for max-width 575.98px. Adding box-shadow to cards might be acceptable. But I must be careful: adding background could change appearance but not layout. Adding border could change layout if border-width wasn't previously set (box-sizing might be border-box globally, but I can't assume). Safer to use box-shadow (doesn't affect layout) and border-radius (doesn't affect layout).

Actually, since it's a "card-mosaic" gradient-rich style, I can add decorative backgrounds to the cards within this mobile media query. But the media query is max-width 575.98px, so it's mobile-specific.

But wait — the original CSS is minimal. The real stylesheet likely has other rules for these elements. My task is only to rewrite this snippet. I shouldn't add a bunch of new declarations that aren't in the original? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Hmm, in conservative mode, I can only change existing values, not add new properties? "Only colors, shadows, and decorative properties may change" — this implies I can modify those properties, but if they don't exist, adding them might be considered changing the visual identity. But the output requirement says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." I think I can add decorative properties as long as I don't alter layout. However, it's risky.

Let me reconsider. The safest path: since there are no color properties to change, output the CSS essentially unchanged, maybe with minor acceptable changes. But that seems like a trivial output.

Let me look at what's mutable within the existing declarations:
1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is in the "never change" typography list. So I cannot change it.
2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is never change. Cannot change.
3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding: keep similar ±20%. var(--space-md) — I could keep it. Adding a color or background isn't a change to padding.

Given the strict constraints, the only legal moves are:
- Possibly add new visual-only declarations (colors, shadows, radius, transitions, gradients) to the existing selectors.

The task explicitly says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "only change existing values of those properties." The spirit is to refresh the visual identity. Since the original has no color, I can introduce color. But the self-check says "Colors throughout the file replaced with fresh palette?" — implies there were colors to replace.

Given the fixed HTML and the "gradient-rich" variant with "long transitions (0.4-0.6s cubic-bezier)", I think I'm expected to add gradients, shadows, radius, transitions to these mobile rules. But I must not break the layout. Adding box-shadow and background gradient doesn't affect layout. Adding border-radius doesn't affect layout (unless overflow hidden on parent? Not my concern). Adding transition doesn't affect layout.

But wait: if I add a background to `.contact-channels-section article` in the mobile media query, that changes visual identity significantly. That aligns with "gradient-rich." However, the class names suggest these are contact cards. In "card-mosaic" style, each card type gets a different accent. Since there are multiple card types, I could give the contact article and contact card different gradient backgrounds. But I only have two selectors in the last rule. Also `.app-hero-section .badge.bg-warning` — a warning badge. I could add a gradient to it and a box-shadow. And `.app-hero-section .row .col-lg-7` — a column, probably not a card; adding background there might be odd. But in the hero section, centering text — I could add a text-shadow to make it richer? text-shadow is allowed. Adding a subtle text-shadow to the centered text might be acceptable but could look weird. Better to keep it minimal or add nothing.

Actually, text-shadow on a column with multiple children would apply to all text in the column? No, `text-shadow` inherits, so it would apply to all text in the column. That could be a nice touch — a soft text glow. But risky.

Let me think about what a conservative-mode expert would do: The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." and "Only colors, shadows, and decorative properties may change." This strongly suggests I should add decorative properties where needed to achieve the target style.

Given the target "card-mosaic" with gradient-rich, I'll:
- For the hero column: add a subtle text-shadow? Actually text-align center is unchanged. I could add nothing, or add a subtle drop shadow to text. Hmm.

Maybe better approach: Keep the existing declarations intact, and add additional visual declarations to each rule that are safe:

Rule 1:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.4);
}
```
But text-shadow inherits; this is a column, so all text inside gets text-shadow. Could be fine for a hero section.

Alternatively, leave rule 1 unchanged since there's nothing visual to refresh without risk.

Rule 2:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #ffd166, #ff9f1c);
    box-shadow: 0 4px 12px rgba(255, 159, 28, 0.35);
    border-radius: 999px;
}
```
Wait — the selector uses `.bg-warning` which is a Bootstrap class. Changing background to a gradient overrides Bootstrap's warning color. That's a visual refresh. But border-radius 999px — the badge likely already is pill-shaped. If the original didn't have border-radius, adding it changes the shape but not layout (doesn't affect layout dimensions? border-radius affects visual only, no layout). It's allowed.

However, there's a subtlety: the badge might have padding, and adding a gradient background replaces the solid color. Good.

Rule 3:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, #ffffff, #eef2f7);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    border-radius: 16px;
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```

But wait — the `!important` on padding. If I add background and box-shadow, those don't have `!important`. That's fine.

But there's a risk: `.contact-quick-section .contact-card` might already have a background or border defined elsewhere; my addition in the mobile media query will override in the cascade if it appears later. Since I don't know the rest of the file, adding these could change the visual identity significantly, which is the goal.

However, the conservative mode says "The HTML is FIXED — only colors, shadows, and decorative properties may change." Adding properties is exactly that. The output should only contain the changed CSS, preserving selectors. I think this is acceptable.

But I must be careful: "transition" — the target style says "Smooth long transitions (0.4-0.6s cubic-bezier)". Adding transitions on cards is fine. But transform in transition — the original doesn't have a transform on hover, so the transition is harmless. I'll add transition for box-shadow and background.

Actually, adding transform to the transition but not using transform on hover is harmless. But I'd rather not add transform if not needed. I'll transition box-shadow, border-radius? No, border-radius transition is odd. Just box-shadow, background, and maybe transform.

Wait, careful: adding `transition` is allowed as a "decorative property" and doesn't affect layout. Good.

Let's also consider the "card-mosaic" style: "Vibrant card colors on neutral background. Each card type a different accent." For the two card types, I can use different gradients:
- `.contact-channels-section article`: one accent (e.g., teal/cyan gradient)
- `.contact-quick-section .contact-card`: another accent (e.g., purple/pink gradient)

But the original rule combines them with a comma. If I want different backgrounds, I need to split the selector list. But the instructions say "Selector lists (commas)" must be preserved! "Keep EXACTLY (.post-card stays .post-card)" and "Selector lists (commas)" under never change. So I cannot split the selector list. I must keep them combined. So both selectors must receive the same declarations. Therefore, I can't give each card a different accent unless I use separate rules — but adding a separate rule with a new selector would violate "preserving ALL selectors"? Actually adding new selectors is introducing new rules; that's likely not allowed.

So both get the same gradient. That's fine — in a mobile context, we can have a unified card look. The "card-mosaic" is more about the desktop grid; here we're only operating on mobile. I'll keep the combined selector.

So plan:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 16px rgba(13, 27, 42, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166 0%, #f4a261 100%);
        box-shadow: 0 6px 20px rgba(244, 162, 97, 0.4), 0 2px 4px rgba(13, 27, 42, 0.08);
        border-radius: 999px;
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s 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, rgba(255, 255, 255, 0.9), rgba(240, 244, 248, 0.95));
        backdrop-filter: blur(8px);
        box-shadow: 0 12px 32px rgba(13, 27, 42, 0.1), 0 4px 10px rgba(13, 27, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        border-radius: 20px;
        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 hero column text-shadow: text-shadow is allowed to change, but adding it to the column is a new decoration. It could make the hero text look glowy. Is that within "gradient-rich"? Not exactly. But it's decorative. Maybe I should not touch rule 1 at all since text-align is the only property and it's restricted. Adding a text-shadow to a whole column could be risky if there are buttons/inputs inside. Hmm.

Let's think: `.app-hero-section .row .col-lg-7` — the hero section's left column probably contains a heading, paragraph, and buttons. Applying text-shadow to all text would affect buttons too (buttons inherit text-shadow unless overridden). That would look bad. So better not add text-shadow to the column. I'll leave rule 1 unchanged. The instruction says "Colors throughout the file replaced" but there are no colors in rule 1. Keeping it unchanged is the only correct conservative move.

For rule 2: `.badge.bg-warning` — it's a badge, small element. Adding a gradient and box-shadow is safe. But note: Bootstrap's `.badge` has `display: inline-block; padding`, and `.bg-warning` sets background-color. Overriding with a gradient is fine visually. But adding border-radius: 999px — Bootstrap badges are already `border-radius: 0.375rem`. Setting to 999px makes it a pill. That changes visual (allowed). But wait — if the badge already has rounded corners, changing to pill is a visual refresh. Good.

However, I should be careful: the original rule in this media query only sets font-size. If I add background, box-shadow, border-radius, transition, these are new. In conservative mode, is adding properties allowed? The instructions: "Only colors, shadows, and decorative properties may change" — this is ambiguous. It could mean "among the existing properties, only those categories may change" or "you may change only these categories of properties (by adding/removing/editing)." I'll interpret as the latter, since otherwise the task would be impossible (no colors to change in the original).

For rule 3: `padding: var(--space-md) !important` — I must keep. I'll add a gradient-rich card treatment. But I need to be careful about `backdrop-filter` — it's allowed ("filter, backdrop-filter" in the change list). But adding backdrop-filter to a card with a semi-transparent background requires the background to be partially transparent for it to show. I used rgba with 0.9/0.95 — mostly opaque. If there's a background image behind, the blur would still have some effect. But it could be GPU-heavy on mobile; however, it's decorative and allowed. I'll include it but maybe make the background more transparent like rgba(255,255,255,0.75) for the gradient to show mosaicity. But wait — if the card sits on a page with a white background, transparency doesn't matter. The parent background is likely white/light. Making it 0.75 could make the card look dirty if the page behind is the same. Hmm.

Better: use a vibrant gradient background for the cards, since target is "Vibrant card colors on neutral background." But the original cards likely are white. In mobile contact channels, having vibrant cards might be too aggressive. But the target style explicitly says vibrant. The "gradient-rich" variant says "Linear-gradient or radial-gradient on most backgrounds."

Let me decide on a cohesive fresh palette:
- Neutral background: soft slate/cream. But we're not editing the body.
- Badge: warm amber gradient (#ffd166 → #f4a261) with warm shadow.
- Contact cards: light frosted white gradient with layered shadows, or vibrant gradient? The target says vibrant card colors. But the selector applies to both contact-channels-section article and contact-quick-section .contact-card. If I make them vibrant, e.g., teal-to-blue gradient with white text? But the original card content likely has dark text; adding a vibrant background and