/* ============================================================
   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;
    }
}

The user wants me to rewrite a small CSS snippet for a media query, following conservative mode rules. Let me analyze what I have.

The original CSS:
```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;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

Wait, there's a conflict. The instructions say I must only change visual properties (colors, shadows, radius, transitions, gradients). But the original CSS here only has `text-align`, `font-size`, and `padding`. Those are layout/typography properties that I'm NOT allowed to change. Hmm.

Actually, let me reconsider. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

The original CSS has:
1. `text-align: center;` — this is a typography/layout property that must stay unchanged. Also, it's in the "NEVER CHANGE" list: "text-align, vertical-align" are listed under layout that must not be changed.
2. `font-size: 0.85rem;` — font-size must stay unchanged.
3. `padding: var(--space-md) !important;` — padding must stay within ±20%.

So actually, there's nothing to change in this CSS? Hmm. But the task is asking me to refresh it. Since the properties are all in the "never change" category, technically I should output the CSS unchanged? But that feels like a trick.

Wait, let me reconsider. The instructions say "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." This suggests I should try to inject some visual changes. But I'm not allowed to change these specific properties.

Let me look more carefully. The properties present:
- `text-align: center;` — typography/layout, cannot change.
- `font-size: 0.85rem;` — typography, cannot change.
- `padding: var(--space-md) !important;` — spacing, can change within ±20%.

There are no colors, shadows, radius, transitions, gradients in this snippet. So logically, the correct conservative output would be the exact same CSS. But the user explicitly says "Previous attempt didn't change enough" — maybe they want me to ADD visual properties? But that would be changing the CSS structure, adding new declarations. Is adding new declarations allowed? The instructions say "never change" certain things; adding new declarations that don't affect layout might be permitted. But they also say "Only change colors, shadows, radius, transitions, gradients."

Hmm, but adding `box-shadow`, `border-radius`, `background-color` etc. to these selectors would change layout? No, they wouldn't necessarily change layout... box-shadow doesn't affect layout. border-radius doesn't affect layout. background-color doesn't affect layout. transition doesn't affect layout. So I could add those.

But wait, the constraint says "Keep ALL selectors and layout exactly as-is." Adding new declarations is not changing selectors or layout. It is adding visual properties. That seems aligned with the mission: "Refresh the visual identity WITHOUT changing layout structure or class names."

But is it appropriate to add properties that weren't there? The instructions say "Only change colors, shadows, radius, transitions, gradients." Adding them counts as changing them (from nothing to something). I think that's acceptable.

However, there's a risk: adding `padding` changes would affect layout. Better to leave padding as-is or adjust within ±20%. The original uses `var(--space-md)` which is a CSS custom property. I can't change the value since it references a variable; I could change it to a different value, but I don't know what `--space-md` resolves to. Better to keep it.

Let me think about what a "visual refresh" would look like here while adhering to constraints:

Target style: vertical-flow, warm minimal (#faf8f3, #2d2d2d, sage #87a878 or terracotta #c47b5a) — but wait, these are described as "Aggressive only" modes. The mode is conservative. So I shouldn't radically change layout. The color palette though could inform the visual additions.

Effect variant: tight-rhythm — compact spacing, small border-radius (2-6px), subtle shadows or none, information-dense.

So for this media query (mobile, max-width 575.98px), I could add:
- A subtle box-shadow to the hero section? But the selectors are `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, and `.contact-channels-section article, .contact-quick-section .contact-card`.
- Border-radius to cards.
- Transition on hover? But this is a media query for mobile; transitions might be irrelevant, but still visual.

But wait — adding properties that aren't in the original might be considered "changing" the CSS in a way that wasn't requested. The user said "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That is a directive to change those properties. If a rule has none of those properties, then strictly there is nothing to change. But that would make the output identical to input, which the user explicitly complained about ("Previous attempt didn't change enough").

So the reasonable interpretation: the user wants the CSS to look visually different after this transformation. Since the existing declarations are protected, I need to introduce visual changes through properties that are explicitly allowed (colors, shadows, radius, transitions, gradients). I can add new declarations to existing rules, or... hmm.

Actually, let me reconsider whether I can change the existing values:
- `text-align: center;` — this is text-align. It's in the "NEVER CHANGE" list. Cannot change.
- `font-size: 0.85rem;` — font-size cannot change.
- `padding: var(--space-md) !important;` — padding can change within ±20%. But since it's a var reference, I don't know its value. Changing `var(--space-md)` to something else might alter layout. However, if I keep the same var, it's not a change. I could keep it.

So the only way to make the output visually distinct is to add new declarations. Let me think about which allowed properties could be added meaningfully:

1. `.app-hero-section .row .col-lg-7` — this is the hero text column on mobile. I could add `text-shadow` (allowed). But text-shadow on a text column? Could be subtle. Maybe not appropriate. I could add a `background` gradient? That would affect the column background — allowed. But would it look good? Maybe not.

2. `.app-hero-section .badge.bg-warning` — a badge. Yellow warning badge. I could add `box-shadow`, `border-radius`, `transition`. The badge already has `bg-warning` from Bootstrap, so it's yellow. Adding a subtle shadow and small radius would fit "tight-rhythm small border-radius."

3. `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards. I can add `border-radius`, `box-shadow`, `background-color`, `transition`. These are contact cards; adding a subtle background and shadow would be a visual refresh.

But wait, adding `background-color` to cards — would that change layout? No, background doesn't affect layout. Border-radius doesn't affect layout. Box-shadow doesn't affect layout. Transition doesn't affect layout. So it's safe.

However, I need to be careful: the selectors are in a media query for mobile. On mobile, cards might already have backgrounds from Bootstrap or the CSS file that uses these components elsewhere. Adding these properties in the media query would override at mobile sizes. That's fine.

Let me also consider: should I keep the original declarations exactly? Yes:
- `text-align: center;` stays.
- `font-size: 0.85rem;` stays.
- `padding: var(--space-md) !important;` stays.

Then add new visual declarations:

For `.app-hero-section .badge.bg-warning`:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(45, 45, 45, 0.08);
}
```

For contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 6px;
    background-color: #faf8f3;
    box-shadow: 0 1px 3px rgba(45, 45, 45, 0.06);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
```

Hmm, but is adding background-color to cards okay? It could conflict with existing styles if the cards already have a background. But since I'm in conservative mode and the user wants a fresh palette, I think it's okay. Still, to minimize risk, maybe I should not add background-color if it's not clearly an improvement. But the user wants "MORE distinct" changes.

Wait, actually — let me re-read the instructions more carefully.

"⚠️ Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

This implies the previous output was too similar to input. The user wants a noticeable visual change. So I should add some of these visual properties.

Also, the "TARGET STYLE" and "EFFECT VARIANT" sections provide guidance. The target style is "vertical-flow" but that's marked "Aggressive only" — since mode is conservative, I shouldn't apply layout changes. But I can take the color palette: warm minimal off-white #faf8f3, soft black #2d2d2d, sage #87a878 or terracotta #c47b5a.

The effect variant "tight-rhythm" says compact spacing (8-16px), small border-radius (2-6px), subtle shadows or none, information-dense. That's a visual style I can apply to shadows and radius.

So my plan:
- Keep all original declarations.
- Add small border-radius (2-6px) to badge and contact cards.
- Add subtle box-shadow to badge and contact cards.
- Add transition to contact cards for subtle interactivity.
- Maybe add a subtle background tint using the warm off-white palette, and a border? Border-color is allowed to change; adding a border would affect layout (because border-width > 0 adds to element size unless box-sizing: border-box). Bootstrap typically uses border-box, so adding a 1px border wouldn't change layout. But to be safe, I might avoid adding borders or use `box-shadow` to simulate a border (like `box-shadow: inset 0 0 0 1px rgba(...)`).

Actually, `box-shadow: inset 0 0 0 1px` is a nice way to add a border without affecting layout (since it's a shadow, not a border). That's a good technique for conservative visual changes.

Let me also think about the hero section column `.app-hero-section .row .col-lg-7`. It only has `text-align: center`. I could add a `text-shadow` — but text-shadow on centered hero text at mobile might be undesirable. Maybe not. Or I could add `color` — changing text color to soft black #2d2d2d? That might be too broad but it's allowed (color values can change). However, changing text color could affect readability. Bootstrap's default body color is often #212529. Changing to #2d2d2d is similar. Hmm, but I don't know the existing color. Adding `color: #2d2d2d` would set it explicitly — that's a color change, allowed. But is it wise? It might override a more specific style unintentionally.

Alternatively, I could leave that rule as-is since text-align can't change and there's nothing visual to alter. But the user might complain again that not enough changed. Hmm.

Let me reconsider: maybe I can change `text-align`? No, it's explicitly in the never-change list. Absolutely not.

Can I change `font-size`? No, font-size is in the never-change list.

Can I change `padding`? Yes, within ±20%. `var(--space-md)` — I don't know its value. Typically `--space-md` might be something like 1rem or 1.5rem. If I keep it as `var(--space-md)` it's not a change. If I change it to a literal value, I risk breaking the design if the variable is themed. Better keep it.

So the only possible changes to existing declarations: none, basically. So all my changes must be additions.

Is adding declarations consistent with "Only change colors, shadows, radius, transitions, gradients"? Yes — adding a box-shadow or border-radius is "changing" them in the sense that they go from unspecified to specified. I think that's the intended interpretation. The mission is "Refresh the visual identity WITHOUT changing layout structure or class names." Adding non-layout visual properties accomplishes that.

Let me craft the output.

Original:
```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;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

Rewritten:
```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;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(45, 45, 45, 0.12);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 6px;
        background-color: rgba(250, 248, 243, 0.6);
        box-shadow: 0 1px 2px rgba(45, 45, 45, 0.04), 0 2px 8px rgba(196, 123, 90, 0.06);
        transition: box-shadow 0.25s ease, background-color 0.25s ease;
    }
}
```

Wait, but the `.app-hero-section .row .col-lg-7` still has nothing changed. Is that a problem? The user said "Previous attempt didn't change enough." Maybe I should add something there too. What could I add to a text column without affecting layout?

- `color` — but I don't know existing color; overriding could be risky but it's a visual change.
- `text-shadow` — a soft shadow. On mobile hero text, maybe a subtle text shadow could look nice. But text-shadow on large hero headings might look blurry. Hmm.
- `background` — adding a background to the column would be a visual change but might look weird.
- `caret-color` — irrelevant for a text column.
- `accent-color` — irrelevant.
- `transition` — for what? Nothing interactive.

Honestly, adding visual properties to `.app-hero-section .row .col-lg-7` is awkward. But to satisfy the "change enough" requirement, I could add a subtle `color` declaration. Let me check if color is allowed: yes, "All color values: background, color, border-color, fill, stroke, outline-color" — color is allowed. So I could set `color: #2d2d2d;`. That's a fresh palette color (soft black). It's a reasonable visual refresh.

But wait — would setting `color: #2d2d2d` on the hero column override Bootstrap's heading colors etc.? Inline text within the column would inherit the color. It's a mobile-only media query. It's a subtle, safe change — from default (usually dark) to soft black. I think it's fine.

Alternatively, I could add `text-shadow: 0 1px 2px rgba(45, 45, 45, 0.06);` — a very subtle text shadow. But text-shadow on body text can reduce readability. I'd rather avoid text-shadow on the hero text unless it's a heading. Hmm.

Let me think about what would be most visually distinct while safe:

Option A for hero column:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #2d2d2d;
    text-shadow: 0 1px 0 rgba(250, 248, 243, 0.8);
}
```
The text-shadow here acts as a subtle emboss — maybe not necessary.

Option B: leave it as-is. The instructions say "Only change colors, shadows, radius, transitions, gradients." If there's nothing allowed to change, leaving as-is is technically correct. But the user explicitly wants more changes. I think adding `color` is defensible.

Actually, let me reconsider. The "TARGET STYLE" says warm minimal, and the hero section is the most prominent part. Setting its text color to soft black #2d2d2d aligns with the palette. I'll add that.

For the badge: Bootstrap's `.bg-warning` is yellow (#ffc107). I could override the background to a more warm/muted tone? That would be a color change, allowed. But `.bg-warning` is a Bootstrap utility; overriding its background in a media query might be unexpected. However, the user said "Use a fresh palette." The target palette mentions terracotta #c47b5a. I could change the badge background to terracotta? But the class is `bg-warning` — if I change its