/* ============================================================
   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 CSS for a media query block. This is a very small CSS snippet with a media query. 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;
    }
}
```

However, the rules I'm allowed to change are limited. Let me think about what I can change here:

1. `text-align: center` - text-align is in the "NEVER CHANGE" typography section (text-align, vertical-align). So I cannot change that.
2. `font-size: 0.85rem` - font-size is in the NEVER CHANGE typography section. Cannot change.
3. `padding: var(--space-md) !important` - padding is in the layout section, can change within ±20%. But it's a CSS variable reference. I could potentially change the padding value but it references a custom property. Hmm.

Wait, the instructions say I must change visual properties. But the original CSS is quite limited. Let me re-read.

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

The original CSS has no colors, shadows, radius, transitions, or gradients. The only properties are text-align, font-size, and padding.

The constraints say:
- text-align: NEVER CHANGE
- font-size: NEVER CHANGE
- padding: keep similar values, ±20% maximum

So what can I actually change? Very little. But the instructions say "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

Hmm, this is a tension. The original CSS is a small media query that only adjusts layout/typography. There are no colors to change. But the self-check says "Colors throughout the file replaced with fresh palette?" - there are no colors in the file.

Let me think about this. The task says the HTML is fixed, and only colors, shadows, and decorative properties may change. But the specific CSS given has only layout properties. 

Could I add new properties? Like adding a transition, border-radius, box-shadow to the existing selectors? But that would change the visual appearance in ways that might be acceptable since we're only adding decorative properties, not changing layout.

Actually, re-reading the constraints: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

So I CAN add colors, shadows, radius, transitions to the existing rules. The selectors must stay the same. Adding new properties to existing selectors doesn't change layout.

But wait, would adding a box-shadow to `.app-hero-section .row .col-lg-7` be appropriate? It might change visuals. The instructions say to be conservative. But the user explicitly asks for a fresh palette and more distinct changes.

Let me consider what makes sense:

1. `.app-hero-section .row .col-lg-7` - text-align: center. I could add color, maybe a background? But that would be a significant visual change. The conservative mode says only change colors/shadows/radius. Adding properties is technically allowed since they're decorative.

2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem. I could change the background color of the badge? But the class includes `bg-warning` which is a Bootstrap utility. Adding a background-color here could be overridden or conflict. I could add a box-shadow, border-radius, transition.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important. I could add border-radius, box-shadow, background, transition.

But actually, I need to be careful: the self-check says "Colors throughout the file replaced with fresh palette?" - there are no colors in the original. So I think the intent is that I should add decorative properties that establish a fresh visual identity while preserving layout.

However, the original is a media query for small screens. Adding heavy visual changes in a mobile media query might be odd but allowed.

Let me think about what's safe and meaningful:

For `.app-hero-section .row .col-lg-7` in mobile:
- Keep `text-align: center`
- Add `color` maybe? But that could be inherited from body. Adding a color is a visual change.
- Add `text-shadow`? Could be decorative.
- Maybe add a subtle background? That changes layout though (no, background doesn't change layout).

Actually, adding background, border-radius, box-shadow to a column could create a card-like look. But this might be too aggressive.

Let me reconsider. The target style is "sidebar-classic" with "soft-shadows" variant. The palette suggested: Sidebar darker (#252e3a), main lighter. Functional accent for actions. Multi-layer soft shadows, large border-radius 12-24px, smooth transitions 0.3-0.5s ease.

But the CSS given is just a media query. The original CSS in the file (which I don't see fully) probably defines many components. The user only gave me "块2/2" (block 2 of 2) - the second block of the file. So this media query is the only thing I see.

Given the constraints, I should rewrite this media query block, preserving selectors and layout properties, while enhancing with decorative properties. Since the original has no colors, I'll add a fresh palette to the existing selectors.

Let me decide on the fresh palette:
- Main background lighter: maybe a warm off-white or soft gray-blue. But I shouldn't add backgrounds to everything.
- Accent: a teal or indigo.

Since this is a mobile media query, maybe I should add subtle styling for the badge and contact cards to make them pop.

Let me draft:

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

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

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

Wait, but the self-check says "text-align, vertical-align" are never change - I'm keeping text-align: center. Good.

"font-size" never change - keeping font-size: 0.85rem. Good.

"padding, margin (keep similar values, ±20% maximum)" - keeping padding: var(--space-md) !important exactly. Good.

I'm adding new properties. Is that allowed? The instructions say "only colors, shadows, and decorative properties may change." Adding decorative properties is in the spirit of refreshing the visual identity. But I need to be careful: adding extra properties might be considered changing the CSS beyond what was there. However, the user says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." So they want more changes.

But wait, adding a background to `.contact-quick-section .contact-card` could change its appearance significantly. In the original design, the card likely already has a background. In this media query, they're only reducing padding. If I add a background here, it might conflict with the base styles. But since it's a media query, the base styles are elsewhere. I'm only adding to the mobile styling.

Hmm, actually, I need to be careful. The instructions say "Refresh the visual identity WITHOUT changing layout structure." Adding a background color to the contact card in mobile is a visual change, allowed. Adding border-radius, box-shadow, transition - all allowed.

But let me reconsider whether I should add these properties. The original is quite minimal. Maybe the safest interpretation is to keep the existing properties unchanged and add new decorative ones with a fresh palette.

Let me think about what a "conservative" approach would be. The user explicitly wants a fresh palette and more distinct shadows/radius. Since the original has none, adding them is the only way to satisfy the request.

However, I want to avoid adding a `transition` property that includes `transform` if I'm not changing transform. Actually transitions are allowed and the variant calls for smooth transitions 0.3-0.5s ease. So I'll add transitions.

Let me also consider the badge. It has `bg-warning` class which in Bootstrap sets `background-color: #ffc107` (or similar). If I add a `background` with a gradient, it will override the Bootstrap utility in this media query. That's a visual change. The palette suggested "functional accent for actions" - warning is typically amber/yellow. The target palette has sidebar darker #252e3a, main lighter. A fresh accent could be something like a warm amber or teal.

Let me pick a cohesive palette:
- Dark slate: #252e3a (from target style)
- Main lighter: #f1f5f9 or #f8fafc
- Accent: #d97706 (amber-600) or a teal #0d9488

For the badge with bg-warning, I'll use an amber gradient.
For the contact cards, a light background with soft shadow.
For the hero column, maybe a subtle text color.

Let me refine:

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

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

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

Hmm, but is adding `color` to the hero column appropriate? It might override inherited colors and could be a visual improvement. The target palette says "main lighter" so a dark slate text on a light background makes sense.

Actually, I should double-check: the self-check says "Colors throughout the file replaced with fresh palette?" Since there were no colors before, I need to introduce them. That's fine.

One concern: The `.contact-channels-section article` might already have a background. Adding one in the media query would apply on mobile only. That could look different on mobile vs desktop, which might be intentional or not. But since the media query is specifically for mobile, adding a card-like background on mobile could be a nice touch. However, it's a bit risky because the base styles might already have a background, and I'd be overriding it on mobile. But that's allowed - visual refresh.

Let me also consider whether to add border-radius to the hero column. That would be weird for a full-width column. Better to add a subtle text-shadow or color only.

Actually, let me reconsider the target style: "sidebar-classic" - Two-column structure. But this media query is for mobile, so sidebar would collapse. The color palette: Sidebar darker (#252e3a), main lighter. Functional accent for actions.

Given the mobile context, I'll use:
- Hero column text color: #252e3a (dark slate, from palette)
- Badge accent: amber gradient (warning/action)
- Contact cards: light #f8fafc background, soft shadows, radius 16px

This seems reasonable.

But wait - should I be adding background to the badge and cards? The original media query might be just a small tweak in a file that already has all the visual styling outside the media query. Adding these properties in the media query changes mobile appearance. Since the user asked for a visual refresh "MORE distinct this round", I think it's fine.

Let me also think about whether adding `!important` matters. The original padding has `!important`. I'll keep it exactly. For the badge, `bg-warning` is a Bootstrap utility with `!important`? Actually Bootstrap utilities do use `!important` for background-color. If I declare `background: linear-gradient(...)` in my CSS without `!important`, Bootstrap's `.bg-warning` with `!important` would win. So to override it, I'd need `!important` or a higher specificity. But `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning`, so even without `!important`, the selector specificity wins (0,3,0 vs 0,1,0). Actually specificity: `.app-hero-section .badge.bg-warning` = 3 classes = (0,3,0). `.bg-warning` = (0,1,0). Higher specificity wins regardless of `!important` unless the other has `!important`. But Bootstrap utilities often include `!important`. If `.bg-warning { background-color: #ffc107 !important; }`, then my `background: linear-gradient(...)` without `!important` would lose because `!important` declarations beat normal declarations regardless of specificity. So I need `!important` on the background to override Bootstrap's `!important`.

Hmm, in Bootstrap 5, `.bg-warning` is defined as:
```css
.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}
```
Yes, it uses `!important`. So to override it, I need `!important` on my background property, or use `background-color` with `!important`.

Should I add `!important`? The original CSS uses `!important` on padding. Adding `!important` to background would be consistent with the mobile override pattern. It's a visual property, so it's allowed.

Let me adjust:

```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    border-radius: 999px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
```

Wait, but `transition` on `background` - if background is a gradient, transitioning background might not interpolate smoothly. In CSS, gradients don't transition. Transitioning `background` with gradients just switches. Maybe transition `box-shadow` only, or `opacity`/`transform`. But since there's no hover here, transitions don't do anything unless there are hover states elsewhere. The variant says "Smooth transitions (0.3-0.5s ease)" - I'll add transitions to be consistent, even if they're not triggered within this block.

Actually, transitions only matter when properties change (hover, focus, class change). The media query itself doesn't change properties on hover. But the elements may have hover states defined outside this block. Adding a transition in the media query would affect those hover states on mobile (though hover is less relevant on touch). It's harmless.

Let me also add text-shadow to the hero column, and maybe a subtle color.

Let me finalize the CSS. I need to make sure:
- Selectors exactly preserved.
- Existing properties preserved exactly (text-align: center; font-size: 0.85rem; padding: var(--space-md) !important;).
- Fresh palette introduced.
- Shadows redesigned with multi-layer soft shadows.
- Border-radius adjusted.
- Transitions added.

One more thought: The `.contact-channels-section article, .contact-quick-section .contact-card` rule uses a comma selector list. I must preserve the exact list. Also the `padding: var(--space-md) !important;` must remain.

For the contact cards, adding `background: #f8fafc;` might make them look like cards. But what if the base already has a background? On mobile, this overrides it. That's fine. I'll use a slightly tinted background like `#f8fafc` (slate-50) or maybe `#ffffff` with shadow. The target palette says main lighter, so `#f8