/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

The user wants me to rewrite the CSS file while preserving all selectors and layout properties exactly. 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. The layout properties to preserve:
- `text-align: center;` (text-align is in the typography/layout preserve list)
- `font-size: 0.85rem;` (font-size is preserved)
- `padding: var(--space-md) !important;` (padding can change within ±20%, but `var(--space-md)` is a CSS custom property - I can change the custom property value but here it's referenced. The instruction says CSS custom properties values can change. But I don't see the definition of `--space-md` in this file. The instruction says I can change `--color-*`, `--shadow-*` values, but `--space-md` is a spacing variable - it's not in the list of things I can change. Actually, the padding itself can be kept similar ±20%. Since it's a var reference, I should probably keep it or adjust the value slightly. But since the original uses `var(--space-md)`, I should preserve that since padding is a layout property. Actually, the rule says "padding, margin (keep similar values, ±20% maximum)". Changing `var(--space-md)` to something else might change layout. The safest approach is to keep the padding value as-is.

Wait, the target style is "symmetric-grid" and "airy-rhythm" which suggests generous spacing, large border-radius, soft pillowy shadows. But the original CSS has almost no visual properties - just a media query with text-align, font-size, and padding.

Since I'm in conservative mode, I can only change visual identity properties. But the original CSS doesn't have many colors, shadows, or radius to change. I could add visual properties that don't exist? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Hmm, the instruction says "Only change colors, shadows, radius, transitions, gradients." But the original CSS has none of these. I could add some decorative properties (like color, border-radius, box-shadow) to these selectors without breaking layout. However, adding properties like `border-radius` to an article or contact-card would be a visual change. Adding `color` to hero section text might be fine. Adding `box-shadow` is visual only.

But wait - I must be careful. The selectors in the media query target specific elements. Adding colors to them is fine. Adding border-radius might affect visual appearance but not layout. Adding box-shadow is visual.

The instruction says "Only change colors, shadows, radius, transitions, gradients." This implies these properties can be introduced or changed. Since the original has none, introducing them is a "change" in the sense of refreshing the visual identity.

However, "padding: var(--space-md) !important;" - I cannot change padding much (±20%). Actually, I should keep it. But the target style "airy-rhythm" wants generous spacing 32-56px. In the mobile media query, padding `var(--space-md)` is probably medium spacing. I'll leave it as is, since changing it would violate the ±20% rule unless I know the value.

Actually, let me re-read: "width, height, padding, margin (keep similar values, ±20% maximum)". So padding must remain similar. `var(--space-md)` is a custom property reference - the value is defined elsewhere, so I don't know it. Keeping it as-is is safest.

So what can I actually change here?

1. Add `color` to the elements (visual).
2. Add `background` or `background-color` (visual).
3. Add `border-radius` (visual).
4. Add `box-shadow` (visual).
5. Add `transition` (visual).
6. Add `text-shadow` (visual).

But I need to be careful not to break layout. Adding background color, color, border-radius, box-shadow, transition are all safe.

Let me also consider: the media query is for max-width: 575.98px (mobile). Adding big shadows on mobile might be okay but subtle is better.

Let me craft a response that introduces a fresh visual palette. Since the target style is "symmetric-grid" and "airy-rhythm", I'll use:
- Balanced harmonious palette
- Consistent shadows
- Large border-radius (16-28px)
- Soft pillowy shadows
- Breathing room

But for mobile, large radius might be 16-20px. Soft shadows are good.

Let me decide on a palette. The original CSS doesn't specify colors, so I need to introduce some. Common harmonious palettes:
- Soft lavender/periwinkle with warm accents
- Sage green with cream
- Dusty blue with coral

Since it's a "saishi" (赛事 = competition/event) CSS file, maybe vibrant but balanced.

Let me go with a fresh palette:
- Primary tint: #eef2ff (soft indigo) to #f8fafc
- Accent: #6366f1 (indigo)
- Text: #1e293b (slate)
- Muted: #64748b

But adding colors to `.app-hero-section .row .col-lg-7` (center-aligned text) - I could add a color to the text. Adding `text-shadow` could be nice.

Let me write the new CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
        color: #78350f;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    }
}
```

Wait - the `.badge.bg-warning` already has `bg-warning` class which gives it a warning background (yellow). Changing background gradient might override Bootstrap's `.bg-warning`. That's a visual change, acceptable. But I should be careful about `color` - Bootstrap's warning badge typically has dark text. Setting color to `#78350f` is fine.

