/* ============================================================
   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. We have original CSS fragment:

@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 preserve selectors and layout. We may change colors, shadows, radius, transitions, gradients, opacity? But this CSS has no colors. Task says refresh visually. Since original only has media query with text-align, font-size, padding. Can't change those due restrictions (font-size, text-align, padding within constraints). Need perhaps add new properties within same rules? We can add color, background, border-radius, box-shadow? But would affect layout? box-shadow doesn't layout. But we need output same selectors. Need be careful: .app-hero-section .badge.bg-warning already font-size. We can add color? It's a badge warning. But in media query perhaps adding visual. However "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Could include additional declarations under same selectors (visual-only) to achieve refresh. Since original lacks colors, need change by adding fresh palette. But task says "All color values ... changed" — if none, maybe add. Need make visual identity distinct without changing layout. We need perhaps provide CSS with same selectors, but add visual properties. But adding properties may affect layout? no. Also "padding keep similar values ±20%" — we can change var(--space-md) !important? Original uses var property; because --space-md custom property value unknowable. Changing padding could break layout, so preserve exactly. Could modify custom property definitions? Not in CSS. So preserve padding. "font-size unchanged" so preserve. "text-align unchanged". Need output same three rules.

Maybe we can add new rules? No, selectors preserved. We can add declarations to existing rules. Need use target style: asymmetric blocks, glow effects. In media query, maybe add background/glow to .app-hero-section .badge.bg-warning, border-radius, box-shadow, transition? But it's a badge. Need perhaps add color updates: background gradient? But .bg-warning is a Bootstrap utility class; changing background may not apply because .bg-warning sets background-color! We can override with background: linear-gradient etc. However adding `background` to the existing rule okay.

Need maybe use `color`, `box-shadow`, `border-radius`, `transition`, `text-shadow`, etc. Also `.contact-channels-section article, .contact-quick-section .contact-card` add background, border, box-shadow, border-radius? But cards already maybe have. Could change.

Need preserve rules. We can modify existing declarations? Font-size exactly same 0.85rem. Text-align same. Padding same. Add visual declarations. Need avoid layout affecting (border adds size if box-sizing border-box assumed, but cannot know. Better use box-shadow not border. But border-radius no layout. background no. color no. text-shadow no. outline no layout? uses outline no layout. filter no. backdrop-filter no. transition no. opacity no.

Need maybe respond with final CSS. But perhaps user expects all original CSS? We must only rewrite. We can output CSS with additional visual properties. Need not include markdown fences. Need maybe include comments? They said no AI-REWRITTEN comments, but can include. likely no comments.

Let's craft. Need use glow accent, asymmetric blocks, medium radius, gradient, shadow. Let's make:

@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;
        color: #1f2937;
        background: linear-gradient(135deg, #ffcf6e, #f59e0b);
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(120, 53, 15, 0.25);
        border-radius: 12px;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 32px rgba(245, 158, 11, 0.6), 0 8px 20px rgba(120, 53, 15, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(236, 72, 153, 0.06));
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.15);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 0 32px rgba(99, 102, 241, 0.25), 0 16px 32px rgba(79, 70, 229, 0.18);
    }
}

Need check layout. Added `:hover` pseudo-class selectors with same base classes preserved. Does "Keep ALL selectors" require not adding new selectors? It says selector lists, pseudo-classes etc. "Pseudo-classes (:hover...)" preserve. Adding :hover maybe okay? They asked refresh visual identity. But maybe we should not add new rules because HTML fixed but selector contains pseudo class? It says every selector character-for-character preserved? Hmm "Every selector character-for-character preserved?" If input didn't have hover, adding hover violates? Better avoid adding new selectors. Could use transition on base only. But no hover effect. "Halo on hover" desired but cannot add new selector? They explicitly say don't change pseudo-classes; but adding new could be seen as okay? They want visual changes, but "Selectors: keep EXACTLY" maybe means for existing, but adding selectors not forbidden? It says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — output CSS must include original selectors; might allow additional. But safest not add selectors. We can still transition but no hover. However target says halo on hover. But no extra selector? Could use `transition` plus no hover = not effective. We could use `animation` with pulsing glow? They mention subtle pulsing animations; @keyframes can be added without changing existing selectors? But could add @keyframes and apply animation to original selectors. That is okay? It says @keyframes names (values inside CAN change) but doesn't say can't add. But "No markdown fences" etc.

Maybe we can include `@keyframes`? The output maybe can include rules with added selectors? Hmm.

Need perhaps maintain same selectors exactly and add visual declarations. Could add `animation: glowPulse 2.5s ease-in-out infinite;` with `@keyframes glowPulse` at top. This changes visual but not layout. But "animation-name (values like duration/timing CAN change)" means we can change values; adding keyframes? We can. But maybe not needed.

Need decide final.

Original "File: assets/css/saishi.css#块2/2" means this is chunk 2 of 2. It's a media query only. Need rewrite CSS. We should output entire CSS including @media. Could make it more visually refreshed.

Let's inspect original: media max width 575.98px. Text center, badge font size, padding. We can add color/background/shadow/border radius/transition, maybe backdrop-filter. But on small screens, careful. `backdrop-filter: blur(4px)` maybe not needed. Use gradient backgrounds for contact sections. Add `accent-color`, `caret-color`? No form inputs. Could add `border-left`? Border adds dimensions. Use box-shadow as border. Add `outline` maybe no layout. `outline: 1px solid` doesn't layout. But with border-radius, outline follows? yes. Could use outline.

Need target "asymmetric-blocks": "Unequal columns: ... Mixed gaps ... Bold padding contrasts" But HTML fixed can't change columns. We can use background to make block contrast; `border-radius: 16px 4px 16px 4px` asymmetrical. Use "asymmetric radius" for cards.

Need maybe use "1fr 2fr" not applicable. We'll just use asymmetric border radius.

Let's craft final CSS with:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 4px 24px rgba(59, 130, 246, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #422006;
        background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.45), 0 4px 12px rgba(120, 53, 15, 0.2);
        border-radius: 999px 8px 999px 8px;
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.06) 100%);
        border-radius: 16px 4px 16px 4px;
        box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12), 0 0 0 1px rgba(129, 140, 248, 0.2);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

Need maybe if no hover, target variant "halo on hover" not fulfilled. Could use `@media (hover: hover)` with hover selectors, but adding. Could add `@keyframes glowPulse` and apply `animation` to base. This would satisfy glow/pulsing. But does animation affect layout? No. Need maybe update keyframes: from box-shadow to box-shadow. But if original didn't have, okay. But output includes new `@keyframes`. Does that violate "keep ALL selectors exactly"? @keyframes doesn't use selectors. It is allowed? likely.

Let's maybe include `animation: card-glow 2.8s ease-in-out infinite;` for contact cards. But target says subtle pulsing animations. Use animation. Need keyframes values can change. We'll add at top outside media? Could be inside media or outside. Since media query uses animation, keyframes can be global. Need no markdown.

Let's craft robust answer:

@keyframes soft-glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12), 0 0 0 1px rgba(129, 140, 248, 0.2); }
  50% { box-shadow: 0 0 32px rgba(99, 102, 241, 0.3), 0 8px 24px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(129, 140, 248, 0.35); }
}

@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;
        color: #3b2006;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        background-clip: padding-box;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(120, 53, 15, 0.2);
        border-radius: 999px 8px 999px 8px;
        transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(236, 72, 153, 0.07));
        border-radius: 16px 4px 16px 4px;
        box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12), 0 0 0 1px rgba(129, 140, 248, 0.18);
        animation: soft-glow 2.8s ease-in-out infinite;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But note adding animation overrides box-shadow? Keyframes use box-shadow as property values. Animation will animate box-shadow directly. Good.

Need maybe "background-clip: padding-box" no property change to layout. Good. But .badge.bg-warning: Bootstrap's .bg-warning sets `--bs-bg-opacity: 1; background-color: rgba(...)`; our `background` shorthand overrides. Good.

Need maybe `.contact-channels-section article, .contact-quick-section .contact-card` existing may have background colors; we override. Good.

Need "All color values replaced with fresh palette" — we introduced colors. But maybe should avoid using same old default? Fine.

Need maybe maintain `font-size: 0.85rem` exactly. Yes. `padding: var(--space-md) !important` exactly. Yes. `text-align: center` exactly.

Need maybe include original rule only. Yes.

Need maybe not include "background-clip" due unsupported? Fine.

Need maybe avoid `transform` because could affect layout? `transform` visually changes, but not layout. However task says "transition ... transform"? It says transition properties may change, but "display/position/grid..." no transform listed. transform is visual, allowed. But adding `transform` property? Could animate. Maybe avoid transform if not certain? It doesn't affect layout. Fine. But "Only colors, shadows, radius, transitions, gradients" transform isn't listed, but could be considered visual. Safer not add transform. Use filter maybe. We can remove transform. Use transition of `box-shadow, filter` only. Maybe no transform.

Need maybe use `filter: drop-shadow`? no.

Let's think if adding `animation: soft-glow` on contact cards with infinite pulse could be considered too aggressive, but task says subtle. Fine.

Need maybe there is no `box-shadow` originally so "redesigned" means added. Good.

Need maybe if `contact-quick-section .contact-card` is inside padding small, border-radius may not show due background. It will.

Need maybe if `article` and `.contact-card` are block elements? border-radius okay. box-shadow okay. animation okay.

Need maybe if user asked "asymmetric-blocks" style: Bold contrasting blocks each section different background. We can set `.app-hero-section .row .col-lg-7` with background? But it could be huge, adding background might look. `text-shadow` maybe enough. Could set `background: radial-gradient(...)` to col? But might be too much and breaks? background doesn't break layout. It might, but inside hero row, could add color block. However original rule only text-align; adding background maybe okay but could cover area. Maybe don't.

Could add `color` and background? For `.app-hero-section .row .col-lg-7` maybe a gradient text? `background: linear-gradient` on a container, with `text-align` no issue. But if using background-clip:text would hide background; not good. Could add `text-shadow` only.

Need perhaps use `caret-color`? no user input. `accent-color` no.

Need maybe include `border-left: 4px solid`? It takes layout? border included in width if border-box; could alter. Avoid.

Need maybe include `outline: 1px solid transparent`? no.

Need maybe include `opacity`? not needed.

Need maybe use "outline" to create halo? Let's see: Could use `box-shadow` as border.

Need ensure output "First character = first CSS character" no leading spaces. We'll make @keyframes first.

Let's evaluate if `@keyframes` must be within media query? It can be global. Fine. But if output includes @keyframes, does it violate "CSS custom properties"? no. It is a new rule, but perhaps okay. Need "preserving ALL selectors" doesn't mean only existing selectors? Hmm.