/* ============================================================
   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 answer only rewritten CSS, preserving selectors exactly, only visual changes. Need consider original CSS has media query max-width 575.98px, three rules with text-align/font-size/padding. Layout properties: text-align, font-size, padding. We must preserve selectors, media query. Need maybe change colors? None present. We can add color, background, border-radius, box-shadow, transition? Need keep layout. Since target style asymmetric-blocks sharp-edges. Need refresh visual identity without changing layout structure/class names. The original has only a few declarations. We need output CSS with same selectors, same media query, and can add visual properties. Need preserve text-align: center, font-size 0.85rem, padding var(--space-md) !important. Need not alter those layout/typography values. We can add color, background, border, box-shadow, transition etc. But we must ensure "keep all selectors and layout exactly". Since original only has 3 rules. We can add visual declarations. Need likely include "padding" same. But in rule contact, padding is var(--space-md) !important; keep exactly. Could add border-radius etc. Need maybe target "asymmetric-blocks" vibrant palette, sharp edges. But selectors are specific. Need be careful: adding background-color to badge or contact card maybe okay. Need maybe add transition. Since media query is mobile max-width. We can design mobile-specific adjustments? But mode says visual changes only. Need output only CSS. Need maybe use CSS variables? Original references var(--space-md), no definitions included. Fine.

Need preserve all existing declarations and add visual changes. But "all color values replaced with fresh palette" means if no colors exist, introduce. Need ensure not changing font-size? The directive says typography font-size fixed. So keep 0.85rem. text-align fixed. padding keep same. Need maybe no display/position etc.

Let's craft output exactly:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a2e; /* maybe? But hero center text maybe should remain? Could add color. However adding color changes text color. Fine. */
        background: transparent; maybe not.
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1a1a2e;
        background-color: #f4d03f; /* bg-warning original Bootstrap warning maybe. Could change to vibrant */
        border: 2px solid #1a1a2e;
        border-radius: 0;
        box-shadow: 4px 4px 0 #1a1a2e;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border: 2px solid #1a1a2e;
        border-radius: 0;
        box-shadow: 6px 6px 0 #e4572e; /* offset shadow */
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}

Need maybe include hover? But selectors preserved, pseudo-classes could add? The original has no :hover. Adding :hover would introduce selectors not in input? Could be okay as new selector? But instruction "Every selector character-for-character preserved?" likely want same selectors only. Avoid adding new selectors. Can add transition easier.

Need perhaps "mixed gaps, different backgrounds, high contrast borders" but cannot change layout. We can add background colors to each section. For app-hero-section col-lg-7, can add background? Maybe no. Could use color.

Need maybe preserve "bg-warning" class semantics? We can be more adventurous: use #ffd166, border 2px solid #0f0e17, border-radius 4px? Variant sharp edges has 0-4px, hard offset shadow. We'll use border-radius 2px perhaps. Need "small or zero border-radius (0-4px)"; choose 0 or 4. Strong borders 2-3px solid. Snappy transition 0.15s. Good.

Need maybe color palette across blocks. We can make badge #f4d03f with border #1a1a2e and hard shadow #1a1a2e. Contact card background #f5f0e6? but wants bold contrasting blocks each section different background. Could use #f9f9f5? Let's pick target palette "asymmetric-blocks" with bold contrasting blocks. Use:

- .app-hero-section .row .col-lg-7 { color: #0d1321; } perhaps. But in hero likely text has other classes. Adding color could affect. But okay.

- .app-hero-section .badge.bg-warning: background: #ffb703; border: 2px solid #0d1321; border-radius: 2px; box-shadow: 4px 4px 0 #0d1321; transition: box-shadow .15s ease, transform .15s ease;
- contact article/card: background: #fffcf7; border: 2px solid #0d1321; border-radius: 0; box-shadow: 6px 6px 0 #e63946? Maybe high contrast. Need choose shadow offset maybe 4px 4px 0 solid color? Use box-shadow values: `4px 4px 0 rgba(13, 19, 33, 0.9)`? Actually CSS box-shadow grammar: offset-x offset-y blur-radius spread color. "4px 4px 0px solid color" not actual "solid". In CSS: box-shadow: 4px 4px 0 0 #e63946; The variant says "4px 4px 0px solid color" meaning shadow offset and no blur; use 4px 4px 0 0 color. Should we use spread? `0px` blur and `0px` spread. Good.

Need maybe no comments. Need output raw CSS. No markdown fences. First char @. Need maintain the original indentation/spacing? Not required. Need preserve selectors exactly. We can output all.

Potential issue: `transition: box-shadow .15s ease, transform .15s ease;` transform is a layout property? Hmm "animation-name (values like duration/timing CAN change)" and transform? Transform not listed but could visually change layout? It's okay but "display/position/grid" etc. Transform can cause movement but not layout. In conservative, maybe avoid adding transform because it can alter visual layout. But "visual changes only" okay. However "transition" to transform may be extra property. We can keep transition background-color, box-shadow, border-color to be safe. No transform.

Need also "col-lg-7" has text-align center; could add `color` only. But maybe adding background to col-lg-7? Could make a huge block background, okay but maybe altering visual identity. But "high contrast blocks" perhaps set background to `linear-gradient(...)`? Need not for mobile hero? Maybe more appropriate to contact cards and badge.

Need maybe add `filter` or `backdrop-filter`? Could to contact card? But not necessary.

Need maybe "border-color and border-style (NOT border-width)" so can change border-color/style but border-width fixed? Actually "NEVER CHANGE" list includes? They said "border-color and border-style (NOT border-width)" under must change. So we can set border width? Original has no border. But directive says NOT border-width, so probably don't change width? Actually "Colors, shadows, radius more distinct... border-color and border-style (NOT border-width)" means we are allowed to change border-color and border-style, but not border-width. Since original lacks border, adding `border: 2px solid` introduces width. That might be prohibited? Hmm careful. They explicitly say never change layout; border-width can affect layout size because box-sizing? Original no border, adding border may change box sizing (if not border-box) and width. But in CSS resets likely `box-sizing: border-box` maybe not. But "border-width" is property listed under must change? Let's reread: Under "⚠️ Previous attempt didn't change enough. Make colors, shadows, radius MORE distinct this round. Use a fresh palette." Under "✅ YOU MUST CHANGE" includes "border-color and border-style (NOT border-width)" That means in our rewritten CSS we may set border-color and border-style but not border-width? Actually "NOT border-width" means don't change border-width from original. Since original has no border-width, adding border-width could alter layout. But the target style says "Strong borders (2-3px solid)" and allowed decorative properties? The "NEVER CHANGE" list doesn't explicitly mention border widths. However "Layout (HTML cannot adapt to changes)" includes width, height, padding, margin, gap. Border width can affect layout but less. The text says "border-color and border-style (NOT border-width)" under must change, i.e. no border-width modification. So maybe we should not add border? But target style says strong borders 2-3px. Need reconcile. Since original has no border, and instruction says "NOT border-width" perhaps means if existing border-width keep same. But adding border to an element with no border is a visual change and might alter size. But if `box-sizing: border-box` global, no layout. We likely can use `box-shadow` to simulate border instead? Better: use `outline: 2px solid #...`? That's not border, doesn't affect layout, and changes visual. But instruction says "outline styles (color, type)" can change. Use `outline: 2px solid #0d1321;` and maybe `outline-offset: -2px;`? Actually outline is visual and not affect layout. Use `box-shadow` for hard offset. But target style says strong borders; using outline or box-shadow can be okay. Could also use border with `box-sizing: border-box` but we don't know. To preserve layout, use `outline` or `box-shadow` that create edge without adding to border box. However "border-color and border-style" under must change implies we should change border colors; but original no border. Hmm.

Maybe best: use `background-color`, `color`, `box-shadow`, `border-radius`, `outline`, and perhaps `border: 0`? But no.

Need examine original file snippet: only media query with text-align, font-size, padding. There are no colors. Since task says refresh visual identity, maybe expected to add color declarations. Adding border may be considered okay because "strong borders" target and border width not listed in never-change? Wait never-change says: width/height/padding/margin; border-width not listed. So can change border-width from none to 2px? If border-box, no layout; but width maybe impacted. Border is a decorative property and target says strong borders. I think acceptable. But to be safe, use `outline` for hard border and `box-shadow` for offset. Or use `border` but no "width" property explicit? CSS `border: 2px solid` is shorthand including width, which could violate "NOT border-width". Better avoid. Use `outline: 2px solid` because "outline styles (color, type)" in must-change. Could set `outline-offset: -2px`? That is a property but not in lists; visual. But `outline-offset` can be different from width. It doesn't affect layout. We can use `outline` plus `outline-offset: -2px` to make it inside? Actually outline default outside border edge; outline-offset negative draws inside. Could use `box-shadow: 0 0 0 2px #0d1321, 4px 4px 0 0 #e63946;` Multi-layer shadow: one zero-offset spread 2px as border, then hard offset. That avoids layout. But target style "hard offset shadows: 4px 4px 0px solid color"; use box-shadow. Great. Use inset? Need create sharp edge. Use `box-shadow: 0 0 0 2px #0d1321, 4px 4px 0 0 #ffca3a;` This draws an outline using box-shadow. No border width changed. But additional spread shadow can affect visual but not layout. That's ideal.

For badge `.bg-warning`, background color is likely Bootstrap `.bg-warning`, changing to #ffb703. Add box-shadow: `0 0 0 2px #0d1321, 4px 4px 0 0 #0d1321;` But two shadows might make a solid shadow offset. Need `4px 4px 0` with spread? Hard offset shadow `4px 4px 0 0`. Combined with zero spread border. Good.

For contact card, perhaps background #fffcf7, box-shadow `0 0 0 2px #0d1321, 6px 6px 0 0 #e63946;`. Nice.

Need transitions: `transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;`. Could add `outline-color`? If using box-shadow, transition `box-shadow`.

Need maybe "opacity" no.

Need maybe `accent-color` no.

Need maybe "filter" no.

Need maybe "font-size" must unchanged. Good.

Need maybe "padding" must not change more than 20%: original var(--space-md) !important. Keep exactly.

Need maybe text-align in first rule: text-align: center is layout. Keep.

Need maybe color in first rule: should we add? Could be `color: #1a1a2e;` But if `.app-hero-section .row .col-lg-7` has other text colors, this might override. That's okay. But to avoid interfering with typography? color is allowed. We can set `color: #0d1321;` Maybe not needed. But mission says "all colors should be changed/fresh palette". There are no colors in original, but adding color to hero could make text palette. I think include. But if the original hero has background dark, text should be light. Without context, adding dark color may harm. Could use `color: inherit`? No. Maybe don't add text color to first rule because it's only layout. But need "Refresh visuals" maybe set background? There is no element background. We can add `background: transparent;` no. Maybe add `background: linear-gradient(...)`? That would change hero section's col. Could be okay but no. Let's leave first rule with just `text-align: center;` and maybe add `color`? Hmm.

Since target "asymmetric-blocks" and "each section different background", perhaps contact card and badge enough. Need maybe use CSS variables? Could define `--asym-bg`? Not necessary.

Need perhaps preserve media query and rule order. We can output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #0d1321;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb703;
        color: #0d1321;
        border-radius: 2px;
        box-shadow: 0 0 0 2px #0d1321, 4px 4px 0 0 #0d1321;
        transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf5;
        color: #0d1321;
        border-radius: 0;
        box-shadow: 0 0 0 2px #0d1321, 6px 6px 0 0 #e63946;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }
}

