/* ============================================================
   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;
    }
}

The user wants me to rewrite this CSS block with a fresh visual identity while keeping all selectors and layout exactly the same. The original CSS is:

```css
@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;
    }
}
```

This is inside a media query. The target style is "centered-stage" with "glow-effects". But this CSS only has a few rules:
- text-align: center (this is layout, can't change - actually text-align is listed under "Layout" as protected: "text-align, vertical-align")
- font-size (protected under typography)
- padding (protected, keep ±20%)

Since most of these are layout/typography protected values, I need to find ways to inject visual changes. Let me look at what I CAN change:

1. For `.app-hero-section .badge.bg-warning` — I can add visual properties like box-shadow, border-radius, transition, background color, color, border-color, etc. But I must NOT change font-size (protected).

2. For `.contact-channels-section article, .contact-quick-section .contact-card` — I can add visual properties but padding must stay within ±20% of `var(--space-md)`. Actually, `var(--space-md)` is a custom property reference — I can't change the padding value itself since it references a var. But I could potentially change the custom property value if it's defined elsewhere... but that's not in this file. Actually the rule says "CSS custom properties (--color-*, --shadow-*) values" can change. `--space-md` is a spacing variable, not color/shadow. I should keep padding as-is to be safe.

Wait — the instruction says "padding, margin (keep similar values, ±20% maximum)". The original is `padding: var(--space-md) !important;`. I could keep that or slightly adjust, but since it uses a variable, changing it would be risky. Better keep it.

So the main approach: add new visual declarations to each rule without removing the protected ones.

Let me think creatively:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is protected. I can add things like `color`, `text-shadow`, maybe `background`, but adding background to a column could affect layout... Actually color/text-shadow would be safe. But text-align: center within media query on a column — adding a subtle text-shadow could be a nice glow touch. But careful: these elements may already have colors from elsewhere. Adding a color here might override. Hmm.

Actually, the safest approach for a conservative refresh: add decorative properties that don't affect layout:
- box-shadow (multi-layer glow)
- text-shadow
- border-radius
- transition
- filter (careful with filter on elements — can affect rendering but not layout)
- opacity

For Rule 3, the articles/cards — adding box-shadow, border-radius, background, border-color, transition would give a nice glow effect. But I don't want to override padding.

Let me also consider: the media query is a max-width 575.98px mobile view. Adding heavy shadows on mobile is fine.

Let me craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(212, 175, 55, 0.25);
        transition: text-shadow 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1a1a24;
        background-color: #f2c94c;
        border-color: #e5b834;
        box-shadow: 0 0 16px rgba(242, 201, 76, 0.5), 0 4px 12px rgba(15, 15, 26, 0.3);
        border-radius: 999px;
        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-color: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(212, 175, 55, 0.25);
        border-radius: 14px;
        box-shadow: 0 0 0 rgba(212, 175, 55, 0), 0 8px 24px rgba(15, 15, 26, 0.35);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.35s ease, transform 0.35s ease, background-color 0.35s ease;
    }
}
```

Wait — but the instructions say "border-color and border-style (NOT border-width)". If I add `border: 1px solid ...` that adds border-width which is forbidden? Let me re-read: "border-color and border-style (NOT border-width)" — meaning I can change border-color and border-style, but NOT border-width. Adding a border where none existed adds border-width, which changes layout. Hmm, that's risky. The original CSS doesn't declare border on these elements. Adding `border: 1px solid` would add a border that might affect layout. But the rule says "border-color and border-style (NOT border-width)" — this seems to mean if there's already a border, change its color/style but not width. Adding a new border could change sizing.

Similarly, backdrop-filter — allowed per the list (filter, backdrop-filter). That's fine.

But border-radius on elements without borders adds rounding — that's a visual property, allowed. It won't change layout dimensions.

However, adding `background-color` to the cards would overlay existing backgrounds? Actually it could. The original doesn't set background. Adding a translucent background could help the glow aesthetic but might conflict with existing backgrounds from other CSS files. Hmm. In a conservative mode, adding a semi-transparent background with a dark stage theme might look fine.

Actually, the safest is to only ADD properties that are explicitly allowed and don't break layout. Let me check the allowed list:

- All color values: background, color, border-color, fill, stroke, outline-color ✓
- box-shadow ✓
- text-shadow ✓
- border-radius ✓
- gradient colors ✓
- transition ✓
- filter, backdrop-filter ✓
- opacity ✓
- outline styles (color, type) ✓
- border-color and border-style (NOT border-width) — can only change existing borders or use border-style/color without width. `border: 1px solid` sets width too. Better to use `outline` or `box-shadow` to create borders, or if I want a border, I could use `border-color` and `border-style` but those have no effect without border-width. Actually I can't add border-width. So I should simulate borders with box-shadow (inset) instead, or just skip.

So for cards, use box-shadow and radius, backdrop-filter, transition. No background maybe? Actually background is allowed (color values). Adding a background won't change layout. I'll add a subtle background.

Wait — "background" is in the allowed list. Adding background-color to the cards is fine.

But careful: `backdrop-filter: blur(8px)` — if a card has no translucent background, the blur does nothing. With a semi-transparent background, it works.

For the badge: The class `.badge.bg-warning` likely already has a bootstrap warning background (yellow). Changing `background-color` and `color` — allowed. Adding box-shadow glow in warning yellow. That fits glow effects. Modifying color might be okay — the badge text would become dark on gold. Fine.

For the hero column: text-align is the only original declaration. Adding text-shadow and transition. text-shadow on the whole column might be too much if there's lots of text. Hmm. But it's mobile-only and "centered-stage" wants spotlight feel. A subtle text-shadow glow could be nice. But text-shadow on all text in the column could look odd. Alternatively, I can add a `color` to the column — but that would override inherited colors. Not good.

Actually maybe I could add `filter: drop-shadow(...)` on the column? That would apply to all content. Also risky.

Let me think about what's most useful. The task says "Make colors, shadows, and radius MORE distinct this round." Even for a mobile media query, I should inject visual identity.

Let me propose:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(212, 175, 55, 0.2);
        transition: text-shadow 0.35s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #14141f;
        background-color: #f5c542;
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(245, 197, 66, 0.55), 0 0 32px rgba(245, 197, 66, 0.25), 0 4px 14px rgba(10, 10, 20, 0.4);
        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-color: rgba(20, 20, 31, 0.55);
        border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.22), 0 12px 32px rgba(8, 8, 16, 0.45), 0 0 24px rgba(212, 175, 55, 0.08);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
    }
}
```

Wait, articles and contact cards already have padding from the var. Adding a background color to the articles — articles are probably content blocks; adding a dark translucent bg could look like a card. That might be fine.

But hold on — I need to double check: "box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.22)" — the 0 0 0 1px creates a 1px ring that doesn't take layout space. Good, that acts like a border without affecting layout.

Also I shouldn't add `transform` in transition if I'm not changing transform... well, transition for transform is harmless but if nothing changes it, it's pointless. Actually I shouldn't add hover states since none exist in the original — wait, can I add :hover pseudo-class? The rules say "Pseudo-classes (:hover, :focus, ::before, ::after)" must be kept exactly if present. It doesn't explicitly forbid adding new ones, but "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY... Pseudo-classes (:hover, :focus, ::before, ::after)" — meaning if there are pseudo-classes in the original, keep them. Adding new pseudo-classes would technically be adding new selectors, which contradicts "preserving ALL selectors exactly." The safest is NOT to add any new selectors or pseudo-classes. So no :hover rules. Just transitions that respond to existing hover states defined elsewhere.

Hmm, but transition on transform without any transform change is harmless. Actually if another stylesheet sets transform on hover for these cards, the transition would apply nicely. That's a bonus.

Let me reconsider the text-shadow on the column. The column with `text-align: center` — this is likely a hero section text column. Text-shadow at 24px blur with gold at 0.2 alpha — subtle glow. OK.

Also, for the badge, I changed `background-color` and `color`. But the class is `badge.bg-warning` — bg-warning sets background. If I override background-color here, that's fine. But if Bootstrap uses `background` shorthand with !important? Bootstrap's `bg-warning` uses `background-color` (not !important). So my rule (with higher specificity: `.app-hero-section .badge.bg-warning`) will override. Good.

But wait — the original CSS had `font-size: 0.85rem;` — I keep it. Fine.

For the contact cards, I'm adding `background-color: rgba(20, 20, 31, 0.55)` — this gives a dark glassy look. Combined with `backdrop-filter: blur(10px)`. Nice glow variant.

Actually — let me reconsider whether adding `border-radius` to the col-lg-7 would do anything. Columns don't have backgrounds usually. Skip.

Let me also consider the "centered-stage" palette: dark stage #0f0f1a, premium gold accent. I'll use a gold accent of #e8c35a or #d4af37. Let me set:
- Stage dark: #0f0f1a
- Gold: #e8c35a

For the badge: `#e8c35a` background with dark text `#151520`. Glow gold.

For articles: dark translucent bg with gold ring via box-shadow.

I think my draft is good. Let me ensure:
- I didn't change `text-align` (kept as center).
- I didn't change `font-size` (kept 0.85rem).
- I didn't change `padding` (kept var(--space-md) !important).
- No selector changes.
- No layout property changes.
- Added transitions, shadows, radius, backdrop-filter.

One concern: the transition timing — transitions are allowed. Adding a transition on text-shadow to a column; if there's no hover anywhere, it just won't animate. Harmless.

Also `transform` in transition list: I should include only properties I might change. But there's no hover. Including transform in transition is fine but useless. Actually it doesn't matter. I could limit to box-shadow, background-color, color to be safer. Let me keep transition clean.

Also, I need to be careful with `backdrop-filter` — it's allowed. But some browsers need `-webkit-backdrop-filter`. I could add it. Adding vendor prefixes is fine; they're not new selectors. I'll add `-webkit-backdrop-filter` for compatibility.

Let me finalize:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(232, 195, 90, 0.22);
        transition: text-shadow 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #14141f;
        background-color: #e8c35a;
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(232, 195, 90, 0.55), 0 0 32px rgba(232, 195, 90, 0.25), 0 4px 14px rgba(15, 15, 26, 0.4);
        transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(15, 15, 26, 0.5);
        border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(232, 195, 90, 0.22), 0 12px 32px rgba(8, 8, 16, 0.45), 0 0 28px rgba(232, 195, 90, 0.08);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}
```

Hmm, wait — original `padding: var(--space-md) !important;` — I kept exactly. Good.

Is `border-radius` on the badge going to conflict with Bootstrap badge's existing radius (0.375rem)? It will override — fine.

Should I also add `outline`? Not needed.

One more consideration: `.app-hero-section .badge.bg-warning` — Bootstrap's warning badge is yellow with dark text. My override keeps that identity but shifts toward gold. Good.

Now, the instructions mention "Subtle pulsing animations" as part of glow effects variant. Adding @keyframes would add a new at-rule, which is allowed? The instructions say "@keyframes names (values inside CAN change)" — meaning if keyframes exist, I can change values/names? Actually "animation-name (values like duration/timing CAN change)". It's safer not to add new keyframes since the original has none. But the variant suggests a pulsing animation... Adding an animation to the badge could be nice. However, adding `animation` property to an element without hover is okay and allowed (values can change). But adding new @keyframes would create a new name — the instruction says keyframes names can change (from existing), not necessarily create new ones. Creating a new @keyframes doesn't change any selector or layout, so it should be acceptable. But to be conservative and safe, I'll add a subtle pulse to the badge via animation. This