/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need respond with rewritten CSS. We need modify only visual properties. Input CSS is small, inside media query. Target style card-mosaic with soft shadows, vibrant card colors neutral background, but specific selectors: .app-hero-section .row .col-lg-7 text-align center (layout cannot change, so keep text-align maybe text-align allowed? It's in allowed list as text-align likely cannot change, but target maybe no change). Need rewrite only colors/shadows/radius/transitions etc. But original rules are layout-ish text-align and font-size/padding. We can modify visual properties that exist, but selectors preserved.

Need output only CSS. Need possibly add visual decorative properties? We can alter color values. Need preserve all selectors and layout. Original has no colors/shadows in this block except padding/text-align/font-size. Padding can vary ±20%. Need refresh visual identity maybe add color/background/border-radius/text-shadow/transition? But can we add properties? "CSS custom properties values" etc. We may add visual properties without changing layout. But must preserve selectors. It says ONLY rewritten CSS, preserving ALL selectors and layout exactly. Adding properties is okay if visual not layout. Need maybe set text-align center (keep). Could add color, background maybe; but we must be careful because selectors perhaps within media query.

Let's parse:

@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;
    }
}

Need refresh. For card-mosaic, vibrant card colors on neutral background, different accent per card type. But can't change HTML classes. Could add visual backgrounds to .contact-channels-section article and .contact-quick-section .contact-card maybe. But these are contact cards, not relevant? Need perhaps subtle color. Need preserve padding with ±20%. --space-md unknown, can't adjust maybe okay if no change. Could alter padding property value to calc? But "keep similar values, ±20% maximum". We could use var(--space-sm) maybe not know. Safer keep same.

Need add new visual properties: color, background-color, border, border-radius, box-shadow, transition. But must not alter layout. Setting border adds box, changing dimensions? Box-sizing maybe unknown. But adding border can affect layout if global box-sizing not border-box. Usually maybe. Better avoid border, but maybe can use background-clip and box-shadow. Box-shadow no layout. Border-radius no layout. transition no layout. Color no layout. background-color no layout. Could set color, background-color, border-radius, box-shadow, transition. Need not use border. But "card-mosaic" suggests cards distinct. Could apply to specific selectors perhaps. But must be appropriate. The hero row col-lg-7: text-align center. We may add color? Might affect text; but original has no color. Adding color transitions maybe okay. But if original color from inherited, setting could alter but visual allowed. Need perhaps style hero with neutral? Contact cards with vibrant backgrounds.

Need consider no extra comments and no markdown. Need produce exact media query with additions.

Need perhaps transform to add colorful accents via box-shadows, background colors. But if add background-color to article, could alter original look but okay. Need perhaps use CSS variables? We can define custom properties inside media? Adding root custom properties? The selectors must be preserved. "CSS custom properties (--color-*, --shadow-*) values" can change, but if no existing variables, maybe can introduce? Might be allowed. But output should be CSS not additional selectors? "preserving ALL selectors" maybe could add new selectors? No, don't add. Could define variables on :root? That is new selector, not allowed? It says "preserving ALL selectors exactly" likely don't add. Better use direct values.

Need maybe use color palette: neutral background? But applying background to .col-lg-7 might make full row; perhaps not. Let's think card-mosaic "vibrant card colors on neutral background; each card type a different accent." Existing selectors: `.contact-channels-section article` and `.contact-quick-section .contact-card` are cards. We can make them visually vibrant with background, border-radius, shadows. The hero section maybe gets a subtle gradient background? But adding background to `.col-lg-7` might be a large surface; maybe okay but target says neutral background. Could set background: rgba(...) or none. Better not set background on hero col, just text color perhaps.

Need perhaps create "card-mosaic" with background colors:

