/* ============================================================
   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 request is to rewrite the CSS file with a new visual identity. The original CSS is a media query with some rules. It's quite short. Let me analyze it carefully.

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

Now, the constraints:
- Keep all selectors exactly
- Keep layout properties unchanged (display, position, grid, width, height, padding, margin, font-size, etc.)
- Only change colors, shadows, radius, transitions, gradients, etc.

Wait, text-align is a layout property? Let me look at the list. Text-align is listed under typography: "text-align, vertical-align" under 📝 TYPOGRAPHY. So I cannot change text-align.

font-size is also under typography — cannot change.

padding is under layout — cannot change (keep similar values, ±20% maximum).

So, in the original CSS, what can I change?

1. `.app-hero-section .row .col-lg-7` — only has `text-align: center;` — I cannot change text-align. So this rule stays exactly as-is. There are no colors or shadows here.

2. `.app-hero-section .badge.bg-warning` — has `font-size: 0.85rem;` — font-size cannot change. So this stays as-is.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — has `padding: var(--space-md) !important;` — padding can be kept similar (±20% maximum). But var(--space-md) is a custom property value. I could change the custom property value? But --space-md would be defined elsewhere. Also changing custom properties might affect other things. Actually, I could replace `var(--space-md)` with an equivalent length within ±20%. But what is --space-md? Unknown. I could keep it. The instruction says padding must stay similar. Since I don't know the value, safest to keep it.

So actually, this media query contains only layout/typography properties that I'm not allowed to change. Hmm.

Wait, the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But the original CSS has no colors, shadows, radius, transitions, or gradients. So what can I do?

Let me re-read the instructions:

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

But the CSS is only these rules. Perhaps the expectation is that I add new visual properties (like color, box-shadow, border-radius, transition) to these selectors without breaking the layout. The instructions say "Only change colors, shadows, radius, transitions, gradients" but also "add decorative properties." Let me check the mission statement: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

So I can ADD decorative properties to the existing rules. The original rules might not have colors, but I can add them. The key is that I must not remove or change the layout properties.

So for each rule, I can:
- Keep `text-align: center;` and add e.g. `color`, `text-shadow`, etc.
- Keep `font-size: 0.85rem;` and add `background`, `border-radius`, `box-shadow`, etc.
- Keep `padding: var(--space-md) !important;` and add `border-radius`, `box-shadow`, `background`, `transition`, etc.

But wait, changing a badge's background/border-radius/etc. would be a visual change, allowed. The badge.bg-warning class — in Bootstrap, bg-warning sets background-color. Adding box-shadow, border-radius, etc. is fine.

Let me think about what makes sense.

Target style: symmetric-grid, soft-shadows variant. Use a fresh palette with multi-layer soft shadows, large border-radius (12-24px), smooth transitions.

Since the CSS is only these three rules, I should create a new palette and apply decorative changes.

Let me define custom properties at the top? But there's no :root selector. I can add a @media block and within it add :root? But I can't add new selectors? Actually the instruction says "preserving ALL selectors". It doesn't say I can't add new selectors... Let me re-read:

"🏷️ SELECTORS (CRITICAL - HTML is fixed):
  • Class names: keep EXACTLY (.post-card stays .post-card)
  • IDs: keep exactly
  • Element types (div, h1, span, etc.)
  • Pseudo-classes (:hover, :focus, ::before, ::after)
  • Attribute selectors ([data-x], [type="text"])
  • Combinators (>, +, ~, descendant spaces)
  • Selector lists (commas)"

This means I need to preserve existing selectors. It doesn't explicitly forbid adding new selectors, but the typical interpretation of this exercise is to rewrite the given CSS without adding new selectors. However, the mission says "only colors, shadows, and decorative properties may change." It doesn't say "only existing rules."

Hmm, but the output should be the rewritten CSS. Adding a `:root` selector or `*` selector would alter the CSS but not the HTML. But it might be considered a change of selectors.

Given the original CSS is just a media query, the safest approach is to keep the same three rules and enhance them with visual properties. Also, I could add new visual declarations inside the existing rules.

Let's look at each rule:

Rule 1:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
}
```
I can keep text-align and add:
- color: ... (new palette)
- text-shadow: ...
But adding color to a column might affect text color globally in that section. That's a visual change, acceptable. But be careful: text-align is a typography property I cannot change, but keeping it same is fine.

Rule 2:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
}
```
Keep font-size, add:
- background: linear-gradient(...) or a new color
- border-radius: 12px (large radius for soft-shadows style)
- box-shadow: 0 4px 8px rgba(...), 0 20px 40px -10px rgba(...)
- transition: all 0.4s ease
- color maybe
- border: none? Wait border-style can change, border-width cannot. Actually border-color and border-style can change, NOT border-width. Adding `border: none` changes border-width? `border: none` sets width 0 effectively. Hmm. I should avoid border changes to be safe. I can omit border.

Rule 3:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
```
Keep padding, add:
- background: ...
- border-radius: 16px
- box-shadow: multi-layer
- transition: ...
- backdrop-filter maybe
- border? Avoid border-width changes.

But wait — the target style is "symmetric-grid". This seems to be a style category for the overall design. But the CSS given is only a media query. The actual grid layout is presumably in another part of the file (the file is "assets/css/saishi.css#块2/2" meaning block 2 of 2 maybe). The user only gave me this block, so I work with what I have.

Let me think of a fresh palette. The target says "Balanced harmonious palette" and "Consistent shadows". Soft-shadows variant: "Multi-layer soft shadows: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)" and "Large border-radius (12-24px)" and "Smooth transitions (0.3-0.5s ease)".

I'll choose a balanced palette. Maybe a warm neutral/teal/indigo palette. Let's pick something like:

- Primary accent: soft teal/cyan (#0d9488 or #14b8a6)
- Warning badge (bg-warning): maybe a soft amber/orange gradient
- Text color: deep slate (#1e293b)
- Card background: soft off-white (#f8fafc) or white with subtle warm tint
- Shadow colors: with teal tint? For soft shadows, use rgba(15, 23, 42, ...) or rgba(0, 0, 0, ...). I can use the prescribed shadow.

Since bg-warning in Bootstrap is a warning color, changing it to teal would lose the semantic meaning, but the instruction says use a fresh palette and make colors distinct. I'll keep a "warning-ish" hue but more refined: amber/gold gradient.

Let me design:

For the hero column:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #1e293b;
    text-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}
```
Hmm, but adding text-shadow to a whole column may make text blurry. Soft shadow smaller: `0 1px 2px rgba(15, 23, 42, 0.08)` maybe. The variant says large radius and soft shadows. Text shadow should be subtle. Actually adding color to the column might override inherited colors. That's okay.

For the badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #451a03;
    border-radius: 999px;  /* pill badge */
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.2), 0 8px 24px -6px rgba(245, 158, 11, 0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
```
Wait, transform is an animation/visual property? Transform is allowed to change? The list of "NEVER CHANGE" doesn't mention transform. But transform could affect layout? Actually transform doesn't affect layout flow. But "transform" is not in the forbidden list. However, changing transform on hover would require :hover selector, which I'd be adding. Adding a :hover rule could be considered a new selector. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE" — meaning keep them as they are. If I add a new :hover, that's a new selector not present. I think we should not add new selectors. So no :hover. I can still use `transition` for when properties change due to other reasons, but no hover.

Actually, let me avoid adding transform entirely. Just use static visual properties.

Border-radius for badge: large radius (12-24px) per the variant, but badges are typically pill-shaped with border-radius: 999px. That's a visual change, acceptable. But "Large border-radius (12-24px)" suggests 12-24px, not 999px. Hmm. For a small badge at 0.85rem font size, a 999px radius would be a very rounded pill. But to comply, I can use 12px or 14px. Since font-size is 0.85rem (~13.6px), the badge height is maybe 20-30px. A radius of 12px would make it quite rounded, close to a pill. Let's use `border-radius: 12px` which is within the 12-24px range.

For background, I could use a linear-gradient. The badge has bg-warning class; the Bootstrap default would be a flat yellow. A gradient is a visual change allowed.

For the contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.05), 0 20px 40px -10px rgba(15, 23, 42, 0.12);
    transition: box-shadow 0.4s ease, background 0.4s ease;
}
```
Wait, would these elements already have background colors? Maybe. Setting a background might be fine. But `.contact-channels-section article` and `.contact-quick-section .contact-card` — these are cards. The soft-shadows variant suggests elevated cards with subtle gradient backgrounds. Good.

But hold on: could adding background-color to `article` conflict with existing styles? It's a visual change, allowed.

Also I should consider that `!important` on padding. I'll keep padding exactly as `var(--space-md) !important` since I don't know the variable value. The instruction says padding must remain within ±20% of input. Since it's a var, keeping it exact is safest.

Now, should I add `:root` with custom properties? The original file probably has custom properties. But the task says "CSS custom properties (--color-*, --shadow-*) values" can change. If I add new :root definitions, that would add new selectors. I think it's better to avoid that since the assignment is focused on this block. But I could use literal color values instead of custom properties.

Let me reconsider: The original block is just a media query. Maybe the expectation is that the entire file is much larger, but the user gives only "块2/2" (block 2/2). So this is the second chunk. The assistant can only work with the provided chunk. Therefore, I should only modify this chunk.

Given the chunk has no color at all, my modification is to add visual properties. This will make it more distinct.

Let me make the palette cohesive:

- Deep slate text: `#1e293b`
- Warm amber accent for warning badge: `#f59e0b` / `#fbbf24`
- Off-white card surface: `#ffffff` to `#f8fafc`
- Teal/indigo? Maybe for the hero column text, use a slate color. But if the hero section has its own color, overriding with `color` on col-lg-7 might be too invasive. Actually the col-lg-7 is a column in the hero; adding text color could be okay but might not be needed. The instructions demand color changes, but if I add color to the column, it may change all text within it. Perhaps better to not force color on the column if it doesn't need it? But the instruction says "All color values ... change." Since there were no color values in the original, I need to introduce them. I'd argue adding color to col-lg-7 is okay.

Alternatively, I could add a subtle `filter` or `backdrop-filter` to the column? That might be weird on a column.

Let me think about what "visual identity refresh" means for these three rules:

1. Hero column: To make text centered (already) with a fresh look, maybe add a soft text shadow and color. 
2. Warning badge: Make it a gradient amber pill with soft shadow.
3. Contact cards: Elevated white cards with soft shadows and rounded corners.

That seems like a coherent refresh.

Let me also consider the "symmetric-grid" target. The pattern mentions "Strict equal grids: repeat(3, 1fr) or repeat(4, 1fr)" and "Uniform gap (24px throughout)". But the provided CSS doesn't contain grid properties. Since I can't change grid-template-columns (layout), and there are none here anyway. The style target is more about the overall file, but I can't change what's not present. I can at least use gap of 24px? No, gap isn't in this block.

The "soft-shadows" variant clearly applies: use `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)` as the multi-layer shadow. I'll use those exact shadow values, perhaps with slight tinting to match palette.

Let me decide final palette:

- Hero text color: `#0f172a` (deep slate) with text-shadow `0 4px 8px rgba(15, 23, 42, 0.08)`? For text, a large blur might be ugly. Use `0 1px 2px rgba(15, 23, 42, 0.06)`. But the variant says shadows should be multi-layer; however for text-shadow, multi-layer is okay:
  `text-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);`

- Badge:
  `background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 45%, #d97706 100%);`
  `color: #78350f;`
  `border-radius: 12px;`
  `box-shadow: 0 4px 8px rgba(217, 119, 6, 0.18), 0 12px 24px -8px rgba(217, 119, 6, 0.30);`
  `transition: box-shadow 0.4s ease, filter 0.4s ease;` — wait, transition on box-shadow is fine.

  But hold on: if I set `background` with `!important`? The original doesn