/* ============================================================
   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 a CSS file with a conservative mode, keeping selectors and layout exactly the same, but changing visual properties like colors, shadows, radius, transitions, gradients, etc. The target style is "asymmetric-blocks" with "glow-effects" variant.

Let me analyze the original CSS:

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

This is a media query with three rules. I need to keep all selectors and layout properties (text-align, font-size, padding) intact but can add visual properties like colors, shadows, radius, transitions, etc.

However, the original CSS doesn't have many visual properties. I can add new visual declarations to each rule without changing layout. But I need to be careful: the task says "Only change colors, shadows, radius, transitions, gradients" — but also "Refresh this CSS visually". Since the original has only layout-ish properties, I can add visual properties that don't break layout.

Wait, but the constraint says "NEVER CHANGE: padding, margin (keep similar values, ±20% maximum)". So padding must stay within ±20%. The padding is `var(--space-md)`. I should keep that as is.

Text-align is in the "never change" list: text-align, vertical-align. So I keep `text-align: center;`.

Font-size is in "never change" list: font-size, font-weight, font-style. Keep `font-size: 0.85rem;`.

So essentially I can only add new visual declarations that don't affect layout. Adding color, background, box-shadow, border-radius, transition etc. to these elements is fine.

But wait — this is a very small CSS snippet. The instruction says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." The target style is asymmetric-blocks with glow-effects. Since the HTML is fixed and I can't change classes, I should apply visual transformations within the existing rules.

However, there are only three rules inside a media query. I can add visual properties to each. Let me think about how to make this a visually distinct "refresh" while only having these three selectors.

Option 1: Add color/background/shadow to `.app-hero-section .row .col-lg-7` and `.badge.bg-warning` and `.contact-channels-section article, .contact-quick-section .contact-card`.

But that would change the visual identity of these elements. Since the original has no color, I'm free to add any colors. But I need to be careful: `bg-warning` is a Bootstrap class that likely sets background-color. Adding a custom background might override Bootstrap. That's fine — the goal is to refresh the visual identity.

Let me consider what properties are allowed to change:
- All color values: background, color, border-color, fill, stroke, outline-color
- box-shadow (fully redesigned)
- text-shadow
- border-radius
- gradient colors
- transition timing, easing, duration
- filter, backdrop-filter
- opacity
- outline styles
- border-color and border-style
- caret-color, accent-color
- CSS custom properties values

So I can add these to the existing selectors. I can also add transitions, filters, etc.

But the selectors are inside a media query for max-width 575.98px. That's fine; I keep the media query.

I also need to consider CSS custom properties. I can define custom properties in `:root` or use them directly. But the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. The original uses `var(--space-md)` for padding — I can't change padding anyway. But I could introduce new custom properties? That would be adding a rule, which might be acceptable since it doesn't change layout. However, the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding a `:root` block might be acceptable as it doesn't change layout or class names. But it's safer to just use direct values.

Let me think about what makes sense for each selector:

1. `.app-hero-section .row .col-lg-7` — hero section column. On mobile, centered. I can add a background with a subtle gradient, border-radius, box-shadow glow, maybe a backdrop-filter. But this is a column inside a row, adding background might look odd but it's a visual refresh. I could also add a text-shadow or color to text inside. But adding `color` to the column would affect all text in that column. That's allowed (color can change).

2. `.app-hero-section .badge.bg-warning` — a badge. I can override the background with a new color, add box-shadow glow, border-radius, etc.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — cards. I can add background, border, box-shadow, border-radius, transition, hover effects? But no pseudo-classes allowed? Wait, pseudo-classes are in the "keep exactly" list — meaning if they're in the original, I keep them. I can't add new ones? Actually, the instruction says: "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE". This means I must preserve existing pseudo-classes, not add new ones. Adding `:hover` would be adding a new selector, which could be seen as changing the selector list. To be safe, I should not add new pseudo-classes.

Similarly, I shouldn't add new selectors like `:root`. Keep the selectors exactly as they are.

So I can only modify the declarations within the existing rules, adding visual properties.

Let me draft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f0f4ff;
        background: linear-gradient(135deg, rgba(94, 96, 206, 0.25), rgba(120, 80, 220, 0.1));
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(94, 96, 206, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff6b6b);
        color: #1a1035;
        border-radius: 10px;
        box-shadow: 0 0 18px rgba(255, 107, 107, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(94, 96, 206, 0.35);
        border-radius: 14px;
        box-shadow: 0 8px 32px rgba(30, 20, 60, 0.45), 0 0 24px rgba(94, 96, 206, 0.3);
        backdrop-filter: blur(12px);
        transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.2s ease; /* wait, transform is layout-affecting if applied on hover? but no hover selector. transition property listing transform is fine as long as no transform applied. Actually transition on transform is fine because transform is not being changed. But to be safe, maybe avoid transform. */
    }
}
```

Hmm, but adding `transition` with `transform` is fine — it just means if transform changes (e.g., from a Bootstrap utility), it'll transition. But the instruction says not to change animation names etc. Transition values can change. Adding a transition is allowed.

But wait: "transition timing, easing, duration" is in the "must change" list, implying I can change existing transitions. Adding new transitions is also a visual change — okay.

Let me be careful about not changing layout properties. `backdrop-filter` is allowed. `background` is allowed. `border-radius` allowed. `box-shadow` allowed. `color` allowed. `border` — the instruction says "border-color and border-style (NOT border-width)" may change. So I can set `border: 1px solid ...`? That sets border-width (1px) which is NOT allowed to change? Actually, "border-color and border-style (NOT border-width)" means I can change color and style, but not width. If the original has no border, adding a border with width would change border-width from 0 to 1px, which affects layout slightly. To be safe, I shouldn't add border-width. But I could use `border-style` and `border-color` with `border-width: 0`? That wouldn't show. Hmm.

Actually, adding a border can affect layout (box-sizing might be border-box, but still). To be conservative and avoid breaking layout, better to avoid borders entirely, or use `outline` which doesn't affect layout. But outline is allowed: "outline styles (color, type)". I can use outline. But outline doesn't show border-radius in all browsers? Actually outline follows border-radius in modern browsers. But better to just avoid borders.

Let me reconsider: the instruction explicitly says "border-color and border-style (NOT border-width)" are in the "MUST CHANGE" list. This implies the original CSS has border declarations somewhere. But it doesn't. So maybe the instruction is generic. For this snippet, I can add border-color and border-style only if I don't set border-width. But to make a visible border I'd need a width. Since original has no border, adding a 1px border changes layout by 2px total. Is that within "±20% of padding/margin"? Not really. So better avoid.

I'll use box-shadows and backgrounds to create the visual boundaries instead.

Also, for the `.badge.bg-warning`, Bootstrap's `bg-warning` sets `background-color`. Overriding with a gradient is fine. But `bg-warning` also might set color? Bootstrap sets `color: #000` (or similar) for warning. I can set my own color.

