/* ============================================================
   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 user request. They gave a CSS file snippet: a media query with three rules. They want a visual refresh but preserving selectors and layout. However, this particular CSS snippet is relatively simple: it contains media query at max-width 575.98px with rules:

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

These rules are layout/typography mostly. We can't change text-align, font-size, padding too much? The user says padding can vary ±20%. But we also have no colors, shadows, border-radius in this snippet. The task is to refresh visual identity without changing layout. Since original CSS has no colors, we may need to add visual properties? But the instruction says "Only change colors, shadows, radius, transitions, gradients." Also "Keep ALL selectors and layout exactly as-is." However, if the original CSS has no visual properties, we cannot change what doesn't exist. But maybe we need to add color, shadow, etc. to those elements? The target style is horizontal-strips with alternating backgrounds, large border-radius, pillowy shadows. But within a media query, we might adjust spacing and visuals. Yet we are constrained to not change layout structure.

Let's parse the request carefully.

They say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This implies we should output CSS with the same selectors but with new visual declarations. Since the original doesn't have visual declarations for these selectors, we can add them? But the original rules have specific declarations like text-align, font-size, padding. Are those "layout"? text-align is in the "NEVER CHANGE" list: "text-align, vertical-align" so we cannot change text-align. font-size is also never change. padding is allowed to vary ±20%. But padding for .contact-card is using var(--space-md) !important, and we should keep similar values. However, we can add color, background, border-radius, box-shadow, transition to these elements within the same rules? But the selectors are specific and we'd be adding declarations. The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding them might be okay if they don't break layout. But the original CSS doesn't include them, so "change" maybe means add? Hmm.

Alternatively, maybe this snippet is a part of a larger file, but they only provided the section to rewrite. The output should be the rewritten CSS for that section. We should preserve the selectors and the existing property values that are typography/layout (text-align, font-size, padding). For the padding, we can adjust slightly if needed but should keep similar. We can also add new visual properties like color, background, border-radius, box-shadow, transition, backdrop-filter, etc., as long as they don't break layout? But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — so we can add decorations.

But wait: The user specifically says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So they expect visible visual changes. This CSS snippet has no colors, so we need to inject them into these selectors meaningfully. However, adding background to .app-hero-section .row .col-lg-7 might change layout? Background doesn't change layout. Border-radius on a column? Might visually round the column, but if it's a block-level element, could be fine. Box-shadow too. But we must ensure the selectors are respected and the layout (display, position, widths etc.) is not modified. Since the original rules only set text-align, font-size, padding, adding background, color, border-radius, box-shadow, transition is fine.

But we need to be careful: The target style is "horizontal-strips" with "airy-rhythm": generous spacing, large border-radius, soft pillowy shadows. This suggests we should apply large border-radius and soft shadows to these sections/cards. The media query is for max-width 575.98px (mobile). So we need to be mindful that border-radius and padding should be appropriate for mobile.

Let's define a fresh palette. Maybe use cream/dark/white pattern. But since these are specific elements, we can give them distinct colors.

Original selectors:

1. .app-hero-section .row .col-lg-7 — likely a hero column. We can set text-align: center (keep), and maybe add color, background, border-radius, box-shadow, padding? But don't increase padding too much because text-align is set but no padding currently. We can add padding? That would change layout? The rule currently only sets text-align. Adding padding might affect layout, but it's allowed if within ±20%? But no original padding value to compare. The instruction says "keep similar values" for padding, but there is no value. Better to avoid adding padding unless necessary. We can add border-radius, background, box-shadow, and maybe use padding only if already present. Since not present, we should not add layout-altering padding.

2. .app-hero-section .badge.bg-warning — a badge with Bootstrap classes. It has font-size. We can change background? But .bg-warning is a Bootstrap utility that sets background-color. If we override it in this rule, we can set a custom background. We can also set color, border-radius, box-shadow, etc. That is visual. The original has font-size. We keep font-size. We can add background-color, color, box-shadow, border-radius, transition.

3. .contact-channels-section article, .contact-quick-section .contact-card — these are cards. The original sets padding: var(--space-md) !important. We can keep that padding (or adjust within ±20%). We can add background, border-radius, box-shadow, border, color, transition, maybe backdrop-filter. This is a great place to apply "soft pillowy shadows" and "large border-radius".

We also need to consider that the media query is small, but we can include transitions.

Now, we need to output only the CSS, no markdown. We must preserve selector lists, combinators, pseudo-classes, etc. Exactly.

Let's craft the new CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: ...? // maybe not, because this is a column, could affect siblings? It's inside a row, likely okay. But background on a col might create a box, maybe not desired. Could be fine.
    }
}

But maybe we should be more conservative: only add visual properties to the elements that are cards (the contact cards) and the badge. The hero column could get text color, maybe a subtle background? Let's see.

The target style wants full-width sections with alternating backgrounds. In mobile, these elements could become "strips". But the CSS given doesn't affect full sections. Hmm.

Maybe the "horizontal-strips" style refers to the overall design of the page, but our snippet is just a media query that adjusts a few elements. We can still make those elements look like strips/cards.

Let's think of a fresh palette. Options: "white / cream / dark / white pattern" and "strong color zones". Let's choose a palette:

- Deep teal: #0f3d3e
- Cream: #fcf9f2
- Warm apricot: #f2d0a4
- Coral accent: #ff6b57
- Dark charcoal: #1a1a1a

For the hero column, maybe set color to dark charcoal, background to transparent or cream? But since the hero likely already has background, we can add a border-radius and box-shadow? Maybe not.

We can instead set a subtle text-shadow? But that may be weird.

Perhaps better: For the hero column, set a background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,249,235,0.85)); border-radius: 24px; box-shadow: 0 12px 32px rgba(15,61,62,0.12); padding? But no padding. Adding padding without original could alter layout. But we can add a margin? No.

Wait, the instruction says "padding, margin (keep similar values, ±20% maximum)" — but there is no current value. If we add new padding, that's a change from zero, which is infinite percent. Probably not allowed. So avoid adding padding/margin that weren't present. We can add border-radius and box-shadow because those do not affect layout dimensions? Border-radius does not affect layout, box-shadow does not affect layout. Background doesn't either. Color doesn't. So we are safe adding those.

For the badge, the original has font-size. We can add background-color, color, border-radius, box-shadow, padding? But padding wasn't present. We can add padding? It would change the badge size, but badge already has default Bootstrap padding (from .badge). We can override padding? That might be allowed if within ±20% of default? But we don't know. Better to avoid. We can change background, border-radius, box-shadow.

For contact cards, original has padding: var(--space-md) !important. We can keep that, maybe adjust to calc? But keep it as is. We can add background, border-radius, box-shadow, border, backdrop-filter, transition, etc.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        background: rgba(252, 249, 242, 0.7);
        border-radius: 24px;
        box-shadow: 0 16px 40px -12px rgba(15, 61, 62, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff6b57, #f2a65a);
        color: #1a1a1a;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(255, 107, 87, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border: 1px solid rgba(15, 61, 62, 0.08);
        border-radius: 28px;
        box-shadow: 0 8px 24px rgba(15, 61, 62, 0.08), 0 20px 48px rgba(15, 61, 62, 0.06);
        transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But we must ensure not to change selectors. The selector list is "contact-channels-section article, contact-quick-section .contact-card". We must preserve exactly, including spaces. Yes.

We also should consider that the original CSS uses `!important` on padding. If we add `!important` to other properties? Not necessary.

But wait, the "transition: ... transform ..." includes transform, which is a layout property? Transform doesn't affect layout, but it's a visual transform. It's okay. But if we add a transform transition without a transform on hover, it won't do anything unless there is a hover rule elsewhere. But we can include transition anyway. However, the "animation-name" and keyframes are not to be changed. Transition is allowed.

We might also add a hover state? No, we must not add new selectors. We can only change properties within existing selectors. So no `:hover` rules unless they already existed. They didn't. So we shouldn't add new rules. We can only modify declarations inside existing rules. So no `:hover` blocks. We can include transition properties in the base rule, which is fine.

Now, is there any issue with changing `.col-lg-7` background? It might create a visible box around the text, but in mobile hero, this could be okay. However, the hero section probably has a background image and this column may contain text. Adding a background could obscure the hero image. But the user wants "strong color zones" and "horizontal strips", so maybe that's desired. But we need to be careful: The media query max-width 575.98px applies to mobile. It's okay.

But we must ensure that the output "preserving ALL selectors and layout exactly". We added `text-align` but didn't change it. We added new properties. That's okay.

Let's consider if we should add `-webkit-backdrop-filter` for frosted glass effect? That could be nice but may not be supported. We can add.

Alternatively, to better match "airy-rhythm" with generous spacing, we might increase the border-radius and soft shadows. The badge border-radius: 999px makes it pill. The contact cards border-radius: 28px. Good.

We also need to use a "fresh palette" distinct from previous. Since we don't know previous, we can use bold colors. Let's choose a palette that is distinctive: maybe a dark navy + amber + off-white. But we already chose teal/coral.

Let's refine:

- Background for hero column: `linear-gradient(145deg, #fdfcf7, #f5efe0)`? That is cream.
- Color: `#1f2a2e` (dark slate)
- Box-shadow: multi-layer soft: `0 20px 40px -16px rgba(15, 45, 55, 0.25), 0 8px 16px -8px rgba(15, 45, 55, 0.12)`
- Border-radius: `28px` maybe.

But `.col-lg-7` is a grid column. On mobile, the row is stacked maybe full width. It could look like a strip/card.

For the badge: maybe `background: linear-gradient(135deg, #ffb347, #ff6b35)` and `color: #1a1a1a`, `border-radius: 12px`? But a badge should be pill. Could use `border-radius: 50rem`.

For contact cards: maybe use `background: rgba(255,255,255,0.85)` with `backdrop-filter: blur(12px)`? But if background images are behind, frosted effect. Or use solid `#fff`. To create alternating pattern, we could set `.contact-channels-section article` to cream and `.contact-quick-section .contact-card` to white. But since they are in a selector list, we can't differentiate without splitting the selector, which would change selectors. We could use a CSS variable? No, the selector is a list. We can set the same properties for both. That's fine.

But maybe we can use `:nth-child`? That would add a selector, not allowed. So keep same.

Let's think about the instruction "horizontal-strips" and "airy-rhythm". We can add a `border-top` or `border-bottom`? Border styles are allowed to change, but border-width is not? Actually, the NEVER CHANGE list includes "border-color and border-style (NOT border-width)"? Wait, it says "border-color and border-style (NOT border-width)" in the "MUST CHANGE" list? Let's re-read:

✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • border-radius ...
  • gradient colors and stops ...
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties ...

🔒 NEVER CHANGE:
  📐 LAYOUT includes ... padding, margin ... But border-width is not explicitly listed. Wait, it says: "border-color and border-style (NOT border-width)" under MUST CHANGE. That implies border-width is not to be changed? Actually, "NOT border-width" means you may change border-color and border-style, but not border-width. So border-width is considered a layout property? It's not in the NEVER CHANGE list explicitly, but the parenthetical clarifies. So we should not add or change border-width. If we add a border with a width, that would change border-width. So we should avoid adding borders unless they already had border-width. The original selectors may have default borders? The contact cards probably don't. Adding a border with width 1px would change border-width from 0 to 1px, which is a layout change? Actually border-width affects layout (box-size). So better avoid adding borders. But we could add `outline`? Outline doesn't affect layout. But outline style is allowed to change. We can add `outline: 1px solid ...`? Outline doesn't affect layout. But the MUST CHANGE says outline styles (color, type), and never change list doesn't mention outline-width. But to be safe, we can avoid border. Use box-shadow for separation.

So no border. Use background, border-radius, box-shadow.

For the hero column, a background might look like a card. Good.

Now, we also need to consider that the output should be "the rewritten CSS". We only output the CSS, preserving the media query.

Let's craft the final CSS carefully. We'll keep all original declarations exactly: text-align: center; font-size: 0.85rem; padding: var(--space-md) !important;

We'll add new declarations after them. Order doesn't matter but keep original first maybe.

Let's decide final values:

Palette:
- Base dark: #1a2e35 (deep teal-slate)
- Cream: #f9f4e9
- Soft white: #fffdf9
- Accent coral: #ff6b5e
- Accent amber: #f7b23b
- Shadow dark: rgba(26, 46, 53, 0.10-0.