/* ============================================================
   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 CSS in "conservative mode" - only visual changes allowed. The original CSS is a small media query block. Let me analyze it:

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

Hmm, this CSS doesn't have much visual styling - just text-align, font-size, and padding. But the task says I need to refresh visual identity. In conservative mode, I must keep selectors exactly, keep layout properties (text-align, font-size, padding). But I can add visual properties like colors, shadows, border-radius, etc. to these selectors.

Wait, the rules say:
- I can change colors, shadows, border-radius, transitions, gradients, opacity, etc.
- I must NOT change font-size, text-align, padding (well padding ±20% allowed, but maybe I should keep it).

Since the original CSS only has these layout-ish properties, I need to add visual properties to refresh the look. The target style is "card-mosaic" with "tight-rhythm" variant. But this is a media query for mobile. I should add visual enhancements that don't change layout.

Let me think about what selectors exist:
1. `.app-hero-section .row .col-lg-7` - text-align: center (mobile)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important

I can add:
- color, background, border-radius, box-shadow, transition, backdrop-filter, etc.

But I need to be careful not to affect layout. Adding padding would be a layout change. Adding font-size is forbidden. Adding text-align is forbidden.

I can add:
- background colors, gradients
- border-radius
- box-shadow
- transitions
- color

But wait - these are generic selectors. Adding background to `.contact-channels-section article` might change the look dramatically but that's the point - visual refresh.

The palette for card-mosaic: vibrant card colors on neutral background. Each card type a different accent.

Tight-rhythm: compact spacing, small border-radius (2-6px), subtle shadows.

So I should:
- For `.app-hero-section .row .col-lg-7`: maybe add a subtle text-shadow? But text-align is center. Actually adding color could be OK.
- For `.app-hero-section .badge.bg-warning`: this is a badge with bg-warning (Bootstrap). I could add a box-shadow, border-radius, maybe a subtle gradient on background? But `background-color` is set by `.bg-warning` class in Bootstrap. I can override with `background: linear-gradient(...)` potentially. But that changes the background - allowed.
- For `.contact-channels-section article` and `.contact-quick-section .contact-card`: add background, border-radius, box-shadow, transition.

However, I need to be careful with `!important` on padding - I keep that line exactly.

Let me produce a rewritten CSS that preserves all selectors and the layout properties, and adds visual flair.

Since the original had no colors at all, I'm free to add them. But must keep the original declarations too? Actually I can keep them as-is, just add visual properties. The instruction is "Refresh this CSS visually". Since original declarations are layout/typography, they must stay.

Let me craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2a2238;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff8c1a);
        color: #3b2300;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(255, 140, 26, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fdfcfb, #f0ece9);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(45, 35, 66, 0.08), 0 8px 24px rgba(45, 35, 66, 0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        backdrop-filter: blur(4px);
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 2px 6px rgba(45, 35, 66, 0.12), 0 16px 32px rgba(45, 35, 66, 0.1);
    }
}
```

Wait - can I add a `:hover` selector? The rules say:
- Pseudo-classes (:hover, :focus, ::before, ::after) - keep exactly. That means I can use them if they were in original, but adding new selectors is a gray area. The rule for selectors says "Class names: keep EXACTLY", "Pseudo-classes: keep exactly". It doesn't explicitly forbid adding new selectors, but the task says "Keep ALL selectors and layout exactly as-is". Adding a `:hover` selector is adding a new selector. That might be considered changing the selector list. I should be safe and not add new selectors. Only modify existing ones.

So no `:hover` addition. The original has three selector groups; I should produce the same three groups, with the same layout declarations preserved and visual declarations added.

Also - adding `border` - is that a layout change? Border affects box size but box-sizing is often border-box. The rules allow border-color and border-style changes but not border-width. Adding a border where none existed introduces a width... Hmm. The rule says "border-color and border-style (NOT border-width)". That implies I shouldn't add new border-width. Adding `border: 1px solid ...` adds border-width, which is forbidden. Better to use `outline` instead? But outline doesn't take effect the same way. Or use `box-shadow` for an inset ring: `box-shadow: inset 0 0 0 1px rgba(...)`. That's a great CSS trick that doesn't alter layout.

Also `backdrop-filter` - that's allowed (filter, backdrop-filter). But careful - it can create a containing block. In conservative mode it's allowed though.

Let me also consider: the target style is "card-mosaic" with vibrant accent colors. Each card type a different accent. There are two selectors in the third rule: `.contact-channels-section article` and `.contact-quick-section .contact-card`. I could give them different background colors by splitting the selector — but that would change the selector list, which is forbidden. I must keep them as a combined selector with comma. However, I can add a separate rule for `.contact-channels-section article` and `.contact-quick-section .contact-card` individually... but that's adding new selectors. Hmm.

Actually, in CSS you can keep the original combined selector and then add separate rules that override for each type. Adding new selector rules is arguably "adding" not "changing". The instruction says "Keep ALL selectors exactly". I think the safest interpretation is: the output CSS must contain all original selectors unchanged, and not add any new selectors. So I should only modify within those three rules.

But wait - the instruction also says "Vary card sizes via grid-row span" for aggressive layout, but in conservative mode the layout is fixed. So no.

Let me re-read the task: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." Then the forbidden list explicitly mentions "padding, margin (keep similar values, ±20% maximum)". So I can keep padding. Good.

"border-color and border-style (NOT border-width)" - means I can change color/style but not add width. So I'll avoid `border` property entirely and use inset box-shadow ring.

Let me write a clean rewrite:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2233;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
        transition: color 0.25s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffce6b, #ff9f2e);
        color: #482a00;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(255, 159, 46, 0.4), 0 1px 2px rgba(72, 42, 0, 0.12);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fffbf2, #f3ece1);
        color: #3a3244;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(40, 30, 55, 0.08), 0 6px 18px rgba(40, 30, 55, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
        transition: background-color 0.25s ease, box-shadow 0.25s ease;
        caret-color: #ff9f2e;
        accent-color: #ff9f2e;
    }
}
```

Hmm, but `caret-color` and `accent-color` are a bit odd for articles/cards. Could still apply if there are inputs. Let's think of a better approach.

Also the target style says card-mosaic with vibrant card colors on neutral background, each card type a different accent. But since I can't split the selector, I could use a subtle colorful gradient that contains multiple accents. Or use `background: linear-gradient` with two hues.

Alternatively, I can use the original combined selector for the shared styles, and then... no, no new selectors. Hmm.

Actually, wait. Let me reconsider the constraint. The "SELF-CHECK" says "Every selector character-for-character preserved?" This means selectors that were in the original must be preserved exactly. It doesn't necessarily forbid adding new rules. But the output goal says "Goal: same layout, fresh color palette + shadow/radius identity". Adding a `:hover` pseudo adds interaction but no layout change. Still, the "MUST CHANGE" is about visual properties. The "NEVER CHANGE" list includes "Pseudo-classes (:hover, :focus, ::before, ::after)" under selectors - "keep exactly" - which means if I use them, keep them; it doesn't say I can't add them. But the instruction "The HTML is FIXED — only colors, shadows, and decorative properties may change" suggests I shouldn't add new rules that change behavior.

I'll be cautious and not add new selectors. Original had 3 rules; output will have 3 rules.

Let me refine with target style: card-mosaic, tight-rhythm.

- Compact spacing: already padding var(--space-md).
- Small border-radius (2-6px): use 6px.
- Subtle shadows or none: subtle multi-layer shadows.
- Information-dense feel.

Color palette: vibrant card colors on neutral background. Each card type a different accent — but I can't split. However, I could use CSS variables with custom properties... but that requires changing the selectors/adding rules. Not allowed.

Actually — an idea: I can use the original combined selector for the shared visual style, but the two different card types have different parent contexts. Within one rule, I can't differentiate. But I can change the background to a gradient that includes multiple vibrant hues, e.g., a very subtle gradient from peach to mint. That gives a mosaic feel without splitting.

Alternatively, I can keep the original selector text exactly but add a new selector group... no.

Let me just write a strong visual refresh within the three rules.

Let me reconsider `.app-hero-section .row .col-lg-7` — a hero column. Adding color + text-shadow. Maybe also `caret-color`? Not needed.

`.app-hero-section .badge.bg-warning` — a badge. `bg-warning` in Bootstrap sets `background-color: #ffc107`. I override with a gradient. Fine. `border-radius: 5px` gives a pill-ish but tight look. Could use `border-radius: 4px` for tight rhythm.

`.contact-channels-section article` and `.contact-quick-section .contact-card` — cards. Give them:
- `background: linear-gradient(145deg, #ffffff, #f3efe9)`
- `border-radius: 6px`
- `box-shadow: 0 1px 2px rgba(...), 0 4px 12px rgba(...)`
- `transition: box-shadow 0.25s ease, transform 0.25s ease` — but transform on hover? No hover. Adding transition alone is fine.
- `backdrop-filter: blur(6px)` — could be nice, but on mobile could hurt performance. Still allowed.

Could also add `opacity` — but changing opacity is risky for readability. The rules list opacity as "must change" (visual identity only). But making things less opaque could hurt. I don't need to change every property; I just need to refresh.

Let me also think about the `--space-md` variable: it's used for padding, I keep that.

Now, the self-check mentions "All color values ... replaced with fresh palette". In the original, there are no color values. So I'm adding them. Good.

Let me pick a cohesive palette:

Neutral background: warm off-white `#f6f3ef` / `#faf8f5`.
Vibrant accents:
- amber/orange: `#ff9f2e`, `#ffc75f`
- teal/mint: `#2dd4a7`
- deep plum text: `#332b3c`

For badges: amber gradient.

For cards: a soft warm gradient with an accent ring via inset shadow.

Text color for hero: deep plum.

Let me also add `accent-color` and `caret-color` maybe to the hero column? Not meaningful.

Actually, I can add `color-scheme`? Not necessary.

Let me write the final:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #332b3c;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
        transition: color 0.25s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffce6b 0%, #ff9f2e 100%);
        color: #4a2c00;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(255, 159, 46, 0.35), 0 1px 1px rgba(74, 44, 0, 0.15);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: box-shadow 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fffdf9 0%, #f4ede4 100%);
        color: #332b3c;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(51, 43, 60, 0.08), 0 8px 20px rgba(51, 43, 60, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
        transition: box-shadow 0.3s ease, background 0.3s ease;
        caret-color: #ff9f2e;
        accent-color: #ff9f2e;
    }
}
```

Hmm, `transition: background...` - background as a shorthand transition is fine.

But wait - adding `caret-color` / `accent-color` to articles is odd. Let me instead add `outline`? The rules mention outline styles can change. But adding an outline that wasn't there is decorative. Maybe not.

Let me think about whether to include `backdrop-filter`. It can cause weird rendering with fixed backgrounds. I'll skip it to be safe on mobile.

Also, "Each card type a different accent" — since I can't split, maybe I can use a subtle conic-gradient or a gradient with multiple color stops that reads as mosaic-ish. But for a card background, a warm, neutral-tinted gradient is fine. The mosaic vibran