/* ============================================================
   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 according to the target style. The original CSS has only a media query with some rules. Let's analyze.

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 are told to refresh visually without changing layout structure or class names. The constraints: we can change colors, shadows, radius, transitions, gradients, etc. But cannot change font-size? Actually typography: font-size is listed under typography and cannot change. So we cannot change font-size. Also text-align is layout? It's typography? Actually text-align is under layout? The never-change list includes text-align. So we must keep text-align: center. Also padding is layout, but we may keep similar ±20%. padding: var(--space-md) is a custom property value. We could change the custom property value? But the CSS snippet uses var(--space-md). The instruction says CSS custom properties (--color-*, --shadow-*) values may change. But --space-md is a spacing variable, not color/shadow. We should keep spacing values similar. The padding: var(--space-md) is a spacing variable; we cannot change the selector but could change the declaration? Actually we are to keep padding within ±20% of input. The input uses var(--space-md), which is defined elsewhere. We don't know its value. We cannot change the variable definition here. To keep layout same, we should keep the same padding declaration. But maybe we can change the value to a different spacing variable? Not recommended.

The task is to "refresh this CSS visually" but the given CSS only contains three rules. We need to apply the target style: symmetric-grid with glow-effects. But no colors/shadows exist in the original. So we need to add visual properties without changing layout. The original selectors remain. We can add new declarations that are visual only: background, color, border-radius, box-shadow, transition, etc. However, the selectors are inside a media query. We can add visual properties to those selectors.

We must not change the selectors. We can add new declarations inside the existing rules. But we must be careful: The original rules have text-align and font-size, which are non-visual? Actually typography: font-size cannot change. So keep font-size: 0.85rem. text-align: center keep. Padding keep.

We can add visual declarations like background, color, border-radius, box-shadow, transition, backdrop-filter, etc. But adding these to elements might affect layout? Border-radius doesn't affect layout. Box-shadow doesn't. Background doesn't. Color doesn't. Transition doesn't. So safe.

We are told to output only the rewritten CSS preserving all selectors and layout exactly. So we can add declarations.

The target style is "symmetric-grid" and "glow-effects". But the given selectors are not grid items. However, the target style is a general aesthetic. We can incorporate glow shadows on hover? The selectors: .app-hero-section .badge.bg-warning is a badge; .contact-channels-section article and .contact-quick-section .contact-card are cards. We can add border-radius, box-shadow, background, color, transition, and hover states? But we cannot add new selectors? The rules are inside a media query. We can add new rules? The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." That means we cannot add new selectors that aren't present. We can only modify existing rules. We cannot add e.g. `.app-hero-section .badge.bg-warning:hover` because that's a new selector not present. However, the original CSS may contain those selectors elsewhere? The file fragment is only this block. The instruction says "File: assets/css/saishi.css #块2/2" meaning this is block 2 of 2. The original file may have other blocks. We only output this block. We must not add new selectors.

But we can add pseudo-classes? That would change selector. Not allowed. So we can't add :hover. We can add transition, but no hover effect will apply unless there is another rule. That's fine.

We can add visual properties to existing selectors. For example, for .app-hero-section .badge.bg-warning, we can set background: linear-gradient(...) but the badge already uses .bg-warning class (Bootstrap). If we set background-color, it might override Bootstrap. That's okay? The original CSS didn't have background, but we can add. However, we must be careful not to change layout. Background color doesn't affect layout. Color may affect text contrast.

The problem: The original snippet is only a media query. The selectors are contextual. We should preserve the media query and the rules exactly. We can add new declarations inside each rule.

But "Never change: ... CSS custom properties (--color-*, --shadow-*) values" Actually the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. So we can alter custom properties if they are defined in this block. But there are none except var(--space-md) used as a value. We don't change that.

The target style says "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" and "halo on hover: 0 0 32px ...". Since we can't add :hover, we can only set a glow shadow on the elements. For cards: .contact-channels-section article and .contact-quick-section .contact-card get border-radius medium (8-16px), box-shadow glow. For badge maybe background gradient and glow. For hero col, maybe text-shadow? But the hero col is a text container. We can add color? It's a center-aligned text. Adding color might be okay but we don't know existing color. We should set a color value that is in the new palette. But if we set color on the col, it cascades to all text inside. That might be desired. But we need a balanced palette.

Let's craft a fresh visual identity. The palette from target: balanced harmonious. We can choose a deep teal/indigo with amber accent? Since there's a bg-warning badge, warning is yellow/orange. We can use that as accent. Glow effects with accent.

Let's propose:

- Primary background: none? We can't change background on body because not in selector. We can set background on the cards.
- Card background: #ffffff or rgba(255,255,255,0.85) with backdrop-filter blur.
- Card border-radius: 16px.
- Card box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 0 24px rgba(255, 193, 7, 0.25) (accent glow). But maybe accent is a blue? The warning badge is orange/yellow. Use #ffb74d or #ffc107. For glow on cards, use rgba(255, 193, 7, 0.3).
- Color on cards: #2d3436 or #1e293b.
- Badge: background: linear-gradient(135deg, #ffb74d, #ff9f1a); color: #1f2937; border-radius: 50rem (pill); box-shadow: 0 0 24px rgba(255, 193, 7, 0.5); transition.
- Contact card: also border: 1px solid rgba(255,255,255,0.15) maybe.
- Article: border-radius: 16px; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 24px rgba(0, 150, 136, 0.2)? But accent maybe warm. Need consistency.

The target style "symmetric-grid" implies equal grids, but our selectors don't control grid. We can't change grid properties because not present. We can only add visual.

We should also consider the media query context: max-width 575.98px (mobile). So padding might be smaller. We can add transitions with ease-in-out.

Let's rewrite:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #e8f1f8; /* maybe */
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #ff9f1c);
        color: #2d1b00;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.45);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(14px);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 24px rgba(255, 193, 7, 0.18);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }
}

