/* ============================================================
   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 the CSS preserving all selectors, layout, typography, and only change colors, shadows, radius, transitions, gradients, etc. The original CSS is a media query block with three rules. We must keep the selectors and property names that are layout/typography as-is. We can change values that are visual? Let's examine the original:

```
@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 refresh visual identity. But all these properties are typography/layout? text-align is typography? It's text alignment, not allowed to change? Actually typography includes text-align? The instructions list "text-align, vertical-align" under typography locked. So cannot change text-align. font-size locked. padding locked (within ±20%?). It says padding, margin (keep similar values, ±20% maximum). So we can adjust padding slightly but not necessary. We need to add visual properties that are not present, but can we add new properties? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If the original has no such properties, we can add them? Hmm. The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly say we can add new properties, but "refresh visual identity" implies adding visual properties to existing selectors is okay as long as layout isn't broken. However, the output must preserve all selectors and layout exactly. We can add properties like color, background, box-shadow, border-radius, transition to these selectors. But careful: adding box-shadow to a hero column could affect nothing visually? It's okay.

But there is a nuance: The original CSS is a media query small screens. Adding colors etc. is fine.

We need to target style symmetric-grid and effect variant glow-effects. So we should apply a balanced harmonious palette, consistent shadows, glow shadows in accent color, halo on hover, medium radius, subtle pulsing animations.

We can add a background? The selectors are:
- .app-hero-section .row .col-lg-7 (hero column)
- .app-hero-section .badge.bg-warning (badge)
- .contact-channels-section article and .contact-quick-section .contact-card

We can change padding to slightly different but keep similar. The original padding is var(--space-md) !important. We could adjust to calc(var(--space-md) - 4px) maybe less than 20%. But maybe not needed. Could change to var(--space-md) still.

We can add color, background, box-shadow, border-radius, transition, animation. Need to ensure no layout changes. For example, adding box-shadow to article may add visual but no layout. Adding border-radius doesn't break layout.

Also the media query breakpoint must stay.

We should produce a complete rewritten CSS with three rules, possibly adding new declarations under each selector. Also maybe add a fourth rule for something? No, keep selectors. Could add pseudo-classes? But selectors fixed, we cannot add new selectors. But we can modify existing selectors? "Keep ALL selectors and layout exactly as-is." So we cannot add new selectors or pseudo-classes? It says pseudo-classes are preserved, but can we add :hover? The original has none. Adding :hover would change selectors list, probably not allowed. So avoid.

We can add transitions that apply to the base selector, and maybe use existing classes for hover effects? Since no hover selector, we can't add hover. But maybe we can use animation for glow pulsing.

So we need to create a fresh visual identity with:
- Balanced palette: maybe soft background tints, accent color.
- Glow shadows: box-shadow: 0 0 24px rgba(accent, 0.4)
- Halo on hover: impossible without hover selector. Could use animation to simulate. But maybe we can add a glow shadow that exists all the time, pulsing via animation.
- Medium radius 12px.
- Subtle pulsing animations: add @keyframes? We can add keyframes, but the original has none. Is it allowed to add @keyframes? The instructions say under Animation & Media: @keyframes names (values inside CAN change). So we can add @keyframes? It says "@keyframes names (values inside CAN change)" meaning if present, we can change values. It doesn't say we can add new ones. But likely we can add @keyframes as part of visual refresh. However, since selectors must be preserved, adding @keyframes is not a selector, it's an at-rule. But the original CSS file has no @keyframes. The output "ONLY the rewritten CSS" could include new @keyframes. But the user says "Keep ALL selectors and layout exactly as-is." @keyframes don't affect layout. So it's okay.

But we need to be conservative. "Mode: 🛡️ CONSERVATIVE (HTML fixed, visual changes only)" We can add new at-rules and declarations as long as no layout changes.

Let's design:

We need a balanced harmonious palette. Since the class names include "warning" badge, perhaps use a custom color palette that complements. We don't know original design, but we can set:
- Background colors maybe transparent or subtle.
- Color: text color maybe dark slate.
- Accent: teal or indigo.

For the hero column: Maybe a subtle background, border-radius, padding? But padding is locked? We can keep padding if not defined. We can add border-radius: 16px; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08), 0 0 24px rgba(99, 102, 241, 0.15); transition: box-shadow 0.3s ease, transform 0.3s ease; But transform is not allowed? The instructions list "position" etc, not transform. Animation property values can change, but transform? It is not listed as a layout property? Actually transform can affect layout? It doesn't change layout flow but visually moves; might be okay? But better avoid transform if not needed.

For badge: Add background gradient? The original has .badge.bg-warning which is a Bootstrap warning badge, likely yellow. We can override background with a gradient, color, box-shadow, border-radius, padding? We can change padding? It has no padding. Adding padding could affect layout? Badge is inline-block? But we can avoid padding. We can change font-size? Not allowed. We can add text-shadow maybe. Add box-shadow glow.

For contact cards: "contact-channels-section article, .contact-quick-section .contact-card" - Add background color, border-radius, box-shadow, border? Border-style/color can change, but border-width not. If there is no border, adding a border of default width (medium) could affect layout? If box-sizing border-box, adding border width could shrink content. But we can avoid border. We can add outline? Outline doesn't affect layout. Add outline: 1px solid rgba(accent, 0.2)? That is visual. But outline-color and outline-style are allowed. So we can add outline with same width? The instructions say "outline styles (color, type)" can change. Could add outline: 1px solid... That adds visual but no layout.

Also padding: original uses var(--space-md) !important. We can perhaps change to calc(var(--space-md) - 4px) to align with tighter radius? But not necessary. Better to keep as-is to avoid layout change.

We can add animations to all elements: perhaps a subtle pulse on the glow. Could use `animation: glow-pulse 3s ease-in-out infinite;` Need define @keyframes glow-pulse.

Since there is no hover, the glow effect variant mentions "Halo on hover: 0 0 32px rgba(accent, 0.6)" but we can't add :hover. Could we use `@media (hover: hover)` with a selector? That would be a media query, not allowed to change breakpoints? We could add another @media but that's in the output. However, selectors must be preserved; adding additional at-rules might be seen as adding new selectors? Better not.

We can implement a pulsing glow to simulate hover halo periodically.

Need to preserve the media query with max-width: 575.98px exactly. Also all three selectors exactly.

Let's rewrite each rule:

Original first:
```
.app-hero-section .row .col-lg-7 {
    text-align: center;
}
```
We can add: color: var(--color-text, #1e293b); background: transparent; maybe no. But text-align stays center. We can add box-shadow? On a column, adding box-shadow might show around the column. But if the column has no background, box-shadow will show behind text, maybe okay. Better to add a text-shadow? That is visual. But text-align center plus text-shadow maybe.

Maybe the hero section text could have a soft glow text-shadow: 0 2px 12px rgba(99, 102, 241, 0.2). That is okay.

Also add transition for color? Not relevant.

Let's make it a balanced palette: use a custom property set maybe? But we cannot add :root selector? It would be new selector. Better to use direct color values. Could use CSS variables defined on each selector? We can define `--accent: #6366f1;` on the media query? Can't scope to media query except inside selectors. We can set custom properties per selector. But not necessary.

Let's define:
- Accent color: #6366f1 (indigo)
- Background tint: #f8fafc (slate 50)
- Text: #0f172a
- Badge gradient: linear-gradient(135deg, #fbbf24, #f59e0b) maybe but bg-warning originally yellow. But we can change to accent-based gradient? Since warning often yellow, maybe use warm accent to maintain semantics: #f59e0b to #d97706. But effect variant says glow in accent color. Could use indigo as accent for all.

We need "consistent shadows". Let's define:
- Cards: box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 0 24px rgba(99, 102, 241, 0.12);
- Badge: box-shadow: 0 0 24px rgba(99, 102, 241, 0.35), 0 2px 8px rgba(99, 102, 241, 0.25);
- Hero column: text-shadow: 0 0 24px rgba(99, 102, 241, 0.25);

Add transition: all 0.25s ease? But "transition timing, easing, duration" can change. We can add transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; But transform? We can include transition property, but if no hover, no effect. Maybe okay.

Add animation:
```
@keyframes saishi-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(15, 23, 42, 0.06); }
  50% { box-shadow: 0 0 32px rgba(99, 102, 241, 0.4), 0 4px 16px rgba(15, 23, 42, 0.08); }
}
```
But if we animate box-shadow on cards, it will be visible. We can apply animation to contact cards and badge. But we must be careful that animation of box-shadow could be expensive but okay.

The original CSS has only one media query; we can include @keyframes inside the media query? @keyframes can be defined inside @media? Yes, valid. But selectors? It's okay.

But if we define keyframes inside the media query, it will only apply under that breakpoint. That's fine.

Need to keep layout unchanged. Adding box-shadow to articles may create extra visual but no layout change.

Potential issue: `box-shadow` on `.col-lg-7` could overlay adjacent content? Negative? No.

Now, what about "border-radius (visual rounding only)"? We can add border-radius to badge and cards. For hero column, maybe add border-radius? If no background, not needed. But adding border-radius without background does nothing.

Maybe add background to cards to make radius visible. We can add `background: linear-gradient(145deg, #ffffff, #f8fafc);` to contact cards. That changes visual identity but not layout. However, if the elements already have a background from other CSS rules, adding a new background overrides. Fine.

For hero column, adding a background tint maybe could affect readability. But maybe not.

Let's craft the output with the same selectors, adding declarations.

Original CSS has two separate selectors in third rule. We preserve that.

Let's ensure no property that is explicitly disallowed:
- text-align unchanged.
- font-size unchanged.
- padding unchanged (keeps var(--space-md) !important).
- We can add "background" (color property).
- We can add "box-shadow".
- We can add "border-radius".
- We can add "transition".
- We can add "animation".
- We can add "color".
- We can add "text-shadow".
- We can add "outline".
- We can add "backdrop-filter" perhaps.

But the instructions say "ALL color values: background, color, border-color, fill, stroke, outline-color" — we can change them. So if there were none, we can add.

Since "HTML fixed", all good.

Let's write:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #0f172a;
        text-shadow: 0 2px 12px rgba(99, 102, 241, 0.18), 0 0 24px rgba(99, 102, 241, 0.12);
        transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1e293b;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(99, 102, 241, 0.35), 0 2px 8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.25);
        animation: saishi-glow-badge 2.8s ease-in-out infinite;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 0 24px rgba(99, 102, 241, 0.12);
        animation: saishi-glow-card 3.2s ease-in-out infinite;
        transition: box-shadow 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
    }

    @keyframes saishi-glow-badge {
        0%, 100% {
            box-shadow: 0 0 16px rgba(99, 102, 241, 0.25), 0 2px 8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(245, 158, 11, 0.2);
        }
        50% {
            box-shadow: 0 0 32px rgba(99, 102, 241, 0.5), 0 2px 12px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(245, 158, 11, 0.4);
        }
    }

    @keyframes saishi-glow-card {
        0%, 100% {
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 0 24px rgba(99, 102, 241, 0.12);
        }
        50% {
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), 0 0 32px rgba(99, 102, 241, 0.2);
        }
    }
}
```

But we added keyframes inside media query. That's fine. But the keyframes are not referenced by hero column. For hero column we have text-shadow but not animation. Could add an animation for text glow? That requires text-shadow animation, but text-shadow animatable. But maybe unnecessary. The effect variant says "Subtle pulsing animations" plural. We have two keyframe animations. Good.

Check selectors: `@media (max-width: 575.98px)` preserved. `.app-hero-section .row .col-lg-7` preserved. `.app-hero-section .badge.bg-warning` preserved. `.contact-channels-section article, .contact-quick-section .contact-card` preserved.

Check layout: text-align unchanged, font-size unchanged, padding unchanged. We changed? no. We added properties only.

Check "padding, margin (keep similar values, ±20% maximum)"