/* ============================================================
   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 with a "centered-stage" target style and "gradient-rich" effect variant. 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. I need to keep all selectors exactly the same, keep layout properties (text-align, font-size, padding) roughly within ±20% (padding could vary slightly but let me keep it similar).

Wait — text-align is in the "NEVER CHANGE" list (text-align, vertical-align are listed under LAYOUT). So I can't change `text-align: center`. Actually looking at the original, `text-align: center` is already there — it's part of the layout that I cannot change. So keep it.

`font-size` is typography — cannot change. Keep `0.85rem`.

`padding` can vary ±20%. `var(--space-md)` — I could change the value? Actually, `var(--space-md)` is a CSS custom property reference. I could potentially change it to a different value, but the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change — those are color/shadow custom properties. `--space-md` is a spacing variable, not color/shadow, so I should keep it. But padding can change ±20%... The safest is to keep `var(--space-md)` as-is since changing it could break layout.

Now, the tricky part: the original CSS has very little to visually refresh. It's just a media query. I need to "refresh" it visually. But I cannot add new selectors or change the structure. Can I add properties within existing rules? The instructions say I can change colors, shadows, radius, transitions, gradients. The original rules don't have any of those properties. 

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

Since the original has no colors/shadows/etc. to change, the only thing I can do is add visual properties to the existing rules while keeping the existing properties. Adding new properties like `background`, `color`, `box-shadow`, `border-radius`, `transition` to existing selectors would be a visual change without breaking layout.

For `.app-hero-section .badge.bg-warning` — this is a warning badge. I could add a gradient background, box-shadow, border-radius, transition. But wait — `.badge.bg-warning` is a Bootstrap badge. The original has `font-size: 0.85rem` in mobile. If I add `background` to it, that would override Bootstrap's `.bg-warning`. That could be a visual refresh. But is it safe? It won't break HTML layout. It changes colors — allowed.

For `.app-hero-section .row .col-lg-7` — text-align is center already. I could add `color`, `text-shadow`, etc. But there's nothing there. Adding `color` to a column div... maybe not ideal since it would affect all text inside. Hmm. But visually, the centered-stage style wants dark stage background and gold/purple accents. 

Actually, let me reconsider. The conservative mode says: "Match properties to selectors — do not add new selectors." But can I add new declarations to existing selectors? The task says: "Only change colors, shadows, radius, transitions, gradients." It doesn't say I can't add those properties where they don't exist. In fact, "refresh this CSS visually" implies I should make the existing rules visually richer.

But I must be careful: adding `background` to `.col-lg-7` would create a giant background block, which could affect the visual layout but not the layout structure. However, since the target is "centered-stage" with a dark stage and gold accents, maybe I should keep it subtle.

Let me think about what makes sense:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — centered content. For "centered-stage", this already centers. I could add:
   - `color` for text
   - `text-shadow` for a spotlight glow
   - But these might be too invasive on a column. 

Actually, since this is a media query for mobile, the col-lg-7 is the hero content column. Adding a subtle text color and text-shadow would give the spotlight feel. But the original probably inherits color from parent. Hmm.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — I can add:
   - `background: linear-gradient(...)` — overriding bg-warning
   - `color` — text color on the badge
   - `box-shadow` — glow
   - `border-radius` — rounded pill
   - `transition`

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — I could add:
   - `background: linear-gradient(...)` — gradient-rich cards
   - `box-shadow` — layered shadows
   - `border-radius`
   - `transition`
   - `border`? Border-color can change, but adding a new `border` with width would be a layout change (border-box? unknown). Actually adding border-width would change layout unless box-sizing is border-box. Let me avoid adding border-width. I could add `outline`? Outline doesn't affect layout. Or I could use `box-shadow` for border effect.

Wait — must preserve `!important` on the padding. Yes, keep `padding: var(--space-md) !important;` exactly.

Also — I should not change `var(--space-md)` since that's a spacing variable. The padding can be within ±20%, but `var(--space-md)` — I could replace it with `calc(var(--space-md) * 0.9)`? No, that's too clever and might not be a valid change. Keep it.

The custom properties I'm allowed to change are `--color-*` and `--shadow-*`. There are none referenced in this snippet. The `--space-md` is not a color/shadow variable, so keep it.

Now let me design the new visual:

Centered-stage palette:
- Dark stage: `#0f0f1a`
- Bright content area
- Premium gold: `#f5c542`, `#e6b32a`, deep purple: `#6a4c93`, `#8b5cf6`

Gradient-rich variant:
- Linear gradients on most backgrounds
- Gradient borders via border-image — but border-image could be risky? It changes border-style. Actually border-image doesn't affect layout; it only affects how the border is drawn. But `border-image` requires `border-style: solid` and `border-width`. If I set `border-image`, I need border-width set too. Adding border-width changes layout. Unless I use `border: 1px solid transparent` then `border-image`. But adding border-width = layout change. Better avoid border-image since it requires border width.

Alternative: Use `box-shadow` to simulate a gradient border (like `box-shadow: inset 0 0 0 1px`). That doesn't affect layout. Actually `box-shadow: inset` with spread 0 and blur 0 creates a ring inside the element — no layout impact. 

Let me craft:

For `.app-hero-section .badge.bg-warning`:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #f7d774 0%, #f5c542 45%, #e09f1f 100%);
    color: #0f0f1a;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(245, 197, 66, 0.35), 0 1px 3px rgba(15, 15, 26, 0.2);
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Wait — `transform` is not in my allowed list? Let me check. Decorations: "transition timing, easing, duration" can change. `transform` is not listed as changeable, and it's not a layout property... but adding a transform on hover would need a `:hover` rule, which I can't add. Adding a transform without hover would change the visual position. Actually transform on the base element would shift it — that's a layout/visual change not allowed. Let me not add `transform`. I'll just use `transition` for box-shadow.

Also, can I add `transition` declaration even though the original has none? The allowed list says "transition timing, easing, duration" — meaning I can change transition properties. Adding them is a change to the transition, which is fine. But without a hover state, transitions don't do much. Still, for the gradient-rich variant, "smooth long transitions (0.4-0.6s cubic-bezier)" — I'll add transitions.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 15, 26, 0.6) 100%);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(15, 15, 26, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Hmm, but wait — `box-shadow: inset 0 1px 0 rgba(255,255,255,0.15)` is a subtle top highlight, doesn't affect layout.

But should I add a background to these cards? The original has no background — they likely inherit from the page. The contact section might already have cards with backgrounds. Adding a gradient could be a nice refresh. Since "gradient-rich" is the variant, yes.

For `.app-hero-section .row .col-lg-7`:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #0f0f1a;
    text-shadow: 0 2px 24px rgba(245, 197, 66, 0.25);
}
```

Hmm, but adding `color: #0f0f1a` to the column might clash if the hero section is dark. The centered-stage palette: dark stage `#0f0f1a` background, bright content area. If the hero section is the dark stage, then text should be light. But `.col-lg-7` contains the hero content. Without knowing the actual surrounding CSS, adding `color` could be risky but it's a visual change only.

Actually — "Spotlight feel: dark stage #0f0f1a, bright content area". The hero section column is the content area. Maybe the badge is the gold accent. Let me think about what's the safest visual refresh that fulfills the target style.

Actually, maybe I should keep the col-lg-7 minimal — just add a subtle text-shadow or color that fits. But if the parent already sets color, adding color overrides inheritance. The original snippet doesn't have any color declarations. Since I'm told to use the centered-stage palette, I'll assign colors.

Let me reconsider: The task is a bit odd because this CSS snippet has almost nothing visual. The spirit is: apply the target style to what's here. I'll add:

1. Badge: gold gradient background, dark text, glow shadow, pill radius, transition.
2. Cards: dark gradient background, gold-tinted shadow, radius, transition.
3. Hero column: keep text-align, add color? Or maybe add a radial-gradient background for spotlight? That could be huge. Avoid background on the column — just a text color/shadow.

Actually, adding `background` to `.col-lg-7` would create a big block with a radial gradient — that's the "spotlight" feel but risky since it might cover the entire column background and conflict with the hero section's own background. Avoid.

Let me only add `color` and `text-shadow` to the hero column. But if the hero section background is dark (#0f0f1a), then text should be light (#f8f7ff or similar). But the palette says "bright content area" — maybe the hero content sits on a bright area. Hmm.

Centered-stage palette description:
- "Spotlight feel: dark stage #0f0f1a, bright content area"
- "Premium gold or deep purple accent"

So the dark stage is the page background, the content area (where the text is) is bright. So content text would be dark on a bright background. So `color: #0f0f1a` on the hero column text makes sense for "bright content area". And the badge is gold.

Wait, but the badge is inside `.col-lg-7`? Yes — `.app-hero-section .badge.bg-warning` is a descendant of `.app-hero-section`. Since the selector list in the media query includes both `.app-hero-section .row .col-lg-7` and `.app-hero-section .badge.bg-warning`, the badge is likely inside the col-lg-7. So a dark text color `#0f0f1a` on the column, and the badge has a gold gradient with dark text too — consistent.

But hold on — if I set `color: #0f0f1a` on the col-lg-7, the badge's own `color` (which I set) will override. Good.

Now, the contact cards — dark gradient background. The contact section is likely on the dark stage. A deep purple gradient with gold shadow fits. Let me use:
- `background: linear-gradient(145deg, rgba(106, 76, 147, 0.35) 0%, rgba(15, 15, 26, 0.85) 100%);`
- or a purple-to-dark gradient.

Actually the palette: dark stage `#0f0f1a`, bright content, gold/purple accent. Contact cards on dark stage: dark gradient background with purple tint, gold shadow, light text? I won't set color (leave inherited).

Let me now construct the output carefully, preserving the exact selectors and original declarations.

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

I must preserve:
- `@media (max-width: 575.98px)` — breakpoint unchanged.
- Selectors exactly.
- `text-align: center;` — keep (it's layout, can't change).
- `font-size: 0.85rem;` — keep.
- `padding: var(--space-md) !important;` — keep.

Add visual properties.

Let me also think: the "transition timing, easing, duration" — I can add `transition` properties. The variant says "Smooth long transitions (0.4-0.6s cubic-bezier)". Use `cubic-bezier(0.22, 1, 0.36, 1)` (easeOutQuint-ish) or `cubic-bezier(0.4, 0, 0.2, 1)`. I'll use `0.5s cubic-bezier(0.22, 1, 0.36, 1)`.

Now, about `border-radius` — allowed. Badge: `999px` (pill). Cards: `20px` radius.

Shadows:
- Badge: `box-shadow: 0 6px 20px rgba(245, 197, 66, 0.35), 0 2px 6px rgba(15, 15, 26, 0.2);`
- Cards: multi-layer: `box-shadow: 0 16px 40px rgba(15, 15, 26, 0.35), 0 4px 12px rgba(106, 76, 147, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);`

Gradient borders: I can simulate with `box-shadow` inset:
- Cards: `inset 0 0 0 1px rgba(245, 197, 66, 0.18)` — a gold ring inside. That's a gradient-border-ish effect without layout impact.

Text shadow for hero column:
- `text-shadow: 0 2px 20px rgba(245, 197, 66, 0.18);` — subtle gold glow.

But wait — do I want a text-shadow on a whole column? Subtle gold glow works for spotlight.

Also, for the hero column, maybe add `color: #1a1a2e`? The palette dark stage is `#0f0f1a`. Let me use `#0f0f1a` for text on bright background. Hmm, but if the hero content