/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the CSS given, preserving all selectors and layout, changing only visual properties: colors, shadows, border-radius, transitions, gradients, backdrop-filter, opacity, outline, etc. The input is a small mobile media query CSS. Need to apply target style "horizontal-strips" and effect variant "gradient-rich" but we only have these rules. We must not change layout properties like padding? Actually padding is layout, but allowed to change within ±20%. However, we must keep selector structure. We can adjust colors, shadows, radius, transitions, gradients. Since there is no actual color in original, we need to add visual properties? The original has no colors. We can add color, background, etc. But careful: adding properties is okay as long as not changing layout? We can add background gradients, border-radius, box-shadow, transition, etc. But we must keep the existing properties: font-size in badge, padding in contact cards. We can change font-size? No, font-size is typography fixed, cannot change. But original says font-size: 0.85rem. Keep it. Padding: keep similar within ±20%. We can change padding values slightly. But in media query, we have three rules:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
   text-align is layout? It's under "text-align, vertical-align" allowed? In the NEVER CHANGE list, it says "text-align, vertical-align" are layout? Actually the list includes text-align under 📐 LAYOUT (cannot change). It says "text-align, vertical-align" under LAYOUT. So we must not change text-align. But we can add other visual properties. We can add color, background, etc. But adding background to a column might be okay. However, target style is horizontal-strips, but we can't change layout structure. We can add color to this col? Maybe not necessary.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
   font-size fixed. We can add background, color, border-radius, box-shadow, gradient, etc. Since class is bg-warning, typically Bootstrap defines background-color. We can override with gradient background, but that changes visual. We can set background: linear-gradient(...). Also color, border-radius, box-shadow.

3. .contact-channels-section article,
   .contact-quick-section .contact-card { padding: var(--space-md) !important; }
   padding is layout, can adjust ±20%. --space-md value? unknown. We can keep padding value as var(--space-md) maybe within ±20%? But changing var? We can add background, border-radius, box-shadow, transition, etc. Padding remains same.

Need to consider that CSS custom properties --space-md might be defined elsewhere. We can change to calc(var(--space-md) * 1.1)? That would be within ±20%. But better keep exact? The instruction says "padding, margin (keep similar values, ±20% maximum)" so we can modify to a slightly different value if desired, but for safety, keep as is or alter slightly. Since we need to output, we can leave padding unchanged.

We need to add visual style that reflects "horizontal-strips" and "gradient-rich" within these limited rules. Since we can't change layout, we can add gradient backgrounds, border-radius, shadows, transitions. We can add new properties inside existing rules.

Also, because the original CSS has no colors, we can introduce a fresh palette. We need to ensure all colors replaced? There are no colors. So we can add colors.

But the instruction says "Every selector character-for-character preserved?" We need to preserve selectors exactly. We can keep them. We can also add new declarations within each rule.

Let's design:

- For .app-hero-section .row .col-lg-7: add a background gradient? That could affect layout? It doesn't change layout. But adding background padding? No. Could create a subtle gradient overlay. However, the column is part of hero; adding background might look odd. But for visual identity, maybe add background: radial-gradient(...); border-radius? But if it's a column with text-align center, adding a background to the col might create a visual strip. But we must be careful: the target "horizontal-strips" suggests full-width sections with alternating colors. We can't change width or padding, but can add backgrounds. For this specific selector, maybe not needed. But we can add a subtle background gradient? Actually to adhere to "gradient-rich", we can add background gradients to all three rules.

But note: The first rule is inside @media max-width 575.98px. So it's mobile only.

Let's produce new CSS with visual properties. Need to ensure no markdown.

We should preserve the @media query and the exact selectors and braces.

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 can add:

- For col-lg-7: adding background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0)); border-radius: 12px; but that's visual. But adding background to a col might interfere with parent background? But okay. Better to add color? Maybe text color? We can add background-clip? Hmm.