- `.app-hero-section .row .col-lg-7` maybe: color: #1e293b; text-shadow maybe? But hero section could be dark? No idea.
- `.app-hero-section .badge.bg-warning` existing class bg-warning likely background from Bootstrap. We can change? It's warning badge; could set background: #f59e0b; color: #78350f; border-radius: 999px; box-shadow: ... But original `.badge.bg-warning` class has background from Bootstrap; setting `background: linear-gradient(...)` changes visual. Need maybe only font-size? Could add display: inline-block? Layout? font-size is in original; font-size cannot change? "font-size, font-weight, font-style" are NEVER CHANGE. Wait in original font-size: 0.85rem; we may not change? Under typography, font-size never change. We should preserve exactly. Good. But can add background etc.

- Contact cards: padding: var(--space-md) !important; keep.

Need maybe integrate soft-shadows: Multi-layer soft shadows: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12). Large border-radius 12-24px. Smooth transitions 0.3-0.5s ease.

Potential new CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #f59e0b);
        color: #4a2c0a;
        border-radius: 999px;
        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;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        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: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
    }
}

But adding transition for transform but no transform on hover. That's okay. But if no hover, transition no effect. Could add hover? That would require pseudo-class selectors not in original. We should not add selectors, but can use `:hover` on same selector? It modifies selector list — not allowed. Could include `@media (hover:hover)`? no. Better not.

Need preserve `font-size: 0.85rem;` unchanged. We did.

Need maybe change background of article/card to vibrant card colors different accent. But with same selector, cannot different by card type unless each article different via nth-child? That would add selectors. But we can set same background for both. Maybe "each card type a different accent" not possible without selectors. Could use `:nth-child`? That's new selector, probably not allowed. But target style "card-mosaic" perhaps not strict. We can maybe set `.contact-channels-section article` to one background and `.contact-quick-section .contact-card` to another. That would give different accent. In original selector list, splitting into two selector rules preserves both selectors? Not exactly the combined list, but the selector list is "preserved" perhaps if we split? Need preserve selector lists exactly? It says selector lists with commas should be preserved. We shouldn't split. Could use CSS custom properties within combined rule? Not different. Could set both same accent. Maybe use two selectors with different variables? Not allowed.

Could preserve combined selector but add `:nth-child`? No.

Could maybe use `background` plus `box-shadow` variations using CSS `background` in same rule. Can't differentiate.

Maybe use `article` and `.contact-card` different via separate selector? The original has a combined selector. We could write combined rule for common, then a separate rule for one selector? That adds selector but doesn't alter original? It would preserve existing selector and add another maybe not. But "preserving ALL selectors and layout exactly" could allow adding new rules? Usually not. The instruction says "Every selector character-for-character preserved?" It likely means each original selector must remain, but adding selectors might be disallowed? We should avoid.

Need perhaps target style more important with "soft-shadows" variant. We can choose neutral background and vibrant accents for "badge" and "cards." Need maybe use `border-radius: 20px` etc.

Need be careful about `background` on `.app-hero-section .row .col-lg-7` if the hero already has background. Adding a background could be large. Better avoid background, just color and text-shadow.

Need perhaps incorporate "mosaic" with gradients and multiple shadows. For contact cards, set `background: #ffffff` maybe with gradient colors. But if cards become white, neutral background? Could set background: rgba(255,255,255,0.8); backdrop-filter: blur(12px). But backdrop-filter can be visual and no layout, but Safari support. Maybe use `background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,250,252,0.96));` backdrop-filter. But backdrop-filter might affect performance but okay. Also the `.app-hero-section .badge.bg-warning` could use vibrant amber gradient and soft shadow.

Need perhaps consider `text-align` and `font-size` and `padding` are protected. We preserve.

Could change `padding: var(--space-md) !important;`? Padding can vary ±20%. But if using var undefined? Maybe original has `--space-md` custom property. We can keep as is; no problem. Should we adjust to `padding: calc(var(--space-md) * 0.9) !important;`? That would be within ±20% but more complex. Better keep same to be safe. It allows similar values. Original padding unchanged; "NEVER CHANGE padding" says keep similar, ±20% max. So no change okay.

Could add `margin`? No.

Need perhaps add `border-radius: 1rem` or 18px. With padding var.

Need perhaps add `box-shadow` to `.badge` and cards. Good.

Need maybe adjust `background-color` on `.app-hero-section .badge.bg-warning` to `#fbbf24` etc. But class `bg-warning` already has Bootstrap background. If we set background to a gradient, okay.