Now, the target style is "asymmetric-blocks" — bold contrasting blocks, each section different background, high contrast borders. Since I can't change the HTML or add classes, I can only apply different backgrounds to the three selector groups. That gives:

- Hero column: a deep purple/indigo glassy block
- Badge: a warm amber/coral gradient block
- Cards: a different background (maybe teal or dark slate) with glow

That gives contrasting blocks.

The effect variant is "glow-effects": glow shadows in accent color `0 0 24px rgba(accent, 0.4)`, halo on hover `0 0 32px rgba(accent, 0.6)`. Since I can't add hover selectors, I can't apply hover halo. But I can create a strong glow on the elements themselves. Maybe use a `box-shadow` with multiple layers, one being `0 0 24px` and another `0 0 32px`, creating a pulsing-like glow. I could also add a `filter: drop-shadow()`.

But wait — no animations allowed? The instruction says "@keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)". This suggests if there were animations, I could change them. There are none. I could add an animation? Adding @keyframes would be adding a new selector/rule, which might be okay? The instruction says preserve ALL selectors exactly. Adding @keyframes is not a selector per se, but it's adding a new at-rule. The task says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding @keyframes might be acceptable, but it's risky — the user said HTML is fixed and only visual changes allowed. Adding an animation is a visual change, but I'm not sure if they want me to add new at-rules. To be safe, I'll avoid adding @keyframes. Instead, I can use `transition` on hover? But no hover selectors.

