/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to output the rewritten CSS. The original CSS is a small block within @media (max-width: 575.98px). We need to keep the selectors exactly, keep layout (no changes to display, etc). The target style is vertical-flow, airy-rhythm, warm minimal palette. But the given CSS only has a few rules: text-align, font-size, padding. There are no colors, shadows, radius, transitions. So we can only adjust padding values (within ±20% of original). The original padding is var(--space-md) !important. We can change the variable value? We cannot change CSS custom property definitions? Actually we can change values of custom properties but there is no definition in this file. The var(--space-md) remains as is but we could change the padding value directly? We must preserve the selector, but we can change the padding value within ±20%. However the original uses var(--space-md). We are allowed to change "CSS custom properties (--color-*, --shadow-*) values" but not necessarily --space variables? Actually the rule says "CSS custom properties (--color-*, --shadow-*) values" – only color and shadow variables. So --space-md should remain unchanged. But we could replace the padding values with direct px within ±20%? The original value is var(--space-md). We don't know its computed value. The conservative guide: padding, margin can change ±20% maximum. Since we don't know the value, we could keep the same. But to refresh visually, we can change font-size? Typography: font-size, font-weight must remain unchanged. So we can't change font-size. text-align is layout? Actually text-align is listed under "Typography: text-align, vertical-align" that must stay unchanged. So we must keep text-align: center;.

Thus the CSS is already minimal and no visual properties to change except maybe padding. But the task says "Refresh this CSS visually" – perhaps we can add new decorative properties as long as layout is unchanged? But HTML is fixed, but we can add properties that are not currently there? The task says "Only colors, shadows, radius, transitions, gradients". Could we add box-shadow or border-radius to these selectors? But that might affect layout? Box-shadow and border-radius don't affect layout. However, applying border-radius to .contact-card could change visual shape, but that's allowed. But the original CSS block has only a media query with three rules. We can add new declarations within those rules as long as we don't break layout. But the instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can add or modify those properties. We need to output rewritten CSS. The original selectors are:

@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 must preserve the media query and selectors. We can adjust padding within ±20% but we don't know base. We can instead keep padding same. We can add border-radius, box-shadow, background, etc? But note: .contact-card likely already has a card style; adding box-shadow may be okay. However we must ensure we don't change "display, position, etc." We won't.

The target style: warm minimal off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878. But the existing colors are not specified. We can add background-color? But if we add background-color to .app-hero-section .row .col-lg-7, that might change the design too much. But it's allowed? The instruction says "Only colors, shadows, radius, transitions, gradients." So yes.

But the original media query is only for responsiveness. Usually we shouldn't add extra styling here. But the task is to refresh visually, so maybe we can add a subtle transition or shadow to contact cards. However this might be redundant with other CSS not shown. But we only have this snippet. We must replace the snippet with a visually refreshed version.

Let's inspect the original properties:
- text-align: center; is typography text-align, cannot change.
- font-size: 0.85rem; cannot change.
- padding: var(--space-md) !important; padding is layout, can change ±20%. But using var means unknown. We can replace with e.g. `padding: 2rem !important;` if --space-md is likely 1.5rem? But we don't know. Better keep var(--space-md) to preserve value. But then no visual change. We can change the padding to a new value within ±20%? Since var is unknown, maybe we can assume a standard --space-md from design systems e.g. 1.5rem. Changing to 1.8rem would be +20%. But risky. The rule says "keep similar values, ±20% maximum" so if we keep the var it's fine. To refresh, we can add border-radius etc.

I think a better approach: We are allowed to change the value of --space-md? No, only --color-* and --shadow-*. So we shouldn't. The only property we can alter is padding if we replace var with a value. But maybe we can change `padding: var(--space-md)` to `padding: calc(var(--space-md) * 1.15)`? This is within 20% and still uses variable. But that is a change to padding value. Is calc allowed? Yes, but might be overengineering.

Given the target style "airy-rhythm", we can increase padding a bit, but limit to ±20%. Let's say --space-md is probably 1.5rem or 1.25rem. We can replace with `padding: 1.8rem !important;` which is maybe 20% of 1.5. But using calc is safer: `padding: calc(var(--space-md) * 1.15) !important;` That preserves variable and increases by 15%. That is within ±20%.

