/* ============================================================
   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;
    }
}

We need to modify the CSS. The original is a media query block. Only visual changes allowed. We can change colors, shadows, radius, transitions. But this snippet has no colors, shadows, radius, transitions. It has text-align, font-size, padding. Padding is layout, can change ±20%? The instruction says padding, margin keep similar values ±20% max. But original has var(--space-md) !important. We can't change class names or selectors. We can adjust padding value slightly, but we shouldn't change layout significantly. However the target style is centered-stage and tight-rhythm. But this is only a small media query. We need to produce output that is visually refreshed. Maybe add some subtle visual properties? But the rule says only colors, shadows, radius, transitions may change. But we can also change padding within ±20%. We need to output CSS identical selectors but alter values.

Let's analyze original:

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

We can change visually: for first rule, text-align is layout/typography? Actually text-align is listed as "text-align, vertical-align" in layout that should not change? Wait: "text-align, vertical-align" listed in LAYOUT section that must not change? Let's check: Under "📐 LAYOUT" it says "text-align, vertical-align" as part of layout properties that are never change? Actually yes: "text-align, vertical-align" is in the "NEVER CHANGE" group. So text-align cannot change. Font-size also cannot change. Padding can change ±20% but original is variable var(--space-md). We can perhaps replace with a literal value? But that changes the custom property usage? The rule says "CSS custom properties (--color-*, --shadow-*) values" can change. But --space-md is not a color/shadow custom property; it's a spacing token. Changing the value of var(--space-md) would require changing the custom property definition, which isn't in this snippet. We shouldn't alter the custom property name. We could leave padding as is. But then what to change? We need to refresh visual identity. Maybe add border-radius? But cannot add new properties? Actually the allowed changes list "only colors, shadows, radius, transitions" - we can add border-radius or box-shadow even if not present. But we must be careful not to change layout. Adding box-shadow might be okay, but in a mobile media query, maybe not ideal. We can add color, background-color, border-radius, transition, box-shadow maybe on those elements. But the task says "Refresh this CSS visually" meaning we should output rewritten CSS, likely with altered values. Since no visual properties exist, we can add some? But the instruction says "You MUST CHANGE (visual identity only)" but if original doesn't have those properties, we can introduce them? Usually in such tasks, we are expected to produce a diff-like rewrite: same selectors, but with new visual properties. Since original is minimal, we can add color/background/radius to those targeted elements.

But we must maintain layout constraints. Adding background-color may change appearance but not layout. Adding color may affect text. However there's a risk: .app-hero-section .row .col-lg-7 is a column, adding color is fine. .badge.bg-warning already has warning color from Bootstrap, but we can override with custom color? That's visual. We can set a background gradient, box-shadow, border-radius. For contact cards, adding border-radius etc. But be careful: the original is within a media query for max-width 575.98px. We can keep exactly that. We'll rewrite with same selectors.

Need to adhere to "centered-stage" and "tight-rhythm". But not required to aggressively change layout. We can add subtle shadows, small radius, dark stage colors.

Let's create a fresh palette. Dark stage #0f0f1a, premium gold accent #d4af37 or deep purple. Since it's mobile, we can do subtle background, text color, border-radius.

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

Rewrite:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #e8e6f0; /* maybe? But this is a column, might inherit */
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); /* visual */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f5d76e, #d4af37); /* override bg-warning */
        color: #1a1a2e;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(212, 175, 55, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(212,175,55,0.15);
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        transition: box-shadow 0.25s ease, background 0.25s ease;
    }
}

But is adding border width? Border-width not in original; adding border-style and border-color allowed, but border-width? "border-color and border-style (NOT border-width)" are allowed to change. But adding border-width would be new. We can add border: 1px solid ... That includes width 1px, which might affect layout. Avoid adding border if width not allowed? It says "border-color and border-style (NOT border-width)" meaning we can change existing border color/style but cannot change the width. If original has no border, adding a border width changes layout. Better not add border to avoid layout shift. Instead use box-shadow which is allowed and doesn't affect layout.

Similarly padding we can leave. For background, adding background color doesn't affect layout. border-radius doesn't affect layout? It may affect background clipping, but not layout. box-shadow doesn't affect layout. transition doesn't. text-shadow doesn't. So we can add those.

But note: The original has !important on padding. We should keep it to preserve specificity and avoid overriding. We can include it unchanged.

For .app-hero-section .badge.bg-warning: We can add background (gradient), color, border-radius, box-shadow, maybe backdrop-filter? But avoid if it could clip. Keep simple.

For .app-hero-section .row .col-lg-7: text-align center is unchanged. We can add color? That might make all text in that column a certain color, could be okay. But maybe the hero section has a heading and subtext. It may be okay. But to avoid unintended, we can just add a subtle drop shadow to the text? text-shadow could affect readability but okay. But might not be desired. We can also add background: transparent? That does nothing. Perhaps better to add a subtle gradient background to whole column? That could affect background of hero content area, but not layout. Could be okay. But we need to be cautious: .col-lg-7 is a column inside a row, adding background would create a colored box. But since target style "centered-stage", maybe dark background and gold text? But original column text centered, likely hero text. We can set color to #f8f7fc and text-shadow. That would change text color from default (likely dark). Could improve. But need to ensure it's not too aggressive.

However, the instructions say "HTML is FIXED — only colors, shadows, and decorative properties may change." So changing color is allowed. Adding text-shadow allowed. Let's produce a coherent design.

Need output only CSS, no markdown. Also "First character = first CSS character". So start with @media.