Alternatively, for the col, we can add a "box-shadow" and "border-radius" to create a card-like strip. But the col contains hero content; adding background could be okay but might change the look. Since target style is horizontal strips, on mobile, the hero column might occupy full width; if we add background, it could create a strip. Let's add background: linear-gradient(180deg, rgba(248, 249, 250, 0.6), rgba(255, 255, 255, 0.2)); border-radius: 16px; padding? We can't change padding much, but we can add padding? The original has no padding. Adding padding would alter layout? It is not forbidden? Actually adding padding is a layout change because it changes dimensions. The instruction says never change width, height, padding, margin. But we are allowed to change padding within ±20% if present. Adding a new padding property where none existed would affect layout; likely not allowed. So avoid adding padding/margin etc. We can add background, border-radius, box-shadow, backdrop-filter, transition, etc. Border-radius doesn't affect layout dimensions much except clipping. So okay.

For badge: add background: linear-gradient(...), color, border-radius, box-shadow, transition.

For contact cards: add background, border-radius, box-shadow, transition. We can also add border: 1px solid? Border-width is prohibited? Actually border-color/style allowed, border-width not to change? It says "border-color and border-style (NOT border-width)" from the MUST CHANGE list. It doesn't say we can't add border-width. But to be safe, if adding border, use border: 1px solid color? That adds width and layout change. Better use box-shadow or outline. Or use border: 1px solid transparent? Actually width would still be 1px. Better avoid border. Use background and border-radius and box-shadow.

We can add `background: linear-gradient(...)` and `box-shadow`. Also `transition: all 0.5s cubic-bezier(...)`.

Need to follow target style: alternating white/cream/dark/white pattern. We can use cream and dark gradients.

Let's choose a palette: 
- Cream: #FAF3E0, #FFF8E7, etc.
- Dark: #2C2C2C, #1E1E1E, #3A3A3A
- Accent: perhaps gold/copper: #D4A853, #E6B85C, #C9975D
- White: #FFFFFF

Gradient-rich: use multiple stops.

Let's design:

1. `.app-hero-section .row .col-lg-7`:
   - background: linear-gradient(145deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 248, 231, 0.55) 45%, rgba(250, 243, 224, 0.3) 100%);
   - border-radius: 24px;
   - box-shadow: 0 12px 40px -12px rgba(44, 44, 44, 0.25), inset 0 1px 0 rgba(255,255,255,0.9);
   - backdrop-filter: blur(12px);
   - transition: background 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
   But adding backdrop-filter might be okay. But on mobile, may affect performance. Still okay.

But we need to be careful: `.app-hero-section .row .col-lg-7` is a grid column. Adding box-shadow and border-radius to it might clip? Not with overflow hidden. But dimensions remain same, so okay.

