/* ============================================================
   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 rewrite the given CSS according to the target style. The input CSS is minimal, a media query with some styles. We need to preserve selectors exactly, and only change visual properties (colors, shadows, radius, transitions, gradients, etc.). The layout properties like padding, margin, font-size, text-align are not to be changed? Actually padding is a layout property, but the instructions say "padding, margin (keep similar values, ±20% maximum)" so we can adjust slightly. But in the input there is `padding: var(--space-md) !important;` - we need to preserve the var usage? Actually `var(--space-md)` is a custom property value; we could change the value of `--space-md` if defined elsewhere, but here it's just referenced. Since we cannot change the layout structure, we should keep the same padding value or within ±20%. But we are told "Only colors, shadows, and decorative properties may change" and "padding, margin (keep similar values, ±20% maximum)" so we can adjust slightly. However, the input is a media query block with selectors and declarations. We need to output the entire CSS with visual refresh. Since there are only these rules, we need to apply the target palette and effect variant to them. But there are no colors or shadows in the original. So we need to add or modify only what exists? We cannot add new properties if they weren't there? The instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can modify existing declarations, and potentially add new visual declarations? But the original doesn't have box-shadow or border-radius. We might add them to selectors if appropriate. The selectors are:
- `.app-hero-section .row .col-lg-7` with text-align: center (text-align is not changeable)
- `.app-hero-section .badge.bg-warning` with font-size: 0.85rem (font-size is not changeable)
- `.contact-channels-section article, .contact-quick-section .contact-card` with padding: var(--space-md) !important (padding can change within ±20%)

But if we want to refresh visually, we can add color, background, border-radius, box-shadow, etc. to these selectors. However, we must preserve the exact selectors and the property names that exist? We can add new declarations, but we must not change layout. Adding background color or box-shadow is fine. But we need to be careful: The output should be a rewritten CSS file, but we only have this snippet. We can output a CSS file that includes only these rules, possibly with added visual properties. But the request says "File: assets/css/saishi.css#块2/2" meaning this is the second block of the file. We are supposed to rewrite this block. So we output the rewritten block. We can add new declarations as long as they don't change layout. But we must keep all existing declarations? We can change values of visual properties, and we can add new visual properties. But we should also consider the target style: editorial-magazine, airy-rhythm. The selectors are for a hero section, a badge, and contact cards. We can add background colors, border-radius, shadows, maybe transitions. However, we must be careful: The selector `.app-hero-section .row .col-lg-7` is a column, adding background would change appearance but not layout. But maybe not appropriate. The contact cards could get background, border-radius, shadows.

But the original only has padding for the contact cards. We can add background, border-radius, box-shadow, transition. Also for the badge, we can add background color? The badge has class `badge bg-warning` from Bootstrap, likely it already has background color. But we can override with a new background color, border-radius, box-shadow. For the hero column, we can add text-shadow? Not needed.

Let's interpret the instructions strictly: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we should include the original declarations but possibly change their values if they are among the allowed categories. `text-align` is not allowed. `font-size` is not allowed. `padding` is allowed only within ±20% but it's a layout property. We can keep it exactly as is. The only changes we can make are to colors, shadows, radius, transitions, gradients. So we need to add such properties. Since there are no existing colors, we add them. The output should contain the same selectors with their original declarations plus new declarations for colors, shadows, radius, transitions. But we must not alter the original declarations' values except allowed ones. We'll keep `text-align: center;`, `font-size: 0.85rem;`, `padding: var(--space-md) !important;` exactly? We can adjust padding slightly within ±20%, but since it's a var, we don't know the actual value. Better to keep it as is.

Now, we need to apply the editorial-magazine palette:
- Backgrounds: cream/beige #f5f1e8, ink black #1a1a1a, accent deep red #c44536 or olive #6b705c.
- We can use these colors for text, backgrounds, shadows.

Effect variant airy-rhythm:
- Generous spacing (but we can't change padding much), large border-radius (16-28px), soft pillowy shadows, breathing room.

We'll add to the media query:
- For `.app-hero-section .row .col-lg-7`: maybe add `color: #1a1a1a;` or if on cream background, but we don't know. We can add text-shadow? Perhaps add a subtle text-shadow for editorial feel? But text-shadow is allowed. We can add `text-shadow: 0 2px 4px rgba(26,26,26,0.08);`. Also maybe `background: rgba(245,241,232,0.4);`? But that could alter layout? Background doesn't affect layout. But adding background to a column might be odd. Maybe not. Better to focus on the badge and contact cards.

- For `.app-hero-section .badge.bg-warning`: we can override the background color to accent? But `bg-warning` is a Bootstrap class that sets background-color: #ffc107. We can override with `background-color: #c44536; color: #f5f1e8; border-radius: 16px; box-shadow: 0 4px 12px rgba(196,69,54,0.25);` But note `bg-warning` in Bootstrap also sets color? Usually badges have color. We can set `color: #f5f1e8` (allowed? color is a color property). We can also set `box-shadow` and `border-radius`. We need to keep `font-size: 0.85rem;` unchanged.

- For `.contact-channels-section article, .contact-quick-section .contact-card`: add `background-color: #ffffff;` or cream, `border-radius: 20px;`, `box-shadow: 0 12px 32px rgba(26,26,26,0.08);`, maybe `transition: transform 0.3s ease, box-shadow 0.3s ease;` but transform is a layout property? transition property is allowed. The property value "transform" is fine, but transform itself is not in the original. We can add transition for background-color, box-shadow, border-radius. But we cannot add transform. We can add `transition: background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;`. That's allowed.

Also, the target style mentions "generous spacing" but we don't have to change padding? We can change the existing padding value to a slightly larger one within ±20%. The original: `var(--space-md)` — if we change it to `var(--space-lg)` or a pixel value, that would be a different variable. But we don't know what `--space-md` equals. We can leave it as is. Or we can add `padding: calc(var(--space-md) + 4px) !important;` but that's tricky. Better to keep.

We also need to consider the user wants "refreshed visual identity". The original CSS has no visual properties, so adding them is appropriate.

We must output only the rewritten CSS, no markdown fences, no explanations.

Let's construct the output. We need to include the same media query, same selectors, and the original declarations (unchanged) plus new declarations.

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'll add:

For `.app-hero-section .row .col-lg-7`:
- `color: #1a1a1a;`
- `text-shadow: 0 2px 8px rgba(245,241,232,0.5);` But if the background is cream, a light shadow might be invisible. Perhaps `text-shadow: 0 2px 4px rgba(26,26,26,0.08);`

For `.app-hero-section .badge.bg-warning`:
- `background-color: #c44536;` (override warning)
- `color: #f5f1e8;`
- `border-radius: 24px;`
- `box-shadow: 0 8px 20px rgba(196,69,54,0.25);`
- `transition: background-color 0.3s ease, box-shadow 0.3s ease;`

For the contact cards:
- `background-color: #fff;` or `#f5f1e8`? The palette has cream/beige backgrounds. If the page background is cream, cards can be white or slightly different. Use `#faf7f0` or `#fff`. Let's use `#ffffff`. 
- `border: 1px solid rgba(26,26,26,0.08);` (border-color is allowed, border-style is allowed, but width must stay same? We can add border? Adding border changes layout if border-box? But border-width adds to size unless box-sizing: border-box. We shouldn't add border to avoid layout change. Better avoid border.)
- `border-radius: 24px;`
- `box-shadow: 0 16px 40px rgba(26,26,26,0.06), 0 4px 12px rgba(26,26,26,0.04);`
- `transition: background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;`

Also, we can add a subtle gradient to the contact cards? Gradients are allowed. Maybe `background: linear-gradient(145deg, #ffffff 0%, #f5f1e8 100%);` But if the parent background is cream, this might blend. Let's do a gradient for editorial feel: `background: linear-gradient(145deg, #ffffff 0%, #faf6ef 100%);` But then box-shadow etc.

But we must be careful: The original only specifies `padding` for the contact cards. Adding background to `article` may affect styling but not layout. That's fine.

We also need to ensure we don't change any selector characters. The selector list is:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
```
We'll keep it exactly.

Now, the instruction "Only change colors, shadows, radius, transitions, gradients." That means we can only modify these property values, and add these types. But can we add `color` to the hero column? Yes, color is a color property. Can we add `text-shadow`? Yes, shadow. Can we add `background-color`? Yes. Can we add `border-radius`? Yes. Can we add `box-shadow`? Yes. Can we add `transition`? Yes. Can we add `background` with linear-gradient? Yes. So this is compliant.

But we must not change `font-size`, `text-align`, `padding`. We will keep them exactly.

Let's write the CSS. We need to decide on values.

Target style: editorial-magazine, airy-rhythm. So large border-radius: 16-28px. We'll use 20px and 24px.

Shadows soft pillowy: 
- `box-shadow: 0 12px 32px rgba(26,26,26,0.08), 0 4px 12px rgba(26,26,26,0.04);`
- For badge: `box-shadow: 0 6px 16px rgba(196,69,54,0.3);`

Colors: cream #f5f1e8, ink #1a1a1a, accent #c44536.

Let's produce:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 2px 8px rgba(26,26,26,0.06);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 24px;
        box-shadow: 0 8px 20px rgba(196,69,54,0.25);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #faf6ef 100%);
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(26,26,26,0.06), 0 4px 12px rgba(26,26,26,0.04);
        transition: background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
    }
}
```

Wait, we added `background: linear-gradient(...)` which is a gradient. Good. But we need to consider that the original has `padding: var(--space-md) !important;` and we added `background` etc. That's fine.

But does the hero column need text-shadow? It might be okay. However, maybe it's unnecessary. We can leave it if it's a shadow property. The instructions say "Only change colors, shadows, radius, transitions, gradients." So adding a text-shadow is allowed. But we should ensure it doesn't ruin readability. A subtle shadow is fine.

But wait: The target style mentions "Asymmetric grids" etc., but we can't change layout. The variant "airy-rhythm" with generous spacing, large border-radius, soft pillowy shadows. So our additions align.

We might also consider adding a `::-moz-focus-inner` etc no.

Let's also think about the badge: `bg-warning` in Bootstrap sets `background-color: #ffc107 !important`? Actually Bootstrap's `.bg-warning` has `background-color: #ffc107 !important;` unless overridden. Our selector `.app-hero-section .badge.bg-warning` has specificity 0,3,0? Actually `.app-hero-section` (0,1,0) + `.badge` (0,1,0) + `.bg-warning` (0,1,0) = 0,3,0, which is higher than Bootstrap's `.bg-warning` (0,1,0). So our background-color will override, no need !important. But if Bootstrap uses !important, our rule without !important won't override. Actually Bootstrap's utilities are usually !important? Let's recall: Bootstrap 5 utility classes like `.bg-warning` do not use !important? Actually in Bootstrap 5, background utilities do not use !important? Let's check: Bootstrap 5's utilities are generated with `!important`? For example, `.text-danger { color: #dc3545!important; }` and `.bg-primary { background-color: #0d6efd!important; }`. Yes, many utilities use !important. So to override, we need `!important` or use a different property like `background` (shorthand) also with !important. But we can add `!important` to our declaration? The instruction says we must not change the selector, but can we add `!important`? It's a value modifier, not a property. It's allowed? It might be considered a change to the original declaration? We're adding new properties, so we can use !important if needed. But we should be careful: The original badge rule only has font-size. We can add `background-color: #c44536 !important;` to ensure override. But adding !important could be considered a change to the "visual identity" only, not layout. I think it's acceptable. However, the instruction "keep ALL selectors and layout exactly as-is" doesn't mention !important. But to be safe, we can avoid needing !important by using a more specific selector? But we must keep the selector exactly. We can't change the selector. We can add `background` shorthand with `!important`? Hmm.

Actually, in the original CSS, they didn't include any override, so perhaps the badge already has some other styling from custom CSS. The original file might have other rules. But we only have this block. We should produce a valid CSS file. If Bootstrap uses !important, our override without !important might not work. But the instruction doesn't require us to ensure it works; just to refresh the CSS visually. But we should aim to be effective.

We can add `!important` to our new declarations for badge background