/* ============================================================
   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 CSS only. Need refresh. Need inspect original CSS fragment includes media query with rules. Need change colors etc but keep selectors, layout. Original has text-align center, font-size, padding. Those are layout/typography? Padding within ±20? Padding var(--space-md) !important. We can maybe adjust? Conservative says padding margin similar. But colors etc. There are no colors. Need insert maybe visual properties? We cannot add new properties? It says visual identity without changing layout. We can add colors, shadows, radius, transitions, gradients maybe to existing selectors? But must preserve selectors and layout. Need likely rewrite CSS adding visual properties to these selectors, perhaps change font-size? No typography fixed. text-align fixed. We can add background gradients? But selectors are for responsive. Need probably refresh with gradients and colors in relevant classes. However if HTML fixed and only these rules exist, changing visual identity means modify existing color values, add background etc? Since original has none. Need output same selectors, perhaps add visual properties. But self-check: Every selector preserved. display etc unchanged? We can add color properties not layout. Need maybe target style vertical-flow, gradient-rich. The original CSS is a media query fragment. We need rewrite this CSS: likely keep media query conditions, selectors. For .app-hero-section .row .col-lg-7 text-align center (must unchanged). .badge.bg-warning font-size unchanged? Could add background gradient/color. Contact cards padding unchanged? Could add background, border, border-radius, box-shadow, transition. Need not alter text-align/font-size/padding. Need output with same selectors. Need ensure no markdown.

We need possibly add visual custom properties? Since no root. Could add properties to selectors. But selectors fixed, and only these blocks. Need create richer visual. Let's carefully craft.

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

We need keep all selectors and layout exactly. But could we add something to .app-hero-section .row .col-lg-7? If text-align center, maybe add color? But hero text maybe. We can add background gradient? Not sure. Need not break. Maybe set color? But unknown original colors. Conservative mode says all color values changed. Since none, add? The task wants visual change. We can add only visual declarations, no layout. We can set color and text-shadow perhaps. But text-align fixed. Adding text-shadow might affect but visual only. For .badge.bg-warning, font-size fixed, add background: linear-gradient, color, border, box-shadow maybe. For contact cards, padding fixed, maybe add background gradient, border, border-radius, box-shadow, transition. Need not change padding.

Need consider preserving padding with !important. We can keep same line. Add declarations inside. All good.

Need maintain maybe CSS variables? We could add --space? no.

Let's design gradient-rich warm minimal. Off-white #faf8f3, soft black #2d2d2d, sage/terracotta. Need maybe use rgba. On mobile.

- Hero col-lg-7: text-align center; color: #2d2d2d; text-shadow: 0 1px 0 rgba(250,248,243,0.6); maybe background? If we set background on column, could be okay but might affect layout? No layout. But hero section maybe. Perhaps not add background because unknown. Maybe just color and text-shadow.

- Badge: font-size 0.85rem; display? Can't change display. Add background: linear-gradient(135deg, #c47b5a, #a8603f); color: #faf8f3; border: 1px solid rgba(196,123,90,0.35); border-radius: 999px; box-shadow: 0 6px 18px rgba(196,123,90,0.25), 0 1px 2px rgba(45,45,45,0.1); transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); but transform is animation-layout? It could affect but okay? Better avoid transform. Transition allowed but if no hover, not necessary. But we can add transition on box-shadow filter? Avoid transform because layout? Visual only. But transform can be considered visual, but not needed. Don't add.

- Contact cards: padding: var(--space-md) !important; need keep. Add background: linear-gradient(145deg, rgba(250,248,243,0.92), rgba(135,168,120,0.12)); border: 1px solid rgba(135,168,120,0.35); border-radius: 20px; box-shadow: 0 8px 24px rgba(45,45,45,0.06), 0 2px 6px rgba(45,45,45,0.04); backdrop-filter: blur(8px); transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1); But note backdrop-filter could affect? Visual. Fine. However adding property to both combined selectors. Need avoid using same selector with multiple? It's allowed.

Potential issue: .contact-cards likely existing styles elsewhere. This media query should override only padding. If we add background/box-shadow on mobile, may override existing desktop styles, but in media query. That is okay? It's visual. But if we add background, could conflict with original? The task is to refresh entire file fragment, but maybe there are other selectors outside. We only see fragment, so we should probably only modify what is here. Since no color values to change, adding visual declarations is necessary. But maybe the "original CSS" is only this media query, and we need rewrite. Could be a test to ensure constraints. We can add properties but shouldn't add selectors. Fine.

Need "vertical-flow" target. Can apply to hero col? Maybe not. We cannot change layout. Need "single column layout", "flex-direction: column", "large vertical gaps", "narrow content max-width centered" but cannot change layout. We could add max-width? That is layout, forbidden. Could add width? no. We must not. So target only "gradient-rich" effects. The style prompt says vertical-flow (Aggressive only) but our mode is conservative, so we cannot implement aggressive layout. We can use palette and gradients.

Need maybe include CSS variables? No.

Need output exactly with all new declarations. Let's think of each selector:

1. .app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #2d2d2d;
    text-shadow: 0 1px 0 rgba(250,248,243,0.65);
}

But text-shadow maybe not desired. Could use background? No. If original text color from elsewhere, adding color could refresh. It might not be expected. But no color values in original, so must add colors. We can add "background: linear-gradient(180deg, rgba(250,248,243,0) 0%, rgba(250,248,243,0.5) 100%)" but that would create overlay over hero column, weird. Maybe better not. Since target style "gradient-rich on most backgrounds"; but no element has background. Could add a radial gradient to the badge background. Contact cards background gradient. For hero column, perhaps set a low-key gradient text? There is no background. Could set background: linear-gradient(135deg, rgba(135,168,120,0.12), rgba(196,123,90,0.08)); but maybe too much.

Given mobile hero section center text, maybe a soft gradient behind the column could be okay: "background: radial-gradient(circle at 50% 0%, rgba(135,168,120,0.15), rgba(250,248,243,0) 70%);" This won't alter layout but changes visual background. If column already has a background from elsewhere, this overrides maybe. But in a media query, the user attempted to override; fine. But it could introduce a big background in hero. Is that within "visual"? yes. Need maybe border-radius? A column with background would need padding to contain; but padding on column might change layout? We can't add padding? Actually padding is layout and existing padding maybe. We shouldn't add padding because would change spacing. Could add border-radius only if background visible. But without padding, background edge to edge. Could be acceptable? Hmm.

Maybe better keep hero text only color/text-shadow, because changing background on the col may be too broad. But target gradient-rich: we can use background-clip text? That's visual and doesn't change layout. Could set color: transparent? But color is visual. Use background: linear-gradient(135deg, #2d2d2d, #87a878); -webkit-background-clip: text; background-clip: text; color: transparent; on heading? Wait selector .app-hero-section .row .col-lg-7 is column, not heading. It contains many elements; setting color transparent would affect all text? If background-clip text only on column, all text will use background gradient of column, but background properties on column will paint entire column; perhaps hidden text? Not good.

Maybe don't overcomplicate; just add color and text-shadow. "Gradient-rich" on contact cards and badge enough.

Need maybe include @media line unchanged. Good.

Need think about output formatting: Ensure first character = first CSS character. No markdown fences. Use proper indentation. Should we include only changed rules? Yes.

Need maybe preserve "!important" exactly on padding. Should we add "!important" to any new visual property? Not necessary.

Let's craft robust CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2d2d;
        text-shadow: 0 1px 0 rgba(250, 248, 243, 0.6);
        background: radial-gradient(circle at 50% 0%, rgba(135, 168, 120, 0.12), rgba(250, 248, 243, 0) 72%);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #faf8f3;
        background: linear-gradient(135deg, #c47b5a 0%, #d89b7a 45%, #a8603f 100%);
        border: 1px solid rgba(196, 123, 90, 0.35);
        border-radius: 999px;
        box-shadow: 0 10px 24px -8px rgba(196, 123, 90, 0.45), 0 2px 4px rgba(45, 45, 45, 0.08);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s 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, rgba(250, 248, 243, 0.96) 0%, rgba(250, 248, 243, 0.82) 50%, rgba(135, 168, 120, 0.14) 100%);
        border: 1px solid rgba(135, 168, 120, 0.32);
        border-radius: 22px;
        box-shadow: 0 16px 40px -12px rgba(45, 45, 45, 0.08), 0 4px 12px rgba(45, 45, 45, 0.04);
        backdrop-filter: blur(10px);
        transition: background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need decide if adding background to hero is okay. It's a column, background gradient from transparent to subtle. It changes visual, okay. But maybe there is already a background on .app-hero-section. If this rule applies to col-lg-7, it might create a box. The hero section might have two columns, so col-lg-7 background gradient in mobile full width. Fine.

But "vertical-flow" maybe would want not many columns; but mobile is single column.

Need maybe include a border-image gradient? The task says "Gradient borders via border-image" but border-image with border-radius doesn't work? We can use border-image only if border-style and border-width. But border-width likely has from existing? We can set `border-image: linear-gradient(135deg, rgba(...), rgba(...)) 1;` but border-image no radius. With border-radius, border-image is ignored? Actually border-image overrides border-style and may not respect border-radius. Better not.

Need maybe use border: 1px solid for cards and badge. That's gradient-ish? no.

Need maybe use `outline` with `outline-offset`? Could add. But not necessary. No values changed. Could add `outline: 1px solid rgba(135,168,120,0.2); outline-offset: -1px;` to cards. Visual only. But may conflict. Hmm.

Need maybe change `border-radius` to visual identity. Good.

Need perhaps add `box-shadow` on hero col? It might create weird. Better not.

Need avoid `backdrop-filter` because it may be considered not supported but visual. Fine.

Potential issue: If we set color for .badge.bg-warning, bootstrap bg-warning normally has dark text. We override with background gradient and color. Good.

Need maybe account for `.badge.bg-warning` font-size: 0.85rem; background gradient with `background` shorthand will override any existing `background-color`. Good.

Need perhaps add `background-size` for gradient? Not needed.

Need verify no layout properties in new declarations: color, text-shadow, background, border, border-radius, box-shadow, transition, backdrop-filter. All allowed.

Need check selector list preservation:
- `.app-hero-section .row .col-lg-7` exact.
- `.app-hero-section .badge.bg-warning` exact.
- `.contact-channels-section article, .contact-quick-section .contact-card` exact.
Good.

Need check padding: exactly `var(--space-md) !important;` yes.
font-size: 0.85rem; yes.
text-align: center; yes.

Need maybe keep media query breakpoints exact. `@media (max-width: 575.98px)` yes.

Need maybe use no semicolon after last declaration? We'll include semicolon.

Need maybe include no leading/trailing. The instruction "Only the rewritten CSS" means output entire media query. We'll not include comments.

Need perhaps use `border-color` style? We use `border: 1px solid rgba(...)`. This changes border-style? It sets border-width 1px and style solid. Is border-width change? Original had no border width. Setting width 1px is a new border, but border-width is not in forbidden? It says "border-color and border-style (NOT border-width)" meaning base rule: "Never change border-width"? Actually in forbidden list "border-color and border-style (NOT border-width)" It says colors/shadow may change, border-color and border-style may change, border-width cannot change? More precisely in "must change" list includes "border-color and border-style (NOT border-width)": The values in parentheses clarify that border-width is not to change. So we should not set border width? But adding border where none existed is changing border-width from 0 to 1. Is that allowed? Hmm. It says "border-color and border-style (NOT border-width)" meaning if a rule has border-width, don't change it. But adding a border to an element with no border changes layout? Border adds to box size unless box-sizing border-box, but changes layout potentially. Since box-sizing may be border-box, but still. We should avoid adding border if originally no border, to be safe. But target style says gradient borders via border-image? That requires border. But conservative mode emphasizes no layout changes. Border width could alter layout, so we shouldn't add border widths. Instead use box-shadow or outline (outline doesn't affect layout). We can use `outline: 1px solid ...` and `outline-offset`. Outline doesn't affect layout. Or use `box-shadow` for border-like ring. Also border-radius works with background, box-shadow.

So maybe we should not add `border` declarations. We can instead use `box-shadow: 0 0 0 1px rgba(...) inset, ...` for border effect. This doesn't affect layout. But if element already has border, nothing. Use inset ring via box-shadow. For badge, use `box-shadow: inset 0 0 0 1px rgba(...), 0 ...`. This is visual only, doesn't affect layout.

Need re-evaluate. Original CSS has no border. Adding border could affect layout because border-box? Not sure. To be safe, avoid border. Use box-shadow ring. However, border-radius only matters if background or box-shadow. Fine.

Need maybe not set `border-image` because requires border. Use `box-shadow` instead.

Need also avoid `backdrop-filter` maybe okay.

Need maybe box-shadow with inset doesn't affect layout. Great. Let's use.

For hero col background: adding background may not alter layout, but background may clip? fine. Could include `background` only. Setting background to column might create a background behind text. It won't affect layout. But if original `.col-lg-7` had no background, okay. Could also set `background: radial-gradient...`. However, applying background to column could override any parent background visible. Fine.

Could avoid background on hero col and just use text-shadow. But "gradient-rich on most backgrounds" could be achieved by background on card and badge. Need enough.

Need maybe add `background: linear-gradient(135deg, rgba(135,168,120,0.16), rgba(196,123,90,0.10))` to hero col. Let's consider if text color is white? If hero text is white, setting color #2d2d2d might break. But we don't know. Original CSS had no color, so maybe text color from existing component. Adding color could be bad. Conservative sees "refresh visual identity" but we shouldn't override unknown original colors? But "All color values must change" implies we need change existing colors, but none in fragment. In absence, perhaps not add text color. We can add `text-shadow` based on original color? Hmm. Should not add a color that conflicts. But to make changes, we could add `color: inherit`? No.

Maybe we should not add `color` to hero or badge? But need palette. Badge definitely can override background, but color of text should be readable. Use white. That's fine.

For hero col text, if original color from elsewhere, text-shadow may still be okay. But if original text is white, text-shadow off-white may not be visible. If original text is dark, okay. Could use `text-shadow: 0 1px 0 rgba(250,248,243,0.6)` as a subtle bevel. That won't affect color. Better not set color to avoid conflict. But "color values changed" maybe need at least one color. Badge and cards cover.

Need ensure no "layout" properties. Could use `background`, `box-shadow`, `border-radius`, `transition`, `text-shadow`, `color`. All safe.

Need perhaps add `filter: drop-shadow()`? It can be visual but may affect containing? But box-shadow enough.

Need maybe "vertical-flow" target in effects? Not possible. We can maybe add `background: linear-gradient(...)` to cards with more vertical gradient.

Let's craft final with no border (or maybe outline? outline doesn't affect layout but can be added; but outline is in allowed list "outline styles (color, type)" and we can add outline? It doesn't affect layout. Could use outline on contact cards? Maybe.

Let's choose:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(circle at 50% 0%, rgba(135, 168, 120, 0.16), rgba(250, 248, 243, 0) 72%);
        text-shadow: 0 1px 0 rgba(250, 248, 243, 0.55);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #faf8f3;
        background: linear-gradient(135deg, #d89b7a 0%, #c47b5a 45%, #a8603f 100%);
        border-radius: 999px;
        box-shadow: 0 8px 20px -6px rgba(196, 123, 90, 0.4), 0 2px 6px rgba(45, 45, 45, 0.08), inset 0 0 0 1px rgba(250, 248, 243, 0.14);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s 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, rgba(250, 248, 243, 0.96) 0%, rgba(250, 248, 243, 0.82) 50%, rgba(135, 168, 120, 0.14) 100%);
        border-radius: 22px;
        box-shadow: 0 16px 40px -12px rgba(45, 45, 45, 0.08), 0 4px 12px rgba(45, 45, 45, 0.04), inset 0 0 0 1px rgba(135, 168, 120, 0.22);
        backdrop-filter: blur(10px);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need consider `transition: background` with gradient won't animate smoothly perhaps but fine. Could use `background-color` but gradient is background-image; transition may not work. But visual only.

Need maybe include `-webkit-backdrop-filter`? Could add for compat. But no need.

Need perhaps use color palette "sage #87a878 or terracotta #c47b5a". We have both. Off-white #faf8f3, soft black #2d2d2d. Good.

Need perhaps include `background-size`? not needed.

Need perhaps use `border-radius` on badge and cards. Good.

Need maybe avoid `backdrop-filter` because it requires the element to have transparent background. Since background is opaque, blur won't be visible. But it's okay. Could set background semi-transparent for backdrop to be visible: linear-gradient with alpha. We use rgba with 0.96, so backdrop-filter not visible. Maybe not needed. Could remove or lower alpha. But target gradient-rich. For cards, background near opaque is fine. If we want backdrop-filter to matter, use rgba 0.7. But readability? Fine. Let's set card background with alpha 0.7 maybe? If background behind cards is varied, visible. But original maybe no background behind. Hmm.

Maybe use `background: linear-gradient(145deg, rgba(250,248,243,0.9), rgba(250,248,243,0.7) 55%, rgba(135,168,120,0.18))`. This is still readable. But if underlying content is white, no matter. Good.

Need maybe not include `text-shadow` on hero col because if parent has transformed text? It's visual only.

Need perhaps include `color: #2d2d2d;` on contact cards? Original text color may be inherited. Could add for consistency. But if card text has its own color, irrelevant. Maybe set `color: #2d2d2d` on hero col? It could override. Better avoid unnecessary.

Need maybe add `accent-color`? no relevant.

Need maybe add `caret-color` to inputs? none.

Need maybe use `transition: background-color` in badge; but we set `background` shorthand, not background-color. If transition on background doesn't work, maybe use `background-color` not enough. Could use `filter` transition? Not needed. We can set `transition: box-shadow 0.5s ...` only. But effect variant wants smooth long transitions, so include some.

Need maybe include `transition: all`? Not good. Use list.

Need maybe include `filter: saturate(1.05)`? Not necessary.

Need think of output self-check. It says "Colors throughout file replaced with fresh palette" – in original none. We're adding. "Shadows redesigned" – yes. "Border-radius adjusted" – yes.

Potential issue: `background` on the hero column might affect "layout" visually, but allowed. But since column is a grid item, background doesn't affect layout. Good.

Potential issue: `border-radius` on `.badge.bg-warning` maybe bootstrap badge has border-radius. Fine.

Need maybe choose `box-shadow` split with `--shadow-*` variables? Could replace values with variables? But variables not defined. No.

Need maybe preserve the exact `@media (max-width: 575.98px)` and braces. Good.

Need maybe maintain spacing/indentation. Fine.

Need maybe include original comment? no.

Need maybe no extra blank lines? Could include blank lines between rules. Fine.

Need ensure final output is valid CSS. Let's write.

But let's think if adding `backdrop-filter` counts