/* ============================================================
   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 refresh a CSS file visually while keeping all selectors and layout properties intact. The original CSS is very short - just a media query with three rules. Let me analyze:

Original:
```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;
    }
}
```

Wait, this is quite minimal. The constraints say:
- text-align is a typography/layout property that I should NOT change (it's in the typography section: "text-align, vertical-align")
- font-size is typography - do not change
- padding is layout - keep within ±20% (but it uses a CSS variable --space-md, so I can change the variable value if defined, but it's not defined here)

Hmm. This is tricky. The original CSS has almost nothing to change except:
- `text-align: center` - can't change (typography)
- `font-size: 0.85rem` - can't change (typography)
- `padding: var(--space-md)` - could adjust the variable, but the variable is defined elsewhere. Since I can't change the variable definition here, and padding needs to stay ±20%...

Actually, the instructions say I can change "CSS custom properties (--color-*, --shadow-*) values" but only color and shadow ones. Padding is not a color/shadow.

So what CAN I change here? The media query itself has no colors, shadows, radius, transitions, gradients. 

One approach: Since this is a file fragment (#块2/2 - block 2 of 2), maybe I'm only seeing part of the file. But the task says "File: assets/css/saishi.css#块2/2". The original CSS given is just this media query.

I need to add visual properties without changing the existing ones. I could add:
- box-shadow to `.badge.bg-warning`
- border-radius
- transition
- Maybe add backdrop-filter, filter, etc.

But I must keep the selectors exactly as-is and not change layout/typography. The safest approach is to add new decorative declarations within the existing rules.

Let me think about the target style: symmetric-grid + glow-effects variant. The color palette should be balanced/harmonious. The glow effects use accent color with `0 0 24px rgba(accent, 0.4)` and hover `0 0 32px rgba(accent, 0.6)`, medium radius 8-16px.

Since the original CSS has no colors, I'll introduce them via new properties:

1. `.app-hero-section .row .col-lg-7` — I can add text-shadow? That would be a visual change without affecting layout. But text-shadow on a column might look odd. Maybe I shouldn't add anything to this rule since it only centers text. Actually I could add nothing, or add a subtle text-shadow. But text-shadow on a whole column could affect readability. Let me think — the target style wants glow effects. Maybe I can keep this rule as-is (since text-align is fixed) but I shouldn't add text-shadow here because it would apply to all text in that column. That's risky.

Actually, the instructions say: "Refresh the visual identity WITHOUT changing layout structure or class names." and "ONLY colors, shadows, and decorative properties may change."

For the text-align rule, there's nothing visual to change. I can leave it unchanged. But then "Previous attempt didn't change enough." Hmm.

Let me reconsider. I can add:
- `text-shadow` to the col-lg-7? It's decorative. Maybe a soft glow text-shadow. But it applies to all text. The target is glow-effects so maybe a subtle one is fine. But text-shadow can hurt readability.

Alternatively, I could add `transition` to the elements so they animate on hover. But without hover rules, that's pointless.

Let me look at what makes sense:

For `.app-hero-section .badge.bg-warning`:
- Add `border-radius: 12px` (medium radius per glow-effects)
- Add `box-shadow: 0 0 24px rgba(accent, 0.4)` — glow
- Add `transition: box-shadow 0.3s ease, transform 0.3s ease` — transform is a visual property? It's not in the forbidden list. But adding transform could change layout? Transform doesn't affect layout flow, but it does visually move things. The forbidden list doesn't include transform, and it's a "decorative property" arguably. But to be safe, maybe just transition box-shadow and filter.
- Add `backdrop-filter`? Probably not needed.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add `border-radius`
- Add `box-shadow`
- Add `transition`

But wait — the padding uses `var(--space-md) !important`. I could redefine `--space-md`? No, that would affect layout and it's not defined in this fragment. Also the custom properties I can change are only --color-* and --shadow-*. --space-md is a spacing variable, not allowed.

OK here's my plan: Add decorative properties (box-shadow, border-radius, transition) to the badge and contact cards. For the col-lg-7 text-align rule, I can add a text-shadow with the accent glow — the target style subtly pulses, but I can't add animations without @keyframes... Actually I CAN add @keyframes? The instructions say "@keyframes names (values inside CAN change)" — meaning I can't add new @keyframes? It says "animation-name (values like duration/timing CAN change)". It doesn't explicitly say I can't add new @keyframes, but "ALL selectors preserved" suggests I shouldn't add new rules. To be safe, I'll avoid adding @keyframes or new selectors.

So no animations. Just static glow shadows, radius, transitions.

Let me pick a palette. The target style is "symmetric-grid" with a "balanced harmonious palette". Since the original has `.badge.bg-warning`, the badge is warning color (amber). The contact cards are likely white cards on a light background. I'll go with a cohesive palette:

- Accent: a warm amber/gold to complement the warning badge? Or a teal/indigo for contrast? "Glow shadows in accent color". For a warning badge (amber #ffc107), a glow of amber might blend in. Let me choose a balanced palette.

Actually, since this is a fresh redesign, let me pick a modern palette: deep indigo/violet accent with soft neutral backgrounds. But I can't change background colors of the parent elements since they're not in this CSS. I can only affect the elements listed.

Let me define what I can add:

1. `.app-hero-section .row .col-lg-7` — add `text-shadow: 0 0 24px rgba(99, 102, 241, 0.15);` — a subtle glow on the hero text. Hmm, but this is a whole column; might be too much. Maybe a very subtle one. Or I could leave it. But the task says "make colors, shadows, and radius MORE distinct this round." I want to change something in every rule.

Actually, `text-shadow` on the column affects all text including headings. A soft glow could be a nice hero effect. Let me use a very subtle one: `text-shadow: 0 0 24px rgba(79, 70, 229, 0.35)`. That's a glow. I'll go with it.

2. `.app-hero-section .badge.bg-warning`:
- `border-radius: 999px`? The glow-effects variant says medium radius 8-16px. A badge could be pill-shaped, but the target says medium radius (8-16px). Let me use `border-radius: 10px`.
- `box-shadow: 0 0 24px rgba(245, 158, 11, 0.4)` — amber glow (matches warning)
- `transition: box-shadow 0.3s ease, transform 0.3s ease` — hmm transform not in forbidden, but let me use `filter` instead? Actually transition on box-shadow is fine.
- Maybe `backdrop-filter: blur(4px)`? Not needed.

I need to be careful: the badge has `.bg-warning` class from Bootstrap, which sets background-color. I can't change background colors in this fragment unless I add rules, but adding rules with the same selector would be allowed... Actually I can't add new selectors? "Element types, class names, IDs" — I must keep the selectors exactly as-is. I can only modify existing rules, not add new ones. So I cannot change the badge's background-color because that's set by Bootstrap's `.bg-warning`, and I don't have access to it here.

But I could add `background` to the existing rule? `background` is a color property. But `.badge.bg-warning` already has a background from Bootstrap; adding `background: ...` would override it. The selector `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning` alone, so I could override the background color. However, that would change the badge from amber to something else, which might be intentional for a fresh palette. But the class is "bg-warning" so it should semantically be warning-colored. I'll keep the warning amber but maybe enhance it. Actually, overriding warning orange to a custom amber-orange could be fine.

Hmm, but changing background-color could be considered a color change — which I'm supposed to do. Let me add a background gradient to the badge for a fresh look:
`background: linear-gradient(135deg, #fbbf24, #f59e0b);` — warm amber gradient. That's a gradient color change. Good.

But wait, the badge already had a background from `.bg-warning`. Adding a gradient is a decorative change that fits the mission. I'll do it.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
- `border-radius: 16px` (medium radius per variant, upper end)
- `box-shadow: 0 8px 30px rgba(79, 70, 229, 0.12), 0 0 24px rgba(79, 70, 229, 0.08)` — layered glow
- `transition: box-shadow 0.3s ease, transform 0.3s ease` — but there's no hover rule. Without hover, transition does nothing unless something changes. I could add `transition` anyway, but it won't trigger. Hmm. Should I add hover rules? The instructions say pseudo-classes must be preserved exactly — it lists `:hover` under things to keep, implying if there were hover rules I'd keep them. Since there are none in the original, adding new hover rules would mean adding new selectors? No — `.contact-quick-section .contact-card:hover` would be a new selector, which violates "selector lists (commas)" preservation? Actually the rule says preserve selectors, not that I can't add new ones. But the safest interpretation: I should only modify existing rules, not add new selectors/rules.

Given the "Aggressive" layout pattern and "glow-effects" variant mention "Halo on hover: 0 0 32px rgba(accent, 0.6)", but the mode is CONSERVATIVE — "HTML fixed, visual changes only." Adding a hover rule doesn't change HTML, and it's a visual effect. But it does add a new selector. The instructions say "🖊️ SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY" — this is about preserving existing selectors, not forbidding new ones. Adding a `:hover` state is a common conservative refresh technique and doesn't break HTML.

However, the strict instruction "Output: ONLY the rewritten CSS, preserving ALL selectors" — I think preserving all existing selectors means not removing/changing them. Adding a hover rule would be "adding," and the safest path is to not add new rules. The variant mentions halo on hover, but I shouldn't risk it. Actually, let me re-read: "Every selector character-for-character preserved?" — this means the original selectors must be character-for-character identical. Adding new selectors doesn't violate that, but it's risky.

I'll add a hover effect by adding a rule? No — I'll skip it to be safe. The glow shadows at rest will satisfy the glow requirement. The transition property alone is harmless; it will apply if any pseudo-class from Bootstrap adds a hover state. Actually, Bootstrap's `.badge` doesn't have hover states. But `.contact-card` might be a link or have a hover effect in existing CSS not shown (since this is block 2/2). Since the file is split into blocks, there might be more CSS elsewhere. The transition could still be useful.

Let me reconsider: The file is `saishi.css#块2/2`, meaning block 2 of 2. The original CSS provided is only this media query. The rest of the file might have rules I can't see. So when I output, I should only output this block's CSS, rewritten. I must keep the media query and the three rules.

Given the constraints, here's my rewrite:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(99, 102, 241, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(245, 158, 11, 0.25);
        transition: box-shadow 0.25s ease, filter 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(79, 70, 229, 0.12), 0 0 24px rgba(79, 70, 229, 0.1);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

Wait — should the transition include transform? transform isn't in the forbidden list, so it's allowed. But `transform` in a transition doesn't change anything unless transform is animated. It's fine.

But hold on — I need to double check: "transition timing, easing, duration" — I can change transitions. So adding transitions is allowed.

The `text-align: center` is preserved. `font-size` preserved. `padding` preserved exactly.

Should I add `backdrop-filter`? Not appropriate for badges.

Now, the target variant says "Medium radius (8-16px)". 12px and 16px fit.

The accent color for the hero column text-shadow: I chose indigo `rgb(99, 102, 241)`. For contact cards, same indigo. For the amber badge, I used amber glow. That's a balanced harmonious palette (indigo + amber = complementary).

Let me also consider adding `outline` or `border-color`? Not necessary.

Should I add `box-shadow` to the col-lg-7? No — box-shadow on a column would create a weird rectangular glow around the whole column. `text-shadow` is more appropriate for hero text.

Actually, is text-shadow safe for the hero section? The hero section likely has a heading with large text; a soft glow could look nice. 0.35 alpha might be a bit strong. Let me use 0.25 to be safe. But the variant wants "0 0 24px rgba(accent, 0.4)" for glow. Text-shadow at 0.4 might be too strong for body text. I'll use 0.3.

Let me refine:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(99, 102, 241, 0.3);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 14px rgba(180, 83, 9, 0.25);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(79, 70, 229, 0.12), 0 0 24px rgba(79, 70, 229, 0.1);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

Hmm, but there's a subtle issue: `transform` in the transition without a hover state won't do anything, but it's harmless. However, if Bootstrap has a `:hover` transform on cards, the transition would animate it. Fine.

Also, `background: linear-gradient(...)` on `.badge.bg-warning` — Bootstrap's badge has `background-color: var(--bs-warning-bg)` or similar. Overriding with a gradient is fine and