/* ============================================================
   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 this CSS with a fresh visual identity while preserving all selectors and layout properties. The target style is "card-mosaic" with "gradient-rich" effects.

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

This is a media query for small screens. The properties present:
- `text-align: center` - this is typography, but also layout-ish? text-align is in the "never change" list. Wait, actually text-align is listed under "Typography" which is NEVER CHANGE. So I must keep `text-align: center`.
- `font-size: 0.85rem` - typography, NEVER change. Keep it.
- `padding: var(--space-md) !important` - padding is layout, but can vary by ±20% maximum. `var(--space-md)` is a CSS custom property. I could change the custom property value but that would affect layout. Since padding is listed as "keep similar values, ±20% maximum", I should keep `var(--space-md)` as is, or adjust within 20%? The original is `var(--space-md)`. Hmm.

Wait — the CSS custom properties section says I MUST change `--shadow-*` values and color-related custom properties. But padding uses `--space-md` which is a spacing token, not a color. Changing it could break layout beyond 20%. The safest approach: keep `padding: var(--space-md) !important` as-is since it's a spacing variable.

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

The issue: this CSS block only has layout-ish properties. There are no colors, no shadows, no radius, no gradients, no transitions in this block. Hmm.

So what can I change? The instructions say I must change colors, shadows, radius, transitions, gradients. But the original file contains none of those. 

Let me re-read the constraints carefully:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

"🔒 NEVER CHANGE (would break HTML layout):
  ... text-align, ... font-size ... padding, margin (keep similar values, ±20% maximum)"

So in this block:
- `text-align: center` — must NOT change (typography/layout)
- `font-size: 0.85rem` — must NOT change
- `padding: var(--space-md) !important` — can change ±20% maximum. But it's a CSS variable reference. I could change it to a computed value within 20% like `padding: 1.15rem !important` if I knew what `--space-md` was. But I don't know the value of `--space-md`. Changing it to a fixed value could break things. The conservative approach is to keep `var(--space-md)` as-is, since it's a spacing token, not a color/shadow.

The instructions say "Only change colors, shadows, radius, transitions, gradients" for this task. Since this CSS block contains none of those, technically there is nothing to change without breaking the "layout exactly as-is" rule.

However, the task also says: "Refresh this CSS visually." But if I can't change anything, that would be a problem. Let me think about what I'm allowed to do.

Actually, re-reading: "CSS custom properties (--color-*, --shadow-*) values" — I can change custom property values that are color-related. But `--space-md` is a spacing variable, not color/shadow. It's used for padding, which must stay within ±20%. Changing `--space-md` would affect other rules too, breaking "layout exactly as-is".

So the correct conservative output here would be... the same CSS? But that doesn't fulfill "refresh visually".

Hmm, let me reconsider. Maybe I should add visual properties that don't exist yet? The task says "Only change colors, shadows, radius, transitions, gradients." Adding properties like `background`, `box-shadow`, `border-radius`, etc. to these selectors would be a visual change and wouldn't break layout (since they don't affect layout).

Wait, but the instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding decorations is allowed? It says "YOU MUST CHANGE" — implying where they exist. If none exist, adding could be a way to refresh.

But then it says "Output the rewritten CSS now" — the rewritten CSS. If I add `background` and `border-radius` to `.app-hero-section .badge.bg-warning`, that would change how the badge looks. The `.badge.bg-warning` presumably shows a warning color from Bootstrap. Adding a gradient to it could be a visual refresh.

However, extra caution: the original CSS is a media query for mobile. Adding gradients inside a media query... That's fine.

Let me think about what a "gradient-rich" card-mosaic style would do to this specific CSS. The elements:
1. `.app-hero-section .row .col-lg-7` — text-align center. Nothing visual to change. I could not add anything here without risk. text-align must stay.
2. `.app-hero-section .badge.bg-warning` — a badge. I could change its font-size? No, font-size is locked. I could add a gradient background? The class `bg-warning` sets a background from Bootstrap. I can override/refresh with a gradient. But is that "changing colors" — yes. Adding `background: linear-gradient(...)` with a fresh palette would be a visual refresh. Also could add `box-shadow` and `border-radius` (rounded pill). This would be consistent with "gradient-rich".
3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding stays. Could add gradient backgrounds, border-radius, box-shadow to make cards distinct. That matches "card-mosaic" target style (cards with distinct elevation, vibrant card colors on neutral background).

But wait — the `!important` on padding. If I add backgrounds etc., that's fine.

However, I need to be careful: The instruction "preserving ALL selectors and layout exactly" — adding background/border-radius/box-shadow doesn't change layout (box-shadow doesn't affect layout; border-radius doesn't either; background doesn't). So it's safe.

But is it within scope? The task says "Only change colors, shadows, radius, transitions, gradients." Adding these properties is effectively "changing" them from non-existent to existent — a refresh. I think this is the intent: the original CSS is too bare, so I need to inject the new visual identity.

On the other hand, a super conservative interpretation would output exactly the same CSS since none of the allowed properties exist. But that fails the self-check "Colors throughout the file replaced with fresh palette?" — there are no colors. Hmm.

I think the best approach: keep the mandatory properties intact, and add decorative properties (background gradients, border-radius, box-shadow, transition) to the selectors where it makes sense, while keeping `text-align`, `font-size`, and `padding` exactly as-is (padding within ±20% — I'll keep exactly).

Where to add what:

1. `.app-hero-section .row .col-lg-7` — this is a hero section column. I could add a subtle gradient background? That might be risky — it could overlay content in odd ways. Actually a hero column with centered text; adding a background to it might look fine, but it could change the visual in a way not intended. Hmm. The instruction only allows changing colors/shadows/radius/transitions/gradients, not adding new backgrounds to arbitrary containers? Adding a background is a "color" change in a sense. But if the original had no background, adding one changes appearance significantly. In conservative mode, I should be cautious.

Actually, wait — the "aggressive only" target layout pattern is "Layout pattern (Aggressive only)". That means the card-mosaic grid layout stuff is aggressive and NOT mandatory. The palette and effects are what I should apply.

For `.app-hero-section .row .col-lg-7`: I could add a `background` with a very subtle radial gradient to give the hero section richness. But it's a col-md-7 inside a row; adding a background there might create an odd block. I'll keep it minimal or skip. Actually since text-align is the only property, and the instruction says only change colors/shadows/radius/etc., I'll leave this rule essentially as-is. Or I could add a background gradient — but any background on a text column could look bad. I'll leave it unchanged.

Hmm, but then the "rewritten CSS" would be identical for that rule, which is acceptable — not every rule has to change.

2. `.app-hero-section .badge.bg-warning` — The badge has `font-size: 0.85rem`. I can add:
   - `background: linear-gradient(135deg, #ffb347, #ff6b35)` — a vibrant gradient replacing flat warning.
   - `border-radius: 999px` — pill shape (visual rounding only). But Bootstrap badges often already have border-radius; overriding with 999px gives a stronger pill.
   - `box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35)` — distinct elevation.
   - Maybe `transition` for hover? Adding transition in a media query — fine.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — cards. Add:
   - `background: linear-gradient(145deg, #fff8f0, #ffe8d6)` or something neutral/vibrant.
   - `border-radius: 16px` (or 1rem) — visual rounding.
   - `box-shadow: 0 8px 20px rgba(...)` multi-layer.
   - Maybe `border: 1px solid rgba(...)`? Border-style allowed, border-width not changed — but adding a border adds a border-width from 0 to 1px, which technically changes layout (1px). Avoid adding borders since border-width would change.
   - `transition` on background/shadow for hover states — but no hover rules here, and transitions on non-hover elements don't do much. Still, the variant says "Smooth long transitions (0.4-0.6s cubic-bezier)". I can add a transition property so that any hover/focus changes elsewhere animate smoothly. That doesn't change layout.

But wait — `.contact-channels-section article` — `contact-channels-section` contains article elements. Adding a background to all articles could change appearance significantly. Is that OK? The palette says "Vibrant card colors on neutral background. Each card type a different accent." In this media query, both .contact-channels-section article and .contact-quick-section .contact-card get the same padding. I could give them each a distinct gradient.

However, `.contact-quick-section .contact-card` probably already has a card background from base styles. Overriding it with a gradient is a color change — allowed.

Also note: this is a mobile media query. The base styles likely define colors. Adding overrides here is fine.

Let me be careful about "NEVER CHANGE: padding, margin (keep similar values, ±20% maximum)". I have `padding: var(--space-md) !important`. I must not change this. Keep it exactly.

But could I add `border-radius`? Yes — border-radius is allowed, it's visual only, doesn't affect layout.

Could I add `background`? Background doesn't affect layout. Yes.

Could I add `box-shadow`? Doesn't affect layout. Yes.

Could I add `transition`? Doesn't affect layout. Yes.

Now, there's a subtlety: the selector list `.contact-channels-section article, .contact-quick-section .contact-card` — I must preserve the exact selector list. I'll keep it.

Also the `@media (max-width: 575.98px)` breakpoint — keep exactly.

Now let me design the "gradient-rich" visual refresh with fresh palette. The target: vibrant card colors on neutral background, each card type a different accent. The variant: linear/radial gradients on most backgrounds, gradient borders via border-image (but border-image doesn't affect layout — it uses border-image-source, no border-width change; but border-image requires border-width to show; if the element already has a border, border-image would work. Risky. I'll skip border-image to avoid adding borders).

Hmm, actually, border-image can be added to an element that already has a border from base styles. But I don't know. Skip it. Use box-shadow and background gradients instead.

Let me craft the new 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;
        background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 50%, #ff7b00 100%);
        box-shadow: 0 4px 14px rgba(255, 123, 0, 0.35), 0 2px 4px rgba(255, 159, 28, 0.2);
        border-radius: 999px;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 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%, #fff4e6 55%, #ffe3c9 100%);
        border-radius: 18px;
        box-shadow: 0 10px 24px rgba(230, 126, 34, 0.12), 0 4px 8px rgba(230, 126, 34, 0.08);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Hmm, but wait — `.contact-channels-section article` and `.contact-quick-section .contact-card` are two different card types. The palette says "Each card type a different accent". Since they're in a shared rule, I can't give them different backgrounds without splitting the selector list. Splitting the selector list would change the selectors? No — splitting `.a, .b { }` into `.a { } .b { }` preserves the selectors individually. But it changes the CSS structure but not the HTML matching. Is that allowed? The rule says "Selector lists (commas)" are NEVER CHANGE. So I must keep the selector list as-is with commas. I cannot split it.

So both card types must share the same background if I put it in that rule. OK — I can use one shared gradient for the mobile cards. That's fine; the "different accent" applies at desktop maybe in other files. This file's mobile override can have a shared warm gradient.

Alternatively, I could keep the rule only with padding (unchanged) and not add backgrounds, to be ultra-conservative. But then no visual refresh happens at all. I think adding is better.

Let me reconsider each change:

1. `.app-hero-section .row .col-lg-7`:
   Could add `background: radial-gradient(...)` for gradient-rich? The hero column centered text. A subtle gradient might add richness. But it could look like a weird block behind text. In mobile, the col-lg-7 is full width. A very subtle warm radial fade might be nice. But is it safe? It doesn't affect layout. It changes visual identity. The palette says "Vibrant card colors on neutral background." Hmm. I could add a subtle radial gradient to make the hero section pop.

   But there's risk: the hero section might already have a background from base CSS. Overriding with a gradient changes it — but that's exactly the point (change backgrounds). However, the instruction for this rule: only `text-align: center`. Adding a background is allowed since `background` is a color value. Let me add a soft, subtle gradient:

   ```css
   .app-hero-section .row .col-lg-7 {
       text-align: center;
       background: radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
   }
   ```

   This adds a gentle warm glow at the top of the hero column. Doesn't affect layout. Gradient-rich variant satisfied.

   Should I add border-radius or box-shadow to the column? A hero column typically shouldn't have a card look. I'll add just the background. Maybe also `padding`? No — padding must stay as-is (original had none, so adding padding is not allowed — it would change layout). Keep it.

   Actually, I need to double check: adding `background` to `.col-lg-7` — the `.col