/* ============================================================
   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 CSS only, rewritten visual identity preserving selectors and layout. Need inspect original CSS: it's a media query block with three rules. We can change colors, shadows, radius, transitions, gradients. But original has no colors etc mostly font-size and padding. Need preserve layout and typography values? It says font-size, font-weight, line-height unchanged. Original font-size 0.85rem must remain. Padding can vary ±20%, "padding: var(--space-md) !important;" keep similar, maybe can change value? We can adjust to var? Need probably preserve variable usage? We can maybe alter to padding with same var? Need output only CSS.

Need use target style vertical-flow and gradient-rich. But the CSS is only a responsive block. We can add visual properties within existing rules? We must preserve selectors, can add properties. There is no background etc. We can enhance with gradients, shadows, transitions, border-radius, etc. However original selectors target .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can introduce color, background, border, box-shadow, transition. But need be careful: .app-hero-section .row .col-lg-7 text-align center; cannot change text-align? It says text-align is typography? Actually in layout? It says text-align, vertical-align under typography? Let's see "📐 LAYOUT ... text-align, vertical-align" under typography? Actually list includes text-align under typography: "font-family..." and "text-align, vertical-align" in 📐? Wait list: "📐 LAYOUT (HTML cannot adapt to changes): display, position, grid... width, height, padding, margin... gap... justify-content... float... z-index... box-sizing... visibility... aspect-ratio... object-fit... object-position, text-align, vertical-align" Yes cannot change. So keep text-align.

Need likely output exactly same three rules plus added declarations within scope? We can add background, color, border-radius, box-shadow, transition, background gradients, border gradients perhaps. But "border-width cannot change" and "border-style not width" can change. Need preserve layout. Padding can vary ±20%. Original has !important for padding, must maintain.

Need selectors exact. Media query exact. Need maybe include font-size unchanged. Add color? The badge has class bg-warning; Its background via Bootstrap likely. We can override background with gradient. Need selectors.

Need maybe include "vertical-flow" style: single column, large vertical gaps? Can't change layout? We can add margin? But only within existing selectors. Could add margin-bottom etc. But careful. Original has no margin. Need conservative. Maybe not.

Need "gradient-rich" with multiple stops, gradients on most backgrounds. We can transform these small components.

Let's craft 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;
        color: #2d2d2d;
        background: linear-gradient(135deg, #f0e6d8 0%, #e3c9a9 50%, #c47b5a 100%);
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(196, 123, 90, 0.25);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border: 1px solid rgba(45,45,45,0.08);
        border-image: linear-gradient(135deg, rgba(135,168,120,0.4), rgba(196,123,90,0.4)) 1;
        background: linear-gradient(145deg, rgba(250,248,243,0.94), rgba(255,255,255,0.72));
        border-radius: 20px;
        box-shadow: 8px 8px 24px rgba(45,45,45,0.06), -4px -4px 12px rgba(255,255,255,0.7);
        transition: background 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), border-radius 0.5s cubic-bezier(0.22,1,0.36,1);
    }
}

But wait border-image and border-radius conflict? A border-image with border-radius doesn't work with border-radius; border-image prevents radius? Actually border-radius applies but border-image overrides border? Need maybe use background gradient for border? Another technique: use border: 1px solid; border-image: linear-gradient(...) 1; border-radius may not clip border-image. We can accept. Or use background with gradient border via padding-box/border-box plus border: 1px solid transparent; background: linear-gradient(white,white) padding-box, linear-gradient(...) border-box; border-radius works. This changes border-style but not width. Could set border: 1px solid transparent; border-image not with radius. Better use "border: 1px solid rgba(...)"; background gradient. Need "gradient borders via border-image" from target style? It says gradient-rich effect variant includes "Gradient borders via border-image" as general, but not mandatory? It's in variant. Could use border-image plus no border-radius maybe; but radius included. We can use background-origin with border-box too. Let's evaluate.

Original selector includes .contact-channels-section article and .contact-quick-section .contact-card. They may already have border? Unknown. Adding border 1px may affect layout slightly. But border-width unchanged? It says "border-color and border-style (NOT border-width)" can change. Adding a border where none existed could change layout, but in box-sizing maybe? Usually risk. But can use box-shadow as border. To be safest, avoid adding border-width? Yet effect variant wants gradient borders. But conservative mode says only border-color/style can change, not width. Adding border width 1px would change layout, not allowed. We can use outline? Outline doesn't affect layout. Could use outline: 1px solid? But "outline styles" can change, but adding? Hmm. Need avoid layout changes. Use box-shadow for ring. It doesn't affect layout. But target says gradient borders; maybe use background gradient within existing padding no border. Use `outline: 1px solid rgba(...); outline-offset`? Outline is visual not layout? Yes outline doesn't affect layout. But "outline styles" allowed. Could set `outline: 1px solid transparent;`? But maybe no.

Need maybe use `background` gradients. The `.badge.bg-warning` Bootstrap background is important? It uses `.bg-warning` with `background-color: #ffc107 !important`? Bootstrap likely uses `!important` on background-color. Need override with `background: linear-gradient(...) !important;` or since class `.bg-warning` likely `.bg-warning{--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}` so our background without important may not override. Need add `!important`? Since original CSS might be after Bootstrap? If saishi.css loaded after, could override without important if specificity? `.app-hero-section .badge.bg-warning` specificity (0,3,0) higher than `.bg-warning` (0,1,0), with !important on background-color? Important declarations outrank specificity. To override Bootstrap important, we need `background: ... !important;`. But the rule currently has no important. We can add important for visual property. Does that violate? No. But target says "preserve all selectors", not properties. Could add.

But output "same layout" maybe adding `!important` on background okay. The original had font-size no important; adding background important is okay.

Need perhaps maintain padding from `var(--space-md) !important` exactly. We can leave.

Need maybe include all original declarations unchanged. We can add after them.

Need maybe if selector group `.contact-channels-section article, .contact-quick-section .contact-card` and add `background` etc. Good.

Need maybe include `-webkit-backdrop-filter`? Not needed.

Need maybe for vertical flow, maybe add margin to the card: `.contact-quick-section .contact-card { margin-bottom: 48px; }`? But layout change? It says margin can vary similar ±20%; adding margin can affect layout. Better not. We need preserve layout. "Vertical-flow" layout pattern is "Aggressive only" target style? It says "Layout pattern (Aggressive only)" but we're conservative mode? At top: "🛡️ CONSERVATIVE MODE" and also "🎨 TARGET STYLE: vertical-flow" with "Layout pattern (Aggressive only)" weird. Need reconcile: We are in conservative mode, so cannot change layout. We can apply color/effects only. So don't add vertical gaps or max-width.

Need maybe use color palette: off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a. We'll use.

Need maybe include @media unchanged. The original has only one media query. Need output exactly no markdown.

Need think about border-image issue with border-radius. We can use background-gradient border technique:
```
background:
  linear-gradient(145deg, #faf8f3, #fff) padding-box,
  linear-gradient(135deg, #87a878, #c47b5a) border-box;
border: 1px solid transparent;
border-radius: 20px;
```
But adding border width 1px affects layout maybe but if box-sizing: border-box? Not guaranteed. It's a small change. But conservative says border-width not change; adding a border from none to 1px is changing border-width. Not allowed. Could use `outline: 1px solid rgba(196,123,90,0.3); outline-offset: -1px;` as border effect no layout. But gradient outline not possible. Could use multiple box-shadows to create border (inset 0 0 0 1px rgba(...)) no layout. That's okay. Use box-shadow ring and gradient background.

Maybe "Gradient borders via border-image" from effect variant conflicts with conservative. We can approximate with background gradients and box-shadow. The task says "Gradient borders via border-image" in effect variant but original "Layout pattern (Aggressive only)" indicates maybe target styles include aggressive features but we're conservative? Hmm.

Let's re-read user prompt:
Mode: 🛡️ CONSERVATIVE (HTML fixed, visual changes only)
Request ID...
🎨 TARGET STYLE: vertical-flow
Layout pattern (Aggressive only):
  • Single column layout...
  • Large vertical gaps...
  • Narrow content max-width...
Color palette...
✨ EFFECT VARIANT: gradient-rich
...
Original CSS...
Task: Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients.
Output...

So the layout pattern is labeled "Aggressive only" likely a note that those layout changes are only if in aggressive mode, but current mode conservative. So ignore layout patterns. Use colors/effects.

Need maybe produce more dramatic visually with gradients and long transitions. We can add hover states? But selectors must preserve; pseudo-classes are allowed? It says selector lists and pseudo-classes should preserve? Actually "Pseudo-classes (:hover, :focus, ::before, ::after)" under never change selectors. We can add new selectors? "keep ALL selectors exactly" means probably don't add new selectors. But pseudo-classes as separate selectors? If we add `.badge:hover`, it's new selector not original. So avoid. We can add transition only, not hover.

Need maybe use existing selectors and add box-shadow. No hover.

Need maybe add `color` to badge soft black. Add `text-shadow`? The badge maybe text; add subtle text-shadow. Need text-shadow allowed. But with gradient background, text-shadow may help. Use `text-shadow: 0 1px 8px rgba(255,255,255,0.4);` maybe.

Need maybe for `.contact-channels-section article` add `color: #2d2d2d` maybe. But for `.contact-card` link cards? Could not.

Need maybe with background gradient on article and card. But if article has existing background? Unknown. Adding background may not be desired but task says refresh. Fine.

Need maybe add `backdrop-filter: blur(8px)`? This could be visual, but if background no transparency, no need. But could. It says filter/backdrop-filter can change. Could use `backdrop-filter: blur(12px);` but might be unsupported/performance. Use subtle.

Need maybe use `transition` with all smooth.

Need perhaps include `--bs-bg-opacity`? No.

Need be cautious with `!important` appearances. Original only padding has !important, font-size no. We should preserve padding important. For background to override Bootstrap, we can set `background: linear-gradient(...) !important;`. But if adding `!important`, original no important but okay. This can override.

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

Need think about `border-radius` on `.app-hero-section .badge.bg-warning`. Existing Bootstrap badge has pill? If class `rounded-pill` maybe. Adding `border-radius: 999px` okay. But maybe original not. Fine. This changes visual only.

Need perhaps use `box-shadow` in badge: It may already have none. Add.

Need maybe use a gradient border via `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5)` and `inset 0 0 0 1px rgba(45,45,45,0.08)`? Actually to create border ring, use `box-shadow: 0 0 0 1px rgba(45,45,45,0.06), ...`. But 0 0 0 1px no blur ring, no layout. Fine.

Need maybe can use `outline: 1px solid rgba(196,123,90,0.4); outline-offset: -1px;` but outline doesn't affect layout but could be rectangular with radius? outline follows border-radius in modern browsers? `outline` follows border-radius? Yes in modern browsers. But gradient outline not possible. Use `border`? Eh.

Need maybe effect variant wants "Long transitions (0.4-0.6s cubic-bezier)" Use 0.5s cubic-bezier(0.22,1,0.36,1). Good.

Need maybe think of `background` on `.contact-channels-section article` with semi-transparent gradient. If article is inside a page with off-white bg, okay. If cards are already light, good.

Need maybe include `background-color` fallback before gradient? Since using `background` shorthand, okay. For robust, add `background-color: #faf8f3;` but shorthand overrides. Could include as fallback. Need maybe use `background-image`? But "gradients" allowed. Use `background: linear-gradient(...)` shorthand. Good.

Need maybe use `border-radius: 24px` for vertical-flow; maybe with soft corners. `border-radius: 16px`? Need "visual rounding only." We can set 22px.

Need maybe with target "gradient-rich" "Multiple stops" use gradients with multiple stop colors:
```
background:
  radial-gradient(circle at 10% 20%, rgba(135,168,120,0.22), transparent 42%),
  linear-gradient(145deg, #faf8f3 0%, #fff 40%, #f4ede3 100%);
```
This creates rich gradient. Need be careful if card has no background maybe. Use.

For badge:
```
background:
  radial-gradient(circle at 80% 20%, rgba(255,255,255,0.5), transparent 40%),
  linear-gradient(135deg, #c47b5a 0%, #d99a72 45%, #87a878 100%) !important;
```
Actually badge accent maybe terracotta to sage. But with text soft black, okay. The palette includes sage and terracotta; maybe one accent. Use terracotta as main.

Maybe add color: `#2d2d2d`, font-size unchanged.

Need maybe if `.badge.bg-warning` background is Bootstrap warning yellow. We're overriding with gradient. If we want color palette, yes.

Need maybe keep `.app-hero-section .row .col-lg-7` text-align center, perhaps add `color`? The hero text maybe? But adding color to container may affect child headings? It can cascade. But maybe not needed. Could add `color: #2d2d2d;` maybe if paragraph colors? But might change. Target palette soft black; okay. But original no color, adding color to container could alter all text. Might be acceptable but maybe too broad. Use only on the three targeted elements. The col container might have p, h1, etc. Adding color there may be okay. But to be conservative, leave minimal. But task says "All color values" maybe we need replace, but if original no colors, we can add. Adding color to `.app-hero-section .row .col-lg-7` could set text color to soft black globally. Might be good. Could add `color: #2d2d2d;` and maybe `text-shadow`? No.

Need maybe not add color to container because it might inherit and override elements with their own colors. But cascade can be okay. Better no.

Need maybe add to `.contact-channels-section article` and `.contact-quick-section .contact-card` color same.

Need maybe "The HTML is FIXED — only colors, shadows, and decorative properties may change." It doesn't say we must add to every rule