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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The user wants me to rewrite a small CSS snippet. Let me analyze:

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

Constraints:
- Keep selectors exactly
- Keep layout properties: text-align, font-size, padding (within ±20%)
- Can change colors, shadows, radius, transitions, gradients

This is a tiny media query block. I need to add visual properties that fit the "dense-dashboard" style with "gradient-rich" variant. But I can't change the existing properties' values? Wait, let me re-read.

"Only colors, shadows, and decorative properties may change."

The original has:
1. `text-align: center;` - text-align is a layout property listed under "NEVER CHANGE": text-align, vertical-align
2. `font-size: 0.85rem;` - font-size is under typography never change
3. `padding: var(--space-md) !important;` - padding can keep similar values ±20%

So I keep those. But I can add new decorative properties to each rule. Since this is a mobile media query, adding gradients/shadows to these elements might be appropriate.

Let me think about what to add:

1. `.app-hero-section .row .col-lg-7` - text-align center. I could add a text-shadow, or maybe a background gradient? But that might affect layout? background doesn't affect layout. I could add a subtle gradient background. But careful: hero section col-lg-7 with a gradient background might be too much. Since it's dense-dashboard and gradient-rich, I could add a subtle backdrop-filter or something. But it's a column in a row. Adding background could alter appearance but not layout. I'll add a subtle gradient background and border-radius.

Actually, the instructions say "gradient on most backgrounds" and "gradient borders via border-image". I should be careful with a column - adding a full background might look odd. But the task says to be aggressive with visual change. Let me add a background gradient, border-radius, maybe padding? No, padding cannot change much - only the three existing rules have padding. Actually I can add padding? The rule says padding/margin "keep similar values, ±20% maximum" - meaning if I change them. I should avoid adding new padding to elements that don't have it because that could change layout. So I'll stick to colors, shadows, radius, gradients, transitions.

2. `.app-hero-section .badge.bg-warning` - badge with bg-warning. I can add background gradient (overriding bg-warning? Since this class uses bootstrap bg-warning, adding a gradient background would override the background-color). I can use a gradient with warning-ish colors. Also add border-radius, box-shadow, transition.

Wait - the original CSS has no color properties at all. The instruction says "All color values: background, color, border-color..." must change. But there are no color values in the original. So I need to add them. This is a "refresh" - I add visual properties that weren't there before. That's the only way to change the visual identity.

But careful: The file fingerprint is given and this is "块2/2" (block 2 of 2). So this is part of a larger CSS file being rewritten in chunks. I only have this chunk. I need to rewrite this chunk with visual additions.

