/* ============================================================
   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 given CSS according to the task. The original CSS is only a media query with three rules. We need to change visual properties only. Let's analyze:

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 must preserve selectors, media query breakpoint, text-align, font-size, padding (within ±20%). Actually padding is declared with var(--space-md) !important; We can change the variable? But the original uses var(--space-md). We are allowed to change CSS custom properties' values. However, this is a media query, and the var(--space-md) is referenced elsewhere. We could either keep the var reference or change it to an equivalent length. The instruction says "width, height, padding, margin (keep similar values, ±20% maximum)". We need to keep padding similar. If we change --space-md, that might affect other rules. Better to keep the var declaration but the actual value of --space-md is not in this file. We could replace padding with a fixed value that's similar to --space-md, but we don't know the value. Since the original uses var, we can preserve it, but we are told to change color values etc. Padding is layout, not color. The instruction says we may change padding/margin within ±20%. Since we don't know value, safest is to keep the padding as var(--space-md) !important exactly, because changing it could break layout. But to fulfill "refresh visually", we could add other visual properties to these selectors: e.g., box-shadow, border-radius, background, etc. But the original has no such properties. We are allowed to add color/shadow/radius properties? The task says "Only change colors, shadows, radius, transitions, gradients." So we can add new visual declarations as long as we don't alter layout. However, we must preserve "every selector character-for-character preserved". Adding new property declarations is allowed because selectors remain. The original rules are simple, so we can augment them with visual styling.

Let's parse the constraints:

- Must output ONLY rewritten CSS, preserving ALL selectors and layout exactly.
- No markdown fences, no explanations.
- First character = first CSS character.

We need to decide what changes to make. The original CSS is just a media query for small screens. We can add visual properties like background, color, border-radius, box-shadow to these elements. But we need to be careful: the elements may be complex. But according to the task, we can change decorative properties.

We have a "TARGET STYLE: horizontal-strips" and "EFFECT VARIANT: glow-effects". The target style description mentions full-width sections, alternating backgrounds, etc., but the original CSS only targets a few elements within a media query. We need to apply these visual styles to the selectors present. Since the HTML is fixed and we can only change visual properties, we need to add glow effects and maybe adjust radius.

Let's think: The first selector is `.app-hero-section .row .col-lg-7 { text-align: center; }` in mobile. We could add a background? But that might affect layout? Background doesn't affect layout. Could add border-radius? But if element has no background, radius invisible. We can add color, text-shadow, etc.

Second selector: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`. This is a badge with bg-warning. We can change its color? But font-size fixed. We could add box-shadow, border-radius, etc. But again, don't know context.

Third selector: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`. We can add background, border-radius, box-shadow, transitions.

But we need to be careful: Adding box-shadow or background to these elements might create new visual identity but not break layout. That's allowed.

Also, the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. But original has no color values. Does that mean we should add color values? The self-check says "Colors throughout the file replaced with fresh palette?" Since there are no colors, we can introduce colors.

Let's produce a CSS that:

- Preserves the media query and all selectors.
- Adds glow effects and color changes to the targeted elements.
- Preserves layout properties.

We need to be careful with "padding: var(--space-md) !important;" — keep it as is because it's layout. But we can add maybe a slightly different padding? No, we shouldn't change padding because it's within a media query and might be important. We'll keep the exact declaration.

We can add:

For `.app-hero-section .row .col-lg-7`:
- text-align: center; (unchanged)
- color: #2c2c2c? But this might override other colors. Better not set color unless needed.
- We could add a background gradient? But that would be on the column, maybe not desired.
- We could add `text-shadow: 0 2px 12px rgba(255, 255, 255, 0.6);` or glow? But text-shadow in hero section could be nice.

But the target style is "horizontal-strips" with alternating background colors. However, the elements we can change are limited. Maybe we need to apply to these selectors: for article/cards, use alternating backgrounds? But in media query, we can add background to the contact cards.

Let's think of a coherent approach.

Since the original file is "saishi.css" (competition?), maybe these are sections in a competition page. We'll create a fresh palette: cream/white/dark with accent glows.

Let's define some colors.

Accent color: maybe #6c63ff (purple) or #ff6b6b. Let's use a vibrant accent: #ff6b9d? Actually "glow-effects" in accent color. Let's pick accent = #4f9cf9 (blue) or #f59e0b (amber). We need to match the existing badge.bg-warning (bootstrap warning) which is amber. If we add glow, use amber glow for that badge. Good.

Large sections: cream #fdf6e3, white #ffffff, dark #222831. For contact cards, maybe dark background with glow? But cards may already have backgrounds.

To be safe, we can add box-shadows in accent colors with moderate radius. Also adjust border-radius to 12px. Also add subtle pulsing animations? We can add animation to cards? But we need to define keyframes. The original CSS doesn't have any @keyframes. We can add @keyframes inside the media query? That's allowed as long as we don't change breakpoints. However, the instruction says @keyframes names must be preserved, but there are none. We can add new keyframes? The instruction says "Animation & Media: @keyframes names (values inside CAN change)" — but if we create new keyframes, we're adding new names. Is that allowed? The constraint says "Keep ALL selectors and layout exactly as-is." Selectors include @keyframes? They are not selectors but at-rules. Adding new @keyframes might be allowed if it doesn't change layout. But to be conservative, maybe avoid adding new animation unless necessary. We can add a "pulsing" animation by using existing animations? There are none. We can add a transition for glow on hover, but no hover in media query? Actually hover doesn't work on touch devices, but still allowed.

The variant says "Subtle pulsing animations" — but the original media query may not be the place for that. We can add an animation to the contact cards. To do that, we need @keyframes. Since there are no animation names in original, we can introduce new keyframes. The instruction says "@keyframes names (values inside CAN change)" meaning if there were keyframes, we can change values but not names. Adding new keyframes might be acceptable as part of refreshing visual identity. But the "NEVER CHANGE" list includes "animation-name (values like duration/timing CAN change)". If we add an animation property to an existing rule, we are changing animation-name (from none to something). Is that allowed? It says animation-name values like duration/timing can change. Actually "animation-name" is listed as "NEVER CHANGE" in the sense that you must keep existing animation names. But if there is no animation, adding one is not changing an existing name. We should be cautious.

Given the simple original CSS, we can fulfill the task by adding glow effects via box-shadow and text-shadow, and modifying border-radius, and adding color/background gradients. That doesn't require keyframes. The "subtle pulsing" can be achieved via transition on hover? But no hover in media query. We could add a `transition` property to create smooth color changes. That may be enough.

Let's craft the new CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        box-shadow: 0 0 16px rgba(255, 193, 7, 0.6), 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(135deg, #ffffff, #fdf6e3);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 24px rgba(79, 156, 249, 0.15);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

But wait, we cannot use `transform` because transform is layout? Transform is allowed? The NEVER CHANGE list does not include transform explicitly, but it says "position, width, height, padding, margin, etc." Transform affects visual rendering but may not affect layout. However, adding a transform on a card could cause overlapping? We're not applying transform, just transition on transform if it changes later. But we're not providing a hover state, so it won't change. It's safe.

We should ensure that we don't change padding value. We keep exact.

But the contact cards now get a background gradient. That might create "horizontal strips" feel? Not exactly. But we need to follow target style. We could alternate backgrounds: the two selectors are two different elements: `.contact-channels-section article` and `.contact-quick-section .contact-card`. We can give them different background colors to create alternating pattern. For example:

- `.contact-channels-section article`: background: #ffffff;
- `.contact-quick-section .contact-card`: background: #fdf6e3;

But in the selector list, they share declarations. To set different backgrounds, we need to separate them. But the original selector list is two selectors separated by comma. We should preserve that selector list. If we separate them, we change the selector structure? We can keep the shared rule and then add an override rule for one specific selector? That would add a new selector. Is that allowed? The instruction says keep selectors exactly as-is. We should not add or remove selectors. But adding new rules with existing selectors is fine. We can have a combined rule for shared properties, then additional rules for individual selectors. However, the original selector list is a single rule. We could preserve it and then add another rule for one of the selectors. That introduces a new selector but the original selectors are preserved. The constraint says "Selectors: keep EXACTLY (.post-card stays .post-card)" and "Selector lists (commas)" are in the "NEVER CHANGE" list: "Selector lists (commas)" means if there is a selector list, keep it exactly. If we split it, we're changing the selector list. That's not allowed. So we must keep the comma selector list as a single rule.

Therefore, we cannot give different background colors to each within that rule. We could use a single background gradient that works for both. Or use CSS variables? But the value would be same for both. We can define a gradient that is not uniform. That's fine.

We could also use `background: var(--strip-cream)` etc., but the variable values are not in this file. We could set them if they were defined, but they aren't.

Maybe we can change the background of the parent sections? But we don't have selectors for parent sections. We only have these specific selectors. To emulate horizontal strips, perhaps we need to add background to these cards in alternating colors? Not possible with a shared rule.

Alternatively, we can interpret "horizontal-strips" as the visual identity of the page overall, and our changes to these elements should use a strip-like aesthetic: e.g., a linear-gradient background on the cards with hard color stops creating stripe patterns. That could be nice.

Let's design a gradient that resembles horizontal strips:

For the shared rule:
`background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.9)), repeating-linear-gradient(45deg, #fff, #fff 8px, #fdf6e3 8px, #fdf6e3 16px);` That might be too busy.

Better: use a subtle repeating gradient for strips: `repeating-linear-gradient(0deg, #ffffff, #ffffff 12px, #f8f4ec 12px, #f8f4ec 24px);` That creates horizontal stripes. But that might be considered a decorative background. Let's use that.

But we must ensure contrast with text. If background changes, text might become unreadable. However, the original page likely has text on white. If we add a striped background, it's still light, so okay.

We also need to set `background` as a color value. Good.

Let's craft:

```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 16px;
    background: repeating-linear-gradient(0deg, #ffffff, #ffffff 10px, #fdf6e3 10px, #fdf6e3 20px);
    box-shadow: 0 0 0 1px rgba(79, 156, 249, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 24px rgba(79, 156, 249, 0.15);
    transition: box-shadow 0.3s ease, filter 0.3s ease;
}
```

But the original rule already has padding with !important. Adding more properties is fine.

Now for hero column, maybe add a background? It may not be desired. We can add `color` and `text-shadow`. Since we don't know the underlying color, adding a color might override. Better to use `text-shadow` with semi-transparent white to create a glow without changing text color.

For badge, add glow shadow and border-radius.

We need to consider the "glow-effects" variant: "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" for all? We can apply that to the badge and cards. For the hero column, text-shadow can be glow.

Let's choose accent color: `#f59e0b` (amber) to complement bg-warning. But also use another accent for cards? The variant says "accent color" singular. Let's pick accent = `#6366f1` (indigo) for cards, but badge warning already uses amber. We can use amber for the badge and indigo for cards. That's acceptable.

But the instruction says "Glow shadows in accent color" — plural perhaps. We can use two accents.

Let's define the new 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;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, #ffffff, #fdf6e3);
        box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 24px rgba(99, 102, 241, 0.2);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}
```

This changes visual identity significantly: adds glows, radius, gradient background.

But the original `padding: var(--space-md) !important;` is preserved. Good.

We also need to ensure we don't add `background` to `.app-hero-section .row .col-lg-7` because that might cause full-width? Maybe not.

Let's consider the "horizontal-strips" target: The contact cards now have a light gradient background, not strips. We can