/* ============================================================
   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 rewritten CSS. The original snippet has a media query with rules. We must preserve selectors, layout, typography. We can change visual properties: text-align? It's layout? text-align is in layout? Actually text-align is listed under typography? It says "text-align, vertical-align" in typography section under items not to change? Wait "📐 LAYOUT (HTML cannot adapt to changes):" includes "text-align, vertical-align" under layout? Let's check: In the "NEVER CHANGE" section, layout includes "text-align, vertical-align" yes it's listed. Actually the line: "• text-align, vertical-align" is under LAYOUT? Let's scroll: The layout block includes "• text-align, vertical-align" near the end. Yes, so text-align is layout and cannot change. So must keep text-align: center.

We can change font-size? That's typography, no change. So font-size: 0.85rem unchanged.

Padding can change within ±20%. Original padding: var(--space-md) !important. We can adjust? Need know value of --space-md? We don't know. But we can leave as is because padding is layout; can change within ±20%. But safest not change since we don't know value. But maybe we can change to a different spacing variable? No, because it might affect layout. Keep.

We need refresh visually with horizontal-strips and glow-effects. Since this is only media query, changes likely to colors that appear in these elements: .badge.bg-warning, .contact-channel article, .contact-card. We can add color, background, box-shadow, border-radius, transitions. But no new properties? We can add properties as long as visual only. Adding box-shadow may not affect layout. But we must be careful with .badge.bg-warning. Could change background color? But original has class .bg-warning likely Bootstrap. We can override background, border, color, box-shadow. We can also add transition.

We need preserve selectors exactly. The media query wrapper must remain. We can't change selectors. We can add declarations inside existing rules. The original rules:

@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 visual declarations to each. Need target style horizontal-strips: alternating backgrounds per strip. But within media query only mobile sections. We can apply alternating background colors to these sections? But selectors are specific to elements, not full sections. Could add background-color, color, etc. Need not overdo.

We can introduce a fresh palette. Choose a dark/cream/white pattern? For mobile perhaps deep indigo/slate? We need glow effects. Let's select accent color, e.g., #6c63ff or #ff6b6b. Since "cream / dark / white" pattern. Let's create something.

Original CSS doesn't define variables. We can add custom properties? Yes can change custom property values, but we can also define new ones? It says "CSS custom properties (--color-*, --shadow-*) values" can change. We could add :root? But that would be an additional selector. The instruction says keep selectors exactly, so adding :root would violate. Better not.

We can use direct values.

For .app-hero-section .row .col-lg-7, only text-align currently. We can add color? The col-lg-7 is likely container with text. We can add text-shadow maybe. But no layout change. Add color and text-shadow. Need preserve text-align. Add maybe background? But background on a column might expand to width, can be okay. But to avoid breaking layout, use background-clip? Hmm.

Given target style horizontal strips, perhaps we can add border-top/bottom? But border-width is layout? No, "border-width" is in the never change? Actually border-width is not in layout? Wait the "NEVER CHANGE" list includes "border-color and border-style (NOT border-width)" meaning border-width cannot change? It says under "✅ YOU MUST CHANGE (visual identity only)" includes "border-color and border-style (NOT border-width)" but that's in the must-change category. In the never change layout section, border-width isn't mentioned. Actually they say "border-color and border-style (NOT border-width)" in must change—this implies border-width is not allowed to change. So don't change border-width. But adding border-width from none would be a change in border-width, likely not allowed. So don't add border.

We can add box-shadow, background-color, color, border-radius, transitions, maybe backdrop-filter.

Need also include halo on hover and pulse animations. We can add transitions and @keyframes? @keyframes names can't change if existing? There are no keyframes. We could add a new @keyframes? Is that allowed? The rules: "animation-name (values like duration/timing CAN change)" and "@keyframes names (values inside CAN change)". It doesn't forbid adding new keyframes, but "SELECTORS (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" doesn't mention @keyframes. But output must preserve all selectors? Adding @keyframes would be adding new CSS construct. The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Additions of declarations are okay. Addition of keyframes might be okay if not changing HTML. But maybe risky. However target style has "Subtle pulsing animations". We can add a keyframe and apply animation to an existing selector. But if the file is a partial media query snippet, adding global keyframes outside media query could be okay. But instructions say first character = first CSS character, so we can start with @media; adding @keyframes before media would be okay maybe. But to be conservative, maybe avoid adding new keyframes? But we can use built-in CSS animations? No. We can add animation with existing keyframes? There are no existing. We could add an inline animation using transition? Pulse requires keyframes. But "Subtle pulsing animations" is target. We can add @keyframes pulseGlow. That would alter the CSS structure but not HTML. Since the target style includes it, likely expected.

But the prompt says "Only the rewritten CSS, preserving ALL selectors and layout exactly" — adding @keyframes doesn't change selectors. It is an at-rule. It should be fine if we include it either at top or in media. @keyframes can be outside media. But layout unchanged.

Need be careful: We cannot change .app-hero-section .badge.bg-warning font-size. We can change background color, box-shadow, transition, etc.

Let's plan a cohesive visual refresh.

Color palette:
- Cream: #fdf6e3 / #faf3e0
- Dark: #1e1b2e / #23212e
- Accent: #ff6b6b or #f59e0b? Glow effects often use accent color. Let's choose amber/gold glow on cream/dark for horizontal strips feel. Or purple.

Target "horizontal-strips" with alternating white/cream/dark/white. In a media query, we can assign:
- .app-hero-section .row .col-lg-7: maybe dark background? But it's a column, setting background might fill only content? Actually on mobile, col-lg-7 likely full width. We can set background: #1e1b2e; color: #fdf6e3; border-radius: 16px; box-shadow: 0 0 24px rgba(255, 107, 107, 0.4); padding? But padding is layout; can adjust ±20% from current none. If original has no padding, adding padding would affect layout. Maybe can add? It would change width/height? Since box-sizing? Not advisable. So maybe don't add padding. But horizontal strips need vertical padding. Can't change padding constraint? We can set padding within ±20% of original, but original unknown. Better not.

Maybe the strips are already sections in full CSS. But here only media query. We can only adjust these specific elements.

Let's add decorative background to the col-lg-7? Could be okay if it doesn't affect layout if using background-image? Background doesn't affect layout. Add border-radius. Add box-shadow (doesn't affect layout). Add color and text-shadow.

For .badge.bg-warning: override Bootstrap warning background with gradient or flat color. Add box-shadow glow. Add transition. Add border-radius. Add color. Since it's a badge, box-shadow okay.

For .contact-channels-section article and .contact-quick-section .contact-card: These are cards. We can add background, border-radius, box-shadow, transition, maybe backdrop-filter. Need no padding change. They currently have padding var(--space-md) !important. Keep.

Need "alternating background colors per strip" perhaps assign article background cream, .contact-card dark? Let's do:
- article { background: #fdf6e3; color: #1e1b2e; border-radius: 16px; box-shadow: 0 8px 24px rgba(30, 27, 46, 0.12), 0 0 0 1px rgba(255,107,107,0.1); transition: box-shadow .3s ease, transform .3s ease; }
But transform is layout? It's visual, but could affect layout? Transform doesn't affect layout. Could add hover. But original selector doesn't have :hover. We can add :hover? That would be a new pseudo-class. Is that allowed? "Pseudo-classes (:hover, :focus, ::before, ::after)" in "NEVER CHANGE" means keep existing? Actually it says selector lists, combinators, pseudo-classes keep exactly. It doesn't necessarily forbid adding a new pseudo-class rule? But "preserving ALL selectors" would imply don't add new selectors. So no new :hover selectors. However we can add transition with hover only if there is an existing :hover? There isn't. Can't add new selector. But we can add transition property to the base, but no hover to trigger. That's pointless but allowed. Hmm.

The target "Halo on hover" would require a :hover rule. But adding :hover to selectors would be new selector. Is that against "selectors: keep exactly"? Likely yes. The instructions: "🏷️ SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY ... Pseudo-classes (:hover, :focus, ::before, ::after)" — This is in the NEVER CHANGE list. It likely means preserve any existing pseudo-classes and don't alter them. Adding new :hover might be considered altering the set? It's ambiguous. To be safe, do not add new pseudo-classes. We can use transition on box-shadow so if there were hover from elsewhere, it transitions. But no hover effect.

But "Subtle pulsing animations" can be added via @keyframes and animation. That doesn't require hover.

Let's define a keyframe pulseGlow that animates box-shadow between glow intensities. Apply to badge and article/card. Ensure animation properties don't affect layout. Good.

However adding @keyframes maybe violates "selectors"? Not a selector. Likely fine.

Need ensure we preserve @media (max-width: 575.98px) exactly and all rules with same order/selectors.

Let's craft output.

Potential declarations:
- .app-hero-section .row .col-lg-7 { text-align: center; color: #1e1b2e; text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6); }
But original had no color. On mobile, if background is white? Actually hero section may have dark background. Hard to know. Better avoid text color changes that could reduce readability. Since we don't know context, maybe add only decorative text-shadow? But text-shadow can be problematic. Hmm.

The task says "Aim to refresh visual identity without changing layout." So we should change colors. Since we don't know the existing surrounding, but we can assume this media query is from a full stylesheet. It's okay to set colors.

Maybe better to set background-color on .col-lg-7 to white/cream for "horizontal strips". But this column may contain hero content; setting a full background could be okay. Use border-radius and box-shadow.

Let's choose:
- .app-hero-section .row .col-lg-7: background: ~radial-gradient? But it's a column, perhaps we can set background to linear-gradient cream to white. Add color dark, text-shadow, border-radius, box-shadow glow. Since it's in a media query, mobile. Could be nice.

But we must not change padding/margin. Adding background doesn't affect layout. Let's use:
background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
color: #1e1b2e;
border-radius: 16px;
box-shadow: 0 0 24px rgba(251, 191, 36, 0.35), 0 8px 16px rgba(30, 27, 46, 0.1);
text-shadow: 0 1px 2px rgba(255,255,255,0.5);
transition: box-shadow .45s ease;
- .app-hero-section .badge.bg-warning: background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; border-radius: 999px; box-shadow: 0 0 24px rgba(245, 158, 11, 0.55); animation: pulseGlow 2.4s ease-in-out infinite; transition: box-shadow .3s ease;
- contact articles/cards: For horizontal strips, we can alternate: article background cream/dark? Use:
.contact-channels-section article { background: #1e1b2e; color: #fdf6e3; border-radius: 16px; box-shadow: 0 8px 24px rgba(30,27,46,0.15), 0 0 24px rgba(255,107,107,0.25); }
.contact-quick-section .contact-card { background: #fdf6e3; color: #1e1b2e; border-radius: 16px; box-shadow: 0 8px 24px rgba(30,27,46,0.12), 0 0 24px rgba(245,158,11,0.2); }
But this creates two rules replacing comma selector? Need keep comma group. We can keep the same selector group and apply one style to both. But to alternate, we'd need split into two selectors. The original has a comma group. "Selector lists (commas)" in never change means don't split? It says "Selector lists (commas)" — you must preserve them. Splitting a selector list changes selector structure. So we cannot split into two separate rules. So both must have same style. We can still apply same background etc. That's okay.

Thus .contact-channels-section article and .contact-quick-section .contact-card both get same visual style. That's fine.

Let's choose a dark theme for the contact cards? Since hero col is cream, badge amber, contact cards maybe dark with glow. That provides alternating strips: cream hero, dark cards. Good.

Use same declarations for combined selector:
background: #1e1b2e;
color: #fdf6e3;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(30, 27, 46, 0.25), 0 0 24px rgba(255, 107, 107, 0.35);
animation: pulseGlow 3s ease-in-out infinite;
transition: box-shadow .35s ease, background-color .35s ease;
Maybe add border: 1px solid rgba(255,255,255,0.08)? border-width is 1px, original had none? Adding border-width changes layout? It affects border-box if box-sizing border-box? It may shift content. To be safe avoid border.

Need define @keyframes pulseGlow. Since it's in media query? Keyframes can be inside media query but animation may not be defined? It works. But keyframes inside media applies only in that media context; fine. Or outside. We'll put inside @media to keep scope. But if the original file may have @media only snippet, putting keyframes inside is okay. However keyframes are not terminated by media? We need close braces carefully.

CSS structure:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 { ... }

    .app-hero-section .badge.bg-warning { ... }

    .contact-channels-section article,
    .contact-quick-section .contact-card { ... }

    @keyframes pulseGlow { ... }
}
Is @keyframes inside @media valid? Yes. But then pulseGlow defined only within media query. Since animations are referenced in same media query, okay.

Need check "first character = first CSS character" so no markdown. Start with @media.

Need maybe include animation on .badge and .contact cards. But if keyframes are nested after, it's fine.

Let's craft the output. Need ensure all layout values unchanged:
- text-align: center preserved.
- font-size: 0.85rem preserved.
- padding: var(--space-md) !important preserved.
- No changes to display, position, width, height, margin.

Additions:
- color, background, border-radius, box-shadow, text-shadow, transition, animation. These are visual.

Need respect "border-radius (visual rounding only)" allowed.

Use "glow effects": 0 0 24px rgba(accent, 0.4). Accent color maybe #ff6b6b or #f59e0b. Let's use accent = #ffb347 (soft amber) or #ff6b6b. The palette is cream/dark/white; amber accent works. Let