/* ============================================================
   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 rewrite the given CSS with visual changes only. The original CSS is a media query block for max-width 575.98px. It contains:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` - text-align is in the "never change" list? Actually text-align is listed under "Typography" as unchanged? Let's check: "text-align, vertical-align" are in the "NEVER CHANGE" category? Yes, under layout/typography: `text-align, vertical-align` are in the "NEVER CHANGE" list. So we cannot change text-align. We must preserve it.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` - font-size is never change. So we cannot change font-size.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` - padding is allowed to change within ±20%? The instruction says "padding, margin (keep similar values, ±20% maximum)". The original padding uses a CSS variable `var(--space-md)`. We could change the value but we don't know what --space-md is. Since it's a var, we cannot modify the variable definition here? We can change the padding value to a different size, but must be within ±20% of the original calculated value. But we don't know the actual computed value. In conservative mode, we probably should preserve the padding value exactly because it's using a variable that is defined elsewhere, and changing it might break layout. The instruction says "keep similar values, ±20% maximum". If we don't know the value, safest is to leave as is. But we must "Refresh this CSS visually" meaning we need to change something. However, we are only allowed to change colors, shadows, radius, transitions, gradients, etc. The original CSS doesn't have any colors, shadows, radius, transitions, or gradients. It only has text-align, font-size, and padding. These are all in the "never change" or "limited change" categories.

Wait, there may be additional CSS in the file that we haven't seen? The prompt says "File: assets/css/saishi.css#块2/2" and "Original CSS:" is just that media query block. So we only have this block to rewrite. But we can't change any of the properties that are present. How can we refresh visually? Possibly by adding new declarations? But the instruction says "preserving ALL selectors and layout exactly" and "Only change colors, shadows, radius, transitions, gradients." Since there are no such properties in the original block, we could add visual properties that don't alter layout. For example, we could add `background-color`, `box-shadow`, `border-radius`, `transition`, etc. to the selected elements. But would that be considered "rewriting" the CSS? The output must contain the same selectors and the same existing declarations? The instruction says "Keep ALL selectors and layout exactly as-is." It doesn't say we must keep all existing declarations exactly. It says "Only change colors, shadows, radius, transitions, gradients." We can add new properties as long as they don't affect layout. For example, adding `box-shadow` to `.app-hero-section .badge.bg-warning` would be a visual change. But we need to be careful: adding `padding` would change layout, adding `font-size` would change typography, adding `text-align` would change layout. Adding `background` would be okay. Adding `border-radius` would be okay. Adding `transition` would be okay.

But the original block is inside a media query for small screens. Adding visual properties there is acceptable.

Also, the target style is "symmetric-grid" and effect variant "tight-rhythm". The original CSS doesn't have grid. But we can apply small border-radius, subtle shadows, and compact spacing? Can't change spacing. We can adjust shadows to be subtle, radius to be small (2-6px). We can add colors.

Let's examine each selector:

1. `.app-hero-section .row .col-lg-7` – This is a column inside a hero section. On small screens, it's centered. We could add a subtle background or border-radius? But adding background to a column might affect visual identity. We could add `box-shadow: none`? That's not adding. We could add `border-radius: 0.25rem`? But that might look weird. Maybe better to leave this rule unchanged? But the instruction says refresh visual identity. We need to change something. Since we cannot change text-align, perhaps we can add `color`? But color would affect text color, which is a visual change. The original rule only sets text-align. We can add `color` to it, but that might be unexpected. However, we are allowed to change colors. So we can add `color: #...` to the selector. But we need to preserve the original property `text-align: center;` exactly. So output would include both `text-align: center;` and a new `color` declaration. Is that allowed? Yes, because we're adding a color property.

2. `.app-hero-section .badge.bg-warning` – This sets font-size. We can add background-color, color, border-radius, box-shadow, transition, etc. But note that this is a Bootstrap badge with `bg-warning` class, so it already has a background. We can override it with a new color. The target palette is "balanced harmonious palette". The effect variant "tight-rhythm" suggests small radius (2-6px) and subtle shadows. So we could give the badge a small border-radius, a subtle shadow, and a new background color. But we must not change font-size. So we keep that.

3. `.contact-channels-section article, .contact-quick-section .contact-card` – This sets padding. We can add background-color, border-radius, box-shadow, transition, etc. The effect variant says compact spacing, small radius, subtle shadows. Adding a card-like background with small radius and subtle shadow would enhance the visual identity without changing padding.

We need to choose a fresh color palette. The target style is "symmetric-grid" with balanced harmonious palette. Since we don't know the original palette, we can choose something like teal/indigo or a modern neutral palette. Let's pick a palette:

- Primary: #4f46e5 (indigo) or #0f766e (teal). Balanced harmonious: maybe use a slate/indigo scheme.
- Background for cards: #ffffff or #f8fafc.
- Text on warning badge: maybe #78350f (amber-900) on #fbbf24 (amber-400). But we need to be consistent.

However, we must not introduce conflicting colors with existing CSS? Since we are only modifying this block, we should aim for a cohesive look. Let's define a palette:

- Accent color: #4f46e5 (indigo-600)
- Warning badge: background #f59e0b (amber-500) with text #1e1b4b (indigo-950) or #451a03. But we need to be careful: the badge has `bg-warning` in Bootstrap, which is #ffc107. Overriding it with a fresh color would be a visual change. Let's use a warm amber: #fbbf24 (amber-400) and text #78350f (amber-900). But we don't know if the badge has text color already. We can set both.

- Cards: background #ffffff, border-radius 0.375rem (6px), box-shadow 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1) – subtle. Or perhaps no shadow for tight-rhythm? The variant says "subtle shadows or none". We'll add a very subtle shadow.

- For the hero column, maybe color: #1e293b (slate-800) for text? But the column contains a heading? Actually `.col-lg-7` is a column wrapper. Setting color will inherit to all text inside. That could be a visual change. But is it safe? Yes, as long as we don't change layout. However, if the original design already has a color set elsewhere, this might override it, which could be problematic. But since we are only adding a color declaration, it will apply to text in that column. This is a visual change. Let's do it to fulfill the task.

Alternatively, we could add a `transition` property to the card and badge. That would also be a visual change.

We need to output the rewritten CSS with all original declarations intact, plus new visual declarations. But careful: The original block has three rules. We can add declarations to each. The media query is also part of the CSS. We must preserve the media query condition exactly: `@media (max-width: 575.98px) { ... }`.

Let's construct the new CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #fbbf24;
        color: #78350f;
        border-radius: 0.375rem;
        box-shadow: 0 1px 2px rgba(251, 191, 36, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }
}
```

But wait, the effect variant says "tight-rhythm" with "Small border-radius (2-6px)". 0.5rem is 8px, which is above 6px. Use 0.375rem (6px) or 0.25rem (4px). Let's use 0.375rem (6px) for cards and 0.25rem (4px) for badge. Also, the padding remains var(--space-md), which is unchanged.

We must consider that `background-color: #ffffff` on the cards might override existing dark mode? But we are only in a media query for small screens, and the original rule only set padding. Adding a white background could be a significant visual change, but it's allowed. However, if the original design uses a dark theme, white cards would clash. But we don't know the context. The target style is "symmetric-grid" and "balanced harmonious palette". We can choose a light palette. To be safe, maybe use a very subtle off-white: #f8fafc (slate-50). But if the cards are on a slate-50 background, white cards would stand out. Actually, a card often has a white background to stand out from the page background. We'll use #ffffff.

For the hero section column, setting color: #1e293b might override the hero's light text on dark background? If the hero has a dark background, then the text inside might be white originally. Overriding to dark would make it unreadable. That's risky. We should not add a color that could break readability. Since we don't know the surrounding CSS, it's safer not to add `color` to the hero column. Instead, we could add `text-shadow`? But that would affect text readability too. Alternatively, we could add a `background`? No.

Let's think: The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original CSS has no colors, shadows, radius, transitions, or gradients. So technically, there is nothing to change. But the task expects us to output something. Perhaps we are allowed to add new visual properties to the selectors. However, we must ensure not to break the existing design. Maybe we can add `transition` only? That's a visual change but low risk. But the task also says "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly say we must add new properties; it says "change" those types of properties. If there are none, then there is nothing to change, so the output would be the same as input. But that would be a no-op, which is unlikely intended. The instruction likely assumes the CSS contains such properties. Here it doesn't. We need to decide.

Looking more carefully at the prompt: "📋 ORIGINAL CSS:" shows only that media query block. It's possible that the file consists of multiple blocks and we are only seeing a portion? The "块2/2" means "block 2/2", so this is the second block of the file. The original CSS might be just this block, and there is no block 1? But they ask to rewrite this block. We need to produce a refreshed version. Since there are no visual properties, we can add them to fulfill the requirement.

But we must be careful about the "NEVER CHANGE" list. It includes "text-align" and "font-size". We must keep those exact. Padding can change within ±20%. But we are not changing padding.

The issue of adding `color` to `.col-lg-7` is risky. Let's see if there is a better way: We can add `background-color` to `.col-lg-7`? That would create a colored block behind the entire column, which might affect visual design but not layout. However, it could be ugly. The target "symmetric-grid" suggests a grid of cards. The hero section is probably not a card. So adding background to the column might be undesirable.

Maybe we can add `transition` to the column? That would be a visual change but not immediately noticeable. Hmm.

Let's consider the context: This is a media query for small screens. The `.app-hero-section .row .col-lg-7` is a column in a hero row. On mobile, text is centered. Perhaps we can add `border-bottom: 1px solid #e2e8f0` or something? But border-width is not in the never-change list? Actually "border-color and border-style (NOT border-width)" can change, but border-width is part of layout? It says "border-color and border-style (NOT border-width)" are allowed to change. It doesn't say border-width is forbidden, but the list of "NEVER CHANGE" includes "width, height, padding, margin" but not border-width. However, adding border would change box size if box-sizing is content-box. But if border-box, it wouldn't affect layout? Actually adding a border of 1px would increase the element size if box-sizing is content-box, which is a layout change. We could add `border-bottom: 0`? No.

Better to stick with properties that don't affect element dimensions: `background-color`, `box-shadow`, `border-radius` (doesn't change layout), `color`, `text-shadow`, `transition`, `opacity`, `filter`, `backdrop-filter`, `outline`, `caret-color`, `accent-color`. Border-radius doesn't affect layout. Box-shadow doesn't affect layout. background-color doesn't affect layout. color doesn't affect layout. text-shadow doesn't affect layout. So we can safely add these.

Thus, adding `background-color` to the hero column might be a visual change but could be problematic if the column already has a background. We can use `background-color: transparent`? That's not a change. We could use a subtle gradient? For example, add a linear-gradient that is almost transparent? But that would be a visual change. However, the hero section might already have a background; adding a gradient to the column might overlay it. Not ideal.

Maybe the safest is to add `transition` to the hero column, which is harmless. But the task expects a fresh color palette. We can still introduce new colors in the other two selectors. The hero column can receive a text-shadow? Text-shadow is a visual property. We can add a subtle text-shadow to make text pop on mobile. But text-shadow can affect readability negatively if not done right. We can use a very subtle shadow: `text-shadow: 0 1px 2px rgba(255,255,255,0.5)`? That might be bad. Or `text-shadow: 0 1px 0 rgba(255,255,255,0.6)`.

Alternatively, we can add `backdrop-filter`? No.

Let's think: The media query likely is part of a larger stylesheet. The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." It's okay to add properties. We need to choose a coherent set.

Perhaps we can treat `.app-hero-section .row .col-lg-7` as a container where we add a subtle bottom border? But border affects layout. Instead, we can add `background-image: linear-gradient(...)` with transparent to transparent? No.

I think it's acceptable to add `color` to the hero column. The hero section probably has a light background and dark text by default. If we set `color: #1e293b`, it ensures consistent dark text. If the original had white text on dark background, this would break, but that's a risk. To mitigate, we could use `color: inherit`? That's not a change. We need to change.

Let's inspect the class names: `app-hero-section`, `badge bg-warning`, `contact-channels-section`, `contact-quick-section`. These suggest a modern site with sections. The hero section might have a dark overlay? Not necessarily.

Maybe we can avoid adding color to the hero column and instead add a `transition` and a `text-shadow` that is very subtle and works on both light and dark: `text-shadow: 0 1px 2px rgba(0,0,0,0.05)`. That's barely noticeable and safe. But does it count as a visual change? Yes, it's a shadow property. Let's do that.

For the badge,