But need to be careful: adding color to .col-lg-7 might override link colors? It will cascade. That's okay. But could affect layout? No.

The instruction says "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)". Our card shadow uses 0 0 24px rgba(255,193,7,0.18), not 0.4. Maybe increase to 0.35. "Halo on hover: 0 0 32px rgba(accent, 0.6)". We can't add hover, but we can include transition ready. But without hover rule, no halo. Could we add a pseudo-class to existing selector? The selector list includes .contact-channels-section article, .contact-quick-section .contact-card. If we write `.contact-channels-section article:hover, .contact-quick-section .contact-card:hover` that's a new selector with pseudo-class. Is that allowed? The instruction: "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the never-change list? Actually they say: "🏷️ SELECTORS (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" In the list of things we never change, they list "Pseudo-classes (:hover, :focus, ::before, ::after)" meaning we shouldn't add or remove? It's ambiguous. It says "Class names: keep EXACTLY" and "Pseudo-classes" listed as never change. That likely means if the original has them, keep them; if not, don't add? The instruction "Every selector character-for-character preserved?" suggests we cannot alter selectors. Adding :hover would alter. So no.

We can add `transition` but no hover. Fine.

But "Subtle pulsing animations" - can we add `@keyframes`? The never-change list includes "@keyframes names (values inside CAN change)". But there are no @keyframes in the original. Adding a new @keyframes would be adding a new selector? @keyframes name is an identifier; the rule itself can be added? The instruction says "Animation & Media: @keyframes names (values inside CAN change)" implies we can change values inside existing keyframes, not necessarily add new ones. We probably shouldn't add new @keyframes because it's a new at-rule not in the original snippet. But maybe we can add `animation` property with an existing keyframe name? We don't know existing names. We could add `animation: pulse 2s infinite;` but without keyframes, no effect. So skip.

We should output only the rewritten CSS. The original uses a media query at max-width 575.98px. We preserve it.

Need to ensure we don't change font-size: keep 0.85rem. text-align: center. padding: var(--space-md) !important. We keep those.

We can add `color` to the badge and cards. For cards, color: #334155 (slate). For article and card backgrounds, use a semi-transparent light background. But if the parent has a dark background, this may stand out. The original isn't know. We choose a style.

Let's think of a balanced palette. Accent: warm amber (#f59e0b or #fbbf24). Secondary: teal (#0d9488). Neutral: slate (#1e293b, #f8fafc). Use symmetric-grid vibe: consistent card radius 14px, consistent shadow.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f1f5f9;
        text-shadow: 0 2px 16px rgba(2, 6, 23, 0.3);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        color: #322109;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.45), 0 4px 12px rgba(15, 23, 42, 0.15);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(2, 6, 23, 0.1), 0 0 24px rgba(245, 158, 11, 0.28);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
        color: #1e293b;
    }
}

But we added `transform: 0.3s ease` in transition; transform is not visual? It can affect layout if transition triggered by hover, but no hover. It's fine. However, we shouldn't include transform in transition because transform is layout? Actually transform is not in the forbidden list? It is a property that can affect visual but not layout in terms of flow. Still, the transition property can include transform, but we won't change transform. Safe.

However, adding `background` to .badge.bg-warning overrides Bootstrap's background-color but keeps class. The instruction says class names fixed; we can change colors. Good.

Need to ensure "color" on badge and card not conflict with original color? The original likely had default color. We can change.

The target style "symmetric-grid" asks for "Strict equal grids: repeat(3, 1fr)" but we can't because those selectors aren't grids. Maybe there are other blocks in the file that will be handled separately? We are only responsible for this block. So we focus on visual enhancement.

We should also consider that `backdrop-filter` might not be supported on some browsers but fine.

One concern: We are not allowed to change padding beyond ±20%. We keep exactly. Good.

Another concern: The `.app-hero-section .row .col-lg-7` is a container; adding text-shadow might be okay. But if the hero section has an image with text over it, a text-shadow helps. Good.

Now, output only CSS without markdown. Let's ensure no extra comments.

Let's also add `-webkit-backdrop-filter` for Safari? That is a property alias. Adding it is a new declaration but same property? It's okay. But to be safe, we can include both. However, the instruction "Only the rewritten CSS" and "No comments". Adding vendor prefix is fine.

Let's also maybe add `background-color` fallback before background gradient. For badge:

background-color: #f59e0b;
background: linear-gradient(135deg, #fcd34d, #f59e0b);

Actually if we set `background: linear-gradient(...)` that overrides background-color. We can set `background-color` for fallback, then `background-image` maybe. But `background` shorthand will reset background-color to transparent? Actually background: linear-gradient(...) sets background-image and background-color to transparent? It resets all background properties. So if we want fallback, use `background-color` then `background-image`. But we can just use `background` with color fallback in shorthand: `background: linear-gradient(...), #f59e0b;` The final layer color can be in background: `background: linear-gradient(...) #f59e0b;` This works. Or we can use `background-image` and `background-color`. Let's do:

background-color: #f59e0b;
background-image: linear-gradient(135deg, #fcd34d, #f59e0b);

Similarly for cards, use background-color and background-image if needed. But we use rgba(255,255,255,0.92)