/* ============================================================
   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 given CSS with only visual changes (colors, shadows, radius, transitions, gradients), keeping selectors and layout. The original CSS is a media query with no colors except maybe var(--space-md) in padding. But padding is layout, can change within ±20%. But we must preserve layout, so maybe leave padding as is. We need to introduce visual identity: glow effects, symmetric-grid palette. However, there is no color in the original, so we need to add color properties that don't affect layout. But we cannot change layout structure. Adding colors to elements is fine. But the selectors are inside a media query. We can add color declarations, but we must ensure we don't alter layout. Since the original has no colors, we can add them for visual identity. But we must be careful: the output should be the same media query with additional color declarations and maybe transitions? The instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can add color, box-shadow, text-shadow, border-radius, transition, etc. But we must preserve selectors exactly. We can also modify existing declarations? There are only padding and text-align and font-size. These are layout/typography, should not change except padding within ±20%. To be safe, we leave them. Add new declarations for colors, shadows, radii, transitions.

Need to target style: symmetric-grid, glow-effects. But the selectors are not grid items; they are hero section, contact cards. We can apply glow shadows to those elements. However, adding box-shadow to elements might affect visual layout? Box-shadow doesn't affect layout. Border-radius doesn't affect layout. Colors don't. Transitions don't. So we can add them.

But we need to ensure we don't change padding. The original has padding: var(--space-md) !important; We can keep that. But maybe we can adjust padding within ±20%? We shouldn't.

We also need to ensure we don't introduce animations that might affect layout? But "Subtle pulsing animations" could be added. But if we add a keyframe inside a media query? That's allowed? But we must preserve @keyframes name? Actually we can add new @keyframes inside the media query? But the instructions say animation-name values can change, but if we add new keyframes, that's okay. But to be conservative, we can add a transform scale animation? But transform is not layout? It affects visually. But adding transform might be considered visual. However, the "NEVER CHANGE" list doesn't mention transform explicitly but it does mention "animation-name (values like duration/timing CAN change)". It says layout properties like position, display, etc. Transform is not in the list, so we can use it. But if we add a pulsing animation, we need to ensure it doesn't break layout. It's visual only. But we need to be careful about the "SELF-CHECK" regarding layout properties. Transform is not listed as "never change", so okay.

But we should not change font-size, text-align. We can add color, text-shadow, background, border-radius, box-shadow, transition.

Let's analyze original selectors:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

We need to output only rewritten CSS. Since there are no colors, we can add them. Maybe add a consistent color palette with accent glow. But we need to know what elements these are. Let's infer:

.app-hero-section .row .col-lg-7 is a column inside a hero section. It likely contains text. We can add color to text and text-shadow glow.

.app-hero-section .badge.bg-warning is a warning badge. We can adjust background/border/box-shadow. But original class includes bg-warning, which is a Bootstrap utility class that sets background-color: #ffc107. We can override with new color? Since we can change colors, we should overwrite the background-color and border-color etc. But we cannot change the class name, but we can set background-color to a new accent color.

.contact-channels-section article and .contact-quick-section .contact-card are cards. We can add background, border-radius, box-shadow, etc.

We need to preserve padding: var(--space-md) !important. We can leave that.

Also, we should add a consistent gap? Not relevant.

Given the target "symmetric-grid" and "glow-effects", we can use a balanced palette with accent color, e.g., a purple/blue. Use box-shadow glow: 0 0 24px rgba(accent, 0.4). Halo on hover: 0 0 32px rgba(accent, 0.6). But we don't have hover selectors in the original. We can add hover declarations to the same selectors? The instructions say keep pseudo-classes exactly. Adding new pseudo-class selectors is not allowed? It says "Selectors: keep EXACTLY ... Pseudo-classes (:hover, :focus, ::before, ::after)" meaning we should preserve existing pseudo-classes. Adding new ones might change the DOM? Actually adding a :hover selector doesn't change HTML. But the instructions say "Every selector character-for-character preserved?" That implies we must not add or remove selectors. We can only modify existing rules. So we cannot add new selectors like .contact-card:hover. But we can modify the existing selectors' declarations to include transitions that will apply on hover? No, need a hover rule. So we can't add hover effects unless existing selectors have :hover. They don't. So we can only apply the base glow. However, the "glow-effects" variant wants "Halo on hover: 0 0 32px rgba(accent, 0.6)". We could apply it as a base shadow that is always visible, but that wouldn't be hover-specific. Alternatively, we could add a transition on box-shadow and use the same shadow for all states. But no hover.

Maybe we can use CSS variables and @media (hover: hover) with a new selector? That would be adding a new selector, not allowed. So we need to stick strictly to existing selectors. We can still create a "halo" effect by making the base shadow stronger and using a pseudo-element? But we can't add pseudo-elements to existing selectors? Wait, pseudo-elements are allowed as selectors, but existing selectors don't have them. Adding a ::after selector would be adding a new selector. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" in the "never change" list, meaning we should keep them if they exist. Adding new ones is likely prohibited. So we can't add pseudo-elements.

Thus, we can only modify declarations within existing rules. We can add box-shadow, background, color, border-radius, transition, etc. We can set a strong glow shadow. Maybe add an animation to the same elements for pulsing? That is a visual change, but requires @keyframes. Could add @keyframes inside the media query? That's adding a new rule, but not a new selector. @keyframes names are values, but adding new @keyframes is creating a new rule. But the original CSS has no @keyframes. The instruction says "@keyframes names (values inside CAN change)" - but we don't have any. Adding new @keyframes could be allowed, but we need to be careful. The output needs to be a rewritten version of the given CSS, so we can include new @keyframes. But to be safe, maybe we should not add animations because the instructions don't explicitly allow adding new keyframes, only changing existing. The "Target style" says "Subtle pulsing animations" but it might be a guideline. Since the original has no animations, we could add an animation property to the existing selectors and define keyframes. That would be a visual change. Is it allowed? The "NEVER CHANGE" list includes "animation-name (values like duration/timing CAN change)" but not "adding animation-name to a selector". It says "values like duration/timing CAN change", but we don't have animation-name. Hmm.

We need to decide. The safer approach is to not add new keyframes, only add visual properties that don't require new rules. But then we miss the pulsing animation. However, the user asked for "glow-effects" variant with "Subtle pulsing animations". We should try to include it if possible. But the constraint says "HTML is fixed — only colors, shadows, and decorative properties may change." Adding animation is decorative. Also "animation-name (values like duration/timing CAN change)" suggests we can modify existing animations, but adding new is not explicitly prohibited. But since the original has no animations, we can add some. But the output format: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding @keyframes is not a selector, but it's a new rule. Preserving all selectors doesn't mean we can't add keyframes. But "every selector character-for-character preserved" means existing selectors unchanged. Adding new @keyframes is fine. So we can add a pulsing animation.

However, we must ensure we don't change layout. Animations of transform scale might affect layout? No, transform doesn't affect layout. But we need to be careful with overflow. We'll keep it subtle.

Let's design the visual identity:

Palette: balanced harmonious. Use a deep indigo/slate background? But the elements are inner elements, not the body. We can set background to a card color. Let's choose:

- Accent: #6d5efc (purple-blue)
- Accent soft: rgba(109, 94, 252, 0.4)
- Background surface: #ffffff or #f8f7ff
- Text: #2d2b52

Since we don't have the full page, we'll just make these elements glow with accent.

For `.app-hero-section .row .col-lg-7`: text-align center remains. Add color, text-shadow maybe.

For `.app-hero-section .badge.bg-warning`: Override background-color to accent gradient? We can set background to linear-gradient, color white, border-radius, box-shadow glow. But we must keep font-size.

For contact cards: Add background with subtle gradient, border-radius, box-shadow with glow, transition.

Let's write the CSS:

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 add declarations inside each rule. We can also add a new @keyframes inside the media query or outside. Since the media query is for small screens, the animation can be defined there.

Let's rewrite:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2b52;
        text-shadow: 0 0 20px rgba(109, 94, 252, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #6d5efc, #a78bfa);
        color: #fff;
        border: 1px solid rgba(109, 94, 252, 0.5);
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(109, 94, 252, 0.4), 0 4px 12px rgba(45, 43, 82, 0.15);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 14px;
        border: 1px solid rgba(109, 94, 252, 0.18);
        box-shadow: 0 0 24px rgba(109, 94, 252, 0.28), 0 8px 24px rgba(45, 43, 82, 0.08);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
    }
}

But wait: the contact selectors are targeted together, and we add padding with !important. Adding background, radius, etc. is fine. But we might need to consider that padding is var(--space-md) !important, and we shouldn't change it. We also need to respect the ±20% for padding, but we're not changing it.

We also need to consider "symmetric-grid" target style. The contact cards maybe are in a grid. We can't change grid, but we can ensure they look equal. We could add a subtle border radius and box-shadow. That's fine.

The "glow-effects" variant wants "Medium radius (8-16px)". We used 14px. Good.

"Subtle pulsing animations" - we can add an animation to the badge or cards. Let's add a pulse animation to the contact cards? But we need to be careful not to make it distracting. Use a keyframes:

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 24px rgba(109, 94, 252, 0.28), 0 8px 24px rgba(45, 43, 82, 0.08);
  }
  50% {
    box-shadow: 0 0 32px rgba(109, 94, 252, 0.6), 0 8px 24px rgba(45, 43, 82, 0.08);
  }
}

Then add animation: glow-pulse 3s ease-in-out infinite. But this would apply to both contact cards. However, adding animation to all cards might be too much. Maybe add to badge only? The badge is small. But the "halo on hover" not possible. The pulsing could be on the badge or cards. Let's add to badge as it's more noticeable? Actually the "glow-effects" variant likely applies to the cards. We can add to both? But the two selectors are for cards, we can include animation there. But if we add animation to cards, they might all pulse simultaneously, which could be okay. To be more subtle, we can add a longer duration and stagger? But we can't use nth-of-type because adding selector not allowed. So we can just have them pulse together.

But the original media query only applies on small screens. So the animation only on mobile. That's fine.

We need to ensure that adding animation doesn't violate "layout exactly" - no, transform/box-shadow don't affect layout. But we might want to avoid adding transform since it might create a stacking context? That's okay.

Let's add the keyframes inside the media query? If we put @keyframes inside a media query, it's valid. But if the same keyframes used elsewhere, it's fine. We'll put it inside the media query to scope it. But @keyframes rules can be inside @media. That's allowed. We'll write:

@media (max-width: 575.98px) {
    @keyframes glow-pulse {
        0%, 100% {
            box-shadow: 0 0 24px rgba(109, 94, 252, 0.28), 0 8px 24px rgba(45, 43, 82, 0.08);
        }
        50% {
            box-shadow: 0 0 32px rgba(109, 94, 252, 0.6), 0 8px 24px rgba(45, 43, 82, 0.08);
        }
    }

    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2b52;
        text-shadow: 0 0 20px rgba(109, 94, 252, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #6d5efc, #a78bfa);
        color: #fff;
        border: 1px solid rgba(109, 94, 252, 0.5);
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(109, 94, 252, 0.4), 0 4px 12px rgba(45, 43, 82, 0.15);
        animation: glow-pulse 3s ease-in-out infinite;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 14px;
        border: 1px solid rgba(109, 94, 252, 0.18);
        box-shadow: 0 0 24px rgba(109, 94, 252, 0.28), 0 8px 24px rgba(45, 43, 82, 0.08);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
        animation: glow-pulse 4s ease-in-out infinite;
    }
}

Wait, if we have the same animation on cards and badge, the keyframes boxes shadows are designed for cards. For badge, the pulse would change from 24px to 32px, but the badge's base shadow is