Also we can add:
- `border-radius: 24px;` to .contact-card? But .contact-card might already have border-radius. Adding in media query might override with a larger radius, which is okay. But should we add to all article? The selector is `contact-channels-section article` and `.contact-quick-section .contact-card`. We can add border-radius to both.
- `box-shadow` to both: soft pillowy shadow: `0 12px 32px -8px rgba(45, 45, 45, 0.12)` etc. Use warm black.
- `transition: transform 0.25s ease, box-shadow 0.25s ease;` but that modifies transition property, not layout. However adding transition to article may be okay.
- `background-color` to off-white? If the card already has a background, we could tint it. But we don't want to override without seeing original. The target palette says off-white #faf8f3, soft black #2d2d2d, sage #87a878. We could add `background-color: #faf8f3;` to the card. But if .contact-card already has a white background, it would become off-white. That is a visual change. But we need to be careful: The HTML might rely on the background from other CSS. Adding background-color is allowed. But perhaps we shouldn't override because this media query is only for small screens; making cards off-white might affect all small screens but not larger screens. But it's fine.

We also need to maintain "ALL selectors exactly". We can't add new selectors. We can add new declarations inside existing rules. We can also add new declarations in the media query? We can add new rules? No, selectors must be exactly preserved. We cannot add new selectors. But we could add declarations to existing selectors. We can also add new rules? No, because that changes selectors.

Thus our output should have the exact same three selector blocks, with same text-align, same font-size, and same padding (perhaps adjusted via calc), plus additional visual properties.

Let's craft:

@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: calc(var(--space-md) * 1.15) !important;
        border-radius: 24px;
        background-color: #faf8f3;
        box-shadow: 0 16px 40px -12px rgba(45, 45, 45, 0.18), 0 4px 12px rgba(45, 45, 45, 0.06);
        transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
}

But wait: The original rule uses `padding: var(--space-md) !important;`. Our change to calc(*1.15) is within 20%. However, `calc(var(--space-md) * 1.15)` is valid. But if --space-md is a length, multiplication by 1.15 is allowed? In CSS, calc() multiplication is not allowed! CSS calc() does not support multiplication by a number except via division? Actually Calc() Level 3 supports + - * /? Modern browsers support `calc(var(--space-md) * 1.15)`? I think CSS calc() currently only supports + - * /? Wait, the CSS Values and Units Level 4 added multiplication/division but support is limited? As of modern browsers, `calc(100% * 1.5)` is not valid? Let's recall: Traditionally, calc() only allows + - with units, and * and / were not allowed until CSS Values 4. Most browsers don't support multiplication in calc(). Actually Chrome and Firefox do not support `*` in calc() as of 2023? Wait, I know that `calc(100% / 3)` is supported, but `calc(100% * 1.5)` is not widely supported? I think multiplication and division are not supported in CSS calc() in any browser. There are workarounds using division: `calc(var(--space-md) / 0.8695652)` to multiply by 1.15. But that's ugly. Better to keep padding as var(--space-md) and avoid layout changes. Or change directly to `1.8rem`. But we don't know base.

Maybe better to keep padding exactly `var(--space-md)` to avoid invalid CSS. The instruction says we can change padding within ±20%, but we aren't required to change every property. To ensure validity, we should keep padding as is. Then no visual change in padding, but we add other visual properties. However, the task expects a refresh, so adding shadows/radius/background/transition is enough.

But adding `padding` unchanged in output: yes. Let's consider the target style "airy-rhythm" calls for "Generous spacing (Aggressive: padding 32-56px, gap 32-48px)". But conservative mode allows ±20% max. We can't go from 1.5rem to 2rem (33%). So we should not. Maybe we can set padding to a fixed 32px if original var(--space-md) likely 24px? 32px is 33% increase. Not allowed. So better to leave padding.

Let's inspect the original CSS block: It only appears in the small screen media query. There is likely another CSS file with base styles. We are to rewrite this block. The "refresh" might involve changing the color scheme in this block? But there are no colors. Perhaps we can add `color`? No, that's typography? Color is allowed. But we need to know what element colors should be. We can add `color: #2d2d2d;` to the col-lg-7? It's a text container; adding color would set text color. But if we set `color: #2d2d2d` it might be same as body. Could do.

