/* ============================================================
   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 are given a small CSS block. We must rewrite it visually while preserving selectors, layout, font, etc. The original is a media query with three rules. The task: "File: assets/css/saishi.css#块2/2", "Request ID: #2d183c49", "Target style: card-mosaic", "Effect variant: soft-shadows". The CSS portion is small.

We are in conservative mode. We can change colors, box-shadow, text-shadow, border-radius, gradients, transitions, filter, backdrop-filter, opacity, outline, caret-color, accent-color, custom properties values. Cannot change selectors, layout properties, typography.

The original 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;
    }
}

We need to output the rewritten CSS. Since selectors must stay exactly, we can add visual properties only. We must not change text-align, font-size, padding. But we can add color, box-shadow, border-radius, transition, background, etc. However careful: adding display etc not allowed? We should add only allowed visual properties.

We can also adjust the CSS custom properties values? The original uses `var(--space-md)`. Changing the custom property value would affect layout, but we are not told the definition. Since the CSS uses var(--space-md), we could override it? But that might change padding, which is layout. We should not change the padding value. We can leave as is.

We can add new declarations inside existing rules. Since the selectors are preserved, we can add visual properties like color, background, border-radius, box-shadow, transition, etc.

But the original selectors target elements in a small breakpoint. Adding shadows/radius could be okay. However, we need to keep the CSS valid and not break anything.

The task likely expects a refreshed CSS file portion. Since the original is very short, we can enrich it visually.

We need to follow the target style: card-mosaic with soft shadows, vibrant card colors on neutral background, each card different accent. But this is a small media query. Perhaps the style is applied to the contact cards and hero badge.

We can add:

- `.app-hero-section .row .col-lg-7` — maybe add text-shadow or color? But it is a column, not a card. Adding background could be weird, but can add color. Better to add a subtle text-shadow? Or not.

- `.app-hero-section .badge.bg-warning` — we can add box-shadow, border-radius, background (but .bg-warning Bootstrap class sets background color, we can override with background-color), color, border, etc.

- `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. We can add background, border, box-shadow, border-radius, transition, maybe backdrop-filter. But we must not change padding. We can add margin? That is layout, not allowed. We can add box-shadow, border, border-radius.

But we must be careful: The media query is max-width 575.98px, so mobile. We can still add shadows.

Given the target "card-mosaic" and "soft-shadows", we can apply multi-layer soft shadows to the cards. We can add a background to body? No selector. We can only work with given selectors.

Maybe we can add CSS custom properties definitions? No, we cannot add new selectors? The task says preserve all selectors, but we can add new declarations to existing selectors. We cannot add new selectors because that would change structure? It says class names keep exactly, etc. I think we should only modify existing rules.

We can also add a global `:root` custom property? That would add a new selector, which is not preserving. Probably not allowed.

Thus output should be the same media query, same selectors, same declarations (maybe unchanged) plus new visual declarations.

However, the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This implies we should modify the existing declarations if any, and add new ones. But the original has no colors to change. So we need to add them.

We need to ensure we don't change `text-align`, `font-size`, `padding`. We can leave them unchanged.

Let's craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffc107; /* or vibrant accent */
        color: #1f2a36;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid rgba(255,255,255,0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 18px;
        border: 1px solid rgba(0,0,0,0.04);
        box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 20px 40px -10px rgba(0,0,0,0.10);
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
}

But wait: We are not allowed to change `font-size`, we didn't. We are not allowed to change `padding`, we didn't. We added `color`, `background-color`, `border-radius`, `box-shadow`, `transition`, `border`, but border is allowed if only color and style not width? Actually border-width cannot change, but adding a border where none existed could affect layout (because box-sizing maybe). We must be careful: adding border can change layout dimensions. In conservative mode, only border-color and border-style can change, NOT border-width. Adding a border with width 1px would change layout. The instruction says: "border-color and border-style (NOT border-width)" can change. It doesn't explicitly say "may add border". Adding border-width is forbidden because it would affect layout. If we set `border: 1px solid rgba(...)`, that's adding border-width. That is not allowed because it changes width/height. We should avoid adding border unless original had border? Original doesn't have border declarations. So we should not add border. But we could set `outline`? Outline doesn't affect layout, and allowed are outline styles (color, type). But add outline? It doesn't affect layout, but maybe okay. We can add outline via `outline: none`? That could remove default outline, but not relevant. Better to avoid adding border.