2. `.app-hero-section .badge.bg-warning`:
   - background: linear-gradient(135deg, #F5D58A 0%, #D4A853 35%, #B8863B 100%);
   - color: #2C2215;
   - border-radius: 999px;
   - box-shadow: 0 10px 24px -8px rgba(212, 168, 83, 0.6);
   - transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
   But transform is a property? The never-change list says "animation-name" but not transform. However, using transform on hover? Since we can't change pseudo-classes, we cannot add `:hover` because that would add a selector not present. We can't add selectors. So don't add hover rules. We can include transition but without hover it doesn't matter. Could still be okay. But transition on base state is fine. We can include transition.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - background: linear-gradient(145deg, #FFFFFF 0%, #FBF6EC 70%, #F4E9D5 100%);
   - border-radius: 20px;
   - box-shadow: 0 16px 40px -20px rgba(44, 44, 44, 0.25), 0 4px 12px rgba(212, 168, 83, 0.08);
   - transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);

But we also have the existing padding declaration. We need to keep it. We can also change padding slightly within ±20%. Since it's using var(--space-md), maybe we can change to `calc(var(--space-md) * 1.15)`? But that might be illegal because calc with variable and multiplication? Actually multiplication by number is allowed in calc? In CSS, `calc(var(--space-md) * 1.15)` is not widely supported because multiplication requires a single number? Actually CSS calc supports multiplication only by a number? It's not widely supported in older browsers, but generally `calc(var(--space-md) * 1.15)` is valid? Let's check: CSS Values Level 4 allows multiplication? No, calc only supports + - * /? Wait, standard calc supports + - * / with lengths? It supports * and /? In CSS, multiplication is not generally supported except by a number? Actually `calc()` supports the four arithmetic operators, but multiplication and division are not allowed in CSS calc? I think CSS calc only supports + - * /? Wait, the original CSS calc spec only supports + - * /? It says the `*` and `/` operators are not supported in `calc()`? Hmm, in CSS `calc()` you can only use + - * /? I recall `calc()` permits addition, subtraction, multiplication, and division? Actually CSS Values and Units Level 4 added multiplication/division, but browser support is limited. Safer not to use calc for padding. We can keep exact `var(--space-md)`. Or change to `calc(var(--space-md) + 0.1rem)`? That would be a length addition, widely supported. But adding 0.1rem might be within 20%? If --space-md is e.g., 1rem, 1.1rem is within 20%. But we don't know. To be safe, maybe keep as original. But the task says change visual identity, not necessarily padding. We can leave padding unchanged. That's acceptable because padding is layout and should be kept similar.

But there may be a need to add "color" properties to satisfy "replace all color values". Since there are no existing color values, we don't need to replace. But we should add some `color` declarations? Adding color to text could change visual but not layout. In the badge rule, we can set `color: #2C2215`. For the contact card, maybe set `color: #2C2C2C`. For the col, maybe set `color: #3A3A3A`. That's fine.

We also need to consider border-radius: we can adjust. For badge, 999px pill. For cards, 24px. For hero col, 28px maybe.

Also `transition` timing: use cubic-bezier.

Potential issue: Adding `background` to `.col-lg-7` might be on a column that is inside a row with gutters. It could add visual background to the column but not change layout. It's okay.

Need to ensure output CSS has no markdown, no comments. Start with @media.

Let's craft final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 231, 0.6) 40%, rgba(250, 243, 224, 0.35) 100%);
        border-radius: 28px;
        box-shadow: 0 24px 48px -24px rgba(44, 44, 44, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(14px);
        transition: background 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #F7DF9C 0%, #D8A951 38%, #B57E35 100%);
        color: #2C2215;
        border-radius: 999px;
        box-shadow: 0 10px 28px -8px rgba(214, 166, 80, 0.65), 0 2px 6px rgba(255, 255, 255, 0.4) inset;
        transition: background 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #FFFFFF 0%, #FBF5E9 55%, #F2E5CF 100%);
        border-radius: 24px;
        box-shadow: 0 20px 44px -24px rgba(44, 44, 44, 0.3), 0 6px 18px -6px rgba(212, 168, 83, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        color: #2C2C2C;
        transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Check constraints:
- Selectors preserved exactly? Yes.
- display, position, etc. not changed.
- padding: unchanged for contact cards.
- font-size: unchanged.
- text-align: unchanged.
- width, height, margin unchanged.
- Added background, border-radius, box-shadow, color, backdrop-filter, transition. These are visual only.
- Border-radius changes allowed.
- Transition duration 0.5-0.6s.
- Gradient-rich: multiple stops.
- Horizontal-strips: the cream/dark/white patterns are in gradients, okay.

We need to check if `box-shadow` values have multiple layers. Yes.

Potential issue: `backdrop-filter` might be a visual property but it is allowed? It's in the MUST CHANGE list (backdrop-filter). We can add it. However, adding backdrop-filter to a col might have no effect if no background behind. But okay.

Another potential issue: `transition` property might be considered animation, but it's allowed to change timing/duration, not to add? It says "transition timing, easing, duration" must change. It doesn't say we can't add. We added.

Should we add