/* ============================================================
   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 only rewritten CSS, no explanations. Need process input CSS. It's an @media block, with three rules. Need refresh visual identity without changing selectors/layout. Original has only media query and property values: text-align center (layout prohibited? text-align is typography? It says text-align, vertical-align in never change typography/layout? Under "Typography fixed": text-align cannot change. So keep text-align: center. Font-size cannot change. padding cannot change (within ±20% maybe keep). We can add visual properties? Need produce CSS with same selectors and properties? We can modify/add visual declarations like color, background, border-radius, box-shadow, transition, etc, as long as not changing layout. But HTML fixed, can add declarations that don't affect layout? Could alter colors, backgrounds, borders? But no width/padding. Need careful: .app-hero-section .row .col-lg-7 text-align center is kept. .badge font-size kept. Contact cards padding var(--space-md) !important, keep exactly? Could change padding? No, layout, keep. Need refresh visual identity. Target centered-stage, airy-rhythm. Need perhaps add color, box-shadow, border-radius? But selectors unchanged. We can add visual declarations to those selectors. But if original selectors in media query target elements. Need preserve selector list and order? We can add declarations within each rule, possibly add new rules? The instruction says output rewritten CSS preserving all selectors. It might allow adding visual properties to same selectors. But "Only colors, shadows, and decorative properties may change" means we can add. Need not include unchanged selectors? We should include all selectors. Could also add new selectors? Not necessary and risk. Need perhaps rewrite original with fresh palette? But original has no color. So need introduce palette via these selectors only. Maybe there is overarching file not shown? User gave file snippet "块2/2" only this media query. We need refresh this snippet. Without context, we can add visual rules within existing selectors: set background, color, border-radius, box-shadow, transition, maybe text-shadow, outline etc. Need keep layout properties exactly.

Need decide how to visually refresh:
- Set :root? Cannot add selectors? If adding :root would be new selector not preserved? It says selectors keep exactly. Better not add new selectors.
- Within `.contact-channels-section article, .contact-quick-section .contact-card` add border-radius: 24px; box-shadow; background; maybe border? But "border-width" not change, can add border? But adding border changes layout due to border-width if width/flex? Better avoid border. Could use box-shadow, background, backdrop-filter, transition, color.
- For `.badge.bg-warning` add background gradient/color, box-shadow, color. But class bg-warning implies Bootstrap; changing background may not matter? We can set background: linear-gradient(...) and color. But selector includes .badge.bg-warning; if we don't change text-align? Keep font-size. Add color and background. Need maybe not change bg-warning? It is allowed color. Could change to premium gold gradient.
- For hero column, add maybe nothing visual? Could add color, text-shadow? The element is a column div, not text; text-align center. We can add `color: #f5f2e8;` but if there are child elements inherited? Could be okay. But adding color to column may be overwritten. Better not.

Need preserve the media query condition exactly. Need no extra whitespace? Fine.

Potential issue: adding `padding: var(--space-md) !important` unchanged. We can add `border-radius: 1.75rem; box-shadow: 0 24px 48px ...; background: ...;` But adding background behind card may affect if card had own bg? It sets background, could change readability. We don't know original. But task is visual refresh, should use colors.

Need maybe "centered-stage" target: dark stage #0f0f1a, bright content area, premium gold or deep purple accent. Need apply to these small selectors. We can set contact cards with background: rgba(255,255,255,0.06), backdrop-filter: blur(12px), border-radius: 28px, box-shadow multilayered. But backdrop-filter can be visual. Add `color: #eae6f5;` maybe.

But need be careful with `!important` padding. Fine.

Could add `transition: box-shadow .3s ease, transform .3s ease` but `transform` is layout? transform no layout. But altering transition only; allowed to change transition timing. But no `:hover` pseudo selects? Could add `@media (hover: hover)` rule? That would be new selector and could be okay? The instruction says selectors preserved; better not.

Need perhaps rewrite everything as:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1a0f00;
        background: linear-gradient(135deg, #f8d26a, #d4a017);
        box-shadow: 0 8px 24px rgba(212, 160, 23, 0.35), 0 2px 6px rgba(15, 15, 26, 0.4);
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(8px);
        border-radius: 28px;
        box-shadow: 0 20px 40px -12px rgba(15, 15, 26, 0.6), 0 4px 12px rgba(0, 0, 0, 0.2);
        color: #f3efe9;
    }
}

Need maintain selectors exactly: in original, selector list split line with comma. We can keep same. But need check "padding: var(--space-md) !important" - important. Need maybe not change. The visual changes add background and border-radius, but background could affect padding? No.

Need think about "text-align: center" in hero column: maybe keep. `font-size: 0.85rem` unchanged. We might add properties to .badge.bg-warning: border-radius affects visual but not layout? border-radius no layout. It may make pill. `background` may override Bootstrap warning. `color` set dark for contrast. `box-shadow`.

Need maybe "border-color" etc. We can modify/add. It says "All color values: background, color, border-color, fill, stroke, outline-color" must change. Original didn't have any, so maybe enough? But "Colors throughout the file replaced with fresh palette?" There were no colors. We need satisfy by adding new colors. The output should be "rewritten CSS" maybe no markdown.

Potential issue: `.contact-channels-section article, .contact-quick-section .contact-card` selector doesn't include `a` tag? It's fine.

Need perhaps incorporate `background: #0f0f1a` to section? Can't add selectors. Maybe `.app-hero-section .row .col-lg-7` could get `background: transparent` but no. Could add `color` only.

Need maybe use CSS custom properties? We can set variables on existing selectors? Could define variables in existing selector with `--card-bg: ...;` but if no usage, no effect. Better not.

Need produce only CSS. But before final, let's think if adding `backdrop-filter` may require `-webkit-backdrop-filter`. Should we include? Could include, but not necessary. Maybe include for compatibility. Since property can be changed/added. Need not add vendor prefixes? Not prohibited. But maybe "only colors, shadows, decorative properties" okay.

Need perhaps align with "airy-rhythm" large border-radius (16-28px) and soft pillowy shadows. We use 28px. Good.

Need maybe use "Premium gold or deep purple accent." We use gold gradient for badge and purple-ish background? Contact cards use white translucent on dark stage, but no dark background. Could use deep purple box-shadow. We can add `box-shadow: 0 24px 48px -16px rgba(88, 28, 135, 0.4), 0 6px 16px rgba(15, 15, 26, 0.3);` maybe. But card on mobile likely light background? Hmm.

Maybe use `background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));` and `box-shadow: 0 24px 48px -16px rgba(15, 15, 26, 0.5), inset 0 1px 0 rgba(255,255,255,0.15);` That is pillowy. But if cards have background already, overriding to dark translucent might harm. However task is to change colors so it's okay.

Need perhaps include `transition: box-shadow 0.35s ease, background-color 0.35s ease` but no hover. Could include to make interactive feel? Not necessary.

Need maybe add `text-shadow` to hero text? Could be decorative but text element is column, not necessarily heading. `text-shadow` inherited? text-shadow is inherited? Actually text-shadow is inherited. If we set on `.col-lg-7`, child headings will inherit? In CSS, text-shadow is inherited? Yes, text-shadow is inherited? Let's verify: `text-shadow` is an inherited property? I think it is inherited? CSS Text Decoration Module says text-shadow property is inherited? Yes, text-shadow is inherited. It could add subtle shadow to all text in hero column. Target stage: maybe `text-shadow: 0 2px 8px rgba(15,15,26,0.6)`. But if not desired. Yet visual refresh.

Need maybe set `caret-color` no.

Could also add `outline`? Better not.

Potential danger: `backdrop-filter` can be expensive but okay.

Need ensure the output as first character CSS. No markdown.

Let's draft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #2a1a00;
        background: linear-gradient(135deg, #fce38a 0%, #e7b523 45%, #c8870e 100%);
        border-radius: 999px;
        box-shadow: 0 8px 20px -6px rgba(231, 181, 35, 0.55), 0 2px 6px rgba(15, 15, 26, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        color: #f4efe8;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 28px;
        box-shadow: 0 24px 48px -16px rgba(15, 15, 26, 0.55), 0 6px 16px -6px rgba(88, 28, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

Need think about padding in original: `padding: var(--space-md) !important;` unchanged. But adding `background` doesn't change layout. However `border-radius: 28px` with background is visual.

Need maybe "button-looking badge": border-radius 999px changes shape. That's visual. Good.

But if original badge was rectangular with rounded corners, maybe pill okay. Target airy-rhythm uses large radius.

Need maybe adjust `font-size`? Can't change. Keep.

Need perhaps include `letter-spacing`? No.

Need perhaps preserve "line-height"? none.

Need maybe one issue: by setting `background` on contact-card, if source had `background-color`, the shorthand gradient overrides; okay.

Could also add `border: 0`? No, border-width would change if added? If no border, adding border 1px changes layout. Better not.

Need maybe add `-webkit-backdrop-filter` is okay.

Need ensure the selector list formatting: original had line break and indentation before second selector. We can preserve as original:

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        ...
    }

Yes.

Need self-check: all selectors preserved. `text-align` unchanged. `font-size` unchanged. `padding` unchanged. No width/height. Good.

But wait: "All color values: background, color, border-color, fill, stroke, outline-color" maybe they expect to change color values in original; there were none. We added. Good.

Could perhaps include a dark stage background? The target style says "Spotlight feel: dark stage #0f0f1a, bright content area". But with only these selectors, we can create that by setting `background` of cards dark? But the page itself likely has background elsewhere not in snippet. We cannot add body. But we can add `background` to hero column? Maybe `background: #0f0f1a;` on `.col-lg-7` would be too much and not desired. The entire page may not become dark. But maybe snippet is a partial file; target style should apply to these components only. We can use dark box-shadow colors; not actual background.

Need maybe add radial gradient background behind content? The `.contact-channels-section article` etc. could have `background: radial-gradient(circle at top, rgba(126,34,206,0.15), rgba(15,15,26,0.85))` but that might be too dark for card. But target "dark stage" maybe contact cards on dark background. Yet because cards may be on light background, making them dark could be a dramatic refresh. But if not, it might break readability. Still, visual identity fresh.

Need maybe "centered-stage" and "airy-rhythm" are target style. Since layout fixed and only this snippet, maybe should add `max-width`? No max-width would alter layout. So cannot center content. We can use text-align center.

Need maybe include `margin`? No.

Need maybe include `box-sizing`? No.

Need perhaps add `text-align: center` to `.contact-channels-section article`? That would be typography/layout and not in original; could change. Better not.

Need maybe set `color` on cards to light, but if page background is light, text would become light on light card? But we also set background gradient translucent white, which over light page remains light; light text would be low contrast. That's a potential problem. We need set a background that creates contrast with light text. Maybe use dark translucent gradient to ensure white text readable: `linear-gradient(145deg, rgba(30, 27, 60, 0.85), rgba(15, 15, 26, 0.9))`. But then card is dark. Airy-rhythm with dark stage. If the page background is light, dark cards look premium. Good. We should set `color: #f4efe8; background: linear-gradient(145deg, rgba(30,27,60,0.9), rgba(15,15,26,0.95)); backdrop-filter: blur(12px); border-radius: 28px; box-shadow: ...` Dark card on light page? The page may not be light, but dark card with shadow works. The target style says dark stage #0f0f1a. Let's use dark translucent so content area bright? The content probably has text. Maybe set background dark on cards conveys stage. But if cards originally are white, dark background changes identity. That's desired "refreshed".

Need perhaps for badge: `.badge.bg-warning` should be gold; text dark. Good.

Need maybe for hero column: set `color: #f8f5ff; text-shadow...` If hero section is dark, good. If not, maybe text becomes light and invisible if no dark background. But we can also set `background: transparent` doesn't help. Could set `color` only perhaps not. We don't know original context. The original snippet probably from a sports events site; hero section might already have dark background. Setting light color safe? If hero column text was dark, light color could break. But visual refresh intentionally changes colors. Need maybe use `color: #1f1235`? That might not match dark stage. Hmm.

Since target style dark stage #0f0f1a, bright content area. It suggests hero section likely dark already. So text should be bright. Good.

Need perhaps use deep purple accent in shadow: `0 20px 40px -12px rgba(76, 29, 149, 0.4)`.

Let's consider whether to set `background` on `.app-hero-section .row .col-lg-7` to a gradient? Could create spotlight? But `col-lg-7` is a column, setting background maybe weird. Better not.

Could add `border-radius` to `col-lg-7`? Not necessary.

Need maybe "centered-stage" with premium gold or deep purple accent. We can add `box-shadow: 0 0 0 1px rgba(255,255,255,0.08)`? That's border-like but no layout. Good.

Potential issue: `border-radius: 999px` on