/* ============================================================
   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 respond to user. They provided "File: assets/css/saishi.css#块2/2" etc. Need rewrite CSS visually, but original CSS is only a small media query with three rules. We need preserve selectors exactly, layout properties unchanged. We can add properties? Important: CSS output only. Need refresh visual identity. 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;
    }
}

Need change colors, shadows, radius, transitions, gradients, etc. But original only has text-align, font-size, padding. We can add visual properties within same selectors, because not changing layout? Need be careful adding maybe not affect layout? padding is layout but "keep similar values, ±20% maximum". We can keep padding. Need preserve @media condition. We can add background, border-radius, box-shadow, transition, etc. Need use fresh palette asymmetric-blocks gradient-rich. Need likely exact selector lists preserved. Need output rewritten CSS only.

But maybe this file block 2/2 only including this media query. Need maybe include only given rules? Must preserve all selectors. We can augment. Need perhaps change padding value to something within ±20%, but original uses var(--space-md) unknown. Keep same. Maybe add gradient backgrounds and border radius. Need selectors: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article` and `.contact-quick-section .contact-card`.

Need not change text-align / font-size? It's typography system fixed: font-size, line-height, letter-spacing, text-transform, text-align? Wait text-align is layout? In prohibited list, text-align, vertical-align listed? Actually "📐 LAYOUT" includes text-align? Let's see: it says display, position, grid etc, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align. Indeed text-align is layout but can keep. Need preserve.

Need change visual identity. Since original CSS has only layout/typography-ish properties, to "change colors" we need add color, background, border, etc. Should be okay.

Need be mindful "No markdown fences, no explanations". We should output CSS directly.

Need maybe comments? They said no AI-REWRITTEN comments. Could have no comments.

Need decide style. Let's create fresh palette: maybe deep indigo, coral, teal? Need target asymmetric-blocks + gradient-rich. We can use gradients. Keep @media. For `.app-hero-section .row .col-lg-7` maybe background gradient? But this is a column, adding background might affect. But allowed visual. However would it be too much? In mobile hero, centered content. We can add background: linear-gradient(135deg, rgba(...), rgba(...)); border-radius; box-shadow; transition. But if col-lg-7 has text, background maybe okay. We can do.

`.app-hero-section .badge.bg-warning`: font-size unchanged. We can add gradient background, border, etc. But `.badge.bg-warning` likely Bootstrap; adding background could override? We'll add fresh gradient. Need maybe background-color.

`.contact-channels-section article, .contact-quick-section .contact-card`: padding unchanged. Add background, border, border-radius, box-shadow, transition. But note `.contact-channels-section article` and `.contact-quick-section .contact-card` could be cards. Good.

Need maybe preserve `!important` for padding. Add visual properties maybe with !important? Not necessary. Need maybe use CSS custom properties? Original uses var(--space-md). Could define new properties? Better no, because variables may exist from main file; but output can define custom properties? If define `:root`, that's extra selector not in original, violates "All selectors preserved"? It says "ONLY rewrite CSS preserving ALL selectors" likely no new selectors. So don't add `:root`. Use direct values or var. But maybe use existing var? We can use existing `--space-md`. For colors, maybe define custom properties? Can't add selectors. Could use var(--something), but might resolve if not defined. Better use direct colors.

Need ensure no unsupported "border-image" weird. We can use gradients.

Need likely add transition timing 0.5s cubic-bezier. Could add for all.

Let's craft.

Original media query:
@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;
    }
}

Need maybe combine selectors? We can add to each block. We can reformat CSS. Keep the selector lists exactly? For third block, comma-separated list must remain exact. "Selector lists (commas)" never change. So keep.

Potential issue: If we add `background` to `.app-hero-section .row .col-lg-7` in media query, it applies within mobile only. Good.

Need think about "asymmetric-blocks" target style in this media query. The original doesn't include grid; adding flex? No. But we can visually create blocks with gradient backgrounds, distinct border radii, shadows. We don't need layout asymmetry.

Need maybe include "border-image: linear-gradient(...) 1;"? That requires border-style: solid; maybe. But could override Bootstrap border? We can use `border: 2px solid transparent;`? Wait border-width is prohibited? It says "border-color and border-style (NOT border-width)" should not change border-width. But original has no border. If we add `border: 2px solid`, that introduces border-width, but not "change" since original no border? The instruction says "border-color and border-style (NOT border-width)" likely we can set border-color/style but not width. We can use `border-style: solid; border-color: ...` and if no width, default medium maybe affects layout. Better avoid border or use `outline`? But outline width also maybe? It says outline styles (color, type) allowed, not outline-width. Need not add widths. Use `background`, `box-shadow` to create border-like effects.

Could use `box-shadow: 0 0 0 1px rgba(...), ...` which is visually border but no border-width. Good.

Need change border-radius. Fine.

Need perhaps text-shadow on `.app-hero-section .row .col-lg-7`? Could add. But text-align center remains.

Need maybe `background-clip: padding-box`? Not necessary.

Let's pick palette:
- Hero column background: linear-gradient(145deg, #1f1c2c 0%, #928dab 100%)? That might be too dark. Better fresh: "deep teal to violet" maybe.
- Badge: warm coral/amber gradient.
- Contact cards: alternating? Can't use nth-child because selector would change? We can use same for all.

Need use "gradient-rich" - multiple stops:
- `linear-gradient(135deg, #2b1e54 0%, #3b3486 35%, #6d5dfc 100%)`
- Badge: `linear-gradient(120deg, #ff8a5c 0%, #ff4d6d 50%, #ff8a5c 100%)`
- Cards: `linear-gradient(145deg, rgba(255,255,255,0.99) 0%, #fdf4e3 50%, #ffedd5 100%)`
But need "each section different background" maybe.

Need ensure high contrast borders via shadows:
- Hero column: `box-shadow: 0 18px 40px rgba(45, 20, 90, 0.28), 0 0 0 1px rgba(109, 93, 252, 0.25) inset; border-radius: 28px 12px 28px 12px;`
- Badge: `box-shadow: 0 6px 18px rgba(255, 77, 109, 0.35), 0 0 0 1px rgba(255,255,255,0.28) inset; border-radius: 999px;`
- Cards: `box-shadow: 0 24px 48px rgba(30, 20, 80, 0.18), 0 0 0 1px rgba(255, 77, 109, 0.08); border-radius: 24px 8px 24px 8px;`

Need transition. Original likely no transition. Add `transition: background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);` but transform is layout? transform isn't layout? It's visual, okay. But adding transform might move element if hover? No transition doesn't move unless transform on hover. We don't have hover. But could add transition on transform even if not used. Fine. However `transition` may override existing? no existing. Fine.

Need perhaps `backdrop-filter`? Could add if backgrounds transparent. But no need.

Need maybe use `background-color` in addition to gradient? Use `background: linear-gradient(...)` shorthand, okay.

Need perhaps preserve `font-size: 0.85rem;` exactly? We can keep. Maybe add `line-height`? No, typography fixed. Don't change.

Need ensure no markdown.

Let's write final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(30, 27, 75, 0.98) 0%, rgba(72, 52, 148, 0.94) 45%, rgba(122, 81, 224, 0.9) 100%);
        border-radius: 28px 12px 28px 12px;
        box-shadow: 0 20px 45px rgba(30, 20, 90, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        transition: background 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(120deg, #ff6b35 0%, #ff2e63 50%, #ff6b35 100%);
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(255, 46, 99, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
        transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #fff7ed 45%, #ffedd5 100%);
        border-radius: 18px 6px 18px 6px;
        box-shadow: 0 18px 40px rgba(60, 30, 90, 0.14), 0 0 0 1px rgba(255, 46, 99, 0.08);
        transition: background 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need check "background" shorthand: first uses rgba background on col, might cover text? We set text-shadow, but dark background and original text color unknown, maybe white? Could be okay. But if text is dark, poor contrast. This is a "fresh palette" maybe dark. Need not worry? But visually could break text visibility. Maybe should use lighter gradient so dark text remains. Better use light gradient? But target style "Bold contrasting blocks: each section different background" maybe high contrast. If hero section originally maybe has a light background with dark text; adding dark gradient may make dark text invisible. But badge bg-warning means originally yellow with dark text. We might want keep text dark? We can use warm gradient light. But "different background" and "gradient-rich". Could choose hero column to be light translucent to avoid text contrast risk. But "Bold contrasting blocks" could be dark. Need know original? No. We should be cautious: colors on a column might be background, text color likely inherited. If we make it dark, unknown. The safest visual change is use gradients with transparency/semi-light colors and rely on text color. But to be bold, perhaps dark. However "text can be fixed", but colors may be from original stylesheet. We don't know. We should avoid making text invisible. Maybe use dark overlay? But no.

Maybe use `background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 247, 237, 0.96) 45%, rgba(255, 237, 213, 0.98) 100%);` for hero column, plus colorful shadow. Then text stays dark. The visual identity from cards can be warm. Need "asymmetric blocks" maybe different color blocks. Could make badge gradient coral. Cards maybe cool purple/white. We can diversify.

Let's see original selectors:
- `.app-hero-section .row .col-lg-7` is likely a column inside hero. The hero section might have dark background image; column might not have background. Adding a light gradient could create a "glass card". Good.
- `.badge.bg-warning` likely yellow badge, dark text. If we change background to coral/red, text maybe dark or white. Bootstrap badge warning has dark text? In Bootstrap, `.text-warning`? Actually `.bg-warning` has `color: #000`? In Bootstrap 5, `.bg-warning` sets background-color, not color. So text color remains inherited maybe dark. A red/coral background with dark text could be okay but not high contrast. We could use a warm yellow-to-orange gradient and dark text. But target palette fresh. Better choose a light amber gradient? But the target style says bold. We can use `linear-gradient(120deg, #ffd166 0%, #ff9f1c 50%, #ff9770 100%)` and box-shadow, dark text okay. Since original `.bg-warning` is yellow; making it warm orange/amber is distinct. Let's do that. Maybe include `color: #1f1c2c`? Wait color is typography? Actually color allowed to change. "All color values: color" yes. Could set color to dark brown for contrast. But if badge text originally black, no issue. We can set `color: #2b1e54`? But then text on orange maybe okay. However "font-size" unchanged, color can change. Should we add `color`? Yes, but if original text color is inherited, adding explicit color changes visual. Fine. Let's set `color: #2d1b00`? But might be too low contrast on orange with small text. Use dark plum `#2b1e54`. On orange, good. But the badge may contain icons or text. Good.

- `.contact-channels-section article, .contact-quick-section .contact-card` likely cards with text. We can set background to light with subtle gradient; keep text colors. Good.

Need maybe include `background-color` fallback? Not necessary but maybe for older browsers. Use `background: linear-gradient(...)`; if unsupported, no background. Could include `background-color` before? But shorthand sets background-image only; no background-color. We can do `background-color: ...; background-image: linear-gradient(...)`? More robust. Use `background: linear-gradient(...)` is okay. But "background" CSS property in shorthand can also reset background-color to initial? Actually if using `background: linear-gradient(...)`, it resets to transparent? Let's recall: `background` shorthand with background-image sets background-color to initial transparent if not specified. Good. Could use `background-color` plus `background-image` to have fallback. But no need.

Need "Change all color values", original CSS has no color values except variable in padding. But we can add colors. Good.