Also adding `background-color` to elements could change appearance but not layout. Good.

But we need to consider the "target style card-mosaic" suggests vibrant card colors. Since we have only two card selectors, we could give different accents. But they share the same declaration block, so we cannot differentiate without splitting selector. We can split the selectors? The instruction says "Selector lists (commas)" should be preserved exactly. We cannot split a selector list because that would alter the selector grouping? The rule "Selector lists (commas)" must be preserved. That means we should keep the comma-separated list as is. We cannot split them into separate rules. But if we want different colors for different cards, we cannot do it in one rule. However, we can add a separate rule? That would add a new selector, not allowed. So we must keep them together and apply same visual style.

But we can use `:nth-child` or `:not`? That would add pseudo-classes, not allowed. Original selectors must be preserved exactly. So no.

Thus we can only apply same background to both. We can use a neutral background with soft shadow, that's fine.

We should also consider the `.app-hero-section .row .col-lg-7` may not need visual changes. But we can add color or text-shadow. Adding `color` might not be safe if it inherits, but okay. Adding text-shadow maybe.

But the task says "Refresh this CSS visually" — the original has no visual properties besides text-align, font-size, padding. So we need to add visual properties to each rule to make a difference. However, we must be careful: adding `background-color` to `.col-lg-7` could break design by making a giant column colored. But in mobile, it's a column; maybe okay but risky. We can add a subtle gradient? In conservative mode, we can change gradients, but adding a background to a layout container could be intrusive. Better to add `color` and `text-shadow` to hero text, not background. Wait, `.col-lg-7` is a column wrapper; adding `color` affects text inside. That might be okay. But if the text already has colors from other rules, our rule may override due to order/specificity. That could be intended. We can choose a color.

Maybe the hero section already has text, so adding `color` could refresh the palette.

Let's think about the context. The file is "saishi.css" (赛事 = events). The classes: `.app-hero-section .row .col-lg-7` likely hero content column. `.badge.bg-warning` warning badge. `.contact-channels-section article` and `.contact-quick-section .contact-card` are contact cards. We can create a cohesive soft shadow card style for the cards, a vibrant badge, and a subtle text color for hero.

We need to choose a palette. Target: card-mosaic: vibrant card colors on neutral background, each card type a different accent. Since we can't differentiate the two card types, we can make them neutral white with soft shadows. But "vibrant card colors" not possible with one rule unless we use a vibrant background. But we can use a very light neutral background and vibrant accents via shadows? Hmm.

Maybe we can exploit that `.contact-channels-section article` and `.contact-quick-section .contact-card` are in separate sections, and can have different accent via existing class-specific rules outside this media query. But within this media query, they share the style. We can use the same base, but perhaps also add `background-color` to each? We can't split. However, we can add separate rules for `article` and `.contact-card`? The instruction says "Every selector character-for-character preserved" and "selector lists (commas)" preserved. So we cannot alter the selector list. But can we add an additional rule with a subset? That would introduce a new selector block, which changes the set of selectors? It says selected selectors must be preserved exactly, not that no new selectors can be added. But adding new selectors could be considered changing the CSS structure. The conservative mode says "HTML is FIXED — only colors, shadows, and decorative properties may change." It doesn't explicitly forbid adding new rules with existing selectors? Actually, the selector must remain exact; adding a new rule with an existing selector would repeat selector but not change it. But the instruction "Output rewritten CSS, preserving ALL selectors and layout exactly" suggests we should output the same rule set, not add new ones. To be safe, don't add new selectors.

