/* ============================================================
   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 process the given CSS. It's a small media query block with specific rules. We are in conservative mode, visual-only changes. We need to refresh visual identity but keep all selectors, layout, typography, etc.

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

We can change visual properties: colors, shadows, radius, transitions, gradients. But here most properties are typography/layout: text-align, font-size, padding. We cannot change those per constraints (text-align is layout-ish? Actually text-align is listed under typography? It says "Typography (font system fixed): text-align, vertical-align" so can't change). font-size can't change. padding can change up to ±20%? But var(--space-md) is a CSS custom property. We could change the custom property? The instructions: CSS custom properties (--color-*, --shadow-*) values can change. But --space-md is a spacing variable, not color/shadow. It's not allowed to change because it would affect layout. We can keep it.

But the task is to refresh visually. However, there are almost no visual properties to change. Perhaps we can add new visual properties like border-radius, box-shadow, background, etc., without changing existing ones? The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." We can add visual decorations to these existing rules? The output should preserve selectors exactly and only modify allowed properties. But we can add new declarations? Usually rewriting CSS means we can add properties that are visual and don't affect layout? The conservative mode says: "Only colors, shadows, and decorative properties may change." Adding box-shadow, border-radius, background, etc. is okay as long as it doesn't affect layout. But we must not change the existing properties: text-align, font-size, padding. We can retain them exactly.

But careful: adding padding? No, we can't change padding, but can we add background-color? Yes. Can we add border-radius? Yes. But would that affect layout? No, border-radius doesn't affect layout. Box-shadow doesn't affect layout. Background doesn't. So we can inject visual flair.

However, the target style "asymmetric-blocks" and effect "airy-rhythm" emphasize bold contrasting blocks, large border-radius, soft pillowy shadows. But we have existing rules that are for specific elements. We can add decorative properties to those elements, but only if we don't conflict with layout. Also, we must preserve the media query structure, selectors, and existing declarations. We can add new declarations within the same rules.

But wait: the user wants a "rewritten CSS" for the given snippet. It is a partial stylesheet. We can output the same media query with additional visual declarations. But we must ensure we don't change existing property values. Let's examine each rule:

1. `.app-hero-section .row .col-lg-7` : text-align center. We could add a background? But this is a column, adding background might affect visual but not layout? It could create a block that looks different. But we need to be careful: adding background to a column could be okay. We can add border-radius, padding? Padding would change layout, not allowed. So maybe add box-shadow, background, border-radius. But this element is a grid column; adding background might create a block. Is that okay? The HTML is fixed, but visual identity changes yes. However, the target style: "each section different background" - maybe we assign a soft background to this column. But the original CSS is just a media query for mobile. For conservative mode, we're only editing this snippet, not the whole file. We need to refresh this snippet. So adding background to this column is a visual change.

2. `.app-hero-section .badge.bg-warning`: font-size 0.85rem. We could add background-color? But "bg-warning" comes from Bootstrap, likely already has background. We could change it to a different color? But we must not change class names; we can override background-color, border, etc. But we need to be careful: the class `.bg-warning` gives a yellow background; we could override with a new color. That's allowed. Also add border-radius, box-shadow.

3. `.contact-channels-section article, .contact-quick-section .contact-card`: padding var(--space-md). We can add background, border-radius, box-shadow, maybe border. But adding background to articles/cards is common. That would create visual contrast.

However, the instruction says "Keep ALL selectors and layout exactly as-is." So we can preserve existing declarations exactly and append new visual declarations. But we must ensure the "first character = first CSS character", no markdown.

We also need to consider whether adding properties might conflict with "display, position, grid-template-*, flex-direction unchanged?" We aren't changing those. Adding background doesn't change display. Border-radius doesn't change layout. Box-shadow doesn't. So okay.

But is there a risk that adding background to `.app-hero-section .row .col-lg-7` creates visual blocks that alter perceived layout? It doesn't alter layout structure, only appearance. The instruction allows "Bold contrasting blocks: each section different background". So yes.

Also, the effect variant "airy-rhythm" mentions large border-radius (16-28px) and soft pillowy shadows. We can add these.

We also can change the `--space-md` variable? It's a spacing variable, not allowed. Keep as is.

Now, should we adjust the padding within ±20%? No, we don't need to change it. We can keep as is.

We need to be mindful: in the media query, we are within max-width 575.98px. Some of these decorative properties might be heavy on mobile? But okay.

Let's craft the rewritten CSS:

Selectors exactly:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: ...;
        border-radius: ...;
        box-shadow: ...;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: ...;
        border: ...?
        border-radius: ...;
        box-shadow: ...;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: ...;
        border-radius: ...;
        box-shadow: ...;
    }
}

We must ensure `!important` on padding remains. We can keep all original declarations first, then add new ones. Order of declarations within a rule generally doesn't matter except for cascade, but to preserve "exactly as-is", keep original lines unchanged, then append new ones. That's safe.

Now choose colors based on "asymmetric-blocks" and "airy-rhythm". We need a fresh palette. Since original is Bootstrap-like, we can use a palette of contrasting cool tones. Let's pick:

- For col-lg-7: a soft, airy background like `linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)`? But that's maybe too strong. Or `#f8f9fc` with a subtle shadow. Since it's a hero column, give it a large radius and soft shadow. But maybe not too heavy. Let's use a light lavender: `#f0f2f8` or `#f1f4fb`. We can add a translucent gradient. But "Bold contrasting blocks" suggests more saturated. But "airy" suggests lighter. We can combine: a soft block with a subtle gradient and a shadow.

Let's choose a palette:

- Primary tint: soft indigo/blue: `#e6edf7`
- Accent: warm peach/coral: `#ffd6c7` or `#ffe0b3`
- Card background: white with cool tint: `#ffffff` with shadow, but to contrast: `#f9f7ff`
- Text colors: we can't change font-size but can change color? The original doesn't set color. We can add color property? Is that allowed? Yes, colors can change. But changing text color on the column might affect readability. We can add `color: #2d3e50` if we want. But careful: text color is a color property, allowed. But if the element has text, changing color is visual. However, we don't know the context. We can add a color to make text stand out on new background. But if the background is light, dark text remains. Good.

- For badge.bg-warning: override background to a vivid amber/coral? Since .bg-warning is yellow, we can change to a richer sunset gradient: `linear-gradient(135deg, #ff9a44, #fc6076)`. But that may be too aggressive. Let's use a warm highlight: `#ffb347` or gradient `#ffd86f` to `#ff9e00`. Add border-radius 50rem (pill) and shadow.

- For cards: background `#ffffff` or `#f8f7ff`, border-radius 20px, box-shadow soft pillow: `0 12px 32px rgba(50, 60, 80, 0.08), 0 4px 12px rgba(50, 60, 80, 0.04)`. Add maybe border `1px solid rgba(255,255,255,0.6)`? That's a border-color change, but adding border may affect box-sizing? Actually adding a border changes layout because border-width adds to element size unless `box-sizing: border-box`. The original CSS likely uses border-box globally, but we cannot assume. Adding border could change layout, so avoid adding border-width. We can use `outline` or `box-shadow` to simulate border. Better avoid border property entirely if not already present. Use box-shadow with inset or ring: `0 0 0 1px rgba(255,255,255,0.8)`. That's a shadow, not border.

Similarly, avoid adding `padding` or `margin`. Use only background, border-radius, box-shadow, color, maybe backdrop-filter. We can add `backdrop-filter` but safe.

For the col-lg-7, adding a background to a column could be nice: `background: linear-gradient(145deg, #eef2f9 0%, #dfe6f0 100%);` But if the column has no padding, background will touch edges. That's okay visually but might look odd. However, the media query only applies on mobile; on mobile, columns stack, so the col-lg-7 becomes full width. Adding a background there could create a full-width block. That's fine. But maybe we should not add background to a column because it might not be intended; but the instruction says bold contrasting blocks each section different background, so we can.

But wait: The original selector `.app-hero-section .row .col-lg-7` targets a specific column. Adding background could change the look significantly. That's okay.

However, to be conservative, maybe we should only add decorative properties where they are obviously container-like: cards and badge. But the task says refresh visual identity, and these rules are the only ones. We can add background to all three.

Let's also consider transitions: We can add `transition: box-shadow 0.3s ease, transform 0.3s ease`? But transform is a layout property? Transform doesn't affect layout, but it's not in the allowed list? The allowed list says "transition timing, easing, duration" can change. It doesn't explicitly list `transform`, but we should not add transform because it changes visual position but not layout. Yet we can add transition for box-shadow, background, border-radius. However, without a hover state in this snippet, transitions may not be applied. We can add `transition: box-shadow 0.25s ease-in-out, background-color 0.25s ease-in-out;` That is fine.

But be careful: The original media query has no transitions. Adding transitions is allowed (transition timing, easing, duration can change, but that implies existing transitions? Actually the instruction says under "You must change": "transition timing, easing, duration" — that implies you can modify transition properties. Since there are none, you can add new ones? It says "refresh the visual identity" and allows changing transitions. I think adding transitions is acceptable as decorative. But to be safe, we can add them.

Let's design the final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2a3d;
        background: linear-gradient(145deg, #fdfcff 0%, #e8ecf7 100%);
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(31, 42, 61, 0.08), 0 8px 20px rgba(31, 42, 61, 0.05);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #4a2c00;
        background: linear-gradient(135deg, #ffd89b 0%, #ffb84d 100%);
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(255, 170, 60, 0.25), 0 2px 6px rgba(255, 170, 60, 0.15);
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(40, 50, 80, 0.08), 0 4px 12px rgba(40, 50, 80, 0.04);
        transition: box-shadow 0.3s ease, border-radius 0.3s ease;
    }
}
```

But we need to ensure no layout changes. Adding padding? No. Color okay. Background okay. Border-radius okay. Box-shadow okay. Transition okay.

Potential issue: For `.app-hero-section .badge.bg-warning`, we set `color` and `background`. But the badge might have other Bootstrap styles; overriding background with gradient is okay. But `color` may not have been originally set; adding it might change text color. That's allowed.

Should we add `-webkit-backdrop-filter`? Not necessary.

Now, the instruction says "Only change colors, shadows, radius, transitions, gradients." We added background gradients, shadows, radius, transition, color. Good.

But also "opacity" can change, "filter" can change, "caret-color", "accent-color", "outline". We don't need to.

We must preserve all selectors exactly, including the comma list. We did.

We must not add comments.

Now, the original had `text-align: center;` and `font-size: 0.85rem;` and `padding: var(--space-md) !important;` exactly preserved. We preserved them.

However, should we worry about adding background to `.app-hero-section .row .col-lg-7` might affect the row's grid gap? No, background doesn't affect layout.

Let's think about the "±20% padding" rule: we didn't change padding. Good.

Now, is `border-radius: 24px` within large border-radius 16-28px? Yes.

Are we sure `box-shadow` with large offsets doesn't create overflow? Since mobile may have `overflow-x: hidden` or not. But visually, shadows may extend beyond viewport; usually body has overflow-x hidden. That's fine.

Let's also consider the "asymmetric-blocks" style: Unequal columns and mixed gaps. We cannot change grid template columns because that would change layout. We cannot add asymmetry. But the target style is just a guide for visual feel. We can use "bold contrasting blocks" by giving different backgrounds to the three elements. Good.

Let's refine colors:

- col-lg-7: `linear-gradient(145deg, #f9fbff, #e3e9f5)` - airy light blue.
- badge: `linear-gradient(135deg, #ffe6a7, #ffb548)` - warm amber.
- cards: `#ffffff` with shadow.

But to add more contrast, maybe cards can have a subtle tint too: `#fdfcff` or `#f4f6fb`. The cards should look white, but different background from hero column. Let's set cards to `#fbfcff` and hero column to `#edf2fa`. That gives variation.

We can also add a subtle border ring via box-shadow inset: `inset 0 0 0 1px rgba(255,255,255,0.6)`. But maybe not needed.

Let's compose final output.

But wait: The original CSS uses `var(--space-md)`. If we add `background` and `border-radius` to `.contact-channels-section article, .contact-quick-section .contact-card`, and these elements may have a background already from elsewhere, our new `background` overrides. Good.

One more thing: The instruction says "You MUST change: All color values..." It says "All color values" in the original CSS. The original has no color values except none. So we don't need to change anything there. But we added colors. That's fine.

It also says "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" — original has no box-shadow; we added multi-layer.

"border-radius (visual rounding only)" — original has none; we added.

"gradient colors and stops" — original has none; we added.

"