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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The user wants me to rewrite the CSS visually. The original CSS is a media query with three rules. Let me analyze:

1. `@media (max-width: 575.98px)` — keep the media query condition exactly.
2. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is a layout property (typography/layout), but it's listed under typography? Actually text-align is in the "NEVER CHANGE" layout list: "text-align, vertical-align". So I must keep text-align: center.
3. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is typography, NEVER CHANGE. Keep.
4. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is layout, NEVER CHANGE (keep similar values, ±20% maximum). Keep `padding: var(--space-md) !important;`.

So this media query only contains layout/typography rules—no colors, shadows, radius, transitions, gradients to change. I need to preserve these rules exactly. But the task says to refresh visually. However, the instructions are strict: never change layout, typography, etc. Since there are no visual properties to change within this snippet, I should output the CSS unchanged, but the task says the previous attempt didn't change enough. I can add visual properties? No—I cannot add new selectors or properties that weren't there? Actually, the instruction says "Only colors, shadows, and decorative properties may change" — it doesn't say I can't add decorative properties to existing rules. But adding properties to existing rules would change the visual identity. However, the original has no color/shadow props, so maybe I should add some visual flair while keeping layout unchanged.

Wait, let me re-read: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

The original CSS block contains only a media query. There are no colors/shadows to change. But I could add visual properties to the existing selectors within the media query, since the selectors stay the same and layout stays the same. Adding color, text-shadow, etc. to `.app-hero-section .badge.bg-warning` would be a visual change. But would that be safe? The badge is `bg-warning` (Bootstrap warning color). Adding a gradient background could alter it, but that's a visual change only.

Hmm, but the self-check: "Colors throughout the file replaced with fresh palette?" There are no colors to replace. So perhaps the correct output is the same CSS, because there's nothing to change. But the user explicitly says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." This suggests they want visible changes.

Given the constraints, I can add decorative properties (colors, shadows, gradients) to the existing selectors within the media query, without changing layout or typography. That's allowed: "Only colors, shadows, and decorative properties may change."

Let me think about what to add:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — I can add a text-shadow? That would be decorative. But it might affect readability. Could add subtle text-shadow. Or a background gradient? Adding background to col-lg-7 might change layout appearance but not layout itself. But it might be risky. I'll keep it minimal—maybe add nothing to this rule, or add a subtle text-shadow to the hero text. Actually text-align center is for the column; adding text-shadow could affect all text inside. Hmm.

2. `.app-hero-section .badge.bg-warning` — I can add a gradient background, box-shadow, border-radius, transition. But note Bootstrap's `.badge` and `.bg-warning` classes would set background-color. Adding `background: linear-gradient(...)` overrides it. That's a visual change. Also can add `box-shadow`, `border-radius`, `transition`.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — add gradient background, box-shadow, border-radius, transition. Padding stays the same.

But wait—I need to be careful. The media query is for max-width 575.98px (mobile). Adding heavy shadows/gradients might be fine.

However, the task's "Target style" is asymmetric-blocks and gradient-rich. Yet the conservative mode says keep layout exactly. I can add gradients to backgrounds within these rules.

Let me craft the output:

Keep the media query. For each rule, keep the existing declarations, then add decorative ones.

Rule 1:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
}
```
I could add `text-shadow: 0 2px 8px rgba(...)`. But text-shadow on a whole column might look odd. Maybe add a subtle background gradient? That would affect the column backgrounds, but the column is inside a row—might create a block. Could be fine. But to be safe, I'll add a subtle radial gradient background and a text-shadow. Actually, the instruction says "text-shadow" can change. I'll add a gradient background to the column? Hmm, that might be too intrusive. Let me consider.

The goal: "Refresh the visual identity WITHOUT changing layout structure or class names." Adding a background gradient to col-lg-7 changes visual identity but not layout. OK.

But there's a risk: The col-lg-7 contains hero content; adding a background might create an unexpected block. Since it's a column in Bootstrap, it's a flex item. Background would just color the column. Probably fine.

Alternatively, I can add only text-shadow to rule 1, and richer changes to rules 2 and 3.

Let me design a fresh palette. "asymmetric-blocks" with "gradient-rich". Use a palette with deep teal, coral, amber, etc.

Let's pick:
- Teal: #0f766e / #0d9488
- Coral: #fb7185 / #f43f5e
- Amber: #f59e0b
- Deep navy: #1e293b

Gradient-rich: use linear-gradients with multiple stops.

Rule 2 (badge):
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35), 0 1px 2px rgba(30, 41, 59, 0.2);
    border-radius: 999px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
```
Wait, `transition` with transform property might be fine. But the original didn't have hover, so maybe just transition on background/box-shadow.

