/* ============================================================
   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 output only CSS, preserving selectors and layout, changing only visual properties. The original CSS is a media query with three rules. We must keep selectors exactly, properties like font-size, padding? Wait, "padding" is layout/margin: keep similar ±20% maximum. But here `padding: var(--space-md) !important;` is a property value. We cannot change padding value except within ±20%? Actually "padding, margin (keep similar values, ±20% maximum)" is a rule. But we are allowed to change only colors, shadows, radius, transitions, gradients. So padding must remain exactly? The conservative mode says never change padding/margin values (keep similar, ±20% max). But better to keep exactly to be safe. However the target style is card-mosaic with glow effects, but this particular CSS is just a responsive media query. We need to refresh visually without changing layout. We can add box-shadow? Actually the rules apply to .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, and .contact-channels-section article, .contact-quick-section .contact-card. We can change colors, shadows, radius, transitions, etc. But we must not change selectors, and layout properties.

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 to produce refreshed CSS with same selectors. Possibly add color, background, border-radius, box-shadow, transition. But we must be careful not to change layout. For text-align center, keep. For font-size keep. padding keep. We can add visual properties like color, background, border-radius, box-shadow, etc. But note: `.badge.bg-warning` is a Bootstrap badge with warning background. We can override background? Maybe yes, but we could change to a glow accent. We can also add box-shadow to the badge and cards. But if we add `background` to `.badge.bg-warning`, it might override the Bootstrap warning background. That's a visual change, allowed. But the selector is `.app-hero-section .badge.bg-warning` — we can change color, background-color, box-shadow, border-radius, transition. We must ensure not to change layout.

For `.contact-channels-section article, .contact-quick-section .contact-card`, we can add border-radius, box-shadow, background, transition, maybe transform? But transform is not listed as layout? Transform can affect visuals but not layout, but it may affect positioning? It doesn't change layout, but is not in allowed list. The allowed list includes opacity, filter, backdrop-filter, outline. Transform not explicitly allowed. Better avoid.

The target "glow-effects" wants glow shadows: 0 0 24px rgba(accent, 0.4), hover halo 0 0 32px rgba(accent,0.6), medium radius, subtle pulsing animations. But we can't add @keyframes if none? We can add animation properties? The original has no animations. We can add `animation` property? But that might change visual only. However creating @keyframes would be adding a new rule outside the media query? Actually we can add @keyframes inside the media query? CSS allows @keyframes nested within @media? Yes, @keyframes can be inside @media. But the instruction says output only rewritten CSS preserving all selectors and layout exactly. "No markdown fences, no explanations." We can include @keyframes if needed? But original had none; adding new @keyframes is a structural addition. It might be okay, but "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" suggests we should not add new selectors. @keyframes names are not selectors exactly? They said "animation-name (values like duration/timing CAN change)" and "@keyframes names (values inside CAN change)" — meaning if @keyframes exist, we can change values but not names. But adding new @keyframes probably not allowed because it would introduce new names. Better avoid adding animations that require new keyframes. We can use existing CSS transitions? We can add transition property to elements. That is allowed: "transition timing, easing, duration" can change. But if original had no transition, adding a transition is a new property? It is a visual/decorative property allowed? The allowed list includes "transition timing, easing, duration" — implies we can modify transitions. Adding transitions might be okay, but maybe not required. To be safe, we can add `transition` and `box-shadow`, `border-radius`, `background`, `color`.

We need to pick a fresh palette. Target "card-mosaic" wants vibrant card colors on neutral background, each card type different accent. However the selectors are generic sections. We can apply accent colors.

Let's define:
- Overall background? We don't have selectors for body, so cannot.
- Hero section col: maybe add color? `.app-hero-section .row .col-lg-7` is a text container. We can add a subtle text-shadow, but not necessary. We can set color? Original no color. To preserve layout, changing color is okay. But do we need? We can add `color: #f8f9fa`? But it's a text container; if background is dark maybe. But we don't know. We should avoid changing text color unless sure. Maybe add `background: rgba(...)`? That would add a background behind the col, affecting layout? background doesn't affect layout. But could create a block. But it may be a column; adding background could look like a card. That's fine.

But the "card-mosaic" style suggests cards. For `.contact-channels-section article` and `.contact-quick-section .contact-card` are card-like elements. We can add background, border-radius, box-shadow. We need to preserve padding exactly (var(--space-md)). We can add border-radius: 16px; box-shadow: 0 0 24px rgba(accent, 0.4); transition: box-shadow 0.3s ease, transform 0.3s ease (but transform no?). Since no hover selector, we can't add :hover because selectors must be preserved exactly. We cannot add new selectors. So we cannot add hover effects unless we add a new selector, which is not allowed. So we can only add static glow shadows. But the variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)" — we need a hover selector, but original has no :hover for those elements. The instruction says preserve pseudo-classes, but that means if present keep them. It doesn't say we cannot add pseudo-classes? Actually "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" — it says keep them. It doesn't explicitly forbid adding, but "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" implies we should not add new selectors. So no hover. We can only set base glow. Maybe we can set `transition: box-shadow 0.3s ease` so any existing hover elsewhere will animate? But without hover, no matter.

We can add `animation` with existing keyframes? No. So we'll do static glow.

Need to ensure all colors changed from original? Original had no colors except var(--space-md) padding. So we are adding colors/shadows.

Let's craft the CSS.

For `.app-hero-section .row .col-lg-7`:
- text-align: center; keep.
- Could add `color: #2d2a3e;` maybe not needed. Maybe leave as is? But need to refresh visually. We can add `text-shadow: 0 2px 12px rgba(124, 58, 237, 0.15);` This is a visual property, allowed. It won't affect layout. Let's do a gentle glow.

For `.app-hero-section .badge.bg-warning`:
- font-size: 0.85rem; keep.
- Add `background: linear-gradient(135deg, #fbbf24, #f59e0b);` but bg-warning already yellow. We can change to a vibrant accent gradient. Add `color: #1f1a24;` maybe.
- Add `border-radius: 999px;` (pill) perhaps. But original badge may already pill. It's okay.
- Add `box-shadow: 0 0 24px rgba(251, 191, 36, 0.45);`
- Add `transition: box-shadow 0.3s ease-in-out, transform 0.2s ease;`
- Maybe `backdrop-filter: blur(4px);` but not needed.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- padding: var(--space-md) !important; keep.
- Add `background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));`? But target says vibrant card colors on neutral background. Better: each card type different accent. However the selector is a group; both article and contact-card get same style. We cannot differentiate. Maybe use a unified accent. We can set `background: linear-gradient(145deg, #f5f3ff, #ede9fe);` or `background: rgba(255, 255, 255, 0.8);` and `box-shadow: 0 8px 40px rgba(79, 70, 229, 0.18), 0 0 24px rgba(139, 92, 246, 0.25);`
- `border-radius: 16px;`
- `border: 1px solid rgba(139, 92, 246, 0.15);`
- `transition: box-shadow 0.35s ease, border-color 0.35s ease;`
- `backdrop-filter: blur(10px);` optional.

We must ensure no layout changes. Padding unchanged, no width/height. Border-width? We add border: 1px solid; This adds to box-sizing? If box-sizing is border-box, fine; but if not, border adds to element size? However border-width is not layout? They say "border-color and border-style (NOT border-width)" — we should NOT change border-width. Original had no border. Adding a border with width 1px would change border-width from 0 to 1, affecting box size. That's a layout change? It may affect dimensions but not layout structure, but they explicitly forbid border-width changes. So we should not add border. Better to avoid adding border. Use box-shadow for outline. So no border.

Similarly, adding background is fine. Border-radius only affects visual, doesn't affect layout (except clipping). Box-shadow no layout.

For the hero col, adding `text-shadow` no layout.

We can also add `opacity`? Not necessary.

Now, "glow-effects" wants 0 0 24px rgba(accent, 0.4). We can use accent colors. Need a consistent palette. Let's choose:
- Primary accent for contact cards: indigo #6366f1 / purple #8b5cf6.
- Badge accent: amber #f59e0b.
- Hero text: maybe deep violet #4c1d95? But original text color likely existing, and changing might impact readability. Better not change color? But to refresh, we can add a subtle text-shadow.

We need to output only CSS within the media query. We can add comments? No comments.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 20px rgba(139, 92, 246, 0.18);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f1a24;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.45);
        transition: box-shadow 0.3s ease-in-out, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(237, 233, 254, 0.72));
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(79, 70, 229, 0.12), 0 0 24px rgba(139, 92, 246, 0.28);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.35s ease, transform 0.25s ease;
    }
}

But adding `transform` in transition doesn't add transform itself; it's just a transition property. That's fine. However, without a hover, it won't do anything. But it's okay. But maybe we shouldn't use `transform` in transition because transform is not in the allowed visual property list? The allowed list says "transition timing, easing, duration" can change. Transition property can include any property. It's just a transition. Fine.

But we need to check: We didn't change any layout. Padding unchanged. Font-size unchanged. Text-align unchanged. Selectors unchanged. Good.

But is there any issue with `backdrop-filter`? It can create a new stacking context but no layout. It might affect performance but okay. We can include.

However, the instruction "border-radius (visual rounding only)" — we can change. We added border-radius. Good.

Need to ensure "No AI-REWRITTEN comments" and no markdown. We output raw CSS. Also ensure first character first CSS character. So no newline before? It says first character = first CSS character, so start directly with @media. We'll output without leading whitespace.

Let's double-check with original properties:

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

Our output:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 20px rgba(139, 92, 246, 0.18);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f1a24;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.45);
        transition: box-shadow 0.3s ease-in-out, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(237, 233, 254, 0.72));
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(79, 70, 229, 0.12), 0 0 24px rgba(139, 92, 246, 0.28);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.35s ease, transform 0.25s ease;
    }
}

This seems acceptable. But let's consider if we need to maintain the exact selectors' indentation? Indentation doesn't matter. But the instruction "preserving ALL selectors exactly" — yes.

Could we enhance with "Vibrant card colors on neutral background; each card type different accent"? Since we can't change selectors, but we can use CSS variables? We could define custom properties? But adding new custom properties at :root would be a new selector? Actually :root not in original. We shouldn't add. We can use direct colors.

What about "Medium gap (20-32px)"? We cannot change gap. No gap properties in original. So not applicable.

What about "Subtle pulsing animations"? We cannot add @keyframes without new selector? Actually @keyframes is not a selector? But the instruction says "@keyframes names (values inside CAN change)" — implying if original has none, we shouldn't add. So no.

We might consider adding `animation` with existing Bootstrap's? No.

Maybe we can use `filter` to add a subtle pulse? Without animation, no.

So final output as above.

Need to ensure no conflict with existing Bootstrap classes. The badge background gradient will override. Good.

Could we set `-webkit-backdrop-filter` for Safari? Maybe not necessary, but could add. But that would be a new property; allowed (backdrop-filter). We can add both. However, output should be clean. Let's include `-webkit-backdrop-filter`? It's a visual property, fine. But maybe not needed.

Let's not include too much. Keep it concise.

Check "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)". We have multi-layer on contact cards: two shadows. Good. Badge one shadow.

"text-shadow" changed/added.

"border-radius" changed/added.

"transition" changed/added.

"filter, backdrop-filter" added.

"