However, `.app-hero-section .row .col-lg-7` is a column containing hero content. Setting text color to slate `#1e293b` might clash if the hero has a light background. But without seeing the original, I'll pick something neutral.

Actually, let me reconsider. The instruction says "Only change colors, shadows, radius, transitions, gradients." I can also add `outline`, `caret-color`, `accent-color`, `filter`, `backdrop-filter`, `opacity`. But I should be restrained - these elements might not need all.

For `.contact-channels-section article` and `.contact-quick-section .contact-card`, adding a semi-transparent white background with backdrop-filter blur creates a glass effect. That's a visual refresh. But adding a background could affect visibility if the parent has a different background. Still, it's visual.

Hmm, but wait - in the original CSS, the padding is `var(--space-md) !important`. That suggests these elements already have some padding, and the media query overrides it with a smaller/larger spacing. Adding background, border-radius, box-shadow is purely decorative.

Let me also consider adding `border: 1px solid` - but border-color is allowed to change, and border-style can change, but border-width cannot change. Adding a border where none existed introduces a border-width, which technically adds layout impact (border-box sizing vs content-box). Many frameworks use `box-sizing: border-box`, so adding a 1px border would not change layout if border-box is used. But to be safe, I'll avoid adding borders. I'll use box-shadow for borders instead.

Also, `.app-hero-section .badge.bg-warning` - adding `border-radius: 999px` gives a pill shape. Bootstrap badges are already pill-shaped if `.rounded-pill` is used, but default badges have `border-radius: 0.375rem`. Changing to 999px is a visual change only (border-radius allowed).

Now let me think about the "symmetric-grid" target - that's more about the grid layout pattern, but since I can't change layout, I'll focus on the "airy-rhythm" visual variant: large radius, soft shadows, breathing room.

Let me refine:

Palette: 
- Use a soft indigo/violet theme that harmonizes with typical modern event sites.
- Text color: `#312e81` (deep indigo) or `#1e1b4b`
- Accent gradient: `#a5b4fc` → `#818cf8`
- Soft shadow: `0 8px 24px rgba(79, 70, 229, 0.12)`

For the badge (bg-warning), keep warm amber:
- Gradient: `#fde68a` → `#f59e0b`
- Text: `#451a03`
- Shadow: `0 4px 12px rgba(245, 158, 11, 0.3)`

For contact cards:
- Background: `linear-gradient(145deg, rgba(255,255,255,0.9), rgba(238,242,255,0.6))` - but that would make cards opaque-ish. Actually, on mobile, a subtle glass effect is nice.
- Border-radius: 24px (airy)
- Box-shadow: `0 12px 32px rgba(30, 27, 75, 0.08), 0 2px 6px rgba(30, 27, 75, 0.04)` - multi-layer pillowy shadow
- Transition: `box-shadow 0.3s ease, transform 0.3s ease` - but transform changes are not allowed? Actually transform is not in the layout preserve list? Let me check.

The NEVER CHANGE list includes: display, position, grid, flex, width, height, padding, margin, gap, justify-content, align-items, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align. Transform is NOT in the list. But adding a transform on hover would change visual position. Since the original has no hover state for these, I shouldn't introduce `:hover` because that would be adding a selector (pseudo-class) - wait, the selectors must be preserved exactly. Adding `:hover` would change the selector. So no.