Let's rewrite:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5f3fa;
        text-shadow: 0 2px 12px rgba(212, 175, 55, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd75e 0%, #d4af37 100%);
        color: #1a1a2e;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(15, 15, 26, 0.85) 0%, rgba(30, 27, 50, 0.9) 100%);
        border-radius: 6px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.08);
        transition: box-shadow 0.2s ease, background 0.2s ease;
    }
}

But note: Adding transition transform on badge changes behavior but not layout. That's fine. But "transition timing, easing, duration" allowed. "transform" is not listed as allowed? "filter, backdrop-filter" allowed. But transform is a layout property? Actually transform can change visual position but not layout flow. But the allowed properties list doesn't mention transform, but it's not explicitly forbidden either. To be safe, don't add transform property. We can add transition of box-shadow only. Or just omit transition if not needed. The task requires transitions must change? "You MUST CHANGE ... transition timing, easing, duration" means if original has transitions, change them. Original has no transitions. So no need to add? But "visual refresh" suggests we can.

To be conservative, avoid transform. For transition, we can add `transition: box-shadow 0.25s ease, background-color 0.25s ease;`. That's fine.

Also, the original badge uses Bootstrap `bg-warning`, which sets background-color. Our gradient overrides background-image? Actually setting `background: linear-gradient(...)` will override background-color. Good.

Need to check the rule "border-radius (visual rounding only)" - allowed. Good.

Need to ensure padding unchanged. We keep var(--space-md) !important exactly.

Need to ensure text-align and font-size unchanged.

Now, about "centered-stage" style: dark stage #0f0f1a, bright content area. We set contact card background to dark-ish gradient with gold ring shadow. But the contact cards are on the page, maybe they already have a background. We are overriding with dark gradient. That's fine. Specifically in media query for mobile, cards appear dark. But if original cards were white, we change to dark. That's a bold visual identity. But "centered-stage" target: dark stage, premium gold accent. Good.

However, we should consider `.app-hero-section .row .col-lg-7` text color #f5f3fa. That changes hero column text to white. This might be okay if hero section has a dark background already. But if not, might reduce readability. But we also add text-shadow. Could be okay. Alternatively, use color: #2a2740 maybe. But target says "Spotlight feel: dark stage #0f0f1a, bright content area". That means content area bright, so text should be dark? Actually spotlight feel: dark stage (background) and bright content area (light background). So the hero section might be a dark stage, and content area bright. But we don't know. It's tricky.

Maybe better to keep the hero column text as default and just add subtle gold underline? But no decoration. Let's think about "centered-stage" as overall theme: dark background, gold accents, centered content. The media query targets `.app-hero-section .row .col-lg-7` for text-align center. We can add a `background` to the badge as gold, and contact cards dark with gold shadow. For the hero column, maybe we can add `color: #0f0f1a` if it's on a bright background? Hmm.

Without full context, safest is to add minimal visual properties that don't harm readability: for the column, add `color: #e6dbb3;`? That's a gold text. But if background is white, gold text is unreadable. Bad.

Maybe just add a subtle letter-spacing? No, letter-spacing is typography and cannot change.

Maybe we can add `caret-color: #d4af37;` and `accent-color: #d4af37;` to the column? That's allowed but doesn't affect much.

Could add `background: linear-gradient(180deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0) 100%);` to the hero column? That would be a decorative gold tint background, not affecting layout. That's safe. Then set text color? Maybe leave default. But adding a background to the column could be a nice spotlight effect. But if there is already a background on the column, we override. But that's fine.

Let's create an output that is self-consistent:

- Hero column: subtle gold gradient background, color remains inherited. But if we don't change color, the rule only changes text-align. To meet "must change colors", we can add a background gradient, caret-color, accent-color.
- Badge: gold gradient, dark text, radius, shadow, transition.
- Contact cards: dark stage gradient, gold ring shadow, radius, transition.

But we must ensure we don't introduce `background-clip` etc. Not needed.

Let's produce:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, rgba(15, 15, 26, 0.25) 0%, rgba(15, 15, 26, 0) 100%);
        caret-color: #d4af37;
        accent-color: #d4af37;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe28a 0%, #d4af37 100%);
        color: #1a1a2e;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(212, 175, 55, 0.5), 0 1px 2px rgba(0, 0, 0, 0.2);
        transition: box-shadow 0.2s ease, filter 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #16132b 0%, #0f0f1a 100%);
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        transition: box-shadow 0.25s ease, background 0.25s ease;
    }
}

Is `background` in contact card dark, but text inside might be dark? Original text may be white if card is dark? Hard to know. But the overall "centered-stage" target wants dark stage. Good.

Need to ensure the `background` shorthand includes background-color and background-image. That's fine. But in media query, the contact cards may have hover states defined elsewhere. This is okay.

We should not add new comments. Output only CSS.

But we must be careful: "transition timing, easing, duration" change means we can add it. We have.

"filter, backdrop-filter" allowed. We didn't use.

"opacity" allowed. Could add opacity? Not needed.

"outline styles" allowed. Could add outline? Not necessary.

Now, is the use of `#0f0f1a` and `#d4af37` consistent? Yes.

Let's double-check for violations:
- Selectors unchanged? `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article, .contact-quick-section .contact-card` yes.
- Media query unchanged.
- text-align center unchanged.
- font-size unchanged.
- padding unchanged with !important.
- Did we change display or position? No.
- Did we change width/height? No.
- Did we change margin? No.
- Did we change line-height etc? No.
- Did we change font-family? No.
- Did we add border-width? No, only box-shadow simulates border.
- Did we add border-radius? Yes, allowed.
- Did we add background? Yes, allowed as color/decorative.
- Did we change text color? Yes, allowed.

Everything seems good.

But perhaps adding background to `.app-hero-section .row .