/* ============================================================
   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 modify the CSS according to the instructions, but the provided CSS is quite small and only contains layout-ish properties (font-size, text-align, padding). The original has no colors, shadows, radius, etc., within the rules shown except padding with variable. We must preserve selectors and layout exactly. We can only change colors, shadows, radius, transitions, gradients, custom properties values, etc. But there are none in this snippet. We need to add visual properties that don't change layout. However, the instruction says "Only change colors, shadows, radius, transitions, gradients." We are allowed to add properties that didn't exist before, as long as they are visual and don't affect layout? It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." We can introduce colors, shadows, etc., without altering layout. But we must be careful: adding box-shadow, border-radius, etc., won't change layout if box-sizing is border-box? Actually border-radius doesn't affect layout, box-shadow doesn't affect layout, color doesn't. But we need to keep width/height/padding/margin within ±20% of input. The input has padding: var(--space-md) !important; we shouldn't change padding. But we could change the variable --space-md? No, that would change padding value, but within ±20%? The variable is not defined in the snippet, so we don't know. Better not.

We need to output a rewritten CSS that includes the same selectors and layout, but with added visual properties. Since the target style is "horizontal-strips" and variant "airy-rhythm", but the CSS is for mobile responsiveness. We can add color, background, border-radius, box-shadow to those elements, perhaps only on those elements. But we must not change text-align, font-size (except font-size is a typography property that is forbidden to change? Actually font-size is listed under "TYPOGRAPHY (font system fixed): font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break". It says fixed, so we cannot change font-size. But original has font-size: 0.85rem; we must keep it exactly. We cannot change colors inside? We can add color declarations? The instruction says "All color values: background, color, border-color..." We can add color properties if they didn't exist? It says "Only change colors, shadows, radius, transitions, gradients." That implies we can modify existing color values and add new ones if needed for the visual identity. But we must preserve all selectors and layout exactly. Adding color doesn't change layout. Let's think.

The 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 need to refresh visual identity. We can add within each rule: color, background-color, border-radius, box-shadow, transition. But be careful: adding background to .col-lg-7 might affect layout? No. But it might cover background images? We don't know. Could be acceptable.

The target style "horizontal-strips" suggests alternating backgrounds per strip. But we only have three selectors. We can apply distinct background colors to these sections/elements. But we must keep the media query condition and selectors unchanged.

We also need to change shadows, radius, etc. Since there are none, we can add them. We can also modify the custom property `--space-md`? The padding uses a variable. We cannot change padding value. But we can define --space-md if not defined? It probably is defined elsewhere. We shouldn't.

Let's create a fresh palette. Since the media query is for mobile, maybe use a pale cream background for the hero column, a soft warning badge with new colors, and cards with rounded corners and soft shadows. But remember the variant "airy-rhythm" says generous spacing, large border-radius 16-28px, soft pillowy shadows. We can add border-radius and box-shadow to the contact cards, maybe article. But adding border-radius to article might be fine. Need to ensure it doesn't break layout (it doesn't). The padding is already var(--space-md). We can set border-radius: 24px; box-shadow: something. Also transition for interactive feel.

Let's craft:

- For .app-hero-section .row .col-lg-7: text-align: center; could add background: transparent? There's no existing background. We could add color: #2d2a32; but that might change text color. The instruction says "All color values" should be replaced with fresh palette. But if there were no colors, adding is fine. However, if the existing CSS has no color, we can introduce a color. But we need to be conservative: we can add declarations that are purely visual. Let's do it.

- For .app-hero-section .badge.bg-warning: keep font-size: 0.85rem; add background-color: #f4a261? But the class bg-warning likely already has a background from Bootstrap. Overriding background-color in a media query might be fine. We can use a fresh warning color: #ff9f1c or something. But we need to ensure no layout changes. We can also add color: #1b1b1e; border-radius: 999px; box-shadow: ...; Maybe adjust padding? No.

- For .contact-channels-section article, .contact-quick-section .contact-card: keep padding: var(--space-md) !important; add background: #ffffff; border-radius: 28px; box-shadow: 0 8px 30px rgba(0,0,0,0.06)? But if the cards originally had no background, adding a white background might cover things. But it's a visual refresh. We could also use background-color: #fdfbf7 (cream) for alternating. Target style alternating white/cream/dark/white. Since these are in the same media query, maybe:

  - .col-lg-7: background-color: #fff? No, it's a column, shouldn't have background.

Better to add surface colors and shadows only to article/card. Also add transition to smooth interactions.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say we must only change properties that already exist; we can add new visual properties. That's allowed.

Let's craft a rewritten CSS that includes all original declarations plus new visual declarations. Need to preserve selector order, at-rule, etc. No extra comments.

Potential concern: We are not allowed to change "padding, margin (keep similar values, ±20% maximum)". We keep padding exactly. "width, height, min/max-width, min/max-height" not present. "font-size" keep. "text-align" keep. Good.

Let's choose palette:
- Deep teal: #1a535c
- Cream: #f7f3e8
- Coral accent: #ff6b6b
- Soft sand: #fceade
- Dark text: #2b2d42

The variant "airy-rhythm" suggests soft pillowy shadows:
- box-shadow: 0 10px 28px rgba(26, 83, 92, 0.12), 0 4px 12px rgba(26, 83, 92, 0.06);
- border-radius: 24px;
- transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.3s ease;

For badge:
- background-color: #ff6b6b;
- color: #f7f3e8;
- border-radius: 999px;
- box-shadow: 0 6px 16px rgba(255, 107, 107, 0.35);
- transition: background-color 0.3s ease, box-shadow 0.3s ease;

For col-lg-7:
- color: #2b2d42;
- maybe text-shadow: 0 2px 8px rgba(43, 45, 66, 0.12); (text-shadow is visual)
- transition: color 0.3s ease;

But adding text-shadow may affect readability? It's subtle.

Let's make it distinct. Use a custom property for spacing? We can't change padding value, but maybe we can add margin? No, margin is layout. Avoid.

We need to ensure no layout changes. Adding box-shadow and border-radius doesn't affect layout if box-sizing is border-box? Actually border-radius doesn't affect layout. Box-shadow doesn't affect layout. Color doesn't. Good.

Let's write output. Since there are no existing colors, we are free to choose. But the instruction says "All color values" should be changed. Since none, we add.

Let's produce the CSS. Remember no markdown fences. Use the original selectors exactly. Use `!important` on padding only. Add `!important`? On new properties no need.

Let's ensure we don't add any property that affects layout. Also no @keyframes.

Output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2d42;
        text-shadow: 0 2px 8px rgba(43, 45, 66, 0.08);
        transition: color 0.4s ease, text-shadow 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ff6b6b;
        color: #f7f3e8;
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(255, 107, 107, 0.35);
        transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        background-color: #e65050;
        box-shadow: 0 10px 24px rgba(230, 80, 80, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 28px;
        box-shadow: 0 12px 32px rgba(26, 83, 92, 0.08), 0 4px 12px rgba(26, 83, 92, 0.04);
        transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        background-color: #fceade;
        box-shadow: 0 16px 40px rgba(26, 83, 92, 0.14), 0 6px 16px rgba(26, 83, 92, 0.08);
        border-radius: 32px;
    }
}

Wait, we added a hover rule for badge, which changes selectors? The selector `.app-hero-section .badge.bg-warning:hover` is a pseudo-class, which is allowed? Yes, pseudo-classes are allowed to be preserved. But the original didn't have it; we are adding a selector. The instruction says "Selectors: keep EXACTLY (.post-card stays .post-card)" and "Pseudo-classes (:hover, :focus, ::before, ::after)" — it says pseudo-classes are part of selectors and we should preserve them. Adding new selectors might be considered changing selectors? It says "Keep ALL selectors ... exactly as-is." That means we cannot add new selectors. We can only modify declarations within existing selectors. Adding a hover rule is adding a new selector. That's not allowed. We must not add new selectors. So we can only modify the three existing rules. We can add visual properties inside them. We cannot add :hover rules. We can change transition timing, but not add new rules. So remove hover rules.

Also, can we add `!important` to new properties? No need.

So output will have exactly three rules, with added visual declarations.

Additionally, the instruction says "Only change colors, shadows, radius, transitions, gradients." We can add transition property, yes. But not transform. So no transform.

Let's refine:

- col-lg-7: color, text-shadow, transition.
- badge: background-color, color, border-radius, box-shadow, transition. Keep font-size.
- contact article/card: background-color, border-radius, box-shadow, transition. Keep padding.

But note: `.contact-channels-section article, .contact-quick-section .contact-card` is one selector list. We'll keep exactly.

Now, do we need to change custom properties? None mentioned.

Let's ensure the style target "horizontal-strips" is reflected? We can use alternating colors: col-lg-7 maybe cream, article/card white, badge coral. But in the same media query, they are independent sections. Could use background-color: #fdfbf7 for col-lg-7? Adding a background to a column could be visible. But that might affect layout? No. But maybe there is an existing background image on parent; covering with a background could ruin design. However, the task is a visual refresh; it's acceptable. But to be safe, we can avoid adding background to col-lg-7 and just set text color/text-shadow.

The variant wants "Generous spacing" and "Breathing room everywhere" but we cannot change padding/margin beyond ±20%. We can add padding? No. We can maybe use border-radius and shadows to create breathing feel. Fine.

Let's create final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a535c;
        text-shadow: 0 2px 10px rgba(26, 83, 92, 0.15);
        transition: color 0.45s ease, text-shadow 0.45s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb703;
        color: #1b1b1e;
        border-radius: 999px;
        box-shadow: 0 10px 24px rgba(255, 183, 3, 0.35);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fdfbf7;
        border-radius: 26px;
        box-shadow: 0 14px 36px rgba(26, 83, 92, 0.08), 0 6px 16px rgba(26, 83, 92, 0.05);
        transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
    }
}

But maybe we should use "cream" and "dark" alternating. For badge, a dark background? "Alternating: white / cream / dark / white pattern". Since we have three elements: col (cream), badge (dark), cards (white). Let's implement:
- col-lg-7: color: #2b2d42; text-shadow; no background. Or background-color: #f7f3e8? But then it might appear as a strip. Hmm.
- badge: background-color: #1a535c (dark teal), color: #f7f3e8.
- cards: background-color: #ffffff.

That gives a dark zone for badge. Let's do that.

Let's choose palette:
- Dark teal: #1a535c
- Cream: #f7f3e8
- White: #ffffff
- Coral accent: #ff6b6b (not needed if badge dark)
- Text dark: #2b2d42

Set badge background #1a535c, text #f7f3e8, box-shadow rgba(26,83,92,0.3). Cards white with soft shadow. Col text dark, subtle shadow.

This reflects strips: cream text? Actually no background. We can add background-color to col-lg-7 to make a strip? But it's a column within a row; adding background would make it a colored block. Could be visually striking. But the original target style is "horizontal-strips" with full-width sections; on mobile, col-lg-7 might span full width? The class col-lg-7 is a Bootstrap column, likely full width on mobile. Adding background-color to it might create a horizontal strip. That aligns with target. Let's add background-color: #f7f3e8; to col-lg-7. But is that safe? It might be inside a section with padding; adding background could fill the column area, possibly extending to edges. It won't change layout. It could be a nice cream strip. However, if the column contains images or other backgrounds, it may alter appearance, but it's a visual refresh. I'll do it.

But we need to be cautious: adding background-color to `.app-hero-section .row .col-lg-7` may cover the hero section background. Since this is a mobile media query, it's acceptable. The target style "horizontal-strips" says "Full-width sections (width: 100%)" but we cannot change width. Col-lg-7 on mobile is 100% width by default (Bootstrap). Adding background creates a strip.

Let's also add border-radius: 0? No, horizontal strips usually flat. But variant "airy-rhythm" wants large border-radius 16-28px. We could apply border-radius to cards only, not to full-width