/* ============================================================
   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 transform visual identity without layout/class changes. Need inspect original CSS. It's a media query with three rules. Need change colors/shadows/radius/transitions etc but layout unchanged. Original only has font-size, text-align, padding. It doesn't have colors etc. Need output same selectors exactly, layout unchanged. Need perhaps add visual properties? Task says refresh visual identity. Could add colors, shadows within media query? Need preserve selectors exactly. Original selectors:

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

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

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

Need change colors shadows border-radius etc. But no colors present. We can add color/background/box-shadow/border-radius? Need not change layout, but might affect visuals. Permission says change color values only. We can set color or background-color? Since original no colors, adding may be okay visual-only? Need be careful not break. Need perhaps rewrite CSS with same selectors, include visual property declarations. Also "previous attempt didn't change enough" - need make distinct. But no existing palette. We should produce a refreshed stylesheet likely preserve all original declarations, plus add visual properties with new palette/glow. Need target style symmetric-grid, glow-effects. But HTML fixed. Need only within media query. Could add box-shadow, background, border etc. Need not alter layout.

Need output first character CSS. Need no markdown fences. Need include same selectors and media query. Need keep @media. Need preserve font-size and padding values? Padding within ±20%, but existing var? We should keep exactly? The directives say width/height/padding/margin within ±20% of input. Here var(--space-md) unknown; keep as original perhaps. font-size 0.85rem must keep? Typography unchanged. text-align unchanged. Add maybe color background for .app-hero-section .row .col-lg-7? That is likely colored section; adding background maybe visual? But changing colors may be okay. We can include property values with CSS custom properties? Need maybe use CSS variables with fallback. Need not define :root because only media query? We can use color declarations with values. We can also include transition, box-shadow etc within media query. Need avoid changing layout. Good.

Need self-check.

Need produce final output only CSS. Let's craft.

Original media query exact. We can add:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
        color: #0f172a;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 16px rgba(2, 6, 23, 0.2);
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 14px;
        box-shadow: 0 8px 32px rgba(2, 6, 23, 0.12), 0 0 24px rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(6px);
        transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;
    }
}

But adding transform transition maybe no transform on hover; okay? Could add :hover? But original selector list no pseudo. Need keep selectors exactly, cannot add :hover selectors? The instructions: selector lists, pseudo-classes keep? It says class names keep, pseudo-classes keep exactly. Does that mean can't add new pseudo-classes? Probably shouldn't add new selectors. So no hover.

Need be mindful .app-hero-section .badge.bg-warning: class bg-warning may already have Bootstrap warning styles. Adding background gradient/color may be okay. But original just font-size. Need maintain font-size. Need maybe use color and box-shadow.

Need perhaps use CSS custom properties? Could include `--accent`? But no :root available. Could use `@media` only; define vars inside? e.g. `.app-hero-section .badge.bg-warning { --accent: #...; }` but not needed.

Need "All color values fresh palette". We'll use dark slate + amber/cyan? Need consistent palette. Let's choose:

Palette: Base deep blue-slate `#0b1220`, accent cyan `#22d3ee`, secondary amber `#fbbf24`, text `#e2e8f0`, border `rgba(148,163,184,0.25)`. Glow effect: accent.

Need perhaps style `.app-hero-section .row .col-lg-7` with color; maybe `color: #e2e8f0; text-shadow: 0 0 20px rgba(34, 211, 238, 0.25);`? But heading text shadow glow maybe too much.

Need keep original paddings. `var(--space-md)` unchanged.

Need perhaps keep `font-size: 0.85rem`. Yes.

Need perhaps add `border-radius: 12px` to contact cards. But if original cards maybe have padding, adding bg okay. Need not change width/height.

Need perhaps add `box-shadow` to `.app-hero-section .badge.bg-warning` with amber glow. Good.

Need maybe add `border`, `border-radius`, `background` to `.app-hero-section .row .col-lg-7`? Not necessary.

Need maybe include `@media` same. Need ensure no changes to layout: no display, position, grid, etc. We're not changing padding values. We added `backdrop-filter` etc. Is backdrop-filter permitted? Yes visual property, may alter rendering but not layout. Could be okay. Need no transform value? We're not changing transform. Actually transition included `transform 0.3s ease`, but if no transform property, harmless. Could omit transform to avoid? It might transition only if some other styles set transform; adding transition is allowed. But not necessary. We can include transition. Need not add keyframes.

Need perhaps define `box-sizing`? No.

Need perhaps output without comments.

Let's re-evaluate instructions: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If original has no colors, we can add those visual declarations. But could this violate "ALL selectors exactly"? No, same selectors. Could this violate "only change colors..."? We add only visual properties. Good.

Need ensure media query condition preserved. Yes.

Need perhaps use `border-radius: 12px` within `.contact-channels-section article...`—this might be considered visual. Good.

Need perhaps use `background` with color. Need perhaps not use `color` on `col-lg-7` because text unchanged? It just changes color, okay.

Need perhaps include "symmetric-grid" pattern? This CSS has no grid. Could not change layout. Maybe add `border-radius: 16px`, `box-shadow` with symmetric glow. Fine.

Need perhaps include `.app-hero-section .badge.bg-warning` as pill shape? If badge already pill maybe okay.

Need not add !important except original padding; force okay. Could add `!important` to visual? No.

Need perhaps ensure CSS is valid. For `box-shadow`, multiple layers: use commas. Good.

Need perhaps avoid modifying .app-hero-section `.col-lg-7` background: if it's a hero text column, color might become light on light? But need set.

Could use:

.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #e2e8f0;
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.35), 0 4px 24px rgba(2, 6, 23, 0.4);
}

Need maybe "glow effects" for text shadow.

Need choices:
- `background: rgba(15, 23, 42, 0.6);` on cards? That changes background but okay. Perhaps should not make cards opaque if over image? Use translucent.
- Contact cards may be `contact-card` with class, using `--space-md` padding. Adding background may be nice but could obscure. We'll include subtle.

Need perhaps include `border: 1px solid rgba(148, 163, 184, 0.16);` and `box-shadow` with layered. Border color uses color change; border-style omitted? We use solid. We changed border-color and border-style. Allowed; not border-width (we did 1px, original border width? There might be default 0; adding 1px could affect layout? Border adds to box size unless box-sizing border-box. Hmm, changing border from none to 1px could alter layout dimensions if box-sizing content-box. The layout instruction says width/height/padding/margin keep similar, but adding border could alter layout. Is this allowed? It says "border-color and border-style (NOT border-width)" — we can change color/style, not border-width. It implies border-width property should not be changed. Adding a border-width declaration (even 1px) is technically changing border-width? It says NOT border-width. Better avoid adding border with width. We can set `outline` maybe? "outline styles (color, type)" allowed; outline does not affect layout. Could use outline instead. But outline not rounded consistently; with border-radius outline follows radius in modern browsers. But don't need outline. Need avoid adding border-width. But `border-color` and `border-style` can change if existing; cannot add? Since original no border, adding maybe violates "NOT border-width" if any border-width specified. We can use `outline: 1px solid rgba(...)` because outline width is not border-width? Outline-width is allowed? The list says outline styles (color, type) but not width. Hmm, outline width not specified, but adding 1px outline might be okay? Could avoid width additions by using `box-shadow` with inset? But box-shadow doesn't affect layout. Use inset box-shadow as border substitute: `box-shadow: inset 0 0 0 1px rgba(...), 0 12px 32px ...;` This creates visual border without border. Great. We'll avoid border declaration and use inset shadow. Also border-radius with box-shadow okay.

Need "border-radius (visual rounding only)" can add. Good.

Need perhaps avoid `padding` altering? Keep same.

Need transitions okay.

Need perhaps include `filter`, `backdrop-filter`? We can use `backdrop-filter: blur(8px);` allowed and visual. But might affect background; okay. Could use with background translucent.

Need perhaps include `opacity`? No need.

Need perhaps use `transition` with timing. Good.

Need perhaps define `--accent` inside rule? Not necessary.

Need output one CSS file? The prompt says "File: assets/css/saishi.css#块2/2", but request only relevant block? The original CSS is the media query. We should output only rewrite of that given block. Good.

Need ensure no markdown fences. Good.

Need make enough distinct. Let's craft final CSS with selectors exact. Need maybe include at top `@media (max-width: 575.98px) { ... }`.

Let's create robust declarations:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #0f172a;
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 55%, #fcd34d 100%);
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.45), 0 6px 20px rgba(2, 6, 23, 0.25);
        border-radius: 999px;
        background-clip: padding-box;
        transition: box-shadow 0.35s ease-in-out, filter 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        color: #e2e8f0;
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.85));
        backdrop-filter: blur(8px);
        border-radius: 16px;
        box-shadow: 0 16px 40px -12px rgba(2, 6, 23, 0.6), 0 0 24px rgba(34, 211, 238, 0.18), inset 0 0 0 1px rgba(148, 163, 184, 0.15);
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
    }
}

Need perhaps avoid `background-clip: padding-box` if no bg padding? Fine, visual.

Need maybe include "uniform gap"? not relevant.

Need perhaps include `.app-hero-section .badge.bg-warning` `border: none`? Avoid. But Bootstrap's `.bg-warning` includes background-color, so our background gradient overrides. Color maybe okay.

Need perhaps check every selector preserved exactly. Yes.

Need self-check: 
- selectors exactly: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article, .contact-quick-section .contact-card`. Original last selector has comma line break. We have same selectors with line break maybe. Good.
- media query condition same.
- display, position, grid, flex none.
- width, height, padding, margin not changed. We use `var(--space-md) !important` same. No width/height.
- font props: only font-size remains; we didn't change.
- colors replaced with fresh palette. Yes.
- shadows redesigned: yes.
- border-radius adjusted: yes, 999px and 16px.
- No AI comments.

Could maybe include `box-shadow` with inset "border" on article; no border width. Good.

Need maybe ensure `backdrop-filter` and background don't violate if HTML uses transparent cards? Fine.

Need perhaps include `-webkit-backdrop-filter`? Not necessary but can add for web support. Visual property. It doesn't change layout. Should we include? Might be beneficial. But keep concise.

Need maybe include `text-shadow` on `.contact`? No.

Need perhaps define `filter: drop-shadow()`? No, because backdrop filter enough.

Need perhaps "glow-effects" requires halo on hover, but cannot add hover selectors. Could add `transition` but no hover. Fine. Could maybe use `animation` with keyframes? No keyframes in original; adding keyframes maybe outside? But no need.

Need maybe use `@media` with "max-width: 575.98px" exactly. Yes.

Potential issue: `color: #e2e8f0` on `.contact-channels-section article` and contact card might override child? It's direct article color, but if children have own colors, okay. If original article has dark text, this changes to light, maybe visual identity. Good.

Potential issue: Adding `background: linear-gradient(...)` to article could cover backgrounds and images? It is on article container, not img. Good.

Potential issue: Original `.contact-channels-section article` maybe an article card with no background. Our background might override parent? likely fine.

Potential issue: "Only colors, shadows, radius, transitions, gradients" — `backdrop-filter` is in allowed list (filter, backdrop-filter). `background-clip` maybe not in allowed? It is decorative, but not listed. Could remove to be safe. Let's remove `background-clip`. Not needed.

Need maybe include "transition" with "transform"? No.

Need maybe use `box-shadow` on `.badge` with `filter`? No.

Let's produce final. But we need consider "symmetric-grid" target: maybe they want grid? But conservative cannot change layout. Could add "grid-gap" no. So no.

Need maybe output all requested block only, not extra. Fine.

Let's ensure no markdown fences. Done.

However, maybe should include CSS custom properties? The task says "CSS custom properties values" can change; but no variables. Could add variables at top of media query. But media query cannot have naked custom props except inside rule. We could define on `:root`? That's adding selector, not allowed? "Keep ALL selectors exactly" means we shouldn't add :root. So avoid.

Need maybe set `--space-md`? No, original uses variable, cannot define because would affect layout. Fine.

Need maybe consider color contrast. `color: #0f172a` on amber good.

Need perhaps use `border-radius: 14