/* ============================================================
   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 CSS. But the provided CSS is a media query with only three rules. The task says refresh visual identity but keep all selectors and layout exactly. However, the provided CSS doesn't contain any color, shadow, radius, etc. It has text-align, font-size, padding. These are layout/typography. We are told not to change padding, font-size, text-align. So there's nothing to visually refresh here. But maybe we can adjust padding within ±20%? The rule says padding, margin keep similar ±20% maximum. But "never change" says padding/margin? Let's read the instructions carefully.

In the OUTPUT section, it says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". The "NEVER CHANGE" list includes width, height, padding, margin (keep similar values, ±20% maximum). That means we can adjust padding slightly? But the task states "Only colors, shadows, and decorative properties may change." Then in the "NEVER CHANGE" list, it says padding/margin keep similar ±20% maximum. Actually the list includes "padding, margin (keep similar values, ±20% maximum)" under LAYOUT. So we can tweak padding within 20%? But the original rule says `padding: var(--space-md) !important;` We could adjust the variable? But no variables defined in the snippet. The safe approach: output the same CSS, since no color/shadow properties exist to change. But the user explicitly asks "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since there are none, we should output the exact same CSS. But "Only change colors, shadows, radius, transitions, gradients" — if there are none, we don't change anything. The instruction says "First character = first CSS character" and no explanations.

However, the target style: "centered-stage", "airy-rhythm". Could we apply visual changes to these rules? The rules are:
- `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is layout, cannot change.
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size cannot change.
- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding can be changed within ±20%. But `var(--space-md)` is a variable that might be defined elsewhere. We could change it to a literal padding value within ±20%? For example, if `--space-md` is 1rem, 1.2rem is within +20%. But we don't know. The rules say "NEVER CHANGE ... padding, margin (keep similar values, ±20% maximum)". So we could adjust padding. But is that a visual change? Yes, spacing, but "airy-rhythm" suggests generous spacing. However, the "Aggressive" layout pattern says "Symmetric large padding (60-100px top/bottom)" but this is for the overall page, not these small cards. Also "Generous spacing (Aggressive: padding 32-56px, gap 32-48px)" — that seems targeted at large sections. But our snippet is for contact cards and badge.

Maybe the user intends for us to rewrite a file but due to "块2/2" (block 2/2), this is the second part. The file may have more content, but they only gave this snippet. We need to output only this snippet. Since there are no color/shadow/radius properties, the only possible changes are:
- Add `border-radius`, `box-shadow`, `background-color`, etc. to these elements? But adding new properties to existing selectors is allowed? The instruction says "Only change colors, shadows, radius, transitions, gradients" — that means we can add these decorative properties even if not present. But "Keep ALL selectors and layout exactly as-is" means we can add new declarations? The "never change" list includes selectors, but adding new declarations is not explicitly prohibited. The instruction "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" suggests we can add visual properties. But the final CSS should be a rewrite of the original, not a new file. We can add `box-shadow`, `border-radius`, etc. to the existing selectors.

But careful: The first selector `.app-hero-section .row .col-lg-7 { text-align: center; }` — adding a color or background? The target style "centered-stage" says headings text-align center, but it's already center. Adding color? `.col-lg-7` is a column, adding a background might break layout? But we can add `color` to text. The column may contain text. We could add `color: #f5f0e6;` to make it light text on dark stage. But that might change text color unexpectedly and could be a visual improvement. But is it safe? The original doesn't have color, so the element inherits from parent. Adding color would change the text color. That is a color change, allowed. But we need to be cautious.

The second selector `.app-hero-section .badge.bg-warning` — `bg-warning` is a Bootstrap utility class that sets background-color: #ffc107!important; color: #000? Actually Bootstrap `.badge.bg-warning` has color #000 maybe. We could add `box-shadow`, `border-radius`, `background-color`? But the utility class uses `!important` for background, so our background won't apply unless we also use !important. But we can add `box-shadow`, `border-radius`, maybe `color`. But adding border-radius to a badge is fine. However, we need to preserve the selector exactly.

The third selector for contact cards: we can add `border-radius`, `box-shadow`, etc. And we can adjust padding slightly.

But the "EXACTLY" constraint says "Every selector character-for-character preserved?" That's about selectors, not declarations. So we can modify declarations.

But the target style "centered-stage" has dark stage #0f0f1a, bright content area, premium gold accent. We can apply that here.

Let's design:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

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

We can rewrite with visual additions. But note: The media query is max-width 575.98px (mobile). So these are mobile styles. We shouldn't add huge padding. The "airy-rhythm" says generous spacing, but mobile has limited space. We'll keep padding as is (var(--space-md)) or change to calc? We can change padding to a slightly larger value within 20%. For example, if `--space-md` is 1.5rem, then 1.8rem would be +20%. But we don't know. To be safe, leave the padding untouched. The instruction says "keep similar values, ±20% maximum". We can change to a fixed value like `1.75rem` if we assume `--space-md` = 1.5rem? But that's risky.

Maybe the best approach: Since there are no color/shadow/radius properties to change, the correct behavior is to output the CSS unchanged. But the user explicitly asks to refresh visual identity. If we output unchanged, it might be considered noncompliant. But the system's instructions say "Only change colors, shadows, radius, transitions, gradients." If none exist, there's nothing to change. However, we can add new decorative properties to the existing selectors. That is "changing" the visual identity by adding shadows, radius, etc. It is within the allowed set.

Let's do that: Add `color`, `border-radius`, `box-shadow`, `background`? But careful with `bg-warning` — adding a background without !important won't override Bootstrap's `.bg-warning` which is likely `background-color: #ffc107 !important;` because Bootstrap's utility uses `!important`. So to change the background we would need `background: var(--gold) !important;`. But the task says "Only change colors" — yes we can change colors. But if we use `!important`, it's fine. However, do we want to change the badge color? The target style premium gold accent — the badge is already warning yellow. Could keep it or change to a premium gold. But the selector `.badge.bg-warning` is a Bootstrap warning badge. If we change its background, we are changing the utility class's effect, which might be considered a visual refresh. But the HTML class remains the same. We could add `background: linear-gradient(...) !important; border: none; box-shadow: ...; border-radius: ...;`

But we need to be careful: The instruction says "NEVER CHANGE ... border-style (NOT border-width)". Actually it says "border-color and border-style (NOT border-width)" — we can change border-style? Wait, the "NEVER CHANGE" list includes "border-color and border-style (NOT border-width)" under? Let's read the user instructions carefully.

In the prompt:
```
📐 LAYOUT (HTML cannot adapt to changes):
  • display values
  ...
  • padding, margin (keep similar values, ±20% maximum)
...
```
And under "✅ YOU MUST CHANGE (visual identity only)":
```
  • border-color and border-style (NOT border-width)
```
Wait, that says "MUST CHANGE" includes border-color and border-style BUT NOT border-width. So we can change border-color and border-style. But the later "NEVER CHANGE" list? Let's see the user's message: It says "✅ YOU MUST CHANGE (visual identity only):" lists border-color and border-style, border-radius, etc. Then "🔒 NEVER CHANGE (would break HTML layout):" lists selectors, layout, typography. It does NOT list border-color or border-style. Actually the "NEVER CHANGE" list includes "grid-template-areas ..." etc. It does not mention border-color. So border-color and border-style are changeable. Border-width is NOT to be changed because it affects layout? Actually border-width affects layout if box-sizing is content-box, but still. The instruction in "MUST CHANGE" says "border-color and border-style (NOT border-width)" — meaning we can change border-color and border-style but not border-width. So adding a border is allowed? If we add `border: 1px solid gold` we are setting border-width, which is not allowed. We can change border-color only if there's an existing border. If no border, adding a border-width changes layout. So to be safe, we should avoid adding border or use `box-shadow` instead.

Similarly, `border-radius` is allowed.

`box-shadow` is allowed.

`text-shadow` is allowed.

`background` is allowed? The list includes "All color values: background, color, border-color, fill, stroke, outline-color" — so background is a color value, we can change it.

`transition` allowed.

`opacity`, `filter`, `backdrop-filter` allowed.

`caret-color`, `accent-color` allowed.

Custom props allowed.

So we can add `background`, `color`, `box-shadow`, `border-radius`, etc. But we must not change display, padding (except within ±20%), font-size, text-align.

Let's construct a refreshed CSS for this media query.

We need to preserve the media query and selectors exactly. The declarations can be added or modified. The original declarations are:
- `text-align: center;` — keep.
- `font-size: 0.85rem;` — keep.
- `padding: var(--space-md) !important;` — keep or adjust within 20%. Since we don't know the variable, perhaps keep as is. But the "airy-rhythm" variant suggests generous spacing, so we could change to `padding: calc(var(--space-md) * 1.15) !important;` which is +15% and dynamic. Is that allowed? The original uses var(--space-md). Changing to calc(var(--space-md) * 1.15) keeps the variable and increases by 15%. That's within ±20%. But is it safe? Yes, if --space-md is defined. But if --space-md is not defined, `calc(var(--space-md) * 1.15)` would be invalid? Actually if a CSS variable is not defined, the property is invalid/ignored. The original `var(--space-md)` would also be invalid if not defined. So it's equivalent. But maybe we don't need to change it.

Add `border-radius` and `box-shadow` to the contact cards and badge. Add `color` to the hero column text. But wait, the hero column may contain text and button; adding a color would set the text color. That's fine. But we should ensure contrast with the dark stage. The target palette: dark stage #0f0f1a, bright content area. The `.col-lg-7` is within a hero section; likely the hero has a light background. If we set color to dark, might be wrong. Better to not add color to that selector unless we know. However, the instruction "centered-stage" says "Spotlight feel: dark stage #0f0f1a, bright content area" — maybe the entire body background is dark. But we don't have the full CSS. For this snippet, adding color might be too risky because it could be a light section. Maybe we should avoid adding color to `.col-lg-7` because it's a layout column, not a specific text container. The selector is `.app-hero-section .row .col-lg-7` which is a column; setting color would apply to all text inside it. That could be intentional if the hero section is dark. But we don't know.

Given conservatism, maybe we should only add decorative properties to the badge and the contact cards, and leave the hero column as is. But the first rule has no other properties; we could leave it unchanged. That's allowed.

Let's check the "MUST CHANGE" list: It lists "All color values: background, color, border-color, fill, stroke, outline-color" — but if a property doesn't exist in the original, we are not strictly required to add it. The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." So we need to refresh the visual identity as much as possible. For the hero column, perhaps we can add a text-shadow? But `text-align: center` already. We could add `color` using a CSS variable? But if we don't know the context, adding `color: #f8f9fa;` might be a good "spotlight" text color (light on dark). But if the hero section background is supposed to be bright, light text would be invisible. However, the target style says "bright content area" — so the content area is bright (light background) and text dark. The "dark stage" is the surrounding background. So `.col-lg-7` is inside the bright content area? Hmm.

Maybe we should not alter the hero column rule at all. The first rule is just a responsive text-align. The visual refresh can be carried by the badge and cards.

Let's design a cohesive "centered-stage" + "airy-rhythm" for the badge and contact cards:

Badge:
- Original `.badge.bg-warning` is a warning badge. We can change its background to a golden gradient, add a soft glow shadow, rounded-full? Badge already has border-radius 0.375rem? Actually Bootstrap badge uses `border-radius: 0.375rem`. We can override with `border-radius: 50rem` to make it pill-shaped. That's a visual radius change.
- Add `box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);` for a glow.
- Add `color: #1a1a2e;` (dark text) for contrast on gold.
- Add `background: linear-gradient(135deg, #f5d97a, #c9a227);` But `.bg-warning` has `background-color` with !important. To override, we need `background: ... !important;` But if we use `background` shorthand with gradient, the !important on `background-color` might still apply? Bootstrap's `.bg-warning` likely is `background-color: #ffc107 !important;`. A gradient is a background-image, and the background-color is behind it. If we set `background-image: linear-gradient(...)` without !important, the `background-color` still shows through? Actually the gradient is drawn on top of the background-color, so the element would show gradient over the yellow. But since the gradient is opaque, it covers the yellow. So `background: linear-gradient(...)` would set the background-image and background-color (initial). But the utility's `background-color` with !important overrides the background-color component, but the background-image remains. Wait, `background` shorthand resets background-image to linear-gradient and background-color to initial? The shorthand resets all background properties, but then the `background-color` from the utility with !important would override the background-color set by the shorthand. The gradient is the background-image, so it remains. So the final visual would be gradient over yellow, but since gradient is opaque, we see gradient. However, if the gradient has transparency, the yellow would show through. We can use an opaque gradient. So we don't need !important on background if we use `background-image`. But if we use `background` shorthand without !important, the `background-color` set by the utility remains yellow, but the gradient covers it. That's fine. But to be safe, we can use `background-image: linear-gradient(...);` and `background-color: #f5d97a;` but the utility's background-color with !important would override our background-color. That's okay. The gradient will be over it.

But if we want to change the badge's background completely, using `background: linear-gradient(...) !important;` would override both color and image. That is a color change. Adding `!important` is acceptable; the original rule already has `!important` in the padding. The