But careful: `.badge.bg-warning` is a warning badge, likely yellow background. We could change its color? But that might conflict with bg-warning class. We can add `background-color`? The class bg-warning from Bootstrap sets background yellow. We can override in media query, but that would affect only small screens. Not ideal.

A conservative approach: Since the original is empty of visual flair, we can add a subtle text shadow? No.

Maybe we need to only modify the properties that exist: text-align (can't change), font-size (can't change), padding (could change if we know base). Since we can't change the existing property values, there's nothing to change! But the task says "Only colors, shadows, radius, transitions, gradients." So we can add new declarations to the same selectors. So we will add to each rule additional visual properties.

Let's create a fresh visual identity:
- For `.app-hero-section .row .col-lg-7`, maybe add `text-shadow`? But text-shadow is a visual property. But adding text-shadow to a hero section could be nice. However, text-shadow might make text look weird. Maybe add `color`? If it already has a color, overriding might change. But we can add `color: #2d2d2d;` maybe.
- For `.badge.bg-warning`, we can change `background-color`? But class bg-warning has Bootstrap default. We can override with sage accent? But a warning badge should be yellow/terracotta. The palette has terracotta #c47b5a. We can set `background-color: #c47b5a;` and `color: #faf8f3;` to make it a terracotta badge. But "warning" semantically suggests yellow/orange; terracotta is close. This would refresh the look. But note the badge text size is 0.85rem; we keep that. Add `border-radius: 999px;` for pill shape.
- For `.contact-channels-section article` and `.contact-quick-section .contact-card`, add background-color, border-radius, box-shadow, transition. That seems good.

But the instruction says "Keep ALL selectors exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can add these.

Let's ensure no layout changes:
- `border-radius`: okay.
- `box-shadow`: okay.
- `background-color`: okay.
- `color`: okay.
- `text-shadow`: okay.
- `transition`: okay.
- `backdrop-filter`: okay but not needed.

We should not change `padding`, so keep var(--space-md) !important. Maybe we can modify `padding` via a CSS variable? No.

Let's produce an output that preserves the original selectors and existing declarations exactly, and adds new declarations.

However, the output should be only the rewritten CSS. The selector blocks must be identical in structure. We can format similarly.

Let's decide on the exact values:
- Background off-white: #faf8f3
- Soft black: #2d2d2d
- Sage: #87a878
- Terracotta: #c47b5a

For the hero col:
```
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #2d2d2d;
    text-shadow: 0 2px 20px rgba(250, 248, 243, 0.6);
}
```
But text-shadow on a container affects all text. Maybe use a soft shadow that blends with background. Could be nice. Or add `animation`? Not needed.

For badge:
```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #c47b5a;
    color: #faf8f3;
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(196, 123, 90, 0.5);
}
```
But background-color + color changes the badge appearance. Is that allowed? Yes. But note: `.bg-warning` in Bootstrap sets `--bs-badge-bg`? Actually Bootstrap uses `.bg-warning { background-color: #ffc107 !important; }`. Our `background-color` without !important won't override the `.bg-warning` class if Bootstrap loads after? CSS order matters. Bootstrap likely loads first, then this CSS file loads after, so our rule will override since same specificity? `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning`, so it wins regardless of order. Good.

For contact cards:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #faf8f3;
    border-radius: 24px;
    box-shadow: 0 16px 40px -12px rgba(45, 45, 45, 0.12), 0 4px 16px rgba(45, 45, 45, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
```
Should we add a border? Border-color allowed, but border-style may be allowed? We should not set border-width, but we could add a border with a color and style using existing border-width? If no border-width exists in base, adding `border: 1px solid...` would set border-width, which is forbidden? The rule says "border-color and border-style (NOT border-width)" are allowed to change. But we can add border-style/color if there is no border-width? Setting `border: 1px solid color` includes border-width, not allowed. We could do `border-color: rgba(...); border-style: solid;` but if there is no border-width, it won't show. So avoid.

Maybe add a subtle outline? `outline: 1px solid rgba(45,45,45,0.05);` But again outline width? We cannot