/* ============================================================
   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 with a conservative mode: only visual changes (colors, shadows, radius, transitions, gradients, etc.), preserving selectors and layout exactly. The given CSS is a media query block with a few rules. I need to refresh the visual identity.

Original CSS:
```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

I can only change visual properties. The selectors must remain identical. The layout properties (text-align, font-size, padding) must remain the same per the rules. Wait: "text-align" is in the never-change list (typography: text-align, vertical-align). "font-size" is in never-change. "padding" is allowed to change within ±20% but I should keep it similar. The instruction says "only colors, shadows, and decorative properties may change." But the original CSS has no colors, shadows, etc. It only contains layout/typography rules. So essentially, I cannot change anything meaningful here, because the only rules are text-align, font-size, and padding — all of which are in the never-change list (with padding allowed within ±20%).

The target style is "asymmetric-blocks" with "soft-shadows" effect variant. But this CSS snippet has no color or shadow properties at all. So how do I apply a visual refresh? I could add new color/shadow properties to these selectors without changing the existing declarations. For instance, I can add background, border-radius, box-shadow, transition to these selectors. That would be adding visual properties, which is allowed. The instruction says "Refresh this CSS visually" and "All color values... box-shadow... border-radius..." must change. Since there are none, I can introduce them while preserving existing declarations.

But I must be careful: adding properties is fine, but not changing layout/typography. Adding a background, border-radius, box-shadow to these elements could affect layout? box-shadow doesn't affect layout, background doesn't, border-radius doesn't (unless border is present). Adding padding would affect layout but I shouldn't add padding. Adding transition is fine.

The selectors:
1. `.app-hero-section .row .col-lg-7` — text-align: center. I can add background, border-radius, box-shadow, padding? No padding changes layout. I can add decorative background? But a hero section column might not want a background. However, the target style is "bold contrasting blocks: each section different background." It's within a media query for small screens. I could add a subtle background with border-radius and shadow, but that might look odd for a column. The instructions say to refresh the visual identity. Since this is a partial file (块2/2), perhaps the original CSS is only this media query, and I'm supposed to apply the style to these specific selectors. Adding colors and shadows inline to these selectors is the only way.

Let me think about what's reasonable.

For `.app-hero-section .row .col-lg-7` at max-width 575.98px: It's a centered column. I can add a soft shadow and rounded background, maybe a gradient background. But this could affect the design significantly. However, the task explicitly says "Refresh this CSS visually" — so adding these properties is expected.

For `.app-hero-section .badge.bg-warning` — a badge with bg-warning. I can change the color scheme? The bg-warning class comes from Bootstrap; I shouldn't change the class. But I can add box-shadow, border-radius, transition, maybe a custom background gradient using `background` property? But that would override the Bootstrap bg-warning background, which is a color change. That's allowed. But careful: the selector is `.badge.bg-warning`, and Bootstrap's `.bg-warning` sets `background-color: #ffc107` (or var). If I add `background: linear-gradient(...)`, it would override the background-color (since background shorthand resets). That's a visual change. I could also add a soft shadow.

For `.contact-channels-section article, .contact-quick-section .contact-card` — these are contact cards. I can add background, border-radius, box-shadow, transition. Padding is already set to var(--space-md) !important; I should keep that. Adding a background and shadow will make them look like cards.

The target style "asymmetric-blocks" suggests bold contrasting blocks with high contrast borders. But within a media query for mobile, maybe not too aggressive. The effect variant "soft-shadows" suggests multi-layer soft shadows, large border-radius (12-24px), smooth transitions.

I'll create a fresh palette. Let's define a palette that fits "asymmetric-blocks": bold contrasting blocks, each section different background. But I only have three selectors. Let me assign distinct backgrounds:

- Hero column: a deep/rich gradient? Use a dark navy to indigo gradient, or a light neutral with soft border. Since it's a hero section, maybe a bold gradient with white text? But text color isn't set; changing text color would be a huge change and might break readability. Better to use a light background with a colorful border or shadow, keeping text dark. Or use a subtle tinted background.

Actually, the safest is to add box-shadow and border-radius to create card-like feel without changing text color drastically. But "bold contrasting blocks" suggests background changes. If I add a dark background, the text (which is inherited, likely dark) would become unreadable. Unless I also set color. But color is allowed to change. However, setting a dark background and white text on a hero col-lg-7 might be fine. But in a media query, the hero section's text might be large headings; changing to white might be okay if background is dark. Still, it's risky.

Given the requirement, I'll add backgrounds but keep them light enough for dark text, or add text color explicitly. Let me design:

1. `.app-hero-section .row .col-lg-7`:
   - background: linear-gradient(135deg, #fdfbf7 0%, #f5efe6 100%) — light warm.
   - border: 1px solid rgba(214, 197, 168, 0.4)? Actually border-color is allowed; border-width must not change (but adding a border where there was none changes layout by 1px... technically border affects layout, but the rules say border-color and border-style can change, NOT border-width. Adding a border introduces a width. To stay safe, I should avoid adding borders, or use box-shadow to simulate borders. I'll avoid border properties except if they already exist. There are none here, so I won't add borders. I can use inset box-shadow to simulate a border without layout change.
   - box-shadow: 0 4px 8px rgba(31, 27, 20, 0.05), 0 20px 40px -10px rgba(31, 27, 20, 0.12)
   - border-radius: 16px
   - transition: background 0.4s ease, box-shadow 0.4s ease, border-radius 0.3s ease

2. `.app-hero-section .badge.bg-warning`:
   - background: linear-gradient(135deg, #ffb347, #ff6a00) — bold orange/gold gradient, replacing bg-warning's background-color.
   - color: #1a1206 (dark brown) for contrast? The badge bg-warning in Bootstrap has dark text? Actually Bootstrap's badge bg-warning uses `color: #212529` (dark). Setting a gradient background keeps it visible.
   - box-shadow: 0 2px 6px rgba(255, 106, 0, 0.25), 0 8px 16px -6px rgba(255, 106, 0, 0.35)
   - border-radius: 999px (pill shape remains, but badge already might have rounded). Actually `border-radius` allowed. Bootstrap badge has border-radius 0.375rem; I can set it to 999px for a pill, visual only.
   - transition: transform? No, transform isn't in the allowed list explicitly? It lists "transition timing" as allowed, but properties changed in transition can be background, box-shadow, etc. I shouldn't add transform to the element (that changes presentation/layout? transform doesn't affect layout but the rules don't mention transform in the never-change list, but also not in the change list). To be safe, avoid transform in properties. But I can use transition on background and box-shadow.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - background: linear-gradient(145deg, #ffffff 0%, #f8f9fc 100%)
   - box-shadow: 0 4px 8px rgba(19, 24, 34, 0.04), 0 24px 48px -12px rgba(19, 24, 34, 0.12)
   - border-radius: 18px
   - transition: background 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease

But wait — the "asymmetric-blocks" target style says "each section different background" and "bold contrasting blocks". The three selectors are distinct sections. Let me assign:

- Hero column: warm cream light block.
- Badge: bold orange gradient block.
- Contact cards: cool white/blue light block.

That gives contrast among the blocks.

However, the task says "Output the rewritten CSS now" preserving every selector character-for-character. I need to include the original declarations (text-align, font-size, padding) exactly as they are, and add new visual declarations.

Also, for the media query, I keep the @media (max-width: 575.98px) condition exactly.

Let me also ensure the padding: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — I keep that exactly. I can change `--space-md`? No, that's a variable reference; changing the variable's value is allowed by the rules ("CSS custom properties values"), but I'm not defining the variable here. I keep the declaration as-is.

For the badge, font-size: 0.85rem — keep.

For the hero, text-align: center — keep.

Now, I should also consider if adding box-shadow to `.col-lg-7` might look weird because it's a column with possibly no background; the shadow will render as a rectangle around the column's content box. But it's fine.

One concern: adding `background` to `.col-lg-7` might conflict with Bootstrap's row/col styling, and it might not fill the entire column height. But it's a visual change allowed.

Let me also think about "asymmetric-blocks" — the layout pattern is aggressive, but the CSS I have doesn't include grid definitions. I cannot change layout. So I only apply color/background contrast.

I'll write the final CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #fbf7f1 0%, #f2e9de 100%);
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(60, 45, 25, 0.05), 0 20px 40px -10px rgba(60, 45, 25, 0.12);
        transition: background 0.4s ease, box-shadow 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffbe4d 0%, #ff7a1a 100%);
        color: #231505;
        border-radius: 999px;
        box-shadow: 0 2px 6px rgba(255, 122, 26, 0.25), 0 10px 20px -8px rgba(255, 122, 26, 0.4);
        transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f0f4fa 100%);
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(12, 20, 34, 0.04), 0 24px 48px -12px rgba(12, 20, 34, 0.12);
        transition: background 0.35s ease, box-shadow 0.35s ease;
    }
}
```

Wait, the `color` property on the badge: Bootstrap's `.badge` sets color to inherit? Actually .badge has `color: #fff` by default? Let's check: Bootstrap 5's `.badge` sets `--bs-badge-color: #fff; color: var(--bs-badge-color);` and `.bg-warning` also sets `--bs-badge-color: #000`? Actually `.bg-warning` in Bootstrap 5 sets `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));` and it doesn't set color. The `.badge` default color is #fff, but `.text-bg-warning` sets color to dark. For plain `.bg-warning`, the text might be dark from the base `.badge`? Hmm. In Bootstrap 5, `.badge` has `color: var(--bs-badge-color, #fff)`. The `--bs-badge-color` can be set by `.text-bg-*` classes. If only `.bg-warning` is used, the badge color would be white? Actually that would be low contrast on yellow. Bootstrap docs recommend `.text-bg-warning` for colored badges. In any case, I can explicitly set `color: #2b1a04` for readability.

But wait, the rules say "font-weight, font-style" etc. cannot change. `color` is fine.

Also, should I add `background` to the `.app-hero-section .badge.bg-warning` — using `background` shorthand with linear-gradient will override the background-color from `.bg-warning`, which is a visual change. Good.

Now, the instruction says "No  comments" and "No markdown fences". So output raw CSS.

The original CSS uses 4-space indentation. I'll preserve that style.

Let me check for the "soft-shadows" variant: multi-layer soft shadows are included. Large border-radius 12-24px: 16, 999 (badge pill is fine; maybe 12-24px for badge too? A pill is a circle, that's okay for a badge but the variant asks 12-24px. I could set border-radius to 24px instead of 999px for consistency. But badges often are pills. Since the original `.badge` has `border-radius: 0.375rem` by default which is 6px. Using 999px makes it a pill, which is a visual rounding change. That's allowed. The variant says large border-radius 12-24px, but a pill exceeds that. I'll keep 999px for the badge? Or set 12px to stay within spec. Let me set the badge border-radius to 12px? That might look less badge-like. I'll go with 999px because it's a badge and pill shape is conventional; the variant is a general guide. But the output must follow the variant. Hmm.

The instruction says the effect variant should have "Large border-radius (12-24px)". For the hero column and contact cards, 16px and 18px fit. For the badge, I'll set 24px to fit the range. But a badge with border-radius 24px on a small badge might be overly rounded, but it's fine — it will just look like a rounded rectangle. Actually if the badge has a fixed small height, 24px might create a pill anyway. I'll use 24px.

Actually, badge text size is 0.85rem; the height might be around 24px. So border-radius: 24px would make it fully rounded, effectively a pill. Good.

Let me adjust.

For color palette consistency: warm earthy tones for hero, orange/amber for badge, cool slate/white for contact cards. That's bold contrasting blocks.

Let me also consider adding a subtle border via inset shadow to avoid layout changes. For asymmetric-blocks, "high contrast borders" are mentioned. I can add an inner border using box-shadow: inset 0 0 0 1px rgba(...). This doesn't affect layout. Let me add that to the contact cards and hero column. But the "soft-shadows" variant doesn't mention borders; still fine.

However, adding too many shadows might conflict with "soft-shadows" multi-layer. I can include an inset border as part of the multi-layer shadow.

Let me refine:

Hero column:
```css
background: linear-gradient(135deg, #faf6ef 0%, #f1e7d8 100%);
border-radius: 16px;
box-shadow: inset 0 0 0 1px rgba(180, 155, 120, 0.2), 0 4px 8px rgba(80, 60, 30, 0.04), 0 20px 40px -10px rgba(80, 60, 30, 0.1);
```

Contact cards:
```css
background: linear-gradient(145deg, #ffffff 0%, #eef2f7 100%);
border-radius: 18px;
box-shadow: inset 0 0 0 1px rgba(