Need maybe define CSS `color-scheme`? no.

Need maybe avoid adding `transform` if no hover. It's no layout. Fine.

Need maybe use `:focus-visible`? no.

Need maybe add `transition` on `.badge` and cards but no hover; enough? Maybe output target "Smooth transitions (0.3-0.5s ease)" so we include transition.

Need maybe include `filter`? not needed.

Need maybe create a "mosaic" feel through multiple shadow layers, rounded corners, colorful accents.

Potential issue: `transition: transform` on `badge` but no transform property. Could set `transform: translateZ(0)`? That might alter layout? no but might create stacking context. But not needed. If setting transform, could affect layout? transform doesn't layout but can affect fixed? no. Better not.

Could use `transition: box-shadow 0.35s ease, background-color 0.35s ease, border-radius 0.35s ease;` no need transform.

Need perhaps add `background-color` to cards? Use background.

Need perhaps keep original media query `@media (max-width: 575.98px)` exactly. Good.

Need perhaps if `background: linear-gradient(145deg, #ffffff, #f8fafc)` overrides any theme. Fine.

Need perhaps color palette: use modern neutral background and vibrant accent. Let's pick:
- Hero text: `#0f172a` (slate-900)
- Badge: `background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f;` (amber)
- Cards: `background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);` maybe with accent borders? Can't use borders. Could use `box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 8px rgba(15,23,42,0.05), 0 20px 40px -10px rgba(15,23,42,0.12);` Multi-layer with inner highlight. That's good. Border-radius 18px.

Need perhaps `color` for cards? Since cards have text, could set `color: #1e293b;` but if original links etc maybe. We can set color on cards. Good.

Could set `background-clip: padding-box;` no.

Need perhaps `backdrop-filter: blur(16px);` Might make cards glassy if background translucent. But if no background behind, no effect. Use solid gradient.

Need perhaps no `!important` except padding original. Keep `!important` for padding. When setting background etc maybe not need.

Need perhaps for `.app-hero-section .row .col-lg-7`, add `text-shadow: 0 1px 0 rgba(255,255,255,0.4);` Visual.

Need perhaps if `text-align: center;` in hero, adding `color` might be okay. But perhaps hero title color should remain; no override. Yet visual identity refresh. Use `color: #1e293b;` if inherited. Good.

Could add `transition: color 0.3s ease;` but no.

Need maybe include "card-mosaic" with "vibrant card colors" - cards both same could be considered "neutral". Could give one surface a hint of tinted background: `.contact-channels-section article` is in selector list, could use `background: linear-gradient(145deg, #ffffff, #eef2ff);` (indigo tint) and `.contact-quick-section .contact-card` maybe not different. But better not split. Could set both to neutral with accent pseudo-element? No.

Could use CSS `background` with multiple backgrounds, perhaps `background: linear-gradient(...), radial-gradient(...)` in same selector. That's still one color. Fine.

Need perhaps target "each card type a different accent" but only one card rule. Could use `box-shadow` color? Not enough.

Would it be acceptable to add `:nth-child`? It changes selectors, not preserve. Don't.

Need maybe include `outline`? no.

Need output no markdown. Could include only CSS. Need perhaps final answer with the media query.

Let's craft final with enough visual changes:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #f59e0b);
        color: #4d2d00;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(245, 158, 11, 0.15), 0 12px 24px -8px rgba(245, 158, 11, 0.25);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #f1f5f9);
        color: #1e293b;
        border-radius: 18px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 8px rgba(15, 23, 42, 0.05), 0 20px 40px -10px rgba(15, 23, 42, 0.12);
        transition: box-shadow 0.4s ease, background-color 0.4s ease;
    }
}

Need maybe `transition: background 0.35s ease` doesn't animate gradient? It can, but okay. Better `transition: box-shadow 0.35s ease, transform 0.35s ease;` But no transform. Could include `transition: box-shadow 0.35s ease, filter 0.35s ease;`. Since target smooth transitions. But no interaction. Maybe transition is acceptable. It