/* ============================================================
   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 to rewrite the CSS file content in conservative mode. The original CSS is a small media query block. We need to refresh visual identity only: colors, shadows, radius, transitions, gradients, etc. But we cannot change layout properties like padding? Actually padding and margin can change within ±20% maximum. But the instruction says "width, height, padding, margin (keep similar values, ±20% maximum)". In this snippet, padding: var(--space-md) !important; We can adjust var(--space-md) value? No, we can change CSS custom properties values. But we must be careful not to break layout. The target style is card-mosaic with airy-rhythm, but this CSS only contains a few rules inside a media query. Since the original CSS is very small, we need to make visual changes while preserving selectors and layout.

We cannot add new selectors or change the existing ones. We can only change the values within each rule. The 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;
    }
}

Allowed changes: text-align is layout/typography? Actually text-align is listed under typography and must remain unchanged. font-size must remain unchanged. padding can change within ±20% but it's using a variable. We can change the variable value? The variable is defined elsewhere, but we're only outputting this file. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. But --space-md is a spacing variable, not color/shadow. Changing it could affect layout more broadly. We should not change it. But we can introduce visual changes elsewhere? Actually we only have these rules. We need to "refresh this CSS visually" but the original has no colors, shadows, radius, transitions, gradients. So what can we change? Maybe we need to add visual properties like border-radius, box-shadow, color, background, border, transition to these elements while keeping layout properties. But we cannot change selectors. We can add declarations to existing rules.

The instruction: "Only colors, shadows, and decorative properties may change" and "NEVER CHANGE: layout, typography". We can add new visual declarations to existing selectors. That is allowed, as long as we preserve existing declarations? Actually we should preserve all original declarations (they are layout/typography) and add new visual ones. But we must be careful: For .app-hero-section .row .col-lg-7, text-align: center is typography? It's text alignment, listed as "text-align, vertical-align" under typography, so cannot change. We can add color, background, etc? But that might alter the visual identity of hero section. The target style is card-mosaic, but we don't want to mess with layout. However, adding background to a column might be okay but could be odd. We can add a subtle color or text-shadow? But the hero section might not need it.

Maybe the intended task is to rewrite the CSS to include visual properties that are harmonious with the target style, while keeping selectors and layout. Since original is very minimal, we need to produce a rewritten version with same selectors but with visual enhancements. But we cannot change padding variable? We can use var(--space-md) as is. We can add border-radius to contact cards, box-shadow, transition, background gradients, etc.

But we must be careful: The output must be only CSS. We can add declarations within the existing rules. We can also change the media query? No, breakpoints cannot change. So keep @media (max-width: 575.98px).

Let's analyze the selectors:

1. .app-hero-section .row .col-lg-7 — This is a column inside hero section. We could add a subtle background gradient? But that might affect the hero section's look. Maybe add color? Not necessary. Could add a decorative background, but it's a column; adding background could break the intended design. Better to keep it minimal.

2. .app-hero-section .badge.bg-warning — This is a badge with warning background. We can add box-shadow, border-radius, perhaps a new color? But bg-warning is a Bootstrap class that sets background-color: #ffc107. We can override background-color? Yes, we can change color values. But "badge.bg-warning" is a class that typically has yellow background. To change visual identity, we could add a gradient or change background-color to something else. But then it wouldn't be "warning" semantic. However, target style is vibrant card colors; we can adjust.

3. .contact-channels-section article,
   .contact-quick-section .contact-card — These are contact cards. We can add border-radius, box-shadow, transition, maybe padding (but padding is already set). We can change padding via var(--space-md) if we want? We cannot change var definition here. We can add other visual properties.

The instruction says "NO AI-REWRITTEN comments" and "first character = first CSS character".

Given the tiny original, I think the expected output is to add visual properties consistent with "airy-rhythm": large border-radius, soft pillowy shadows, breathing room. But we must not change font-size, text-align, padding (or within 20%). Actually padding is already var(--space-md); we can leave it. But we can add padding? No, that would be changing layout? We can add padding? It already has padding; adding another padding declaration would override? It uses !important. We could change the value from var(--space-md) to something else, but that is within ±20%? We don't know the value of --space-md. Better to keep as is.

Maybe we can add a new declaration to the badge: border-radius, box-shadow, background gradient. And to contact cards: border-radius, box-shadow, transition, background color, border.

But we must ensure we don't add properties that are layout-critical? Adding border-radius, background, box-shadow, transition are all visual. Good.

Let's craft a response.

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 can add:

- For .badge.bg-warning: 
  background: linear-gradient(135deg, #ffb347, #ff6b6b); 
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  But transform would be a layout property? Actually transform is visual, but it could affect layout? Transform doesn't affect layout. However, we should avoid changing layout. Adding transform is okay. But the instruction says "transition timing, easing, duration" can change. We can add transition. But if we add transform on hover? We cannot add :hover pseudo-class because that would change selector. But we can add transition without a hover? That's fine. Actually transition alone does nothing unless a property changes on hover. We cannot add new selectors like :hover. So perhaps not add transform transition because no trigger. But we can add box-shadow transition with a static box-shadow? Not needed.

- For contact cards:
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
  We can also add backdrop-filter? But that's visual.

But wait: These selectors are inside a media query for max-width 575.98px (mobile). On mobile, large box-shadow and border-radius may be okay. But adding background: #fff to contact cards might override existing background? That's acceptable.

However, we need to be mindful of the "original CSS" has no colors. If we add colors, we are changing visual identity. Good.

But the target style "card-mosaic" with "airy-rhythm" suggests large shadows, border radius, vibrant card colors. We should perhaps use a more vibrant palette. Let's choose a palette.

Let's decide:

- Badge: keep it vibrant orange/coral gradient. Background: linear-gradient(135deg, #ff9a9e, #fad0c4 50%, #ffecd2); or something. But it's a warning badge; maybe adjust to a warm gradient. Use box-shadow: 0 8px 24px rgba(255, 154, 158, 0.35).

- Contact cards: Use a light background with a soft shadow, border-radius: 24px, a subtle border, and perhaps a background gradient for each? But we only have one rule for both article and contact-card. We can apply a unified style. For variety, we might use :nth-child? But that would change selector. Not allowed. So same style for all.

We can use a "card-mosaic" style: vibrant card colors on neutral background. But since we can't add different accent per card, we could use a common background: linear-gradient(145deg, #fdfcfb, #e2d1c3). But that's for contact cards. Or maybe more neutral.

The original snippet is likely from a website. We should not make too aggressive changes because conservative mode. Add visual flair.

Also, note the rule `.app-hero-section .row .col-lg-7 { text-align: center; }` — we can add color? Maybe not necessary. But to make it a "fresh color palette", we could add a subtle text shadow? No, if it's a hero section, adding color could be okay but might conflict with existing classes. We should be cautious. We can add `color: #2d2d2d;` but that might override inherited color. That's a visual change. But perhaps not needed.

Actually, the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed if present. The original has no color values. We can add colors to all rules to satisfy the "refresh" requirement. But we should avoid changing layout. Adding color to the hero column might alter the text color. That's fine.

But wait: The output should be "same layout, fresh color palette + shadow/radius identity". So we should add colors, shadows, radius to the existing selectors.

Let's construct:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d3436;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        color: #5a1a1a;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(255, 154, 158, 0.35);
        padding: 0.4rem 0.9rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.3s ease, border-radius 0.3s ease;
    }
}

But wait: We added padding to the badge, which is a layout change? Padding is a layout property, but the original badge had no padding specified. Adding padding might alter the badge's size. The instruction says width, height, padding, margin can change within ±20% of input. Since there was no padding, any addition could be considered too large. But we can avoid adding padding. We can keep the badge as is. However, if we change background and radius, the badge may still look fine. Let's not add padding to the badge.

Also, adding `backdrop-filter` to contact cards might be visual but could be unsupported.

The original rule for contact cards uses `!important` on padding. If we add a background, it's okay.

Now, the instruction says "NO AI-REWRITTEN comments". So no comments.

We must preserve the exact selectors and media query. We can reformat but keep same.

Let's check if we changed any layout properties:

- .app-hero-section .row .col-lg-7: added color, text-shadow. text-shadow is visual. text-align unchanged.
- .badge: added background, color, border-radius, box-shadow. font-size unchanged. Did we change padding? No.
- contact cards: added background, backdrop-filter, border-radius, border, box-shadow, transition. padding unchanged.

We did not change any forbidden properties. Good.

But is text-shadow allowed? Yes, "text-shadow" is in list of can change.

Could adding `background: rgba(255,255,255,0.85)` to contact cards be too heavy? It's visual.

Now, target style "card-mosaic" with vibrant card colors. We could use a more vibrant palette for the badge and contact cards. Let's choose a cohesive palette.

Maybe use:

- Badge: linear-gradient(135deg, #ffd166, #ff6b6b) — vibrant sunset. Color: #4a1a1a.
- Contact cards: background: linear-gradient(145deg, #ffffff, #f0f4ff); border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04).

But we don't want to make it too flashy. Airy-rhythm suggests soft pillowy shadows and large radius. So use large radius: 24px, soft shadows.

Let's also add a subtle transition to contact cards for hover feedback. But without a hover selector, transition may not be useful, but it's fine. We could also add a `transform: translateY(0);` but that might affect positioning? No, transform doesn't affect layout. But if we set transform, we must be careful not to alter layout. It's visual. But since there's no hover, it won't move. We can omit transform.

Maybe we can add `transition: transform 0.3s ease, box-shadow 0.3s ease;` and `transform: translateY(0);` to prepare for potential hover? But if a hover rule exists elsewhere, it would apply. But we cannot add a hover rule. Still okay.

Let's review the instruction: "transition timing, easing, duration" can change. So adding transition is allowed.

Now, should we include the original `text-align: center;` and `font-size: 0.85rem;`? Yes, preserve.

Also, the media query itself: "(max-width: 575.98px)" is a breakpoint condition, cannot change. Good.

Now, what about the `!important` on padding? Keep it.

Let's produce final CSS.

But one more thing: The instruction says "Goal: same layout, fresh color palette + shadow/radius identity". We should ensure all selectors have at least some visual property. The badge and contact cards have new colors/shadows/radius. The hero column has text shadow, but no background or color? We added color. Good.

Maybe we can add a background to the hero column? That might be too intrusive. Let's not.

Could we add `border-radius` to the hero column? It's a column, not a card. Probably not.

I think the output is fine.

Let's write it cleanly, preserving the original structure (media query and rules). I'll format with standard indentation.

Final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d3436;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff9a9e, #fad0c4);
        color: #5f1f1f;
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(255, 154, 158, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.3s ease, border-radius 0.3s ease;
    }
}

This preserves all layout and