But adding `transition` without a hover state does nothing visible unless the property changes. So adding `transition: transform 0.2s ease` on the badge without a `:hover` rule is pointless. I'll add transitions for `box-shadow` and `background-color`, which might change if Bootstrap has hover states... but no, the media query's selectors don't have hover. Still, adding transition is harmless and allowed.

Actually, transitions can be useful if other CSS (not in this file) has hover states for the same elements. So adding transition is fine.

Let me be careful with `backdrop-filter` - it can cause performance issues on mobile, but it's allowed. I'll use a subtle blur.

Now, there's a concern: adding `background` to `.contact-channels-section article` might override a transparent background that lets a background image show through. But the instruction wants visual refresh, so I'll keep it subtle - maybe just a very light background with low opacity.

Actually, let me reconsider. Since I'm told the HTML is fixed and layout must stay the same, adding background gradients is fine. But if the original card had a specific background from another stylesheet, my addition could clash. However, the task is exactly to introduce a fresh palette, so overriding with new colors is the point.

Let me also add `color` to `.app-hero-section .row .col-lg-7` - this affects the whole column's text color. If the hero has a dark background, setting dark text would be bad. Maybe I should set a color that's likely to work on both light and dark? That's impossible. Common hero sections in event sites are light or have an image with white text. The class `.app-hero-section` suggests an app hero. Hard to know.

Given the risk, I could instead set `color` on the badge only, and for the hero column, add a `text-shadow` that's subtle and works in both cases? No, text-shadow color added to dark text on dark bg does nothing.

Alternatively, I could avoid setting `color` on the hero column and instead set `caret-color` or `accent-color`? Those are visual but barely noticeable. Hmm.

Maybe I should just add a subtle `text-shadow` that works regardless: `0 1px 2px rgba(255,255,255,0.4)` - this would create a slight relief on light backgrounds, but on dark backgrounds white glow might look odd. Not great.

Let me think about what's safest. The instruction says "Refresh this CSS visually." I need to make visible changes. Adding `color` to the hero column text is a visible change. Since the original CSS is only a media query with `text-align: center`, the hero text is center-aligned on mobile. The rest of the hero styling comes from elsewhere. I'll assume a light theme (common for modern sites) and set a dark indigo text color.

But wait, `.app-hero-section` might have a gradient or image background. Many app hero sections have dark navy backgrounds. If I set `color: #1e1b4b` it would be invisible. Hmm.

Given the uncertainty, perhaps the best approach is to not force a color on the hero column, and instead focus visual changes on the badge and cards, which have clearer semantics. But then I'm not changing much on the first rule.

Actually, the task says "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since the original has no color values, I need to introduce some. The spirit is to make the file visually distinct. I'll add a `color` to the hero column with a reasonable choice.

Alternatively, I can add `color: inherit;`? That's not a change. I need to add actual colors.

Let me look at the class names:
- `.app-hero-section` - app hero section
- `.badge.bg-warning` - warning badge
- `.contact-channels-section article` - contact channel cards
- `.contact-quick-section .contact-card` - contact quick cards

Given these are likely on a light background (typical SaaS/event pages), I'll use a slate/indigo text color.

Let me finalize the CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
        color: #451a03;
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 242, 255, 0.72));
        border-radius: 24px;
        box-shadow: 
            0 16px 40px rgba(30, 27, 75, 0.08),
            0 4px 12px rgba(30, 27, 75, 0.04);
        backdrop-filter: blur(12px);
        transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
    }
}
```

Wait - I'm adding `background` to the contact cards. But Bootstrap's `.contact-card` might already have a white background. Replacing it with a gradient is a visual refresh. That's fine.

However, there's an issue: `padding: var(--space-md) !important;` - since padding is a layout property and I must keep it similar (±20%), I'm keeping it exactly. Good.

Now, `transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;` - transitions are allowed and don't affect layout.

But `transform` in transition? I removed it. Good, no transform changes.