/* ============================================================
   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 CSS while keeping all selectors and layout exactly the same, only changing visual properties like colors, shadows, radius, transitions, gradients, etc.

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

Now, I need to refresh this visually. But the constraints are:
- Keep all selectors exactly
- Keep layout properties (text-align, font-size, padding) — actually wait, these are typography/layout properties that are NOT allowed to change:
  - text-align: NOT changeable (it's in the layout list: text-align, vertical-align)
  - font-size: NOT changeable (in typography list)
  - padding: can change ±20% maximum

But the original CSS only contains layout/typography properties! There are no colors, shadows, radius, transitions, gradients in it. Hmm.

Wait, let me re-read. The task says:
- ✅ MUST CHANGE: colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color/style, caret-color, accent-color, custom properties
- 🔒 NEVER CHANGE: selectors, layout, typography

The original CSS has:
1. `text-align: center;` — this is in the NEVER CHANGE list (text-align, vertical-align)
2. `font-size: 0.85rem;` — in NEVER CHANGE list (font-size)
3. `padding: var(--space-md) !important;` — padding can change ±20%, but `var(--space-md)` is a custom property reference. Since the CSS custom properties values are listed as changeable, but here it's using a variable. I could change `var(--space-md)` to a different value, but padding is constrained to ±20%.

Hmm, this is tricky. The original CSS has virtually no visual properties to change. The only things that could be changed:
- `padding: var(--space-md)` — could adjust within ±20%, but we don't know what --space-md is. We could replace with a specific padding value.

But wait — the instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." If the CSS contains no visual properties, then there's nothing to change in terms of colors/shadows.

However, as an AI, I should still produce a rewritten CSS that:
1. Preserves all selectors
2. Preserves layout/typography
3. Changes visual properties where possible

Since the original has no colors/shadows, maybe I should add decorative properties? But adding new declarations could be seen as changing things. Actually the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But there are no colors/shadows/radius/transitions/gradients to change. The safest approach: output the CSS essentially the same, but perhaps:
- Keep `text-align: center` (must keep)
- Keep `font-size: 0.85rem` (must keep)
- Padding can change within ±20% — `var(--space-md)` — I could change it to a slightly different value like `calc(var(--space-md) * 0.9)` or `var(--space-sm)`, but that might break things.

Actually, wait — the instruction also says CSS custom properties values CAN change. So maybe I can introduce new custom properties or change var() references? But the original CSS doesn't define custom properties, it just references `var(--space-md)`.

Hmm. Let me think about what the ideal output is. The key constraint: "same layout, fresh color palette + shadow/radius identity". Since there's nothing to change, maybe I should add accent/decoration without changing layout.

Let me re-read the user message carefully. The "TARGET STYLE: card-mosaic" and "EFFECT VARIANT: glow-effects" are given, but the original CSS is just a media query with 3 rules. The user wants me to apply glow effects and card-mosaic style — but this CSS is only for mobile responsive tweaks.

Given the mismatch, I think the best approach is to:
1. Keep all selectors exactly
2. Keep all layout properties exactly (text-align, font-size, padding — since padding changes must be within ±20%, and `var(--space-md)` is already a variable, I'll keep it or adjust it minimally)
3. Since there are no colors/shadows to change, I could add subtle visual enhancements like `transition`, or `background` with gradient, or `box-shadow` — but adding new declarations to rules that didn't have them might be within scope since the task is to "refresh visually."

Actually, adding new visual properties is allowed because the task says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "only change existing declarations." But I need to be careful not to break the layout.

For `.app-hero-section .row .col-lg-7` — text-align: center. I could add `text-shadow` maybe? But text-align is a layout property. text-shadow is a visual property. That would be allowed. But would it be wise? For a hero section, maybe adding a subtle glow to text.

For `.app-hero-section .badge.bg-warning` — font-size: 0.85rem. I could add background gradient, box-shadow glow, border-radius, border-color, etc. The badge has classes `.badge.bg-warning` — so it's a Bootstrap warning badge (yellow). I could add a glow shadow in warning color, a new background, border-radius.

For `.contact-channels-section article, .contact-quick-section .contact-card` — padding. This is in the contact section. I could add transition, border-radius, background, box-shadow.

But I must be careful: adding background or box-shadow to elements that previously had none could change visual appearance but not layout (box-shadow doesn't affect layout). Background doesn't affect layout. Border-radius doesn't affect layout. Transition doesn't affect layout. So those are safe.

However, changing padding is risky. Padding is listed under "keep similar values, ±20% maximum". `var(--space-md)` is a custom property. Let me think: if I change it to `var(--space-sm)` that's not a ±20% change necessarily. If I use `calc(var(--space-md) * 0.85)` that would be a 15% reduction, within ±20%. But that introduces calc and could be fine. Or I could keep it the same to be safe.

Wait — the instructions say I MUST change visual identity. But if the only declarations are layout/typography, then maybe the right thing is to keep those and add visual declarations.

Let me consider the "card-mosaic" target style: grid with mixed spans, medium gap, distinct elevation cards, vibrant card colors on neutral background. But this media query is for max-width 575.98px (mobile). The target style says "Aggressive only" — but this is Conservative mode. The layout pattern is described as "Aggressive only" which means I shouldn't change grid layout. Indeed, I can't change grid properties.

The effect variant is "glow-effects": glow shadows in accent color, halo on hover, medium radius (8-16px), subtle pulsing animations.

So for the visual refresh, I should:
- Add glow shadows to cards/badges
- Add hover halo effects (but selectors: I can't add new selectors... wait, can I add `:hover` pseudo-class? The instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the NEVER CHANGE selectors list — meaning I should keep existing ones but not necessarily add new ones? Actually it says "Selectors: keep EXACTLY" — so I should NOT add new selectors. That means I can't add `.contact-card:hover`. I must only use existing selectors.

Hmm, that's restrictive. The original selectors are:
1. `.app-hero-section .row .col-lg-7`
2. `.app-hero-section .badge.bg-warning`
3. `.contact-channels-section article, .contact-quick-section .contact-card`

So I can only style these three (two selector groups). No hover states allowed since the original didn't have them.

So the "halo on hover" can't be implemented without adding a hover selector. Unless I use `transition` on the base and rely on existing hover states from other CSS files — but I shouldn't add selectors.

Given this is a partial file (块2/2 = block 2 of 2), maybe the rest of the CSS has hover states. I just need to refresh this block.

So my approach:
- Keep all three selector groups exactly
- Keep text-align: center, font-size: 0.85rem, padding: var(--space-md) !important (or adjust padding slightly within ±20%)
- Add visual properties: box-shadow, border-radius, background, transition, maybe backdrop-filter, etc.

But wait — will adding `background` to `.app-hero-section .badge.bg-warning` override Bootstrap's `.bg-warning`? Since this rule has the same specificity? `.app-hero-section .badge.bg-warning` is higher specificity than `.bg-warning`, so it would override. That could be good for the visual refresh.

Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important` typically. Adding `background: linear-gradient(...)` in this media query would apply on mobile. That could be a nice visual change.

Let me think about what would be tasteful and match "glow-effects":
- Badge: warm amber gradient background, glowing shadow `0 0 24px rgba(255, 193, 7, 0.4)`, border-radius 12px, transition for glow.
- Hero col-lg-7: maybe a soft text-shadow? Or just keep text-align. Since it's a container, adding background could be odd. But the hero section column might contain text. I could add a subtle text-shadow to make it pop. But actually `.col-lg-7` is a column, not text. Text-shadow would apply to the column and inherit to children? text-shadow is inherited, so adding it would add text-shadow to all text inside. That could be a glow effect.

Actually, text-shadow is inherited, so if I set text-shadow on the col, all text within inherits it. That could be a nice glow effect for hero text. But is it appropriate? The instruction says "text-shadow" is changeable/designable. I can add it.

- Contact cards: add border-radius (but contact cards are probably rectangular; adding radius 12px is fine), box-shadow glow, transition, maybe a subtle background.

Let me now write the CSS.

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

Now, I need to add visual properties. Let me be careful with the `padding` — the instruction says keep similar values ±20%. `var(--space-md)` — I don't know the value. To be safe, I can keep it as `var(--space-md)` or slightly adjust. Since I don't know the base value, changing it via calc could be risky. But I can do `padding: calc(var(--space-md) * 1.1) !important;` which is +10%, within the ±20% bound. That shows a change while staying safe.

Actually, changing padding at all is not really a "visual identity" change in the color/glow sense. Since the focus is on glow effects, maybe keep padding the same to be safest. But the instruction says "padding, margin (keep similar values, ±20% maximum)" — it's allowed to change within that range. I'll adjust slightly to demonstrate refresh: `calc(var(--space-md) * 1.15)` or `var(--space-lg)`? No, `var(--space-lg)` might be more than 20% larger. I'll use a calc with a multiplier.

Now, for the media query — it's a max-width. The target style "card-mosaic" is aggressive-only for grid; I won't change grid.

Let me think about adding a keyframe animation for "subtle pulsing animations". The instructions say:
- @keyframes names CANNOT change, but values inside CAN change.
- animation-name cannot change, but duration/timing CAN change.

But there are no keyframes in this file. Can I add new @keyframes? The instructions say "Animation & Media: @keyframes names (values inside CAN change)" — they assume existing keyframes. Adding new @keyframes might be allowed? The "NEVER CHANGE" list says "animation-name (values like duration/timing CAN change)". It doesn't say I can't add new animations. But to be conservative, adding a new @keyframes inside a media query might be okay. But it's risky because it adds a new at-rule. Also, the "pulsing animations" effect variant suggests adding animation. But the selectors are fixed — I can add `animation` property to existing selectors as a visual property.

Actually, the "Animation & Media" NEVER CHANGE list includes "@media query breakpoints (conditions only)". So I must keep `(max-width: 575.98px)`. I can add @keyframes inside? No, @keyframes inside a media query is valid but weird. Typically keyframes are defined at top level. Since this is a fragment (块2/2), maybe other blocks define keyframes. I should probably not add new keyframes to avoid breaking things. The "subtle pulsing" can be approximated with `transition` and glow, or I can just add a pulse-like transition.

Hmm, but I want to follow the effect variant. Let me see: "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" — I can add box-shadow to the badge and contact cards. "Halo on hover: 0 0 32px rgba(accent, 0.6)" — requires hover, which I can't add without new selectors. Unless the original file (not shown) has hover states elsewhere. So I'll skip hover halo.

"Medium radius (8-16px)" — add border-radius 12px or 14px to badge and contact cards.

"Subtle pulsing animations" — I can add `animation` using an existing keyframe name? But I don't know what keyframes exist. Adding a keyframe name that doesn't exist would break. So I should not add animation.

Alternatively, I can add `transition` for glow on hover/badge.

Let me design the colors. The target palette: "Vibrant card colors on neutral background, each card type a different accent." Since only two element groups:
- Badge (warning): amber/gold accent — `#ffc107` base, gradient from `#ffd966` to `#f59f00`, glow `rgba(255, 193, 7, 0.45)`
- Contact cards: maybe a teal or coral accent. Contact section suggests communication — maybe a cyan/teal accent `#0dcaf0` or coral `#ff6b6b`. Since it's "contact channels", maybe blue/teal.

The hero col: it's a text container. I can add a soft text-shadow glow in a neutral/warm tone.

Let me write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd966, #f59f00);
        border: 1px solid rgba(255, 193, 7, 0.6);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.4), 0 4px 12px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 1.1) !important;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 24px rgba(13, 202, 240, 0.18), 0 6px 20px rgba(0, 0, 0, 0.18);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }
}
```

Wait, but I need to be careful:
- Adding `background: rgba(255, 255, 255, 0.08)` to contact cards might look bad depending on the existing background. And adding a translucent white background could alter the look significantly. But it's a visual change, allowed.
- Adding `border: 1px solid ...` — border-style and border-color are changeable/designable, and border-width is NOT to change (but adding a border where there was none means border-width goes from 0 to 1px — technically changing border-width!). Hmm, the instruction says "border-color and border-style (NOT border-width)" are changeable. If there was no border, adding one changes border-width implicitly. That could be considered a layout change (border affects box size). To be safe, I should avoid adding borders, or use `outline` instead (doesn't affect layout). The instructions allow "outline styles (color