/* ============================================================
   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 only. Need inspect original. It's a media query block. We must preserve selectors/layout. Only visual properties allowed. Original CSS includes:
@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 visual identity? But rules only text-align, font-size, padding. These are typography/layout? text-align is layout? It says never change text-align, font-size, padding within ±20%. Need target style symmetric-grid, glow effects. But original has no colors, shadows, radius etc. Need add visual properties? We can add color, background, border-radius, box-shadow, transition? But selectors fixed. Need preserve layout. We can add perhaps decorative properties to these selectors. But be careful media query. Need maybe change font-size? It's fixed typography, cannot change. Padding can vary within ±20%? It uses var(--space-md), cannot change? Could change var? But custom properties values maybe can change. But likely we should not alter. Need produce rewritten CSS with same selectors, layout unchanged, but add visual enhancements. But constraints say output only CSS, preserving selectors exactly. Could add new declarations inside existing rules, e.g. border-radius, box-shadow, background color, transition. Need for .app-hero-section .badge.bg-warning maybe add glow? Contact cards padding changed? Hmm.

Need parse "Target style: symmetric-grid" and "glow-effects". Need apply to these selectors within media query. But CSS file "saishi.css #块2/2" likely chunk 2. We have only this chunk. Need rewrite this chunk, not entire file. Need preserve structure including media query. Need possibly change color variables? No.

Need think of conservative mode: Only colors, shadows, radius, transitions, gradients, etc. Cannot change text-align, font-size, padding beyond ±20%. Original values:
- text-align: center; cannot change.
- font-size: 0.85rem; cannot change.
- padding: var(--space-md) !important; could adjust? But var unknown; likely leave.

We need output "rewritten CSS", maybe with additional declarations making visual identity glow. But if we add declarations, it's okay? Need "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." We can add background, box-shadow, border-radius, transition, maybe backdrop-filter, color, border-color. Need choose palette. But no explicit colors original. Need choose harmonious palette. Need consistent shadows. Maybe accent color.

Need consider target style says "Strict equal grids... uniform gap..." but no grid in chunk; perhaps irrelevant. "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4); Halo on hover: 0 0 32px rgba(accent, 0.6); Medium radius (8-16px); Subtle pulsing animations." Need add glow to badge and contact cards maybe.

Need preserve selectors exactly and CSS syntax. We can add:
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background: linear-gradient(...); color: #...; border-radius: 12px; box-shadow: 0 0 24px rgba(255, 183, 77, 0.4); ... }
But original badge.bg-warning has class bg-warning likely background important? We can set background-color? Bootstrap .bg-warning sets background-color: #ffc107 !important? Our rule in media may override if later with same specificity? Better not alter background? But tasked to refresh. If set background property in media query, need !important? But could conflict with Bootstrap. Since we're writing CSS, maybe add with !important? But "preserve layout" and only colors. Could use background-color property but unless important may not override .bg-warning. However we can also set color etc. But need be careful not break class. Maybe use `background: rgba(255, 193, 7, 0.15)`? Hmm.

Need maybe not add too much because original chunk is minimal. Maybe "symmetric-grid" target irrelevant. But output should be "rewritten CSS" with same selectors. We can include declarations after original properties.

Need ensure no unsupported properties? `backdrop-filter` maybe okay. `transition` okay.

Potential issue: `.app-hero-section .row .col-lg-7 { text-align: center; }` It's a column layout. Adding visual properties to this container might be weird. Could add `color`? Maybe not.

Need "balanced harmonious palette" and "consistent shadows". Could add custom properties to :root? But selectors can't change? Actually we could add `:root { --space-md: ... }`? But "selectors preserved" means not adding new selectors? It says keep all selectors exactly. Maybe adding :root not allowed because original doesn't have. Need avoid adding selectors. Could add declarations only to existing selectors.

Maybe we should rewrite each existing rule with visual enhancements:
1. .app-hero-section .row .col-lg-7:
   - maybe color: #...
   - maybe text-shadow? But text-align center. Since it's hero section. We could set `color`? It might affect text. But adding color changes visual identity. Need choose. But target style "glow effects" may not apply here. Could add `text-shadow: 0 0 16px rgba(..., 0.25);` to text? But if text is already white? Hmm. Could be unwanted. Better not.

2. .app-hero-section .badge.bg-warning:
   - font-size fixed.
   - Add `border-radius: 999px;`? Target medium radius 8-16px. Badge is pill maybe 50rem. Use 12px.
   - Add `box-shadow: 0 0 24px rgba(255, 183, 77, 0.4), 0 4px 12px rgba(0,0,0,0.1);`
   - Add `background: linear-gradient(135deg, rgba(255,183,77,0.25), rgba(255,122,89,0.25));`? Overrides bg-warning? Could set `background-color: transparent;`? But `bg-warning` important. Maybe use `background: linear-gradient(...) !important;`? That would change badge from solid yellow to translucent gradient. But visual change okay. Need maybe preserve accessibility. We can set `color` and `border`.
   - Add `transition: box-shadow .3s ease, transform .3s ease;` But transform is layout? transform visual, position? allowed? It says not listed? It's a visual property but could affect layout? `transform` not in forbidden list. But "layout structure" could be affected? transform can change visual but not layout. But conservative? Could avoid transform. Add `transition: box-shadow 0.3s ease, background-color 0.3s ease;`
   - Add `animation: badge-pulse 2.4s ease-in-out infinite;` But that requires @keyframes; cannot add new @keyframes? It says @keyframes names preserved? In original no keyframes. Could add? "Animation & Media: @keyframes names (values inside CAN change)" but not "can add". Since HTML fixed, adding new keyframes doesn't break layout maybe allowed? But output only CSS; we could include @keyframes, but that adds selector? `@keyframes` is not a selector but at-rule. But original chunk has only media query. Adding at-rules may be acceptable? But target style mentions subtle pulsing animations, so likely yes. But "keep all selectors exactly" doesn't prohibit adding @keyframes. However "preserving ALL selectors" means don't add class selectors. We can add @keyframes with arbitrary name and use it. But if we add @keyframes, it's an extra statement. Could do.

Need perhaps include `.contact-channels-section article, .contact-quick-section .contact-card` with padding unchanged and add visual:
- `border-radius: 12px;`
- `background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));`
- `box-shadow: 0 0 24px rgba(99, 102, 241, 0.15), 0 8px 24px rgba(0,0,0,0.08);`
- `transition: box-shadow 0.35s ease, backdrop-filter 0.35s ease;`
- `backdrop-filter: blur(8px);`
- `border: 1px solid rgba(255,255,255,0.08);`? Border-width? Border-style? Allowed. But adding border could change box size unless box-sizing border-box. It's a visual change; okay. But padding set; adding border adds to element dimensions unless box-sizing border-box. Most CSS reset sets border-box. But to be safe maybe use `outline`? Actually adding border changes layout if global box-sizing is content-box. Need avoid layout. Use `box-shadow` to simulate border? Use `outline`? Outline doesn't affect layout. Could use `box-shadow: inset 0 0 0 1px rgba(...)`? That's decorative and no layout. Good. Use box-shadow inset.

Need choose consistent accent color. Since original uses `bg-warning` (yellow) and contact sections maybe brand. We need choose harmonious palette. Balanced palette maybe primary indigo (#6366f1), accent amber (#f59e0b), teal? Let's define via actual values not variables? Could use `rgba(129, 140, 248, 0.4)` for glow. But if adding to badge `.bg-warning`, use amber glow.

Need maybe preserve `font-size: 0.85rem` and padding. We can add `color` but not necessary.

Need output only CSS. Need no markdown. Need ensure first character CSS. Let's craft.

Potential solution:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8fafc;
        text-shadow: 0 0 18px rgba(99, 102, 241, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.16), rgba(245, 158, 11, 0.10)) !important;
        color: #fffbeb;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 8px 20px rgba(69, 26, 3, 0.15);
        transition: box-shadow 0.3s ease, background 0.3s ease;
        animation: soft-pulse 2.6s ease-in-out infinite;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(15, 23, 42, 0.55));
        color: #e2e8f0;
        box-shadow: 0 0 24px rgba(99, 102, 241, 0.18), 0 10px 30px rgba(2, 6, 23, 0.25), inset 0 0 0 1px rgba(148, 163, 184, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }

    @keyframes soft-pulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 8px 20px rgba(69, 26, 3, 0.15); }
        50% { opacity: 0.92; box-shadow: 0 0 32px rgba(245, 158, 11, 0.65), 0 8px 24px rgba(69, 26, 3, 0.2); }
    }
}

Need consider `background: linear-gradient(...) !important;` If bg-warning has `background-color` important, our `background` shorthand with !important will override. It might make badge less visible. Good.

But "only change colors, shadows, radius, transitions, gradients" => adding `color`, `opacity` in keyframes okay. `backdrop-filter` okay. `animation` and `@keyframes` okay.

Need ensure `text-shadow` on `.col-lg-7` maybe color text to #f8fafc; this is a color change. If original had perhaps different color, we changed. Fine.

But potential problem: If media query is within a CSS file and later there is `@media (min-width: 576px)` etc? This is chunk 2 only. Need output exactly this chunk. Fine.

Need maybe use "symmetric-grid" style? No grid. Could perhaps add `display: grid`? Not allowed. Could not.

Need perhaps avoid changing `text-align`, `font-size`, `padding`. We preserve.

Need maybe ensure "selector lists" preserved: `.contact-channels-section article, .contact-quick-section .contact-card` exactly. Yes.

Need decide if adding `color` on `.app-hero-section .row .col-lg-7` can break layout? No. `text-shadow` visual. Fine.

Need maybe no markdown fences. Output raw.

Need ensure no AI comments. Fine.

Need maybe not use `background` on `.badge.bg-warning` if it makes original `bg-warning` not yellow; but visual identity refreshed.

Need perhaps use CSS variables? Could define `--accent`? Cannot add selectors. Could use `color-mix`? Not necessary.

Need consider `transition: background 0.3s ease` while background is gradient, transition won't animate unless `background` maybe okay but background images don't transition. Use `box-shadow` only. `transition: box-shadow 0.3s ease, opacity 0.3s ease`. But animation handles opacity.

Need maybe add `:hover`? Original selectors don't include pseudo-classes; cannot add `:hover` because selectors are fixed. Could apply halo on hover using `:hover`? Not allowed? "Pseudo-classes keep exactly" maybe means if original has no `:hover`, adding would be an extra selector. So don't add. The target variant says "Halo on hover: 0 0 32px" but original has no :hover. Could incorporate via animation instead. We can mention "shadow 24px, hover 32" but no hover selector. Could use `transition` to animate on future hover? But no :hover. We can still set `box-shadow: 0 0 24px rgba(...)` and animation pulse to 32. Good.

Need maybe `@keyframes` inside media query? Is it valid? Yes, @keyframes can be nested inside @media? CSS at-rules can be nested? CSS Conditional rules allow nested rules; @keyframes inside @media is allowed? According to CSS, @media can contain @keyframes? Need check. Actually @keyframes can be nested inside @media? I think yes? Let's verify: CSS syntax allows style rules and at-rules nested in conditional group rules. @keyframes is an at-rule; it can be inside @media? I'm not 100% sure but I believe yes, keyframes are allowed inside @media. But some older browsers? It's okay.

Need maybe output `@keyframes soft-pulse` outside media query? Original chunk had media, but adding outside not possible? Could put before media. But output should preserve all selectors exactly? If we add outside, that's new. We can include inside to keep structure. Either valid. Better inside media query so all in one chunk.

Need maybe use `@media (prefers-reduced-motion: reduce)`? Not added.

Potential issue: The first rule `.app-hero-section .row .col-lg-7` only original `text-align: center;`. In mobile, if we set `color` and `text-shadow`, okay. But `color` can be inherited by children including badge? If badge has own color, no. Fine.

Need maybe "balanced harmonious palette" suggests choose colors:
- Background dark? Maybe use `#0b1220`? But setting background on `.contact-card` might combine with existing background. Use semi-transparent gradients.
- Accents: indigo `#6366f1`, amber `#f59e0b`.
- Text: slate.

Need perhaps adjust `padding: var(--space-md) !important`; keep exactly.

Need maybe include `-webkit-backdrop-filter` for compatibility; okay, but is that visual? yes.

Need maybe include `filter`? not necessary.

Need maybe preserve `box-sizing`? Not listed? "box-sizing" in layout never change. We don't.

Need maybe avoid changing `opacity` at 50% on `.badge` because opacity is allowed but could make text less accessible. Use `filter: brightness(1.05)` maybe no. We can use `box-shadow` only. But target says subtle pulsing animations, opacity okay.

Need maybe not include background in badge because `bg-warning` class in Bootstrap has `--bs-warning-bg` and color? Setting `background` with gradient overrides but if invalid? Fine.

Need maybe `color: #fffbeb` on badge; on yellow background, white-ish text may be