/* ============================================================
   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 while preserving all selectors and layout. The original CSS is a media query block with three rules:

@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 only change visual properties: colors, shadows, radius, transitions, gradients, etc. But note that the original rules only contain layout/typography properties: text-align, font-size, padding. We need to add visual properties without breaking layout.

However, the instructions say: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But there are no colors or shadows in the original. We need to add visual properties to these selectors while preserving existing properties. Since we cannot change layout, we can add new visual declarations like color, background, box-shadow, border-radius, transition, etc. But we must be careful: adding background or box-shadow to these elements may change appearance but not layout (unless box-shadow affects layout? no). We can also adjust padding slightly within ±20%? The original padding is var(--space-md) !important. We can change the padding value? It says padding, margin (keep similar values, ±20% maximum). Since it uses a CSS variable, we could change the variable? But the variable is defined elsewhere. Alternatively, we can replace the padding with a concrete value similar to the variable's typical value? But we don't know --space-md. To be safe, we should keep padding as is. But we are allowed to change visual properties only. The task likely expects us to add color/shadow/radius definitions to these elements to match the target style.

Let's interpret: The "Original CSS" is a snippet. We need to output a refreshed version. Since the original contains no visual properties, we should add some. But we must not change the selectors or the existing declarations. We can add new declarations inside each rule. Also we can change the font-size? No, font-size is typography, cannot change. So keep font-size. text-align is layout (actually text-align is listed under typography? It says text-align, vertical-align are protected. So keep text-align. Padding is layout, keep as is or within ±20%. We'll keep it.

Thus we need to augment each rule with visual styling:
- For hero section col-lg-7: maybe add color, text-shadow? But it's a column container. Adding background could affect layout? It could add background to entire column. That's fine. Add border-radius, box-shadow maybe. But since it's inside a hero section, maybe we want a subtle soft shadow.
- For badge.bg-warning: This is a Bootstrap badge with warning background. We can override background-color, border-color, box-shadow, border-radius, transition. But note Bootstrap's .bg-warning sets background-color. We can override with a fresh palette? The instruction says "refresh visual identity" and "strong color zones" with alternating white/cream/dark white pattern. For a warning badge, maybe use a warm gradient? We can set background: linear-gradient(...), color, border-radius, box-shadow.
- For contact cards: add box-shadow, border-radius, transition, background maybe, but careful about padding. We can add border-radius and box-shadow, transition.

But wait: The target style "horizontal-strips" is about full-width sections with alternating backgrounds. The given CSS snippet is a media query for mobile. The elements listed are within sections. To apply "strips", we might add background colors to those sections? But we don't have selectors for sections except these. We can add background to the elements we have. For example, .contact-channels-section article could get a cream background, soft shadow, rounded corners. Also .contact-quick-section .contact-card could get dark background? But the pattern says alternating white/cream/dark/white. We can choose.

However, we must be careful: The original CSS only has these three rules. We should not invent new selectors. We can only modify these rules. So we'll add visual properties to each existing rule.

Also, the media query condition remains same.

We need to ensure colors are fresh. Let's design a palette:
- White: #ffffff
- Cream: #fff9ef or #fdf6ec
- Dark: #1f2937 or #111827
- Accent: maybe #d97706 (amber) for warning badge.
- Soft shadows: multi-layer as specified: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)
- Border radius: 12-24px.

Let's craft:

Rule 1: .app-hero-section .row .col-lg-7 { text-align: center; }
We can add color: #1f2937; maybe text-shadow for hero? But it's a column. Adding background could make it look like a card. But it's inside a hero section, often full-width. In mobile, centering content. We can add padding? No, keep padding same. But we can add border-radius and box-shadow if it's a card. However, adding background to col might be odd. But the target style includes "strong color zones". Let's add a subtle cream background to the column on mobile, with rounded corners and soft shadow. But this might change visual design significantly. That's allowed.

We need to ensure the element is a column; adding background to it may create a box around the text. That's fine.

Let's do:
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,249,235,0.9));
        border-radius: 24px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        color: #1f2937;
        transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
    }

But adding background to a column inside a row might have box-sizing issues? Usually columns have padding, and background will cover the column including its padding. That's fine. But the column may be part of a grid; adding background might make it stand out. Acceptable.

Rule 2: .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
Add:
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 16px -4px rgba(245,158,11,0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
    padding: 0.35em 0.85em; (But padding is layout? We can change padding of badge? It's inside inline element, changing padding might affect layout slightly. But within ±20%? We don't know original. Better not change padding. Actually Bootstrap badge has its own padding; we should not override padding unless needed. We'll omit padding.)

We can also add text-shadow: 0 1px 2px rgba(0,0,0,0.1); But not necessary.

Rule 3: .contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
Add visual properties:
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.05);
    transition: box-shadow 0.4s ease, border-radius 0.4s ease, background-color 0.4s ease;
    color: #1f2937;

But note .contact-channels-section article and .contact-quick-section .contact-card are different elements. The target pattern says alternating colors. We could set article to cream and contact-card to dark? But the rule combines them. If we set different backgrounds, we'd need separate rules. But we cannot split the selector list without changing selectors? Actually we can keep the combined rule for common properties, and add individual rules? The instruction says "preserving ALL selectors exactly". We can add new rules? The original selector list is one rule. We could keep that rule and add additional separate rules for each selector, but that would introduce new selectors (the same selectors individually) - would that be allowed? It's still the same selectors, but splitting is a structural change in CSS? The instruction says "Selector lists (commas)" are protected. We should preserve the exact selector list. So we shouldn't split them. We can apply common styling to both. To create alternating, we could use a CSS variable or default background, but we can't differentiate within the combined rule. We could use :nth-child? No. Better to apply same background to both, maybe a cream/white gradient. That's okay.

Alternatively, we can add a subtle differences using a CSS variable that can be overridden elsewhere? But no.

We can also add a background pattern using repeating linear-gradient? But target style is "horizontal-strips" with alternating background colors per strip. Since we only have these two selectors in the combined rule, maybe we can make them both cream with a dark border-left to suggest strip? But not necessary.

Maybe we should not overdo. The original CSS is a small media query. We need to refresh it visually. Adding box-shadow and border-radius to the cards will satisfy "soft-shadows".

Let's consider the target style "horizontal-strips" more: It likely expects full-width sections with alternating backgrounds. But in a media query, we may not want to add backgrounds to columns. However, the snippet is only part of the file. We don't have the rest. The instruction is to refresh this CSS snippet. We should make reasonable changes.

Let's re-read user request: "File: assets/css/saishi.css#块2/2" meaning block 2 of 2? Original CSS snippet. We need to output rewritten CSS preserving all selectors and layout exactly. We can add declarative visual properties.

We should ensure no AI comments.

Let's write the final output. Need to ensure the media query syntax remains identical. We'll keep all original lines, and add new lines.

We should check if we are allowed to change the property order? Yes. But keep original properties first.

Let's craft the final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #ffffff 0%, #fff9ef 100%);
        border-radius: 24px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        color: #1f2937;
        transition: background 0.5s ease, box-shadow 0.5s ease, border-radius 0.5s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 999px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px -4px rgba(245,158,11,0.3);
        color: #78350f;
        text-shadow: 0 1px 2px rgba(255,255,255,0.3);
        transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border: 1px solid rgba(255,255,255,0.6);
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        color: #1f2937;
        transition: box-shadow 0.4s ease, border-radius 0.4s ease, background-color 0.4s ease;
    }
}

But note: For .contact-channels-section article, we set background white. For .contact-quick-section .contact-card, maybe it should be dark? But combined, no. We could use a different background via a CSS variable? For example:

background: var(--card-bg, #ffffff);

But that's still same default. Alternatively, we can use a semi-transparent gradient to give a subtle distinction? Let's use a cream background for the combined rule to match "cream" theme: background: #fffaf0; But white is also in palette. Since hero column uses cream gradient, cards can be white. That's fine.

But the "horizontal-strips" pattern says alternating white/cream/dark/white pattern. With only these elements, we can't fully realize. Perhaps we can use a dark background for the contact-card? But both are in the same rule. To avoid overcomplication, we can add a separate rule for .contact-quick-section .contact-card to override with dark background? That would add a new selector? It's a subset of the selector list. Is that allowed? The instruction says keep selector lists exactly. If we add a new rule with a selector that is part of the list, we are not changing the original selector list, but adding an additional rule. Is that allowed? It says "preserving ALL selectors exactly" - likely means don't rename or remove selectors; adding extra selectors might be allowed? But to be safe, we should not add new selector rules unless necessary. However, the CSS spec allows multiple rules with same selector. Adding an extra rule for .contact-quick-section .contact-card would not break layout. But the instruction "Only the rewritten CSS, preserving ALL selectors and layout exactly" could be interpreted as the same set of rules. I'd avoid adding new top-level selectors.

We can use existing selector list and add a background using a repeating gradient? Not necessary.

Let's consider if we can use CSS variables to create alternating within the same rule? No.

Maybe the "horizontal-strips" style is about the overall page, not this snippet. Since this snippet only includes mobile adjustments, we just need to refresh the visual aspects of these elements. So adding soft shadows and radius is enough.

Let's make sure we don't change font-size, text-align, padding. We didn't.

We also need to ensure that the background on .col-lg-7 doesn't break layout. It might add a visual block, but not layout. Good.

One consideration: .app-hero-section .badge.bg-warning: Bootstrap's .badge has display: inline-block, padding. Adding transition transform might cause movement on hover? No hover rule. But we can include transform in transition without any transform property. It's fine.

Let's check if any property is not allowed: background, border-radius, box-shadow, color, text-shadow, transition, border, backdrop-filter. All allowed. We set backdrop-filter earlier? We removed it. We can include but not necessary.

Let's ensure all colors are fresh: #fff9ef, #fcd34d, #f59e0b, #78350f, #1f2937, #ffffff. Good.

We should also consider that the original file might have other styles; adding transition to these selectors may override existing transitions? That's fine.

Now, the instruction says "Goal: same layout, fresh color palette + shadow/radius identity". So yes.

Let's produce final output with no markdown fences, no preamble, first character = "". We'll output exactly.

But before final, let's verify self-check:

- Selectors preserved: @media (max-width: 575.98px), .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. Yes.
- display, position, grid-template, flex-direction unchanged (none present).
- width, height, padding, margin within ±20%: padding unchanged. Good.
- font-family, font-size, font-weight, line-height unchanged: font-size unchanged.
- Colors throughout file replaced with fresh palette: yes, added.
- Shadows redesigned: yes.
- Border-radius adjusted: yes.
- No AI marker comments.

Potential issue: We added `transition: background 0.5s ease, box-shadow 0.5s ease, border-radius 0.5s ease;` to col. Since background is a shorthand, transition may not animate gradient smoothly, but okay. Maybe use `transition: background-color 0.5s ease, box-shadow 0.5s ease, border-radius 0.5s ease;` because gradient background-color transition won't work either. But it's fine.

Let's also consider the "soft-shadows" variant wants multi-layer: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12). We used exactly.

Border-radius 24px hero