/* ============================================================
   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 CSS, rewrite visual identity. Need preserve selectors/layout. Original is media query with rules. Need change colors, shadows, radius, transitions etc? But there are few declarations. Need maybe add shadow? But cannot change layout? We can add properties? The instructions say only colors, shadows, decorative. We can change text-align? No, layout/typography? text-align is layout? It says text-align unchanged. So keep. Need maybe change font-size? typography fixed, so keep. Need change padding? Keep ±20%? Original padding var(--space-md) !important. We can keep, maybe cannot change var? custom properties can change values if introduced? We can preserve. Need output same selectors. Need refresh visual identity. Since original has no colors/shadows/radius, perhaps add box-shadow, border-radius, colors? But "Only colors, shadows, and decorative properties may change." We can add color properties? It would not change layout. Need be conservative. Since media query has only text-align, font-size, padding. To refresh, perhaps modify padding within 20%? But that is layout? Padding can change within ±20%, but we might not need. Need add color? But no element property.

We should likely preserve existing declarations and add some decorative declarations for elements? But selector list includes .contact-channels-section article, .contact-quick-section .contact-card. Could add background, border-radius, box-shadow, transition. But in mobile media query, adding shadows maybe okay. But target style: soft shadows, large radius. Need maybe for hero badge? no.

Need be careful: "HTML fixed — only colors, shadows, and decorative properties may change" and "selectors preserved exactly". We can add properties? It says can change colors, shadows, radius, transitions, gradients. Yes, you can add declarations maybe. But preserving original declarations exactly? Need maybe values of font-size unchanged typography. text-align unchanged. padding unchanged (or minor). Since original has no visual properties, we need introduce some visual changes but not altering layout.

But "Previous attempt didn't change enough" indicates need more distinct. Since no colors in original, maybe need ensure different color identity. We can add background, border-radius, border, box-shadow to those elements. But note .contact-card maybe already has styles from elsewhere; adding in media query could override with colors. We can do.

Need perhaps include `:root`? No, no new selectors. Only existing selectors.

Let's parse 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 need output rewritten CSS with selectors same. Need maybe restructure? Keep same media query condition. Could include all original declarations and add new ones. Need maintain selectors. But perhaps need not add any extra selectors. We can add declarations within existing rules. Need maybe not add to badge? Could add box-shadow to badge? It might affect layout? box-shadow doesn't layout. But `background` could affect if background image? only color. `border-radius` okay.

Need perhaps change `text-align`? No.

Need maybe change font-size? Typography fixed, so no. Could change color? Need set some colors to make palette. For badge, maybe add background gradient? It already has class bg-warning from Bootstrap; overriding background-color to new palette. Since class `.badge.bg-warning` may have Bootstrap background-color; we can set `background: linear-gradient(...)`? But this is decorative, okay. But if we use shorthand `background`, might remove background-image? no. For mobile only. Could add `border-radius: 999px; box-shadow: 0 4px 8px rgba(...)`. But original badge has border-radius? maybe. This creates visual identity. For article/contact-card, add background, border, border-radius, box-shadow, transition. Need ensure no layout change. Border adds 1px to box-sizing? If element has box-sizing: border-box, no layout; if not, could change size. We can use `outline`? But border affects border-box only if global. To be safe, we can avoid border and use box-shadow for outline. Or use `border-style`? It says border-color and border-style may change, not border-width. Can't change border-width. So we shouldn't add border-width 1px if not already? "border-color and border-style (NOT border-width)" means can set style/color but not width. Adding `border: 1px solid` changes border-width, prohibited. Better avoid border. Use `box-shadow: inset 0 0 0 1px rgba(...)` for border effect, no layout. This is box-shadow, allowed.

Need maybe add `background` to article/cards; if they already have background, okay. But maybe these are not cards? In contact section, article likely cards. We can set background to a subtle white. Use `background-color: #fff` or with gradient? Need fresh palette. Target style: symmetric-grid. Could use palette? "balanced harmonious palette". Need choose colors. We need know current colors? Unknown. We can pick a palette. Need refresh. Let's choose a soft teal/indigo? Maybe "symmetric-grid" and soft shadows. Need no markdown.

Need perhaps add `transition` to elements. But media query mobile only; transitions maybe okay. We can set `transition: box-shadow 0.35s ease, background-color 0.35s ease, border-radius 0.35s ease;` But border-radius transition is okay? Could add.

Need maybe set `.app-hero-section .badge.bg-warning` font-size remains 0.85rem. Add `color: #1f2937; background: linear-gradient(135deg, #fbbf24, #f59e0b); border-radius: 999px; box-shadow: 0 4px 8px rgba(245,158,11,0.2), 0 8px 16px -4px rgba(245,158,11,0.2);` But `.bg-warning` background in Bootstrap could be overridden at mobile. Good.

Need maybe add `.app-hero-section .row .col-lg-7` text-align center. Could add `color: #334155`? But col contains maybe text? It might not change. But "color" can change. Add `color: #334155;` But if this column contains headings, setting color on container might override? It inherits only if no color set. Could be okay. But original title maybe dark. Need not.

Need maybe add to first rule: `color: #1e293b;`? But this could affect all text in hero column. That's okay. But maybe could be too much.

Need maybe use custom properties? Original uses `var(--space-md)`. We should preserve that. Could not change custom properties because no :root. We could leave.

Need maybe `text-align: center` unchanged. Need maybe `font-size: 0.85rem` unchanged. Need `padding: var(--space-md) !important` unchanged. Need add maybe `border-radius: 16px; background: rgba(255,255,255,0.7); backdrop-filter: blur(6px); box-shadow: ...; transition: ...;` But `backdrop-filter` can be decorative but could affect readability. It's okay. However `background: rgba(255,255,255,0.7)` maybe changes if cards already colored. Fine.

Need perhaps set same for both articles/cards. Use selector list exactly.

Need decide output. But there is a "File: assets/css/saishi.css#块2/2" and "Mode conservative", likely expects rewriting from original to a fresh style. Since original only media query, we need output exactly that media query with modifications.

Need ensure "No markdown fences" and first char first CSS char. So output starting with `@media`. Need no extra comments. Use single spaces or tabs? fine.

Need maybe preserve order and selectors. We'll include original declarations plus added decorative values.

Let's craft.

Possible output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #3b2413;
        background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
        border-radius: 999px;
        box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25), 0 12px 24px -8px rgba(245, 158, 11, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.82);
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05), 0 20px 40px -10px rgba(15, 23, 42, 0.12);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

Need check layout: Added color no layout. Background no layout. Border-radius no layout. Box-shadow no layout. Transition no layout. backdrop-filter no layout. Good. But "background" shorthand could override any background-image? In cards maybe not. We could use `background-color` instead to avoid. But gradient for badge uses background. For article, use `background-color: rgba(255,255,255,0.82);` to not override gradient. But if they already have background-color, overriding okay. Use `background-color` not `background`.

Need maybe `backdrop-filter` with white translucent on mobile could have no effect if browser support. Fine.

Need maybe target "soft-shadows" with multi-layer. We have exactly.

Need perhaps consider `padding: var(--space-md) !important` unchanged exactly. Good.

Need maybe include `-webkit-backdrop-filter` maybe okay.

Need maybe ensure `.contact-channels-section article` and `.contact-card` are in same rule with comma. Yes.

Need perhaps use `border-radius: 16px` or 20px? Target large radius 12-24. 18 okay. Badge 999.

Need maybe need "symmetric-grid" target style? This media query doesn't have grid; we only implement consistent shadows. Maybe add `grid-auto-rows`? No, can't because layout? Actually "grid-auto-rows" maybe layout? Could change. Need not.

Need perhaps use `box-shadow` with `inset 0 0 0 1px` to create border. Should we add to cards? Soft-shadow variant doesn't mention border, but useful to define edges against background. But if background is translucent, because cards may have no border, edge soft. We can include `inset 0 0 0 1px rgba(15,23,42,0.04)` as part of box-shadow? Multi-layer shadows allow. However target style: soft shadows: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)`. We can adapt with color rgba(15,23,42). Maybe include inset? It's acceptable. But if we want exactly style? Use two shadows only.

Need perhaps "balanced harmonious palette" in colors. We use warm amber badge and neutral slate text, white cards. Good.

Need maybe include `border-radius` on `.app-hero-section .row .col-lg-7`? Not relevant.

Need perhaps add `accent-color`? Not needed.

Need maybe `caret-color`? not.

Need maybe "outline styles" could modify? not.

Need perhaps `transition timing, easing, duration` we changed to 0.35s ease. Good.

Need maybe "filter" can change? not.

Should we include original line exactly `text-align: center;` with `color` after. Yes.

Need perhaps avoid `color` on col text because it could conflict with inherited from larger screens. But okay.

Need perhaps "Previous attempt didn't change enough" We need more visual changes. We can add `background` to article/card, shadows, radius, transition. Good.

Need perhaps include a `transform`? No, layout? transform can be decorative but can affect visible box but not layout. But not required and can create motion conflict. Better not.

Need perhaps add `opacity`? no.

Need perhaps add `filter`? no.

Need maybe use `will-change`? no.

Need perhaps output `/*`? no.

Let's think if there is risk of "border-radius" on `article` causes no layout. okay.

Need perhaps set `background` on `.app-hero-section .badge.bg-warning`. In bootstrap, `.badge` has `border-radius: 0.375rem`; changing to pill. Fine.

Need maybe set `color: #78350f` or `#4a2c0a` for badge. Use dark amber. Good.

Need maybe in first rule add `color: #0f172a` maybe if hero text already has dark. It won't alter layout. Good.

Need maybe add `text-shadow`? Hero text? Could add `text-shadow: 0 1px 2px rgba(15,23,42,0.06)` but if text is dark, subtle. But text-shadow is decorative and allowed. Add to col text? It might affect look. Should we? Soft-shadows target includes box-shadows but text-shadow maybe also. Could add small `text-shadow` to badge? But badge text small. Better avoid.

Need maybe add `box-shadow` to badge; yes.

Need maybe use `background-color` with `--space-md` etc. Good.

Need perhaps include `padding` with `!important`; keep. If we add `padding` changed? no.

Need maybe preserve `@media (max-width: 575.98px)` condition exactly. Good.

Need maybe preserve no comments.

Let's finalize with 3 rules.

Potential issue: `transition: background-color 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;` It transitions border-radius, but that can be considered "visually" okay. The target says transition timing/easing/duration can change. Fine.

Need maybe use consistent shadows color `rgba(2, 6, 23, 0.08)` maybe more slate. I'll use `rgba(15, 23, 42, ...)`.

Need maybe "symmetric-grid" balanced palette: use `--space-md` unchanged. No grid.

Let's write final output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #5c3a0e;
        background: linear-gradient(135deg, #fcd34d 0%, #f5a623 100%);
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(245, 158, 11, 0.25), 0 12px 24px -6px rgba(245, 158, 11, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(255, 255, 255, 0.78);
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05), 0 20px 40px -10px rgba(15, 23, 42, 0.12);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease, backdrop-filter 0.35s ease;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

Need check: `transition` includes `backdrop-filter`; Safari supports? yes with -webkit? Actually transition property `backdrop-filter` doesn't need -webkit prefix in modern. We can include. But adding `-webkit-backdrop-filter` as property and `backdrop-filter` transition is okay. Could omit backdrop-filter in transition to reduce. We can include.

Need perhaps "background-color: rgba(255,255,255,0.78)" may make article/card translucent but if `backdrop-filter` not supported, still okay. On mobile, performance? Fine.

Need maybe `.contact-channels-section article` article element may have background from earlier; setting white translucent may make text unreadable if page background white. Need maybe add `box-shadow` but no border, but white on white could be okay because shadow. If page background not white, good. If page background gray, cards lighter. Fine.

Potential issue: `background-color: rgba(255, 255, 255, 0.78)` uses opacity 0.78; if the underlying page has dark pattern, text might be low contrast. But contact card likely already has white background. To be safe use `#ffffff` not translucent? But backdrop filter then no visible effect. But translucent can be okay. Soft-shadow style uses white cards? Could use `background-color: rgba(255, 255, 255, 0.9)`. Over a white page no issue. Over dark pattern, could be low contrast. Maybe use `background: rgba(255,255,255,0.85)`. But if contact section has