Thus both card types get same style.

Let's craft a soft shadow palette:

- Background: maybe leave white but with soft gradient? `background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);` But that changes background to a gradient. It is allowed since gradients can change. It doesn't affect layout.

- Border-radius: 20px.

- Box-shadow: multi-layer soft shadows: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)`.

- Transition: `transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease`. But if we add `transform`, that's a layout property? It's not in the forbidden list, but transition on transform doesn't change layout until hover. We aren't adding hover. We can transition background-color and box-shadow.

- Maybe add `backdrop-filter: blur(8px)` if card background is semi-transparent. But adding background-color with alpha could be nice: `background-color: rgba(255,255,255,0.7); backdrop-filter: blur(12px);`. However, `backdrop-filter` might not be supported, but okay. But background alpha changes appearance. This could be a nice soft glassmorphism. But the target is "card-mosaic" and "soft-shadows", not glass. So maybe not.

- Add `border: 1px solid rgba(255,255,255,0.6)`? But border-width issue. We could use `outline: 1px solid rgba(...)`? Outline doesn't affect layout and allowed? The allowed changes include "outline styles (color, type)" but not outline-width? They say "outline styles (color, type)" — maybe we can set `outline: 1px solid`? But outline-width is not explicitly forbidden, but the parenthetical suggests we can change color and type, not width. To be safe, don't add outline.

- We can use `box-shadow` with multiple layers, and `border-radius` with `background-clip: padding-box`? No.

For the badge, we can add vibrant background gradient, rounded pill, shadow. But `bg-warning` Bootstrap class already sets background-color: #ffc107. If we override, okay.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2a44;
        text-shadow: 0 2px 8px rgba(31,42,68,0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb400;
        background-image: linear-gradient(135deg, #ffb400 0%, #ff7b00 100%);
        color: #1f2a44;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(255,123,0,0.18), 0 12px 24px -6px rgba(255,123,0,0.22);
        transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        background-image: linear-gradient(145deg, #ffffff 0%, #f4f7fb 100%);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 20px 40px -10px rgba(0,0,0,0.10);
        transition: box-shadow 0.4s ease, background-color 0.4s ease;
    }
}

But wait, the instruction says "Only change colors, shadows, radius, transitions, gradients." Adding `background-image` is a gradient, allowed. Adding `text-shadow` allowed. Adding `border-radius` allowed. All good.

However, we added `color` and `text-shadow` to `.col-lg-7`; color is a color change. Fine.

We need to ensure `font-size` unchanged. We didn't.

We need to ensure `padding` unchanged. We didn't. But we used `var(--space-md) !important`, exactly same.

But is adding `background-image` to `.badge.bg-warning` going to conflict with Bootstrap's background? It overrides. Fine.

Should we change `background-color` to a vibrant color? The original `.badge.bg-warning` is yellow. We can make it orange gradient. That is fresh.

Maybe we should keep `font-size: 0.85rem` unchanged. Yes.

Let's think about the "card-mosaic" style: "Grid with mixed spans" etc. That's layout, but we are not adding layout. "Each card type a different accent" — we cannot, but maybe we can use a CSS variable with different value per card? But no new selectors. However, we could use `background-color: var(--card-accent, #fff)` and then define the variable elsewhere? But that would require a definition. Not possible within this snippet.

Maybe the "target style" is just a directive for the whole file, but we only see a small media query. The AI might be expected to only transform this snippet. So we just add soft shadows and radius.

We can refine:

- For the card, use a very light neutral background and a subtle inner highlight: `box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.10);` That adds an inner shadow, still multi-layer soft shadows. Good.

- For the badge, use a pill shape and vibrant gradient text? We can use `background-clip: text`? That would change text visibility, but not necessary.

- We can add `--space-md` custom property? No.

Let's ensure the `@media` condition stays exactly `(max-width: 575.98px)`. Yes.

We need to output only the CSS, no markdown fences. The final output should start with `@media`. No comments.