/* ============================================================
   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 in `assets/css/saishi.css` block 2/2. The original CSS is a media query with three rules. Let me analyze:

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

Constraints:
- Cannot change selectors
- Cannot change text-align (it's a layout/typography property — text-align is listed under "never change")
- Cannot change font-size (typography fixed)
- Cannot change padding beyond ±20% and `var(--space-md)` is a custom property value... Actually padding is in the "never change" list: "padding, margin (keep similar values, ±20% maximum)". The original is `var(--space-md)` so I should probably keep it as is or change the custom property value slightly. But `--space-md` is defined elsewhere. Since we can't change layout, and padding must be within ±20%, I'll keep it the same or adjust within 20%. The instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

However, this CSS snippet doesn't have any colors, shadows, radius, transitions, or gradients. It only has text-align, font-size, and padding. All of those are in the "never change" list. So what can I actually change?

Let me check the rules again:
- text-align: in "never change" typography list: "text-align, vertical-align"
- font-size: in "never change" typography list: "font-size, font-weight, font-style"
- padding: in "never change" layout list: "padding, margin (keep similar values, ±20% maximum)"

So literally nothing in this snippet can be changed without breaking the rules. But the task says "Refresh this CSS visually." Hmm.

The conservative mode says only colors, shadows, and decorative properties may change. But there are no colors/shadows here. Maybe I should add properties that are decorative? But I can't add new properties? Actually, I can add decorative properties that don't affect layout. For example, I could add `filter: drop-shadow(...)` to make it visually softer? That would be a visual change without layout change.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say I can't add new decorative properties. In conservative mode, the goal is to refresh the visual identity without changing layout. Since the original has no colors/shadows, the best I can do is add subtle decorative effects that don't affect layout:

- Add `filter: drop-shadow(...)` — but filter on a text-align rule? That seems odd.
- Add `transition` to the badge?
- Add `border-radius`? The elements are probably cards/columns. Adding border-radius to a `.col-lg-7` would be weird but wouldn't break layout... Actually border-radius is allowed to change, but there's no existing border-radius. Adding it could be okay.

Hmm, but the safest approach: keep the same declarations and perhaps add minimal decorative declarations that won't affect layout. Let me think about what would be appropriate.

Given the target style is "horizontal-strips" with "soft-shadows", and the original snippet is a mobile media query, I could add soft shadows to the contact cards and badge. But shadows could affect visual layout? Box-shadow doesn't affect layout. Filter doesn't affect layout.

Let me consider each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — I could add `text-shadow`? No, text-align is for the container. Maybe add a subtle text-shadow to the heading? But the selector is the column. Adding text-shadow to a column would apply to all text inside. That's a visual change. But it might not be desirable. The instruction says "text-shadow" can be changed — but there's no text-shadow. I could add one. But this selector targets a column that holds hero content; adding text-shadow could be a nice subtle visual. However, it changes the appearance of text — allowed? "text-shadow" is in the "you must change" category. So I can add/modify text-shadow.

2. `.app-hero-section .badge.bg-warning` — background color `bg-warning` is a Bootstrap class; we can't change the class but we can add a `background` declaration? Actually background-color would be overridden by Bootstrap's `.bg-warning` depending on specificity. `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning`, so adding `background` would override it. That's a color change — allowed. Also could add `box-shadow`, `border-radius`, `transition`.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding is fixed. I could add `border-radius`, `box-shadow`, `background`, `transition`.

But wait — the rules say "Only change colors, shadows, radius, transitions, gradients." It doesn't prohibit adding new decorative properties. However, it says "Keep ALL selectors and layout exactly as-is." Adding box-shadow/background won't change layout. Border-radius won't change layout.

Given the target style, I should:
- Make the badge more vibrant: override background with a gradient (e.g., warm warning gradient), add soft shadow, rounded radius, transition.
- Make the contact cards have soft shadows and rounded corners with a cream/white background (but background could affect layout? No).
- For the hero column, maybe add nothing or a subtle text-shadow? Actually a drop-shadow filter on the column would affect all children. Hmm.

But I need to be careful: the original snippet has no colors, so "refresh visually" means I should add subtle decorative enhancements that align with the soft-shadows variant while keeping layout identical.

However, there's a risk: If I add `background` to the contact cards, and the cards already have backgrounds from other CSS, I'd be overriding them in mobile. That could change the look. But the task says "Refresh this CSS visually" — so that's intended.

Wait, but the original CSS has `padding: var(--space-md) !important;` — this is a layout property that I must keep (within ±20%). The `!important` should stay. I'll keep it exactly.

Let me draft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #ff9f1c);
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }
}
```

But wait — adding `background: rgba(255,255,255,0.6)` to the contact cards could affect readability if the cards already have a dark background. Also, the target style says alternating white/cream/dark. But this media query is mobile-specific. Hmm.

Also, the task says "Only change colors, shadows, radius, transitions, gradients." I did that. But I didn't change any existing values since there were none to change. Is that acceptable? The instruction says "Refresh this CSS visually." Adding decorative properties is a refresh.

But perhaps I'm overstepping by adding `background` to the cards — it could change the visual significantly. Yet the whole point is a visual refresh. Let me be more conservative: instead of adding backgrounds, just add soft shadows and radius to the cards. That's safer and matches "soft-shadows" variant. For the badge, overriding the background with a gradient is a color change and fits "strong color zones" from horizontal-strips.

Actually, the target palette: "Alternating: white / cream / dark / white pattern" and "Strong color zones." For mobile, maybe the cards should have a cream background? But the original HTML likely has cards with backgrounds already. Adding an override could be risky. Let me keep the card backgrounds transparent and only add shadows/radius.

Let me reconsider the hero column text-shadow. Text-shadow could apply to all text in the hero section — including badge? Actually `.col-lg-7` is the container; adding text-shadow would inherit to all text inside. That might look odd on a badge with its own background. Better to avoid text-shadow on the container. Instead, maybe add nothing to the first rule? But then no visual change for that rule.

Hmm, the task wants me to "change colors, shadows, radius, transitions, gradients" — but if a rule doesn't have them, I can add them where sensible. For the hero column, perhaps a subtle `filter: drop-shadow()` is not good. Let me think about what elements are inside `.app-hero-section .row .col-lg-7` — likely a heading, paragraph, buttons. Adding `text-shadow: 0 2px 12px rgba(0,0,0,0.06)` could be a nice soft effect. I think it's acceptable.

Also, for the badge, `transition` — if I add `transition: transform 0.3s ease`, but there's no hover rule in this snippet. Adding transition without hover is harmless. But maybe I should add `transition: box-shadow 0.3s ease, background-color 0.3s ease`.

The instruction says "Smooth transitions (0.3-0.5s ease)". So I'll use 0.3s ease or 0.35s ease.

Let me also consider `outline` — no need.

Let me check the self-check:
- Selectors preserved character-for-character? Yes.
- display, position, grid-template, flex-direction unchanged? Yes, not present.
- width, height, padding, margin within ±20%? Padding kept exactly `var(--space-md) !important`.
- font-family, font-size, font-weight, line-height unchanged? Yes, font-size kept as 0.85rem.
- Colors replaced with fresh palette? I added colors — the original had none. I'm introducing a warm cream/gold palette matching "cream" and "strong color zones". This is a refresh.
- Shadows redesigned? Added multi-layer soft shadows.
- Border-radius adjusted? Added 16px and 999px.
- No AI marker comments? Yes.

But wait: "Colors throughout the file replaced with fresh palette?" — there were no colors. I'm adding them. That's fine.

One concern: adding `background` to `.app-hero-section .badge.bg-warning` overrides Bootstrap's `.bg-warning`. That's allowed since we're changing colors. The gradient uses `#ffd166` (cream/gold) and `#ff9f1c` (strong orange) — fits "cream" and "strong color zones".

For the cards, adding `background: rgba(255, 255, 255, 0.08)`? No, that might be weird. Let me match the horizontal-strips palette: alternating white/cream/dark. On mobile, the contact cards could be cream: `background: #fff9f0` (light cream). But if the original cards are already white, this would change them to cream — a visual refresh. It could affect readability if text is dark — cream with dark text is fine. But if the text is white (on dark cards), cream background with white text would break. I don't know the original design.

To be safe, I'll avoid adding opaque backgrounds to the cards. Instead, I could add a very subtle translucent background: `background: rgba(255, 255, 255, 0.4)` — but that still changes things. Alternatively, just shadows and radius. Since the target variant is "soft-shadows", shadows + radius are the key. I'll skip background for the cards.

Actually, let me reconsider: The task explicitly says "Only change colors, shadows, radius, transitions, gradients." It doesn't say I must add colors to every rule. It says these are the categories I may touch. So adding shadows/radius/transition to the cards is fine.

For the hero column rule, I could add `text-shadow` — that's in the allowed list. But is it appropriate? The selector targets a column; adding a text-shadow affects headings/text. Soft shadows variant includes text-shadow? The variant description says "Multi-layer soft shadows" and "Large border-radius" and "Smooth transitions" — mostly about box-shadows. Text-shadow is part of the "you must change" list from the general instructions, but here there's no existing text-shadow. I'll add a subtle one to make the hero text pop softly.

Let me also think: should I add `filter: drop-shadow(0 4px 8px rgba(0,0,0,0.05))` to the badge or cards? Box-shadow is enough.

Final draft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #ff9f1c);
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.4s ease, border-radius 0.4s ease;
    }
}
```

Wait, `transition: border-radius 0.4s ease` — transitioning border-radius is weird. Better: `transition: box-shadow 0.4s ease, transform 0.4s ease;` But transform isn't changed anywhere. Still fine.

Should I include `!important` on the new properties? The original padding has `!important`. For the card shadows, if other CSS defines box-shadow with `!important`, mine might not apply. But I can't know. I'll add `!important` to the new declarations for the cards to ensure the visual refresh applies? That might be overly aggressive. The original used `!important` for padding likely to override something. For shadows, I'll not use `!important` — keep it clean.

However, for the badge, Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important`? Actually Bootstrap 5's `.bg-warning` uses `background-color: var(--bs-warning) !important`. Yes, in Bootstrap 5, color utilities use `!important`. So to override it, my `background` declaration needs `!important` too, or higher specificity. `.app-hero-section .badge.bg-warning` has specificity 0,3,0 vs `.bg-warning` 0,1,0 — higher specificity wins even with `!important`? Actually when both have `!important`, the one with higher specificity wins. Bootstrap's `.bg-warning` has `!important`; if I add `background: linear-gradient(...) !important;`, specificity 0,3,0 beats 0,1,0, so it wins. If I don't add `!important`, the `!important` on Bootstrap wins regardless of specificity. So I should add `!important` to the badge background.

Let me add `!important` to the badge's background, border-radius, box-shadow? Box-shadow isn't set by Bootstrap, so no `!important` needed. But to be safe for background, I'll add `!important`.

Also, border-radius on badge — Bootstrap sets `border-radius: 0.375rem` via `.badge`. My specificity is higher, so it will override without `!important`. Good.

For the contact cards, the original padding uses `!important`, which I keep. The new box-shadow/radius don't need `!important`.

Let me also reconsider the text-shadow on the hero column. If the hero has a dark background, a black text-shadow at 6% opacity is subtle and fine. If it has a light background, also fine. I'll keep it.

Actually, wait — the "horizontal-strips" target style mentions "Full-width sections" and "Alternating background colors per strip". This media query is for mobile. The hero section might be a strip. Maybe I should change the hero column's text color? But text color is a color change allowed? Yes, `color` is in the allowed list. But changing text color without knowing the design could hurt. It says "All color values: background, color, border-color