/* ============================================================
   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 respond rewriting CSS only, no markdown fences, preserve selectors/layout exactly, visual changes only. Need inspect original CSS fragment:

@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 need "Refresh this CSS visually" but original contains only layout/typography declarations: text-align, font-size, padding. Those are protected categories: text-align cannot change, font-size cannot change, padding cannot change beyond ±20%? It says padding/margin keep similar values ±20% maximum. Here padding: var(--space-md) !important; Could change var itself? CSS custom properties values can change, but --space-md likely defined elsewhere; changing custom property could affect many. Also font-size protected, text-align protected. The only visual properties allowed in this snippet? None. Maybe we can add new properties? The task says only colors, shadows, decorative properties may change, selectors preserved. We may add visual properties like border-radius, background, box-shadow, border, etc to existing selectors, while keeping existing declarations. But need be careful not to change layout. We can add color/border/shadow/radius to these selectors, but that would alter appearance without HTML. Is that allowed? It says refresh visual identity, we can add decorative properties. But output must preserve all selectors and layout exactly. We can add visual declarations under each selector. But "Only colors, shadows, and decorative properties may change" means existing declarations that are non-visual must stay unchanged; we can add new visual declarations. Need decide.

Need not include any comments. Need output CSS.

We need perhaps update var(--space-md) to new value? But declared elsewhere, changing --space-md itself is not in scope. The padding uses var. Could change var in this snippet? It would affect layout in CSS maybe not desired. Better not.

Maybe we can transform the first selector by adding color/text-shadow? But .app-hero-section .row .col-lg-7 is a container; adding box-shadow maybe visible. The second badge can get background/border/shadow. The third cards can get border/shadow/radius/background. Need target style "asymmetric-blocks" but selectors fixed, can't change grid. Use color palette bold contrasting blocks and sharp edges variant: hard offset shadows, small radius, strong borders, snappy transitions.

Need create fresh palette. We don't know original design. Need maybe assign each section different background with border. But .app-hero-section .row .col-lg-7 inside mobile; adding background might be heavy. Yet task asks visual identity, maybe okay.

Need maintain media query. Need maybe use new custom properties? We can include values directly. Only allowed to change colors, shadows, radius, etc. We can add "transition: background-color 0.15s ease, box-shadow 0.15s ease" maybe. But pure visual.

Need consider selectors: " .contact-channels-section article, .contact-quick-section .contact-card " both share declarations. Add border, box-shadow, border-radius, background maybe.

Need no markdown fences. Need first character CSS char.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #f2e8cf 0%, #faf4e6 100%);
        border: 2px solid #d4a373;
        box-shadow: 4px 4px 0 0 #bc6c25;
        border-radius: 4px;
        color: #283618;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #bc6c25;
        border: 2px solid #283618;
        box-shadow: 3px 3px 0 0 #283618;
        color: #fefae0;
        border-radius: 0;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fefae0;
        border: 2px solid #283618;
        box-shadow: 4px 4px 0 0 #bc6c25;
        border-radius: 0;
    }
}

Need ensure no layout changes. text-align/font-size/padding preserved. We added border to .badge.bg-warning; width? Border-box presumably; width could change but not specified. Could be okay. But if original badge has no border, adding border might affect layout slightly. However border is visual and allowed. The instruction says only border-color/style may change (not width). Wait "border-color and border-style (NOT border-width)" means we can change color/style, not set border-width? It says "All color values: ... border-color", and "border-color and border-style (NOT border-width)" under Never Change? Need parse: In "✅ YOU MUST CHANGE" list: "border-color and border-style (NOT border-width)" under must change? Actually The bullet says:
  • border-color and border-style (NOT border-width)
This means you may/must change border-color and border-style, but NOT border-width. It says NOT border-width. So we should not set border-width at all. Existing declarations might have border-width, cannot change, but we can add? Hmm "NOT border-width" means border-width is layout? Usually border-width affects dimensions. They specifically forbid changing border-width. If adding border with shorthand sets width, that changes border-width, not allowed. To be safe, use outline instead? Outline-width? They mention "outline styles (color, type)" not width? Actually bullet: "outline styles (color, type)" can change, maybe not width. Could use box-shadow to simulate border, by using inset shadow? But need no width changes. Or use box-shadow with 0 0 0 2px? The "hard offset shadows: 4px 4px 0px solid color" requires box-shadow. We can use box-shadow: 0 0 0 2px color, 4px 4px 0 color; but that's not a real border; doesn't affect layout. We can avoid border-width. To create sharp border look, use box-shadow inset 0 0 0 2px color and hard offset. Or use existing border-color? There are no existing border declarations. We can add "border-color: transparent" or color? But without border-width no visible border. Could use outline: 2px solid color? But outline-width would be set. However "outline styles (color, type)" could include outline: 2px solid? It says "outline styles (color, type)" maybe width not forbidden? Actually they said "outline styles (color, type)" under must change; not mention width. But "NOT border-width" specifically. Since outline doesn't affect layout, okay. But target style says "Strong borders (2-3px solid)", yet instruction says not change border-width. We can use outline or box-shadow to simulate. We need obey strict rules. Use box-shadow with spread to create border: box-shadow: 0 0 0 2px #283618, 4px 4px 0 0 #bc6c25; no border-width. But the target variant asks hard offset shadows 4px 4px 0px solid color. Use two shadows: inset 0 0 0 2px color maybe.

Need not set border-width. For border-color maybe add "border-color: #283618" but no width. Could also "border-style: solid" but no width? If default border-width is medium (3px) if style set. But no style either. To avoid actual border dimension, use outline.

But maybe "border-color and border-style (NOT border-width)" means don't change existing border-width; if adding new visual border with border shorthand not allowed. Use outline offset maybe.

Need fresh palette. Let's choose a bold palette:
- Ink/charcoal: #1b1b1b or #123c69? Need contrast. "asymmetric-blocks" with bold contrasting blocks, high contrast borders. Let's use warm cream + burnt orange + deep teal:
  --bg cream: #f5f0e6
  --panel #f7f3e8
  --ink #1e2f23 (dark green)
  --accent #e07a5f (terracotta)
  --border #2a3b32
But maybe current original colors unknown; use fresh palette.

Need maybe update properties in original:
- .app-hero-section .row .col-lg-7: text-align center; add background-color, color, box-shadow, border-radius, outline, transition.
- .app-hero-section .badge.bg-warning: font-size; add background-color, color, box-shadow, border-radius, transition.
- contact cards: padding var; add background-color, outline, box-shadow, border-radius, transition.

Need maybe avoid background on full hero col? It's only mobile within max-width. Need no change layout.

Need also maybe use CSS custom properties? The bullet says CSS custom properties (--color-*, --shadow-*) values may change. But not necessary. Could define local variables? "Only rewrite CSS", can add :root? That changes more. Better direct values.

Need ensure "transition" property not in protected? It changes timing/duration. Allowed. But "transition-property" with display would be not allowed? We use background-color/box-shadow.

Need maybe include "border-radius: 0" because sharp edges small 0-4px. Use 0 or 4px. Target "sharp-edges": small or zero border-radius. Use 0 or 4px. Use "border-radius: 0" or "4px". Use consistent.

Need maybe include "opacity" changes? no.

Need maybe include "filter"? no.

Need maintain "!important" on padding exactly? yes.

Need perhaps add "margin" no.

Need decide if adding visual declarations to first selector affects "app hero section row col-lg-7" text align center. Maybe okay.

Potential issue: If we add background to .col-lg-7, then the hero section might get a block background. But visual only.

Need maybe use "outline: 2px solid #1e2f23; outline-offset: -2px;" does this set outline-width? yes 2px. Is outline width forbidden? "outline styles (color, type)" maybe likely means can change outline-color and outline-style but not width? They didn't list outline-width under never change, but "outline-color" in must change. Since target needs strong borders, using outline-width 2px is acceptable? It doesn't affect layout, so safe. But to align with "outline styles (color, type)" maybe we can write "outline: solid #..."? Invalid without width. Better use box-shadow with spread as border. But custom target "Strong borders (2-3px solid)" can be via box-shadow spread. Let's use box-shadow: 0 0 0 2px #1e2f23, 4px 4px 0 0 #e07a5f; This creates solid 2px border and hard offset shadow. No layout impact. Good.

Need maybe use outlines? Could also use `outline: 2px solid #1e2f23; outline-offset: -2px;` but outline doesn't affect layout; less problematic. Yet if original has outline, changes maybe okay. But for "border-width not change", outlines don't count. Let's use outline with 2px. But note outline may be overridden? okay. They asked border-radius; no border.

Need maybe include `background-clip: padding-box;`? Not needed.

Need maybe add `transition: background-color 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;` However target variant says snappy transitions. 0.15s easy. Allowed.

Need maybe add `box-shadow` both "hard offset shadow" and "border-like" due to spread. This gives visual.

Need maybe color code:
Palette:
- Cream: #f9f5ed
- Deep green: #123b2e
- Terracotta: #c4552d
- Golden: #e0a13b
- Off-white: #fff8ed
- Muted red: #a63d2f

Let's define:
`--new-bg` not define; use static.

For .app-hero-section .row .col-lg-7:
```
background: linear-gradient(145deg, #f9f3e7 0%, #f3e9d7 100%);
color: #123b2e;
box-shadow: 0 0 0 2px #123b2e, 5px 5px 0 0 #c4552d;
border-radius: 0;
transition: box-shadow 0.15s ease, background-color 0.15s ease;
```
Need maybe if `.col-lg-7` has no padding? Could not change.

Badge:
```
background-color: #c4552d;
color: #fff8ed;
box-shadow: 0 0 0 2px #123b2e, 3px 3px 0 0 #123b2e;
border-radius: 0;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
```
But `.badge.bg-warning` already has Bootstrap warning color; changing background-color via CSS with specificity `.app-hero-section .badge.bg-warning` maybe same specificity? Should override. But `bg-warning` uses `background-color: var(--bs-warning)` with `.bg-warning` class. Our selector `.app-hero-section .badge.bg-warning` has specificity 0,3,0 vs `.bg-warning` 0,1,0, so okay. Need maybe set `border-radius: 0` though badge may originally have pill; okay.

Cards:
```
background-color: #f9f3e7;
color: #123b2e;
box-shadow: 0 0 0 2px #123b2e, 4px 4px 0 0 #c4552d;
border-radius: 0;
transition: box-shadow 0.15s ease, transform 0.15s ease;
```
Can't include transform? It's visual but may affect layout? transform not changing layout but could alter position; allowed? Not in list. But no need.

Need maybe "asymmetric-blocks" palette: each section different background. Maybe set hero col to cream, badge terracotta, cards soft green:
- hero col background: `#f7e3c1`? cards `#fff8ed`, badge `#c4552d`. Good.

Need maybe `background: linear-gradient` counts gradient. The bullet says gradients colors and stops may change. We can use gradient only on hero, cards. Need not.

Need perhaps add `.contact-channels-section article` and `.contact-quick-section .contact-card` each as different background? But same selector list means same declarations. Could separate selectors? "Selector lists must be preserved" means we must keep them grouped as original. We cannot split? It says selector lists (commas) preserve. "Every selector character-for-character preserved?" We can keep exact. But if want different backgrounds per separate selector, need split the comma list—not allowed. Could maybe use `:nth-child`? That adds selector, not allowed? Better keep as is. Since they're group, same style.

Need perhaps "unequal columns" not possible; we can use decorative boxes to simulate blocks.

Need think about "Only colors, shadows, and decorative properties may change." We add background-color, color, box-shadow, border-radius, transition. Good.

Need maybe not use `background` if it hides images? Could be okay. But if hero col contains content and images, background behind might be invisible? okay.

Potential issue: adding `transition: box-shadow 0.15s ease` on `.app-hero-section .row .col-lg-7` and cards okay, but no hover. Still fine.

Need maybe use `will-change`? no.

Need output exactly CSS. Need ensure no markdown fences. The final answer should only contain CSS.

Before final, check all protected:
- Media query unchanged.
- Selectors exact.
- `text-align: center;` unchanged.
- `font-size: 0.85rem;` unchanged.
- `padding: var(--space-md) !important;` unchanged.
- No display, position, grid, widths, etc.
- Font-family unchanged.
- Border-width not changed because using box-shadow, no border/outline with width. Wait `box-shadow` with spread creates visual border not layout. good.
- `border-radius` allowed. Yes.
- `background` allowed. yes.
- `color` allowed. yes.
- `transition` allowed. yes.

Need perhaps avoid `background-color` on hero if original had a background image; but colors can change. Fine.

Need maybe include `box-shadow` on all. Good.

Need maybe include `outline`? no.

Need maybe include `text-shadow`? Could add to badge or hero maybe, but not necessary. The task says text-shadow may change/add? "All color values ... text-shadow" must change if present? It says must change. Not present, no need. Could add for style. But maybe no.

Need maybe include `filter`? no.

Need maybe include `accent-color`? no.

Need maybe include `caret-color`? no.

Need maybe include `opacity`? no.

Need maybe include `transition-timing-function: cubic-bezier(.2,.8,.2,1)`? Could use `transition: box-shadow .15s cubic-bezier(.2,.8,.2,1)`. This is allowed. But "snappy transitions (0.15s)" use `0.15s ease-in-out` or `0.15s`. We'll use `0.15s ease`.

Need maybe be more "distinct" than previous attempt. So use vivid colors and strong shadow offsets