/* ============================================================
   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 CSS visually only, preserving selectors and layout properties. The original CSS is a media query with a few rules. We need to change colors, shadows, radius, transitions, gradients, etc. But the original has no colors, shadows, etc. It only has text-align, padding, font-size. However, we are allowed to change padding ±20%. But the instruction says "Only change colors, shadows, radius, transitions, gradients." But also "text-align" is a layout property we shouldn't change. Actually in the list of "MUST CHANGE" we have colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color/style, caret-color, accent-color, CSS custom properties. In "NEVER CHANGE" we have text-align, vertical-align.

The original CSS has text-align: center, that's in the never change list. So we must preserve text-align: center. It also has font-size: 0.85rem; font-size is in the typography section, never change. So we must preserve font-size. Padding is allowed to change within ±20%. The original padding: var(--space-md) !important. We can change the value? But it uses a custom property. We could adjust the custom property value? The property is padding, and the allowed changes are "padding, margin (keep similar values, ±20% maximum)". We can change the padding value, but we need to preserve the var? Actually the selector has padding: var(--space-md) !important. We could alter the value of --space-md somewhere, but if we don't define it here, we might not want to change it. We could instead adjust padding? But we're not supposed to change HTML, but CSS variables are okay to change if they are defined. However, the original CSS snippet doesn't define --space-md, so it's likely defined elsewhere. Since we are only outputting the rewritten CSS for this file, we might not be able to change the variable. But we could replace padding: var(--space-md) with padding: 1.2rem (if --space-md is e.g. 1.25rem, 20% tolerance). But that would alter the property value and potentially not use the variable. However, the instruction says keep selectors exactly, but values can change. Yet the "Never change" list includes padding/margin with "keep similar values, ±20% maximum". So we can adjust padding.

But also the target style is "centered-stage" with glow effects. However the original CSS is only a media query for small screens. We need to visually refresh. Since there are no colors/shadows, we might add them? But we must not change layout. Adding box-shadow to elements could be okay. However, we must be careful: The original rules are inside a media query. We can add new declarations to the existing rules, but we must preserve all original declarations? The task says "Refresh this CSS visually." We can add new visual properties to the existing selectors, as long as we don't change layout/typography. So we can add background, border-radius, box-shadow, etc. But the selectors are:
- `.app-hero-section .row .col-lg-7` -> text-align center. We can add text-shadow? But it's a text container. We could add a subtle text-shadow to heading? But not sure.
- `.app-hero-section .badge.bg-warning` -> font-size. We can add background, color, border-radius, box-shadow, etc. But the badge has classes bg-warning, so it already has a background from Bootstrap. We could override with a gradient or new background color. Also add box-shadow glow.
- `.contact-channels-section article, .contact-quick-section .contact-card` -> padding. We can add border-radius, box-shadow, background, transition, etc.

We need to be conservative: preserve selectors exactly, preserve text-align, font-size, and padding within ±20%. We can add new properties. Also we must change colors, shadows, radius, transitions, gradients. Since original has none, we introduce them.

Target style: centered-stage with glow effects. Color palette: dark stage #0f0f1a, bright content area, premium gold or deep purple accent. We'll use deep purple accent maybe #8b5cf6 or gold #f59e0b. Let's choose a premium purple/violet with gold? Let's pick a violet accent with a warm gold? We need to be consistent.

Let's design:
- Badge: background: linear-gradient(135deg, #8b5cf6, #6d28d9); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 24px rgba(139,92,246,0.4); border-radius: 999px; color: #fff; maybe add text-shadow: 0 0 8px rgba(255,255,255,0.4). But if we change color, we need to ensure contrast. The badge is bg-warning, likely has yellow bg. Overriding with gradient is fine.

- Article/card: background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; box-shadow: 0 0 24px rgba(139,92,246,0.2), inset 0 1px 0 rgba(255,255,255,0.1); transition: box-shadow 0.3s ease, background 0.3s ease; maybe backdrop-filter: blur(10px). Also add hover glow? But the selector is not a hover rule. We cannot add :hover because that would add a new selector, which is not allowed? Wait, we are not allowed to add new selectors? The rule "Selectors: keep exactly" implies we cannot add new selectors. We also cannot add pseudo-classes? Actually pseudo-classes are part of selectors. The list says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" category meaning we must keep them exactly as-is. But we cannot add new pseudo-classes because that would change the selector list. The instruction says "Every selector character-for-character preserved?" So we cannot add :hover. We can only modify existing rules. There are no hover rules. We could add transitions that respond to hover state but without a hover rule, the transition is just for state changes elsewhere. That's okay.

We can add a CSS custom property block at the top? But the original starts with @media. We can add before the media query? The output should be the rewritten CSS; we could include a :root rule? But that would add a selector not originally present, violating the rule. We should not add new selectors. We can only modify existing declarations within existing selectors. So we cannot define --space-md or --accent. But we can use inline colors.

We also need to think about the `.app-hero-section .row .col-lg-7` rule. It only has text-align: center. We can add maybe `color: #fff`? But that might be inherited and could affect layout? Actually color is a visual property, allowed. But if the parent has a different color, changing it could affect readability. But we can add a text-shadow for a glow effect. Since it's a centered text container, a subtle text-shadow could be nice. However, it's a generic column with text; adding text-shadow might make text look glowy, but the target style is glow effects. Maybe we add `text-shadow: 0 0 24px rgba(139,92,246,0.4);` That is a visual change and allowed.

For the badge, we can also add `letter-spacing`? No, letter-spacing is typography and cannot change. So we avoid.

For the article/card, we might add `background` and `box-shadow`. However, the selector includes two different types: `article` and `.contact-card`. They may have different contexts. Applying a card-like background might be acceptable. Since the style is centered-stage with bright content area? Actually the target says "Spotlight feel: dark stage #0f0f1a, bright content area". But we are only modifying inner content. The dark stage background would be on the body/main, but we can't change that. Or we could add background to the cards? They might be on a dark background already. Adding a translucent background with border and glow is fine.

Also the original has `padding: var(--space-md) !important`. We could set `padding: 1.25rem !important;` to maintain approximate value (assuming --space-md is around 1.25rem). Actually --space-md in many design systems is 1.5rem or 1.25rem. 20% tolerance means if it's 1.5rem, we can go to 1.2rem to 1.8rem. We'll choose 1.25rem. But we must keep the `!important`? It's part of the declaration. We can keep `!important` to preserve specificity. The instruction says preserve selectors, not necessarily declarations. But we should keep the property and important flag likely. We can change the value. Let's keep `padding: 1.25rem !important;` That is within 20% if original is 1.5rem (1.25 / 1.5 = 0.833, which is a 16.7% decrease, within 20%). If original is 1rem, then 1.25 is 25% increase, out of tolerance. But we don't know. Maybe better to keep `var(--space-md)` to guarantee? But we are supposed to change visual identity; using the same variable doesn't change anything. However, we can add other properties.

The instruction says "MUST CHANGE: ... CSS custom properties (--color-*, --shadow-*) values". If we don't define any, we can't change them. But we can define a custom property? Adding a `--accent-color` inside an existing rule would be a new declaration, not a new selector. That's allowed. But it might not be used. We can use it in box-shadow. For example:

```
.app-hero-section .badge.bg-warning {
    --accent-glow: 139, 92, 246;
    font-size: 0.85rem;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 0 24px rgba(var(--accent-glow), 0.4);
}
```

But `rgba(var(--accent-glow), 0.4)` is valid if --accent-glow is "139, 92, 246". That uses a custom property. However, the custom property is not a color variable necessarily, but it's fine.

But we need to be careful: `border` is a property that includes border-width. The instruction says "border-color and border-style (NOT border-width)" can change. Adding a border with a width could change layout? It doesn't affect layout if box-sizing is border-box? But it could alter size. But border-width is not allowed to change if there was no border? Actually adding a border that didn't exist before could change layout, but we are allowed to change border-color and border-style, not border-width. Adding a border with width 1px might affect layout slightly. To be safe, we can use `outline` instead? But outline doesn't affect layout. However, outline is in the allowed list. But the target style includes borders? It's okay. But the instruction specifically says border-width cannot change. If the original element had no border, adding one with border-width would be a new property, not a change. But the "never change" list includes border-width only as a property that cannot have its value changed. Adding border-width from 0 to 1px changes layout if box-sizing is content-box. Better to use `box-shadow` to simulate a border: `box-shadow: inset 0 0 0 1px rgba(...);` This doesn't affect layout. That is allowed because box-shadow can be anything. So we can avoid border.

For border-radius, we can add it. It doesn't affect layout, just visual.

For transition, we can add it. It doesn't affect layout.

For text-align and font-size, preserve exactly.

Now, we need to output only the rewritten CSS. The original is:

```
@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 need to keep the media query condition exactly. Keep selectors exactly. Add visual declarations. We can change the padding value if we want, but we need to keep within ±20%. Let's decide to keep `var(--space-md)`? But the target style wants us to change visual identity. The padding itself isn't visual identity? It's spacing, and we are allowed to change ±20%. Maybe we can change to `padding: 1.5rem !important;`? That may be the same as original if --space-md is 1.5rem. To ensure a change, we could use `padding: 1.25rem !important;` but unknown. Alternatively, we can leave it and add other properties. The instructions say "MUST CHANGE: ..." It doesn't say every property must change, but the overall visual identity must change. Since there are no colors/shadows, adding them is enough.

We also need to consider the "centered-stage" target style. We could add `margin-left: auto; margin-right: auto;`? That would be layout, not allowed. We cannot change margins? Actually margin is allowed to change within ±20%, but we shouldn't add auto because that would change layout. So no.

Let's craft the CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 32px rgba(139, 92, 246, 0.35);
        color: #fff;
    }

    .app-hero-section .badge.bg-warning {
        --accent-glow: 139, 92, 246;
        font-size: 0.85rem;
        background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
        color: #fff;
        box-shadow: 0 0 24px rgba(var(--accent-glow), 0.4), inset 0 0 12px rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        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.06);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;
    }
}
```

But wait: adding `color: #fff` to the col-lg-7 could change text color globally in that column. It might be okay, but if the parent already had color, this could affect layout? No, color doesn't affect layout. It's allowed. However, if the original text was dark on a light background, setting white might make it invisible. But the target style is "dark stage #0f0f1a, bright content area", implying the background is dark, so white text is good. But we don't know the actual background. We need to be careful. Since the mode is "Centered-stage" with dark stage, it's plausible the page has a dark background. But the original code doesn't set any background. To be safe, we could avoid `color: #fff` and just use text-shadow. Text-shadow alone might be invisible if text color is already dark? Actually text-shadow with a light color can show on dark text? A glow effect around dark text on light background will look weird. But the target is dark stage, so it's okay. Still, we can set color to a lighter color to ensure legibility. But changing color is allowed.

However, there is a risk: The `.app-hero-section .row .col-lg-7` is a Bootstrap column. It may contain headings and paragraphs. Setting `color: #fff` will cascade. If the original had specific color classes, they would override. It's okay.

But we also need to consider the badge: `.badge.bg-warning` may have `background-color: #ffc107` from Bootstrap. Our `background` shorthand with linear-gradient will override. Good. We also add `color: #fff`. The badge text might have been dark, now white. Good.

For the article/card, we add background. But these elements might already have background-color from other CSS. Our `background` shorthand overrides background-color, but not background-image? Actually `background` shorthand resets all background properties to initial then sets what you specify, so it overrides previous background-color and background-image. Good. But if the original had a background-image, we'd lose it. But that's fine, we are redesigning.

Also `backdrop-filter` is allowed. But note: `backdrop-filter` can have performance issues, but it's allowed. It may not work in all browsers, but it's a visual enhancement.

Now, about the `transition` property: In the card, I added `transform`