/* ============================================================
   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 CSS file with visual changes only. 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 with three rules:
1. `.app-hero-section .row .col-lg-7` - text-align: center (layout, can't change)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography, can't change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important (padding, can change within ±20%)

Since this is only a media query with layout/typography rules, I need to add visual properties without changing the layout ones. The instructions say I must change colors, shadows, radius, transitions, gradients. But the original CSS has none of these. 

I can add visual properties to these selectors within the media query. Since the HTML is fixed and I can only change visual properties, I should add things like:
- border-radius
- box-shadow
- background colors / gradients
- transitions
- etc.

But I need to be careful: adding background colors might affect the layout? No, background colors don't affect layout. Adding box-shadow doesn't affect layout. Border-radius doesn't affect layout (unless border is present, but adding border would change layout - so I should avoid border-width changes, but border-color/style changes are allowed... but if no border exists, setting border-style could add a border which changes layout. Actually the instructions say "border-color and border-style (NOT border-width)" can change. But if no border-width is set, it defaults to medium, which would change layout. I should be careful.)

Actually, let me think. The instructions are clear: only colors, shadows, radius, transitions, gradients, opacity, outline, etc. I should add visual flair to these selectors while keeping the existing properties intact.

Let me reconsider. The target style is "masonry-flow" with "glow-effects". The palette should be Pinterest-like: white cards, soft shadows on light gray bg, with accent strips and glow effects.

Since the original CSS has minimal visual properties, I'll add visual properties that fit within the media query:

For `.app-hero-section .badge.bg-warning`:
- Add a box-shadow glow, maybe gradient background, border-radius, transitions.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add border-radius, box-shadow, background gradient, transition.

For `.app-hero-section .row .col-lg-7`:
- Maybe add text-shadow? But text-align is layout; I can add color or text-shadow. But changing text color might be risky if it's inherited. The instruction says colors must change. I could add a subtle text-shadow to the hero text.

However, I must be careful. These are within a mobile media query (max-width: 575.98px). The changes should be appropriate for mobile.

Let me also consider: the file fingerprint suggests there might be more to the file, but only this block is shown. I'll only rewrite what's given.

Let me craft the new CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff7e5f);
        box-shadow: 0 4px 20px rgba(255, 126, 95, 0.45), 0 0 24px rgba(255, 179, 71, 0.3);
        border-radius: 999px;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, #ffffff, #f3f0fa);
        box-shadow: 0 8px 24px rgba(94, 66, 153, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

Wait, the `.badge.bg-warning` - bg-warning is a Bootstrap class that sets background-color. If I set a gradient background, that's fine. But I need to consider that Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important`. My gradient would need to override. I can use `background: linear-gradient(...)` which would override since it's the same specificity but later in source? Actually Bootstrap's `.bg-warning` uses `!important`. Hmm. `background` shorthand with `!important` would be needed to override. But the instructions say to preserve selectors, not specificity. Adding `!important` to background could be fine. But let me be careful - the original CSS doesn't have `!important` on that rule except padding.

Actually, since this is the user's own CSS file, maybe Bootstrap is loaded before. To ensure the gradient shows, I might need `!important`. But that changes the property value, not the selector. That should be acceptable. Let me add `!important` to the background so it overrides Bootstrap's `.bg-warning`.

But wait - adding `!important` might be considered not preserving? The instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Adding `!important` is a declaration change, not a selector change. It's allowed.

However, the padding rule already has `!important`. So keeping that.

For the `.badge.bg-warning`, maybe I shouldn't override the background-color? The instruction says "All color values: background, color, border-color" must change. The original has no background, so I'm adding one. That's fine.

Let me reconsider the `.contact-channels-section article` - if I add a background gradient, it might override existing backgrounds. But since the original has no background, adding one is a visual change. However, these articles might already have backgrounds from other CSS. Adding `background` might override them, which could reduce visual identity. But the instruction is to refresh visual identity. I'll add a subtle background.

Actually, I should be more thoughtful. The file is only this media query block. There's likely more CSS elsewhere defining base styles. This media query is just mobile overrides. So the design system probably defines cards elsewhere. Adding visual properties here only affects mobile. That's fine.

Let me think about the "masonry-flow" and "glow-effects" target style. The palette is Pinterest-like: white cards, soft shadows on light gray bg, accent strips, glow effects.

I'll design:
- Badge: warm amber gradient with glow shadow, rounded pill, subtle transition.
- Contact cards: white-to-light gradient, soft lavender shadow, large radius, inner highlight, glow on hover? But we can't add :hover to the selectors? Actually we can add :hover pseudo-class? The instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" in the "NEVER CHANGE" list - meaning keep them as-is. But original has no :hover. Adding new pseudo-classes would change selectors. I should NOT add :hover selectors because they weren't in the original. So stick to the existing selectors only.

Wait, re-reading: "🏷️ SELECTORS (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE". This means the selectors as given must remain. Adding new ones would be adding selectors. But is adding a new rule with a pseudo-class allowed? The instruction says "Keep ALL selectors and layout exactly as-is" and "Only change colors, shadows, radius, transitions, gradients." So I should not add new selectors. I can only modify the declarations inside existing rules. So no :hover.

OK so no hover effects requiring new selectors. I can still use `transition` on the existing rules so that any existing hover states (defined elsewhere) transition smoothly.

Let me finalize:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 20px rgba(94, 66, 153, 0.18);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff7e5f) !important;
        box-shadow: 0 4px 18px rgba(255, 126, 95, 0.45), 0 0 24px rgba(255, 179, 71, 0.35);
        border-radius: 999px;
        transition: box-shadow 0.35s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, #ffffff 0%, #f4f1fa 100%);
        box-shadow: 0 10px 30px rgba(94, 66, 153, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
        transition: box-shadow 0.35s ease-in-out;
    }
}
```

Hmm, but should I add `background` to the `.col-lg-7`? Probably not - it's a hero section, adding a background there would change the look significantly. text-shadow is enough.

But wait, the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since the original has no color values, I'm adding new ones. That satisfies the requirement.

Let me double-check constraints:

1. Selectors preserved exactly:
   - `.app-hero-section .row .col-lg-7` ✓
   - `.app-hero-section .badge.bg-warning` ✓
   - `.contact-channels-section article, .contact-quick-section .contact-card` ✓ (comma list preserved)

2. Layout preserved:
   - `text-align: center` ✓
   - `font-size: 0.85rem` ✓
   - `padding: var(--space-md) !important` ✓ (padding unchanged, within ±20%)

3. Font-family, font-weight, line-height unchanged - none present ✓

4. Colors replaced with fresh palette:
   - Added `text-shadow` with a purple-tinted color
   - Added `background: linear-gradient(...)` to badge
   - Added `box-shadow` values
   - Added `background: linear-gradient(...)` to cards

5. Shadows redesigned ✓ (multi-layer effects)

6. Border-radius adjusted ✓ (999px for badge, 16px for cards)

7. No AI marker comments ✓

One concern: The `background` shorthand on the badge with `!important` might be too aggressive. But since Bootstrap's `.bg-warning` uses `!important`, we need it. Also, the gradient preserves the "warning" feel with warm colors.

Another concern: `border-radius: 999px` on a badge pill - Bootstrap badges are already pill-shaped by default (`border-radius: 0.375rem` or pill if `.rounded-pill`). 999px would make it fully round. That's fine.

Should I add `border-radius` to the `.col-lg-7`? Probably unnecessary.

Let me also consider adding a subtle backdrop-filter? That's allowed but might not be needed. Keep it simple.

Let me reconsider the gradient for the cards. The target says "Each card may have its own accent strip". I could add an accent strip using a box-shadow inset or border-left, but border-width changes are forbidden. I could use `box-shadow: inset 4px 0 0 var(--accent)` to create a strip effect without changing layout. That's a nice touch. Let me add that:

```css
box-shadow: inset 4px 0 0 #7c4dff, 0 10px 30px rgba(94, 66, 153, 0.12);
```

Wait, but `inset 4px 0 0 #7c4dff` adds a colored strip on the left edge. That doesn't affect layout (box-shadow doesn't affect layout). This matches the "accent strip" idea. But it might look odd on mobile. Let me keep it subtle. Actually, the instruction says "Each card may have its own accent strip" - so adding it is aligned with the target style.

Let me refine the card shadow:

```css
box-shadow: inset 4px 0 0 #7c4dff, 0 8px 24px rgba(94, 66, 153, 0.12), 0 0 32px rgba(124, 77, 255, 0.08);
```

Hmm, that might be too much. Let me balance.

Also, for the badge, the glow effect should be in accent color. But the badge is warning (amber). I could do an amber glow. The target says "Glow shadows in accent color". The accent color could be amber for the badge and purple for the cards. That's fine.

Let me also think: should I add `color` to any of these? The original doesn't specify colors. If I add `color`, it might override inherited text colors. To be safe, I won't add `color` unless needed. The text-shadow on `.col-lg-7` adds visual flair without changing text color.

Actually, the instruction says "All color values: background, color, border-color..." must change. It doesn't say I must add color to every rule. Since there are no existing color values in this block, adding new ones is enough.

Let me also consider transitions. I added `transition: box-shadow 0.35s ease-in-out`. The original has no transitions. Adding transitions is allowed ("transition timing, easing, duration" can change). This makes hover effects elsewhere smoother.

Should I change the `font-size`? No, that's typography, forbidden.

Let me reconsider the padding: `var(--space-md)` stays exactly. Good.

Let me finalize with a cohesive design:

Fresh palette:
- Primary accent: #7c4dff (purple)
- Warm accent: #ff7e5f (coral) / #ffb347 (amber)
- Card background: #ffffff to #f4f1fa (light lavender-gray)
- Shadow: rgba(94, 66, 153, ...) - purple-tinted shadows

This matches "Pinterest-like: white cards, soft shadows on light gray bg" with a purple accent.

Final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347 0%, #ff7e5f 100%) !important;
        box-shadow: 0 4px 18px rgba(255, 126, 95, 0.4), 0 0 24px rgba(255, 179, 71, 0.3);
        border-radius: 999px;
        transition: box-shadow 0.35s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, #ffffff 0%, #f4f1fa 100%);
        box-shadow: inset 4px 0 0 #7c4dff, 0 10px 30px rgba(94, 66, 153, 0.12), 0 0 32px rgba(124, 77, 255, 0.08);
        transition: box-shadow 0.35s ease-in-out;
    }
}
```

Wait - the `background` with `!important` on the badge. Is that acceptable? The original rule doesn't have `!important`. Adding it changes the declaration but not the selector. It's needed to override Bootstrap. I'll keep it.

But maybe I should avoid `!important` because the original has none for that rule, and "keep similar values" applies to padding/margin only. Adding `!important` is fine.

Another thought: `border-radius: 999px` on the badge. Bootstrap's `.badge` has `border-radius: 0.375rem`. Some badges use `.rounded-pill` which is `50rem`. 999px is effectively fully round. That's a visual change, good.

Also, the `.contact-channels-section article` might be an `<article>` element. Adding `border-radius` and `background` to all articles might be fine. But if these articles previously had no background, they'll now stand out as cards. That's the "masonry-flow" card look.

Should I add `box-sizing`? No, that's layout, and it's not needed.

Let me do a self-check:

✓ Selectors character-for-character preserved:
- `.app-hero-section .row .col-lg-7`