/* ============================================================
   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 answer must rewrite CSS visually. Need preserve selectors/layout. Given only media query block #块2/2? File saishi.css. Need refresh visual identity. Need output only CSS. Need maybe include entire CSS? User provided only a snippet under "ORIGINAL CSS" perhaps only this block. Need rewrite these rules with visual changes only. But target style horizontal-strips and gradient-rich. However CSS snippet only media query with three rules. Need maybe no layout changes. We can adjust colors? There are no colors in snippet aside from font-size/padding/text-align. We can change? Font-size is typography cannot change. Padding allowed ±20%. Need visual identity: maybe add background? But selectors are fixed. Could change padding values within 20%? The original:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 { text-align: center; }
    .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
Cannot change text-align (layout). Cannot change font-size. Could modify padding within ±20%: var(--space-md) is CSS var; can alter? CSS custom property values allowed only --color/--shadow? Actually spec says CSS custom properties (--color-*, --shadow-*) values may change. --space-md not allowed. But can we replace padding: var(--space-md) with calc? is changing padding but within ±20%. Need know --space-md likely 1rem? Maybe unknown. We can use maybe padding: calc(var(--space-md) * 0.9) !important; But that changes using var and within. Or leave same. Need visual refresh: can add background gradients? But that would be visual property on element, but adding property not in original is allowed? It says refresh visual identity; layout structure unchanged. Adding background probably okay. But selectors must be preserved. Need maybe adjust colors: we can add `background` to .app-hero-section .row .col-lg-7? But that might affect layout? no. Yet target horizontal strips? Not relevant. Maybe use gradient-rich. But we need be careful with pseudo? none.

Maybe there is more original CSS missing? The instruction says "File: assets/css/saishi.css#块2/2" maybe only second block. We should rewrite this block only. Need output "ONLY rewritten CSS preserving all selectors and layout exactly." Need no markdown. We can add visual properties within existing selectors. But perhaps should not add new declarations? It says refresh visually; can add. But self-check asks every selector preserved, colors replaced. No colors in original, but we can add colors to satisfy.

Need maybe produce CSS with same media query and selectors, with visual additions. Since no existing colors, need create fresh palette. But changing font-size and text-align not allowed. Padding can change. Could add border-radius, background, box-shadow, transition. But .col-lg-7 is a column; adding box-shadow or background may alter visual. The target style horizontal-strips maybe "full-width sections" but this selector is inside hero. We can set `background: linear-gradient(...)` maybe. But need ensure don't break. Since media query for small screens, we could make the hero column have a gradient background, rounded, padding? But padding is from original? original doesn't have padding for that selector. Add padding? Not maybe. Need not overdo.

Let's inspect original context though not given. Could be from a CSS file' second chunk. The exact request "File: assets/css/saishi.css#块2/2" maybe need rewrite entire file's chunk 2? But "ORIGINAL CSS" appears only this snippet. Maybe they expect only this snippet. We can only output rewritten snippet.

Need maybe change `padding: var(--space-md) !important` to `padding: calc(var(--space-md) * 0.9) !important` and include `border-radius`, `background`, `box-shadow`. But cannot know layout? Let's see.

Need preserve selectors exactly:
- @media (max-width: 575.98px) { ... }
- .app-hero-section .row .col-lg-7
- .app-hero-section .badge.bg-warning
- .contact-channels-section article,
  .contact-quick-section .contact-card

Pseudo none.

Could add `transition` to `.badge` or `.contact-card`; but if no state, no effect? Could still be okay.

Need target style gradient-rich: use linear-gradient on backgrounds, gradient borders maybe via border-image. But border-image may affect layout? border-width unchanged. Need border-style? We can add border: 1px solid transparent? That changes width? No if added border? border-width is not allowed to change? They said "border-color and border-style (NOT border-width)" so cannot add border if it introduces border-width. Unless using outline? Outline-width? They said outline styles (color, type) not width? Original none. Maybe avoid adding borders that change layout.

Could use `background-clip: padding-box`, `box-shadow` to simulate gradient border. But "border-radius" allowed. Hmm.

Maybe we can add `background: linear-gradient(135deg, ...)` to elements. Also `box-shadow` layers. Need be careful with `.contact-channels-section article` and `.contact-quick-section .contact-card` (cards) - could add background and border-radius and box-shadow. Since original cards likely have maybe backgrounds? We can override.

Let's craft short CSS:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,249,238,0.6) 100%);
        border-radius: 1.25rem;
        box-shadow: 0 0.75rem 2rem -1rem rgba(214, 158, 46, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        box-shadow: 0 0.35rem 0.9rem -0.35rem rgba(245, 158, 11, 0.55);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        background: linear-gradient(145deg, #fffdf7, #fef3e2);
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1.5rem -0.65rem rgba(120, 72, 16, 0.18), inset 0 1px 0 rgba(255,255,255,0.8);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease;
    }
}
```
Need preserve `.badge.bg-warning` background? Bootstrap's bg-warning would set background-color. Adding background gradient should override due same rule? yes.

But maybe background on `.col-lg-7` may be undesirable; but visual. The condition only media query. Could use `background` with `background-clip` no.

Need maybe "horizontal-strips" target style: Full-width sections. But not applicable. Maybe we can create "strip" by adding `background: linear-gradient(90deg, ...)`? Actually horizontal strips pattern in CSS could be repeating-linear-gradient? But effect variant gradient-rich. We can add `background: linear-gradient(to right, #fff, #fdf3e7, #fff)` maybe.

But the section `.app-hero-section .row .col-lg-7` is not full width? On small col likely. We could give a horizontal gradient strip. But original no background; adding could make hero content look like strip. Let's consider.

Need ensure no markdown no explanations. Final just CSS. But we should perhaps not add comments.

Need maybe want every color value replaced? There are none. We can add. Could also use custom properties? no.

Let's think of constraints: "CONSERVATIVE MODE: HTML fixed, visual changes only" and "target style horizontal-strips" maybe they want a full CSS rewrite of the entire file, but the provided original is only block. In tasks, they normally give an entire file. Here the original is a small media query. Maybe the file has more; "File: assets/css/saishi.css#块2/2" indicates 2 chunks, and this is block 2/2. The original CSS only is block 2. So output only block 2.

Need maybe preserve all selectors and layout exactly. Our added `font-size` unchanged, `text-align` unchanged. Padding changed from var(--space-md) to calc(var(--space-md) * 0.9). Is that within ±20%? Multiply by 0.9 = 90%, yes. But if --space-md is custom property, okay. Yet note `padding` is layout but allowed ±20%. This qualifies. `!important` preserve.

Need maybe change `background` of `.badge.bg-warning`: But `.badge` might have padding etc. Adding gradient can alter visual. Fine.

Need maybe update `transition` with cubic-bezier duration 0.45s/0.5s within 0.4-0.6. Good.

Could maybe use `backdrop-filter`? no.

Need maybe set `accent-color`, `caret-color`? no.

Need maybe add `outline`? no.

Need maybe add `background-image`? okay.

Need maybe add `filter`? maybe don't.

Need consider "Gradient borders via border-image" not used. Could use `border-image` on cards? But adding border-image with border-width? If border with no width, no visible. Could use `outline`? no.

Could use `box-shadow` as border effect:
`box-shadow: 0 0 0 1px rgba(...) inset, ...` This doesn't change layout, creates border. Good. Add `background-clip: padding-box` not necessary. `box-shadow` allowed.

Let's create a coherent palette: warm cream/gold vs dark? Target "horizontal-strips" alternating white/cream/dark/white. On small mobile, maybe the contact cards should be dark? But original likely light theme. Could set `.contact-channels-section article` dark? That would be dramatic. But maybe not appropriate. Need visual identity "horizontal-strips" with alternating backgrounds. But these are individual cards; could use cream. Maybe in a section strip, the cards themselves? Hmm.

Because this is only one media query, if we change to dark, mobile only but desktop unaffected, inconsistency. Better only use subtle visual refresh.

Need maybe set `.app-hero-section .row .col-lg-7` background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,244,220,0.7) 50%, rgba(255,255,255,0) 100%); This is horizontal strip-like. But could cause content on a pill shape. Maybe okay.

Let's read phrase "Layout pattern (Aggressive only): Full-width sections, Each strip with distinct padding, Alternating background colors per strip." It's target style; maybe they want apply to full CSS, not necessarily this block. Since original only has media query, we can't create full-width sections. Maybe maybe there is another file missing? Hmm.

Maybe the correct output should be exactly original with some color changes, but if none, maybe we need "nothing to change"? But task says output rewritten CSS. Could include same CSS (as no colors). But they require change visual identity. So add colors.

Maybe we can write a more extensive rewrite adding CSS variables? But this is media query block. We can add `:root`? That would be new selector not in original; not allowed? Selectors must be preserved exactly, but can we add new selectors? "Every selector character-for-character preserved?" Means likely no new selectors. So no :root. Need keep same selectors.

Could use existing custom properties? The original uses var(--space-md). We can perhaps define `--space-md`? no.

Need maybe not add properties that rely on unknown. But adding `background` is okay.

Let's refine CSS.

Potential final:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 244, 214, 0.65) 100%);
        border-radius: 1.25rem;
        box-shadow: 0 1rem 2.5rem -1.25rem rgba(180, 120, 20, 0.2);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f59e0b 55%, #d97706);
        box-shadow: 0 0.4rem 1rem -0.4rem rgba(245, 158, 11, 0.6);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        background: linear-gradient(145deg, #fffdf6 0%, #fef1dc 55%, #fde9cf 100%);
        border-radius: 1.1rem;
        box-shadow: 0 0.75rem 2rem -0.75rem rgba(146, 91, 12, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(210, 150, 60, 0.12);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Need decide whether adding transform transition to badge is okay? It doesn't change layout but transition-only property no effect. Could omit transform. But effect variant smooth transitions. Fine.

Maybe need use `@media (max-width: 575.98px)` same. Good.

But wait, `padding: calc(var(--space-md) * 0.9) !important;` if `--space-md` is in `rem`? probably. If custom property is a unitless? no. This is okay.

Could maybe use `border-radius: 1rem` on `.badge`? not allowed? radius allowed. But maybe badge pill should remain? We shouldn't change to 1rem maybe. But original no border-radius. We can add? Might make badge non-pill; okay. Maybe not add.

Need maybe preserve `background` of `.badge.bg-warning` because bootstrap's `.bg-warning` sets `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` Actually Bootstrap background utility uses `background-color` not `background`, and `!important`. To override, need use `background: linear-gradient(...) !important;` or `background-color` with !important. CSS `background` longhand may not override `background-color` with `!important` if same specificity and order? In the same stylesheet? Bootstrap earlier maybe. Our rule `.app-hero-section .badge.bg-warning` specificity (0,3,0?) vs `.bg-warning` (0,1,0). If both `!important`, higher specificity wins. So our `background: linear-gradient(...)` without `!important` will still set background-image and maybe background-color? `background` shorthand resets color. But due Bootstrap background-color !important, since our shorthand not !important, the color may remain? Actually declaration conflict at longhand level: Bootstrap `background-color` !important vs our shorthand's background-color component (!important? no). Important declarations override normal. So our shorthand's background-color normal loses; but background-image normal can still apply. But if `background-color` remains important, gradient will be over backgroundColor? background-image draws over background-color unless transparent. If gradient has opaque colors, it covers. But if gradient has transparent at some stops, background color may show. Our gradient mostly opaque. Fine. Better add `!important` to background maybe. But original selector had no property; we can add `background: linear-gradient(...) !important;` to override. However adding `!important` is fine.

Similarly `.contact-channels-section article` may have existing background; our background without !important may lose to existing if existing !important? Usually not. But to be safe add `!important`? But visual only. Could. However original `.contact-channels-section article` maybe from layout had no background. Adding !important okay.

Need not change `font-size`; still 0.85rem. Good.

Let's consider if adding `box-shadow` on `.col-lg-7` could make the column look like a card. Maybe okay. But if `.row` has negative margins and the column has full width, box-shadow maybe clipped by overflow? Could be. But not catastrophic.

Should we make `.app-hero-section .row .col-lg-7` a gradient "horizontal strip" with `background: linear-gradient(90deg, #fff8f0, #fff1df, #fff8f0);` instead of vertical? Target horizontal-st