Actually, since there are no existing animations, I'll skip animations. The glow itself provides the effect.

Let me think about the fresh palette. I want bold contrasting blocks. Let's pick:

- Primary/accent: Electric violet/indigo: `#7c5cff` or `#6d5ef0`
- Secondary: Coral/amber: `#ff7a59` or `#ffb347`
- Tertiary: Teal/cyan: `#00d4aa` or `#2dd4bf`
- Dark base: deep navy/plum: `#12102a` or `#181336`
- Light text: `#f5f3ff`

The hero column could get a violet glass background with glow.
The badge gets a coral/amber gradient with glow.
The cards get a teal-tinted dark glass with glow.

Since the media query is for mobile (max-width 575.98px), these styles apply on mobile. That's fine.

Now, let me write the CSS. I need to preserve:

- `@media (max-width: 575.98px)` — exact
- `.app-hero-section .row .col-lg-7 { text-align: center; }` — keep text-align, add visual props
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — keep font-size, add visual props
- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — keep padding, add visual props

I must not change padding value. `var(--space-md)` stays.

I should also consider whether adding `background` to `.col-lg-7` might affect the row/gutter layout. No, background doesn't affect layout.

Let me consider adding `border-radius` to the column — fine.

Let me consider `box-sizing` — not changing.

Now, about the "asymmetric-blocks" pattern: unequal columns, mixed gaps, bold padding contrasts. I cannot change grid columns or gaps. But I can simulate bold block contrast via backgrounds and shadows. The "asymmetric" comes from the different visual treatment of each block. That's acceptable given constraints.

Let me craft the final CSS carefully.

I want each block to have a distinctive background:

1. Hero column: `background: linear-gradient(145deg, rgba(124, 92, 255, 0.28), rgba(24, 19, 54, 0.65));` border-radius: 18px maybe (medium radius 8-16, let's use 16px). box-shadow: `0 0 24px rgba(124, 92, 255, 0.35), 0 12px 40px rgba(10, 6, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08)`.

2. Badge: `background: linear-gradient(135deg, #ffb347, #ff6b3d);` color: `#1a0e2e`; border-radius: 10px; box-shadow: `0 0 18px rgba(255, 107, 61, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3)`.

3. Cards: `background: linear-gradient(160deg, rgba(45, 212, 191, 0.12), rgba(18, 16, 42, 0.7));` border-radius: 14px; box-shadow: `0 0 24px rgba(45, 212, 191, 0.25), 0 10px 30px rgba(5, 3, 20, 0.6)`.

I might also add `color` to the cards? That would change text color inside cards. Better not, since it might make text unreadable if the theme is dark. Actually the backgrounds are darkish; if the original text is dark, it could become unreadable. But the instruction says color is in must-change. However, I should be careful not to ruin readability. Since this is a mobile-only override, adding a light color to the hero column and card text could be okay but it changes the theme. The instruction explicitly lists "All color values: background, color, border-color..." as must change. But there are no existing color values. Adding new ones is fine, but I need to ensure contrast.

Hmm, maybe I shouldn't add `color` to large blocks because it could conflict with user's existing text colors. But the instruction says to change colors. Since the original has no color declarations, perhaps the safest is to add color only where it makes sense: the badge (a small element where I control background), and maybe not on the column/cards.

Actually, for the hero column, setting `color` to a light lavender would affect all text in the hero section on mobile — likely fine and visually consistent. But it could break if there are already specific text colors. The instruction says "color" must change. Since there's no original color, I can add. I'll add a soft light color to the hero column and cards? Let me think.

The target style "asymmetric-blocks" with bold contrasting blocks: each section different background. That suggests backgrounds are different. For text, a light color on dark glass looks good. But if the original site is light-themed