Let me craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(148, 163, 184, 0.04) 50%, transparent 100%);
        border-radius: 1rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px -12px rgba(30, 41, 59, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #f97316 100%) !important;
        border-radius: 999px;
        box-shadow: 0 4px 14px -4px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 1rem;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(241, 245, 249, 0.6) 100%);
        border: 1px solid rgba(51, 65, 85, 0.08);
        border-image: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(148, 163, 184, 0.1)) 1;
        box-shadow: 0 12px 32px -12px rgba(30, 41, 59, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 18px 40px -14px rgba(30, 41, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
}
```

Wait - adding :hover pseudo-classes. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are selectors that need to be kept exactly. If I add a new :hover selector that wasn't in the original, am I changing the selectors? The rule says "Selectors (CRITICAL - HTML is fixed): Class names keep EXACTLY ... Pseudo-classes (:hover, :focus...) keep exactly". I interpret that as: existing selectors must be preserved as-is; I shouldn't remove or rename them. Adding new selectors could be risky because the HTML is fixed, but adding :hover doesn't change HTML. However, the instruction says "Output ONLY the rewritten CSS, preserving ALL selectors and layout exactly." Adding new selectors is a gray area.

The self-check says "Every selector character-for-character preserved?" - this suggests all original selectors must appear. It doesn't necessarily forbid adding new ones. But to be safe in conservative mode, I might avoid adding :hover rules and just add decorative properties to the existing rules. However, the "gradient-rich" variant asks for smooth long transitions, and a transition on a hover state without a hover rule is fine (transition from base to whatever bootstrap provides). But the badge hover might be handled by bootstrap's existing .badge:hover? Actually bootstrap doesn't define badge hover.

Conservative mode: "Match layout" - adding pseudo-selectors doesn't change layout. But the instruction is quite strict: "preserving ALL selectors and layout exactly". I think preserving all original selectors means keeping them unchanged, but adding can be acceptable as long as the originals are intact. Given the task explicitly asks for a visual refresh and the original contains no color values, I need to add values. Adding a hover state is a visual change that doesn't affect layout.

Hmm, but I want to be careful. The self-check: "Every selector character-for-character preserved?" If I add selectors, the answer is still yes for the originals. I'll add the hover selectors since they're purely decorative and enhance the "gradient-rich" feel with transitions. Actually, let me reconsider - "transition" without a hover state is pointless. The variant explicitly requests "Smooth long transitions (0.4-0.6s cubic-bezier)". Transitions only matter when something changes, e.g., on hover. I'll include hover states.

Now about `border-image` + `border-radius`: border-image and border-radius don't work well together (border-image overrides radius rendering). Actually, when you use border-image, the border-radius is not applied to the border image in most browsers. But it's okay; the background still gets clipped to border-radius? Actually, background-clip works with border-radius, but the border-image won't follow the radius. Setting both border-radius and border-image can cause a rendering conflict where border-image replaces the border and ignores radius. To be safe, maybe I'll use a regular border-color instead of border-image, or use a pseudo-element. But adding a background gradient and a border with rgba color is fine. The "gradient borders via border-image" is from the variant but it's a suggestion. Since conflicts can happen, maybe I'll do border-image on the article but not set border-radius? But the variant asks for radius changes too.

Let me reconsider: For `.contact-channels-section article` and `.contact-quick-section .contact-card`, I can use:
- background: linear-gradient(...)
- border: 1px solid transparent with background-clip? A common gradient border trick: `border: 1px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(...) border-box;` That works with border-radius and is a nice gradient border effect. But adds complexity. It also is a "background" so it's fine.

Let me craft carefully:

```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.85) 100%) padding-box,
                linear-gradient(135deg, rgba(59, 130, 246, 0.45) 0%, rgba(148, 163, 184, 0.15) 50%, rgba(59, 130, 246, 0.3) 100%) border-box;
    border: 1px solid transparent;
    box-shadow: 0 16px 40px -16px rgba(30, 41, 59, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```

But wait - padding is `var(--space-md) !important` - that's a layout property, I keep it exactly. Adding `border: 1px solid transparent` adds a border which affects layout (adds 2px). Maybe okay? The instruction says "border-color and border-style (NOT border-width)" may change. It says NOT border-width - meaning don't change border-width. If the original had no border, adding a border-width of 1px changes layout slightly. To be safe, I should avoid changing border-width. I'll use box-shadow for borders instead, or use outline which doesn't affect layout? Actually outline is in the list that can change: "outline styles (color, type)". But border-width is not allowed to change.

So I should NOT add a border where there wasn't one. Instead, use `box-shadow: 0 0 0 1px rgba(...)` to simulate a border. That's a shadow, allowed.

Let me revise:

```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.7) 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15), 0 16px 40px -16px rgba(30, 41, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```

That's good.

For the hero column:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    border-radius: 2rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
```

Hmm, adding background to a column could look like a giant blob; but radial-gradient subtle is fine.

For the badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #f97316 100%) !important;
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Note: bootstraps `.bg-warning` sets `background-color: #ffc107`. Adding a gradient background with `!important` to override it. Good. The badge also may have padding from bootstrap (fine). `border-radius: 999px` makes it a pill; bootstrap badges already have `border-radius: 0.375rem` (or pill if .rounded-pill). Adding 999px is a visual change.

Also add hover:
```css
.app-hero-section .badge.bg-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(245, 158, 11, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
```

Now, I need to also make sure "Colors throughout the file replaced with fresh palette" - the original had no colors, so adding fresh ones is fine. Also custom properties: I can define `--space-md`? No - that's a variable used for padding; changing it could affect layout globally, and it's defined elsewhere. Don't touch.

Also the instruction mentions "CSS custom properties (--color-*, --shadow-*) values" may change. But since I don't know what's in block 1, I won't invent new ones. I'll just use literal color values.

Let me double-check the allowed changes:
- background: linear/radial gradients ✓
- border-radius ✓
- box-shadow ✓
- transition ✓
- transform? Hmm, transform is not explicitly listed in "MUST CHANGE" nor in "NEVER CHANGE". Layout properties list includes "position", "display", etc., but transform isn't listed. Transform on hover could affect layout (transform creates a stacking context but doesn't reflow). It's a visual effect. I think it's acceptable, but to be conservative I could avoid transform on the column. On a badge, a tiny translateY is a common decorative hover. It doesn't change document flow. I'll keep it. Actually, the never-change list doesn't mention transform explicitly, so it's allowed. But the "Layout" category says "width, height, padding, margin..." - transform is not in that list. OK.

Now, should I include media query-level changes? The @media condition must stay exactly `(max-width: 575.98px)`. Yes.

Formatting: Only the CSS, no markdown fences, no explanations. First character = `@`.

Let me also consider the original had `!important` on padding. I'll keep that.

Final check on selectors:
- `@media (max-width: 575.98px)` ✓
- `.app-hero-section .row .col-lg-7` ✓
- `.app-hero-section .badge.bg-warning` ✓
- `.contact-channels-section article, .contact-quick