/* ============================================================
   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 respond to the user request. The user provides an "original CSS" which is just a small media query block. They want a visual refresh following the target style "horizontal-strips" and effect variant "sharp-edges". However, this CSS block only contains layout and typography rules, not colors. We need to refresh visually while preserving selectors and layout. We can add color, shadow, border-radius, transitions, etc. But we must not change selectors or layout properties. We can add new declarations within existing rules? The instructions say "Only change colors, shadows, radius, transitions, gradients." Since original CSS has no color declarations, we can add them. But we must preserve existing declarations exactly: e.g., text-align (layout? Actually text-align is in the "typography/layout" maybe? It's allowed to change? The instructions say text-align is in the "NEVER CHANGE" list? Let's check: "text-align, vertical-align" are listed under layout/typography? The list: "text-align, vertical-align" in the "NEVER CHANGE" section? Actually looking at the provided "NEVER CHANGE" section: "text-align, vertical-align" appears under "Layout" bullet? Let's re-read: 

The user says:
```
📐 LAYOUT (HTML cannot adapt to changes):
  • display values...
  ...
  • text-align, vertical-align
```
And later:
```
📝 TYPOGRAPHY (font system fixed):
  • font-family
  • font-size, font-weight, font-style
  • line-height, letter-spacing, word-spacing
  • text-transform
  • white-space, word-break
```
So text-align is in layout, not to change. So we must preserve `text-align: center`. Also padding is in layout with ±20% max; we can change padding but maybe not necessary.

We need to output CSS preserving all selectors and existing declarations, but we can add new declarations. The original CSS has a media query and two rules. We can add visual properties inside these rules. Also perhaps we can add new selectors? No, "Selectors: keep EXACTLY" means we cannot add or remove selectors. We can only modify the rules that exist. But we need to "refresh this CSS visually". Since the existing rules are only about text-align and padding, maybe we can add box-shadow, background, border, etc. to those elements. But we must ensure we don't violate the fixed HTML/layout. Adding visual properties is fine.

However, the target style "horizontal-strips" and "sharp-edges" seem to apply to a larger page, but the CSS fragment is just a mobile media query. We should still apply the visual identity to the elements mentioned. We can add colors, borders, shadows, etc. to the selectors present. But we must be careful: `app-hero-section .row .col-lg-7` likely contains text; adding a background or border there might break layout? It could, but we're only adding visual properties. We need to respect the "DO NOT change layout" meaning we shouldn't change width, padding maybe can be changed within ±20%. Adding background and border may affect box-sizing? If box-sizing is border-box globally, border changes may affect layout. To avoid layout break, avoid adding border to elements that have width constraints. But the user wants "strong borders (2-3px solid)" in sharp-edges. We can add border to some elements, but we must ensure it doesn't break layout. Since we don't know the full CSS, we can add border with `box-shadow` offsets that don't affect layout, or use `outline` instead of border. The variant says "Strong borders (2-3px solid)" but we can use `outline` or `box-shadow` to simulate. Since the instructions are aggressive, we could add `border: 2px solid #...` but if the original has `box-sizing: content-box`, the element's width might increase. However, we are only allowed to change border-color and border-style, not border-width. The instructions say "border-color and border-style (NOT border-width)" can be changed. That implies we should not change border widths. But we can add border? Adding border is changing border-width from 0 to 2px, which is not allowed. So we should not add new borders to elements that didn't have borders. However, the variant suggests strong borders, but the conservative mode says only border-color and border-style may change. So if the original has no border, we cannot add one. We can use box-shadow to create offset shadows. That's allowed: box-shadow can be fully redesigned. So we can create hard offset shadows like `4px 4px 0px 0px #somecolor`. This doesn't affect layout. We can also use `outline`? The instructions say "outline styles (color, type)" can be changed, not width. Adding outline width is not allowed. So avoid adding outline.

We can change border-radius, but if original has none, adding border-radius changes visual rounding. That's allowed. We can also change background-color, color, text-shadow, filters, transitions, etc. The target style "horizontal-strips" suggests alternating background colors per strip. But within this mobile media query, we can set backgrounds on these elements. But we must be careful: `.app-hero-section .row .col-lg-7` is a column; adding a background there might be okay but maybe not desired. The user demands "Refresh this CSS visually" and target style "horizontal-strips". The fragment is within a media query for small screens. We can give the elements a cream/white background, hard shadow, etc. But we need to preserve the existing declarations. Let's parse the original CSS:

```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 output CSS with same selectors and same layout declarations. We can add additional declarations to each rule. For `text-align: center`, keep it. We can add color, background, box-shadow, border-radius, transition. But the column with text-align center might not need background. Still, we can apply a background to align with alternating strips. But if the column is full-width, a background could create a strip. However, the hero section likely has its own background; adding background to the column could create a colored strip. The user wants "horizontal strips" pattern: alternating white/cream/dark/white. We could set `.app-hero-section .row .col-lg-7` background: #f8f4ec; (cream) and maybe a hard shadow. But that would be a big visual change. Is that allowed? Yes, "background-color" is allowed. But we should think about whether the column is an inner container. If it has a background, it might affect text readability. We'll choose colors that maintain contrast.

For `.app-hero-section .badge.bg-warning`, we can change the badge's background? The class includes `bg-warning` which is a Bootstrap utility class. Changing background-color on this element might conflict with Bootstrap's `.bg-warning` CSS if loaded. But our rule can override. The instructions say we can change colors. So we can set `background-color: #ff6b35;` or something. But if the badge is warning, a fresh palette might use a different warning color. Also we can change font-size? No, font-size is typography, must remain unchanged. So keep `font-size: 0.85rem`.

For `.contact-channels-section article` and `.contact-quick-section .contact-card`, we have padding var(--space-md) !important. We can add background, box-shadow, border-radius. Since padding is layout but can be changed within ±20%. We should keep padding as var(--space-md) to preserve. We can add `background-color`, `box-shadow`, `border-radius`, `transition`, maybe `border`? But border width cannot change. Maybe these elements already have borders from base CSS; we could set border-color. But we don't know. To be safe, we can use box-shadow.

Also need to respect the "sharp-edges" variant: small border-radius (0-4px), hard offset shadows 4px 4px 0px solid color, strong borders (2-3px solid), snappy transitions 0.15s. Since border width cannot be added, use box-shadow: 4px 4px 0px 0px #333; to simulate. Border-radius: 0px or 4px. Need to set `border-radius` on elements. But if they already have border-radius from base, changing to 0 might be allowed (radius can change). So set `border-radius: 0px;` or `4px`. For badge, maybe border-radius: 4px? Bootstrap badges usually have pill shape (50rem). The original may have border-radius: 0.375rem or pill. We can change to 0 or 4px to fit sharp edges. Since border-radius is allowed to change, set `border-radius: 4px;` or `0px`. But for a badge, a pill shape is typical; changing to 0 might look odd but requested sharp edges. We can set `border-radius: 4px;` for slight rounding. Or 0 for sharp. The variant says "Small or zero border-radius (0-4px)" so 4px is fine.

Need to add transition: `transition: all 0.15s ease;` or maybe `box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;` but transform is a visual property? The "layout" says not to change transform? It is not listed, but transform can affect layout if changed. We can add hover states? We are not allowed to change pseudo-classes? Actually pseudo-classes are selectors; we cannot add or remove selectors. So we can't add `:hover` rules. But we can add transitions within existing rules. That's fine. We cannot add new selectors like `:hover`. So only transitions for elements.

Let's craft the output with these additions. But wait: The instructions in the initial task say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we must add visual properties to all elements, but we should. However, we must preserve the original declarations exactly. So we will keep `text-align: center;`, `font-size: 0.85rem;`, `padding: var(--space-md) !important;`. We can append new declarations.

Now, about the target style "horizontal-strips": It says "Full-width sections (width: 100%)" and "Alternating background colors per strip". Our selectors may not be sections. We can interpret that we should assign background colors to these elements to create strips. Let's assign:

- `.app-hero-section .row .col-lg-7`: Since hero section likely has a background, we can set it to `background-color: #faf7f2;` (cream) to alternate. But if it's a column, it may not be full-width. Better to set `background-color: transparent`? But then we don't create strips. Maybe the hero section itself is a strip. But we can't target it because the selector is fixed. We could set `background-color: #faf7f2` on the column. If the column is within a row, setting background might create a block. Let's think about the on-page layout: `.app-hero-section .row .col-lg-7` is likely a column containing hero text. Adding a background might look like a colored block. But we can use a hard shadow to frame it. That could be okay. However, "horizontal strips" usually means full-width sections alternating colors. The `.col-lg-7` is not full width (col-lg-7 is 7/12 on large, but on mobile it's full width). Since this media query is max-width 575.98px, at that size the col-lg-7 is probably width 100%. So setting a background creates a full-width strip. Good. So set `background-color: #faf7f2;` or `#fff` etc.

- `.app-hero-section .badge.bg-warning`: Set `background-color: #e85d3f;` or another strong color. Since it's warning, maybe use a bright orange/red. Let's use `#e85d3f` or `#ff4d2e`. Set `color: #fff;` for contrast. But changing color of badge text is allowed. The badge likely has text; we can change color. Also add box-shadow: `4px 4px 0px 0px #2a2e33;`. And border-radius: `4px;`.

- `.contact-channels-section article` and `.contact-quick-section .contact-card`: These are cards. Set `background-color: #ffffff;` and maybe alternate with cream? But the selector list has two elements. If both are in the same rule, they'd get the same background. Maybe we can leave as is or set `background-color: #ffffff;`. Then add box-shadow: `4px 4px 0px 0px #d9d2c5;` or `#e0d6c8`. And border-radius: `4px` or `0`. Let's use `border-radius: 4px;` for sharp edges? "Small or zero border-radius" so 4px is okay. Add transition.

But the elements already have `padding: var(--space-md) !important;`. Adding box-shadow might extend outside; no layout effect.

We need to make sure the background colors alternate per strip. Since we have two different groups: hero and contact. Maybe hero column is cream, contact cards are white, badge is dark orange, etc. The target palette says "Alternating: white / cream / dark / white pattern". So we can set:
- col-lg-7: cream (#faf7f2)
- badge: dark (#2a2e33) maybe? But badge is a small element; we can set background dark and text white. But warning badge should be a warning color (orange). The palette "strong color zones" maybe we can use orange. Let's choose a fresh palette: maybe "cream" #F5EFE6, "dark" #1E1F26, "accent" #E85D3F, "white" #FFFFFF.

We can set:
- `.app-hero-section .row .col-lg-7` background: #F5EFE6 (cream)
- `.app-hero-section .badge.bg-warning` background: #1E1F26 (dark) or #E85D3F. But the class "bg-warning" suggests it's a warning badge; changing to dark might be semantically odd. But target wants strong color zones. Maybe use #E85D3F for accent. Then add box-shadow with dark color.
- `.contact-channels-section article` background: #FFFFFF (white)
- `.contact-quick-section .contact-card` background: #FFFFFF as well? But both in same rule with same declarations. We can't differentiate between them without separate selectors. So they get the same background. That's okay.

But the pattern white/cream/dark/white would need the contact cards to be white, hero column cream. The badge dark maybe. Good.

We also need to change text color for the hero column to dark for contrast. We can set `color: #1E1F26;` on col-lg-7. For badge, `color: #fff;`.

Also, we can add `border-radius: 4px;` to all. But the badge may have `border-radius: 50rem`; changing to 4px is allowed.

Need to think about box-shadow offset: "Hard offset shadows: 4px 4px 0px solid color". In CSS, `box-shadow: 4px 4px 0px 0px #1E1F26;`. The `spread` is 0. Or use `box-shadow: 4px 4px 0px #1E1F26;` (spread defaults to 0). We'll use `4px 4px 0px 0px #1E1F26`.

For the hero column, a hard shadow might not look good if it's a full-width section. Maybe use `box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.1)`? But variant says "solid color" so use solid dark. Let's use `#D8CFC0` for a softer hard shadow. Actually "solid color" means no blur or spread? The shadow can be any color. For cream background, a dark khaki shadow: `box-shadow: 4px 4px 0px 0px #D8CFC0;` or `#C8BEB0`. We'll define.

We need to be careful about the rule with padding and `!important`. If we add `background-color` without `!important`, the base CSS might override? But our media query is at the end maybe? We don't know. We can add `!important` to our visual properties? The instructions don't forbid. But to ensure the visual refresh, we might add `background-color: ... !important;` if needed. However, we shouldn't add `!important` to layout properties. Adding to color is acceptable. But to keep clean, avoid `!important` unless necessary. The original `padding` uses `!important`, so our rule is already important for padding. For new declarations, they don't need `!important`. Since our media query comes after base CSS? It may not. But we can add `!important` to be safe. The instructions didn't say we can't. But adding `!important` could be seen as changing specificity? No, it's fine. However, to keep conservative, we can use `!important` only for visual properties because the original uses it for padding. Let's decide.

But there is a nuance: We must "Keep ALL selectors and layout exactly as-is." The selectors are