/* ============================================================
   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 answer rewritten CSS. Need follow constraints. Need output only CSS no markdown. Need parse original CSS. It's a media query with selectors. Need refresh visually while preserving selectors and layout. 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;
    }
}

Need change visual only. But these rules set text-align, font-size, padding. Those are layout/typography protected? text-align is "text-align, vertical-align" protected? It says typography includes text-align. So cannot change. font-size protected. padding can be ±20%. But we need refresh with colors/shadows/radius/transitions etc. However these selectors don't have colors. We can add properties? Need "Only change colors, shadows, radius, transitions, gradients." We can add color, box-shadow, text-shadow, border-radius, transition to existing rules without changing layout? But "HTML fixed, visual changes only": adding properties is allowed? However "Only rewrite CSS preserving all selectors and layout exactly" They want output with visual identity changed. Original CSS only media query. We need perhaps apply colors/glow to these elements. But selectors include col-lg-7, badge bg-warning, contact card. Need modify visual properties. We can add background, color, border-radius, box-shadow? Need ensure no layout changes. We can set text-align? no need. font-size? keep. padding? within ±20. Let's decide.

Target dense-dashboard palette: cool grays #1e293b, #334155, accent blue #3b82f6; white cards on slate background. Effect glow: glow shadows in accent color, halo hover, medium radius, subtle pulsing.

We need likely add CSS custom declarations to existing selectors. But the selectors are inside media query. We can add properties like color, background, border-radius, box-shadow, transition. Need no new selectors? Could add pseudo-classes? It says preserve pseudo-classes (maybe can't add) but we can use selectors exactly. Better not add.

Need include subtle pulsing animations? We can add animation property but would require @keyframes selector; not allowed? It says @keyframes names preserved, values can change. If no existing keyframes, adding new would require new selector. We shouldn't add. Maybe no animation. We can use transition for hover? But no hover on these. Maybe transitions not triggered. But still visual.

Alternative: We can alter original declarations to include colors? Original has none. If task says "Refresh this CSS visually" and target style. We need generate CSS with same structure and maybe add visual declarations. But rule #1: preserve layout exactly. We can add `background`, `color`, `border-radius`, `box-shadow`. We can add transition. Need only altered file, no explanations.

Need be careful with `.app-hero-section .badge.bg-warning`: warning badge should maybe amber. Target palette accent blue; but class bg-warning implies yellow. We can style with glow? Keep badge visual. But "warn" maybe not. We can change to something? Since `bg-warning` class likely Bootstrap background warning. We could set background: linear-gradient(...) or background-color. Need avoid changing layout.

Let's craft output with same media query and selectors. For each rule, include original declarations unchanged? text-align center, font-size, padding maybe preserve. Add visual declarations:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` We can add `color: #e2e8f0;`? But col-lg-7 probably container with text. Background? If we add background to this column, could look weird but okay. Maybe add `text-shadow: 0 0 20px rgba(59,130,246,0.3);`? But text-shadow might apply to all text. Target glow effects. Could add `color: #f8fafc;` and `text-shadow: 0 0 12px rgba(59,130,246,0.35);`.

Rule 2: badge: add `background: rgba(59,130,246,0.2); color: #60a5fa; border: 1px solid rgba(59,130,246,0.4); box-shadow: 0 0 16px rgba(59,130,246,0.35); border-radius: 999px; backdrop-filter: blur(8px);` But class `bg-warning` would still have background? If from Bootstrap `.bg-warning` sets background-color: #ffc107!important. Our rule with `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning` (0,3,0 vs 0,1,0) so it can override background. Good.

Rule 3: contact cards: add background: #ffffff; color: #1e293b; border-radius: 16px; box-shadow: 0 4px 24px rgba(30,41,59,0.12), 0 0 0 1px rgba(59,130,246,0.08), 0 0 24px rgba(59,130,246,0.08); backdrop-filter maybe? But if padding with !important, add? We need keep padding exactly `var(--space-md) !important`; cannot change? We can leave. We cannot include our own? Could set `padding` maybe same.

Need maybe target `dense-dashboard`: white cards on slate background. Since only contact cards. We can set `background: #ffffff; color: #1e293b; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1), 0 0 18px rgba(59,130,246,0.18);` But `padding` `var(--space-md)` perhaps large? We can reduce? It's original from outside. Constraint says margin/padding within ±20%; don't know actual value of var. Better leave unchanged.

Need perhaps include `transition: box-shadow 0.25s ease, transform 0.3s ease;` but transform property not in original; adding transform to transition doesn't matter. But no hover. Could transition background-color? not triggered.

Need maybe include `background-color` for page? Not with same selectors. Can't add body. So no.

Could use `@media` only. Need output exactly. Let's design final.

Need ensure no formatting issues: first char CSS. Output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #e2e8f0;
        text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: rgba(59, 130, 246, 0.15);
        color: #bfdbfe;
        border: 1px solid rgba(59, 130, 246, 0.35);
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.45), 0 0 4px rgba(59, 130, 246, 0.2);
        backdrop-filter: blur(8px);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        color: #1e293b;
        border-radius: 14px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06), 0 0 24px rgba(59, 130, 246, 0.2);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

But note `.contact-quick-section .contact-card` original padding var(--space-md) !important. We preserve. Good.

Need check self-check: Every selector preserved exactly? Yes. Text-align unchanged. Font-size unchanged. padding unchanged. We added background, color, border-like decorations, border-radius, box-shadow, backdrop-filter, transition. These are allowed. Could adding backdrop-filter to badge be visual only. Yes.

Need maybe no markdown fences. Good.

Need maybe consider original file "block 2/2" maybe other blocks? Doesn't matter. Need output only block.

Need maybe "font-size: 0.85rem" protected, we left. Good.

Need maybe "text-align: center" protected? It was already there, left. Good.

Need "transition: box-shadow 0.3s ease, background-color 0.3s ease;" no issue. It changes timing allowed.

Potential issue: `.contact-channels-section article` may already have article element maybe `<article>` includes padding; adding background white can be okay. But "dense-dashboard" target says container fills full width and card white on slate background. `background:#ffffff` on cards good. Color #1e293b. Box-shadow glow.

Need maybe `border-radius: 14px` medium radius. Good.

Need maybe use accent blue rgba(59,130,246). Target palette.

Need maybe include "halo on hover" but no hover selector. Cannot. Could add `@media` no hover. Maybe we can add `transition`. Fine.

Could there be a hidden issue: `backdrop-filter` may not be supported but okay. It is visual.

Need maybe include `-webkit-backdrop-filter`? Not required. But adding only one okay.

Need maybe include `appearance`? no.

Need maybe choose `border: 1px solid rgba(...)` increments border width? It's border-width? Constraint says never change border-width. If original had no border, adding border with width introduces layout change possibly. To avoid breaking layout, maybe don't add border. Since no width preset. But if border added, content box width? With border-box? unknown. Could shift layout 2px. Better avoid border to adhere "border-width never change." Instead use outline? Outline doesn't affect layout. Could use `outline: 1px solid rgba(...)` or `box-shadow` ring. Use outline not width? It has width too though but outline doesn't affect layout. Constraint allows "outline styles (color, type)" and maybe no outline-width restriction? Says NEVER change? Actually "outline styles (color, type)" allowed; border-width not. To avoid new border width, use outline. But outlines may be okay. Better not add border, use box-shadow for ring: `box-shadow: 0 0 0 1px rgba(59,130,246,0.3), 0 0 16px ...`. Box-shadow's spread can simulate border without affecting layout. Good. So for badge avoid border property. Use `box-shadow: 0 0 0 1px rgba(...), 0 0 16px ...`. That's allowed. For card use box-shadow ring too. No border.

Need maybe avoid changing `background` property on `.col-lg-7` because background could affect layout? No, but visual. `color` and `text-shadow` good.

Need maybe include `background-color` instead of background for card? `background: #ffffff` okay.

Could set `background: #ffffff` for col? Not needed.

Need maybe include `transition: box-shadow .3s ease, background-color .3s ease, color .3s ease;` Good.

Need maybe no "glow pulses" but transition. Could include `animation`? no.

Need maybe output with same indentation. Fine.

However, let's examine whether "target style dense-dashboard" includes "Layout pattern (Aggressive only)" and specifically "Tight multi-column grids: repeat..." but current CSS is media query for small screens where maybe not grid. We cannot change layout. We just apply colors. That's okay.

Need maybe "Conservative mode" no layout changes.

Need maybe if original CSS includes only `@media`, adding new declarations inside but not new selectors. Great.

Let's make final robust.

Need perhaps use `color: #f8fafc` for badge? `bg-warning` maybe text dark. We can set `color: #f1f5f9`? But background blue transparent on slate, light text. Fine.

Need maybe `border-radius: 999px` on badge, but Bootstrap badge may already have pill if .rounded-pill. `border-radius` visual only allowed. Good.

Need maybe `backdrop-filter: blur(8px)` on badge; no layout. Good.

Need maybe `text-shadow` on col-lg-7 could make it glow. Good.

Need maybe card `background: #ffffff` could override background images? It's visual.

Need maybe `box-shadow` on card with `0 0 0 1px rgba(59, 130, 246, 0.06)` plus glow. Good.

Need maybe `transition` from no transition to transition okay.

Let's craft final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #e2e8f0;
        text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: rgba(59, 130, 246, 0.18);
        color: #bfdbfe;
        border-radius: 999px;
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3), 0 0 16px rgba(59, 130, 246, 0.45), 0 0 8px rgba(59, 130, 246, 0.25);
        backdrop-filter: blur(8px);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        color: #1e293b;
        border-radius: 14px;
        box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.6), 0 4px 6px -1px rgba(30, 41, 59, 0.08), 0 2px 4px -2px rgba(30, 41, 59, 0.06), 0 0 24px rgba(59, 130, 246, 0.18);
        transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
}

Need maybe "background-color" in transition but background uses shorthand. Good.

Could add `background: linear-gradient(145deg, #ffffff, #f8fafc);` for cards, but not necessary. Gradient allowed. Could use to create fresh visual. Maybe with glow effect, gradient + shadow is nice. But "white cards" target. We can use `background: linear-gradient(145deg, #ffffff, #f8fafc);`. However if original card may have transparent, gradient okay. It doesn't change layout. Good.

Maybe `col-lg-7` color shouldn't be set because it might override specific text color in child. But okay.

Need perhaps avoid setting `text-shadow` on large hero text as could look blurry. But target glow effects.

Need maybe use `background: rgba(59,130,246,0.12);` on hero column? Not necessary.

Need maybe if `.app-hero-section .badge.bg-warning` originally yellow warning. Changing to blue may be semantically odd but palette is blue. Could instead use accent 3b82f6 for entire file. "bg-warning" class maybe if we change it to blue, no longer warning. But visual identity says cool grays + accent blue; we can style warning as cyan/amber? Target palette only says accent blue. We can perhaps use `background: linear-gradient(135deg, #f59e0b, #fbbf24);` with glow amber to keep warning. But "fresh palette" cool grays and accent blue. However class is `bg-warning`, maybe leave warning color but add glow. But effect variant "glow-effects" in accent color. Accent maybe blue, but warning badge could be amber with blue halo? Hmm.

The instructions say "All color values ... replaced with fresh palette" but not necessarily every element same accent. We can introduce amber as warning. But original CSS has no colors, so no need to "replace." We can assign. Target style: cool grays, accent blue; warning might be `#f59e0b` for semantics. But "dense-dashboard" palette likely has warning amber. If we override `.bg-warning` with blue, perhaps not ideal. But the target specifically says "color palette: Cool grays #1e293b, #334155, accent blue #3b82f6; White cards on slate background". It doesn't mention warning. But keeping warning color maybe accessible. But to ensure "fresh palette", use slate and blue. Hmm.

Maybe we should not override `bg-warning` background with blue; since class warning should remain warning. But we need refresh visual. We can add `box-shadow` amber glow and `color: #92400e`, `background: linear-gradient(135deg, #fbbf24, #f59e0b)`. This is a visual refresh, not plain Bootstrap. But "accent blue" not used on badge. The target may not require all elements blue