Need maybe "background-color: #fffdf5" on contact cards. "Bold contrasting blocks" maybe use `#ffe8d6`? We can vary. Use contact card background `#fff4e6`, shadow `#e4572e`. Could be more distinct. Need choose palette. Let's pick:

- Ink/dark: #1a1a2e or #0d1321.
- Paper: #fff7ed.
- Accent: #f4a261? #e9c46a? 
- Coral: #e76f51.
For asymmetric blocks and sharp edges, use high contrast:
  Badge: background #f4d35e, border-like shadow #1a1a2e.
  Contact cards: background #ffffff or #faf0ca. Alternate? Both same. "each section different background" Maybe contact channels and contact quick should have different backgrounds? But selector covers both; if we set both same due to selector. Could use gradient? Maybe `background-color: #faf0ca;` and for `.contact-channels-section article` vs `.contact-quick-section .contact-card` we need separate selectors to set different backgrounds, but instruction says preserve selector lists? We can split selector list into separate rules? Wait "Selector lists (commas)" under never change: "Selector lists (commas)" likely means preserve selector lists exactly? Actually "NEVER CHANGE: Selector lists (commas)" means if original has comma-separated selector list, keep it. If we split it into two rules, we change the selector structure. Need preserve exactly as comma-separated. If we want different backgrounds for each, we can't using one combined selector unless add another selector? Adding new selector rule? Could do:

    .contact-channels-section article {
        background-color: #faf0ca;
    }
    .contact-quick-section .contact-card {
        background-color: #f4d35e;
    }

But that introduces new selectors not in original? Actually