Rule 3 (contact cards):
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(240,249,255,0.7) 100%);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.15), 0 2px 4px rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease;
}
```

But wait—if the original rule had `padding: var(--space-md) !important;`, and I add more declarations, that's fine.

Should I add a border? The target style says "High contrast borders" and "Gradient borders via border-image". But border-width can't change per the rules? Actually the rules say "border-color and border-style (NOT border-width)". So I can add border-color and border-style, but not border-width. But if no border-width is set, adding border-color/style won't show a border. I could set border-radius though. Border-radius is allowed.

Actually, to be safe, I should not add border-width since that's forbidden (it's a layout-ish property? The list says "border-color and border-style (NOT border-width)"—meaning border-width is never change). Adding a border-width would violate. So I'll avoid borders entirely or use outline? Outline style can change. But outline-width also? The list says "outline styles (color, type)". So I can add outline-color and outline-style but not outline-width? Hmm, likely similar to border. I'll avoid adding widths.

I'll focus on background gradients, box-shadows, border-radius, text-shadow, transitions.

Now, for rule 1, I could add a text-shadow and maybe a background. Let me think about whether adding background to `.col-lg-7` is good. In the hero section, this column will center text on mobile. Adding a background might make it look like a card. Could be nice but risky visually. Since the target is "asymmetric-blocks," maybe add a subtle gradient. But I'd rather keep it minimal: add text-shadow only.

Actually, since the media query is mobile-only, the hero section centers text. A text-shadow could add depth to headings. But it applies to the whole column. I'll add a soft text-shadow.

Let me also consider the `!important` — I must keep it on padding. Adding other properties after it is fine.

Let me check the css variables: `var(--space-md)` — I don't know its value. Keep as is.

Now, the output should be only CSS, no markdown. First character = first CSS character. So start with `@media`.

Let me write:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 12px rgba(2, 6, 23, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fde68a 0%, #fbbf24 40%, #f59e0b 70%, #d97706 100%);
        box-shadow: 0 6px 16px -4px rgba(217, 119, 6, 0.5), 0 2px 4px -2px rgba(15, 23, 42, 0.25);
        border-radius: 999px;
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(224, 242, 254, 0.75) 50%, rgba(186, 230, 253, 0.55) 100%);
        box-shadow: 0 12px 28px -10px rgba(2, 6, 23, 0.18), 0 4px 8px -4px rgba(2, 6, 23, 0.12);
        border-radius: 20px;
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait—Bootstrap's `.bg-warning` on a badge sets `background-color`. My `background: linear-gradient(...)` will override since it's the `background` shorthand which resets background-color. That's a visual change. Good.

But hold on, the badge may have padding and border-radius already from Bootstrap. Adding border-radius 999px is fine.

One concern: `transition` on the badge—there's no hover in the CSS. But it doesn't hurt.

Another concern: Adding `background` to `.contact-channels-section article`—the original might already have a background from another rule not in this snippet. Overriding it within the media query is fine.

Should I add a `filter` or `backdrop-filter`? The target style is gradient-rich. I could add `backdrop-filter: blur(8px)` to the contact cards, but if the background is semi-transparent and there's content behind, blur could be nice. But it might affect performance on mobile. I'll add a subtle backdrop-filter? The rules allow changing backdrop-filter. I'll add `backdrop-filter: blur(8px);` to the cards only if the background is semi-transparent. Since I set a semi-transparent gradient, backdrop blur would be effective. But some browsers ignore it. I'll include it.

Also, `-webkit-backdrop-filter` for Safari? I could add both. But the original didn't have it. It's fine to add decorative properties. However, the instructions: "Only colors, shadows, and decorative properties may change." backdrop-filter is listed as changeable. Good.

Let me refine the design to be more "gradient-rich" with "multiple stops." Add more stops.

For the hero column text-shadow:
```css
text-shadow: 0 2px 8px rgba(2, 6, 23, 0.08), 0 4px 20px rgba(2, 6, 23, 0.06);
```

For the badge:
```css
background: linear-gradient(120deg, #fef3c7 0%, #fbbf24 30%, #f59e0b 55%, #b45309 80%, #f59e0b 100%);
box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.55), 0 2px 6px -2px rgba(2, 6, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
```
Inset highlight shadow is nice.

For the cards:
```css
background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 35%, #e0f2fe 70%, #bae6fd 100%);
box-shadow: 0 16px 32px -12px rgba(2, 6, 23, 0.2), 0 4px 10px -6px rgba(2, 6, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-radius: 20px;
transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
```
But transform isn't used unless hover. Adding transition for transform without hover is harmless. But wait, the rule "transition timing, easing, duration" can change. It's fine to add transitions.

Hmm, but adding `transform` transition implies it might transform on hover; adding a transform would be a layout change? Actually transform is a visual change, not in the never-change list. But I won't add a hover rule anyway.

Let me double-check: Are there any `:hover` selectors? No. So transitions won't trigger except for background/box-shadow if other rules trigger hover. But it's fine.

Actually, wait. The original CSS only has these three rules. If I add `transition` but there's no hover, it does nothing. But if other CSS (not in this snippet) has hover rules on these elements, the transition would apply. So it's still valuable.

One more consideration: The self-check says "Colors throughout the file replaced with fresh palette?" There were no colors in the original, so I've introduced a fresh palette. Good.

"Shadows redesigned (different offsets, colors)?" Yes, I added multi-layer shadows.

"Border-radius adjusted for new visual style?" I added border-radius values.

Now check the forbidden list:
- Selectors: preserved exactly: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. Yes.
- Media query: preserved exactly: `@media (max-width: 575.98px)`. Yes.
- text-align: center — kept (layout/typography). Actually text-align is in the never-change list? Let me check: "text-align, vertical-align" yes under Typography section. So keep as is. Yes.
- font-size: 0.85rem — kept. Yes.
- padding: var(--space-md) !important — kept exactly. Yes.

Display, position, widths, heights—none present. Good.

Adding text-shadow to `.app-hero-section .row .col-lg-7` — is that safe? It changes text appearance but not layout. OK.

Adding background to `.col-lg-7`? I chose not to. Good.

Now, could the text-shadow on a centered column look bad? It's a soft shadow at 8% opacity—should be subtle.

Let me finalize the CSS. I want it to feel "asymmetric-blocks" and "gradient-rich". Maybe use a more distinctive palette. Let me reconsider colors:

Fresh palette idea:
- Indigo/slate base: #1e1b4b, #312e81
- Cyan/teal accent: #0e7490, #06