/* ============================================================
   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 CSS in conservative mode, keeping all selectors and layout properties exactly the same, but changing visual properties like colors, shadows, radius, transitions, etc.

The original CSS is:

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

Wait — this is a very small snippet. The target style is "centered-stage" with dark stage #0f0f1a, premium gold or deep purple accent. Effect variant: soft-shadows — multi-layer soft shadows, large border-radius (12-24px), smooth transitions.

However the original CSS barely has any visual properties. It has:
- text-align: center (layout, cannot change)
- font-size: 0.85rem (typography, cannot change)
- padding: var(--space-md) !important (padding, cannot change)
- media query breakpoint (cannot change)

So what can I change? The selectors must stay identical. I need to add visual properties — colors, shadows, radius, transitions — to these selectors without changing layout.

Let me think about what's appropriate. The original had only these rules. I can add new visual declarations within the same selectors since those don't break layout.

For `.app-hero-section .row .col-lg-7` — I could add color, text-shadow maybe? But text-align: center stays. Maybe add a color for the text? But this is a column container; adding color would inherit to children. That's a visual change.

For `.app-hero-section .badge.bg-warning` — the badge has class bg-warning (Bootstrap). I can override background-color, border-color, box-shadow, border-radius, color. Adding border-radius to a badge — but wait, border-radius is allowed. Padding is not in this rule in the original, so I can add padding? No — padding/margin are layout properties that must "keep similar values, ±20% maximum" if they exist. But adding padding where there was none could change layout. The instruction says "padding, margin (keep similar values, ±20% maximum)". Adding new padding might change the layout. Better avoid adding padding/margin. Actually it says keep similar values if present; adding new ones is risky. I'll avoid adding padding/margin/width/height.

For `.contact-channels-section article, .contact-quick-section .contact-card` — padding uses var(--space-md) !important. I can't change padding, but I could add background, border-radius, box-shadow, border, transitions. But this is a mobile media query context.

Hmm, but the task is to "refresh the visual identity" — these three rules only appear within a media query for max-width: 575.98px. It's a small file fragment (块2/2 = block 2 of 2). So this is a partial file. I should rewrite this block, keeping selectors and layout declarations, changing/adding visual declarations only.

Let me craft a fresh visual treatment aligned with "centered-stage" and "soft-shadows":

- Dark stage background? Could add background-color to these elements. But careful: the hero section column — adding a background to the column might be odd, but it's allowed as a visual property. However, changing the column to have a background could look like a card. Hmm. In mobile, making the hero content centered (already), maybe give the badge a gold accent.

Let me write:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5f3ff;
        text-shadow: 0 2px 12px rgba(15, 15, 26, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f7d774 0%, #e8b53a 100%);
        border: 1px solid rgba(232, 181, 58, 0.45);
        color: #0f0f1a;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(232, 181, 58, 0.25);
        transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.4s ease, border-color 0.4s ease;
    }
}
```

Wait — but I must be careful about font-size: it's a typography property, so I keep it as 0.85rem. I didn't change it. Good.

text-align: center — keep. Good.

padding: var(--space-md) !important — keep exactly. Good.

Now about background colors: the "centered-stage" palette suggests dark stage #0f0f1a background. Adding a dark background to the whole hero column might clash with Bootstrap. But the instruction says target style. Should I add background-color to `.col-lg-7`? That'd make a big dark block on mobile. Hmm. In centered-stage, the content area is bright and the stage is dark. But this is just a column inside a row. Adding background: transparent might be safer, or a gradient.

Actually, conservative mode says: "All color values: background, color, border-color, fill, stroke, outline-color" must change. The original had no colors, so I need to add some to fulfill "Colors throughout the file replaced with fresh palette" — well, there were no colors. So adding colors is the way.

Let me think about what makes sense for mobile hero section. The hero section on mobile: centered text. Adding a subtle text color and text-shadow works. The badge is a "bg-warning" badge — overriding to a gold gradient with dark text, pill radius, soft shadow fits premium gold accent.

The contact cards: soft glassy dark cards with border-radius 16-20px, soft shadows, subtle background gradient. That fits soft-shadows variant.

But wait — there's a concern about specificity/!important on padding. I'm adding background etc. without !important. That's fine.

Also "transition: box-shadow 0.4s ease, transform 0.4s ease" — adding transform transition even though transform isn't set. That's harmless but maybe unnecessary. The variant says "Smooth transitions (0.3-0.5s ease)" — so add transitions on box-shadow, border-color, background. Fine.

Also should I worry about the `.badge.bg-warning` having `border-radius: 999px` — that's a visual change allowed. But Bootstrap badges default to pill already? Actually Bootstrap 5 badge has border-radius: 0.375rem. Overriding to 999px gives pill, allowed.

Do I need to worry that adding a "border" creates layout shift? Border adds to box size if box-sizing is content-box, but Bootstrap sets border-box globally, so border won't change layout dimensions. It's allowed anyway: "border-color and border-style (NOT border-width)". So I can set border: 1px solid ... — wait, that sets border-width (1px) which is prohibited? "border-color and border-style (NOT border-width)" — I shouldn't change border-width. But adding a border where none existed changes border-width from 0 to 1px. Hmm, strictly that's changing border-width. But there was no border at all. The rule says "border-color and border-style (NOT border-width)" — meaning if there's a border, you can change its color/style but not width. Adding a border... risky. To be safe, I should avoid adding borders with width. Instead use box-shadow to simulate borders, or use outline? Outline width also similar issue. Better to avoid adding border entirely, or use box-shadow with 0 0 0 1px color inset? Actually box-shadow can simulate a border: `box-shadow: inset 0 0 0 1px rgba(...)`. That doesn't affect layout and is a shadow. Good approach.

So for the contact cards, instead of border, use inset shadow ring:

```css
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
```

Hmm but the variant example is "0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)". I'll keep those and add the inset ring for definition. That's fine.

For the badge, maybe include a ring too: `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 4px 8px ...`. Actually a gold badge could have a subtle highlight ring.

For `.col-lg-7`, adding color and text-shadow. Should I add a background? The centered-stage style is a dark stage. If the hero section has a dark background already elsewhere, then the column doesn't need one. Adding a dark background to the column might create a big block. But maybe a subtle radial gradient could act as a spotlight. However, adding a background to a Bootstrap column could create a visible panel that doesn't match the original design. In conservative mode, "background" is allowed to change. But since original had none, adding one changes appearance significantly. I think adding a subtle color and text-shadow is safer and enough. But the instruction says "Colors throughout the file replaced with fresh palette" — there were no colors. So I'll introduce the palette through text color, badge, cards.

Alternatively, add a background with a radial spotlight to the hero column:

```css
background: radial-gradient(ellipse at center, rgba(10, 10, 30, 0.0) 0%, transparent 70%);
```

That's meaningless. Better to just leave background transparent and set color.

Actually, maybe I should add `background: transparent;`? No point.

Let me reconsider: The media query is for mobile. The "centered-stage" layout pattern: "Centered content: max-width 720-960px, margin: 0 auto" — but I cannot change layout. The existing CSS only centers text. I can't add max-width or margin auto because that's layout. The target style is "Aggressive only" but the instructions say conservative — layout pattern is just a style guide; I can only apply the color palette.

Color palette: dark stage #0f0f1a, bright content area, premium gold or deep purple accent.

So for the hero column text: bright content color — maybe #f8f7ff (bright content on dark stage). But wait, the hero section background might be light, not dark. Hmm, without seeing the rest of the file, it's risky. But the target style says dark stage, so I'll assume the page is getting a dark theme. This fragment is "块2/2" — block 2 of 2, so it's the second part of the file; the first block likely contains the base styles. The overall refresh targets dark stage.

Let me write the colors:

- `.col-lg-7` color: #f5f3ff (bright content)
- text-shadow: 0 2px 20px rgba(15, 15, 26, 0.4)
- `.badge.bg-warning` background: linear-gradient(135deg, #f9df8f 0%, #d99e2b 100%), color: #0f0f1a, border-radius: 999px, box-shadow: multi-layer soft with gold glow
- Contact cards: background: linear-gradient(165deg, #1a1a2e 0%, #12121f 100%) or rgba-based, border-radius: 18px, box-shadow: soft multi-layer with inset ring

Dark card background: #17172a gradient to #10101c. With the inset ring rgba(255,255,255,0.06).

Also transitions: 0.4s ease.

Now, check 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 and spacing preserved)

Media query preserved: `@media (max-width: 575.98px)` ✓

Layout declarations preserved:
- text-align: center ✓
- font-size: 0.85rem ✓
- padding: var(--space-md) !important ✓

I'm adding new declarations, not changing existing ones.

One more consideration: "transition: ... transform 0.4s ease" — transform is a layout property (transform? Actually transform isn't listed in layout constraints, but it affects rendering. I'm not setting transform, just transitioning it. That's fine. But maybe better to transition color, background, box-shadow.

Let me refine:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5f3ff;
        text-shadow: 0 2px 24px rgba(15, 15, 26, 0.45);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f7dd8a 0%, #e6b23c 55%, #c98a1b 100%);
        color: #14141f;
        border-radius: 999px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.06), 0 20px 40px -10px rgba(214, 164, 42, 0.35);
        transition: box-shadow 0.4s ease, filter 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), #12121f;
        border-radius: 18px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.4s ease, background 0.4s ease;
    }
}
```

Wait — using `background: ..., #12121f` two-layer gradient plus final color — valid CSS. Actually the syntax: `background: linear-gradient(...), linear-gradient(...), #12121f;` would be multiple backgrounds with color only allowed on last layer. `background: linear-gradient(...), #12121f;` — is that valid? The background shorthand: final layer can include a background-color, and it's valid to have `<bg-image>, <bg-color>`. Actually yes: `background: url(...), #fff;` is valid. But with gradients, same: `background: linear-gradient(...), #12121f;` is valid — the color is for the whole element behind the images. However, using `background` shorthand with a color in the final layer works. But the transparency of the white gradient overlay would show the #12121f base. Good.

Actually simpler: set `background-color: #12121f;` and `background-image: linear-gradient(...), linear-gradient(...);`. But using shorthand is fine. Let me use:

```css
background-color: #12121f;
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
```

That's clearer and doesn't risk shorthand issues. But the instructions say "All color values ... background" must change — adding background-color and background-image is fine.

Hmm, but for the badge, Bootstrap's `.bg-warning` sets `background-color: #ffc107` (in Bootstrap 5). My `background: linear-gradient(...)` shorthand overrides it entirely. Good.

For the `.col-lg-7` color — if the hero section has its own text color set elsewhere, this adds specificity. It's a media query; okay.

Should I worry about `filter` transition without filter property? `transition: filter 0.4s ease` — if filter changes later, it transitions. Fine. Or just transition box-shadow and background. Keep it simple.

Also the variant says "Large border-radius (12-24px)" — I used 999px for badge (pill) and