/* ============================================================
   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 are given a CSS snippet. The task is to refresh visual identity only. The original 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;
    }
}
```

We need to change colors, shadows, radius, transitions, gradients, etc. But this CSS only contains text-align, font-size, and padding. Under the conservative constraints, we cannot change layout properties like text-align, font-size, padding (within ±20% padding maybe, but this is padding with !important and a variable). But we can add visual properties? We should keep selectors and layout exactly. However, the request says "visual identity only". If there are no visual properties (colors, shadows, etc.), we might add them? But the original CSS does not have any. The target style is card-mosaic, sharp-edges. We need to output a rewritten CSS. Since the selectors are within a media query, we can add color, background, border, box-shadow, border-radius, transitions to those elements? But we must not change layout. Adding visual properties is allowed. However, careful: we must preserve all selectors exactly and their existing declarations. We can add new declarations to these rules, or we can keep them and add visual refresh. The instruction says "Only change colors, shadows, radius, transitions, gradients." Since there are none, we could add them to satisfy the style.

But the file is "assets/css/saishi.css#块2/2" — maybe this is a snippet from a larger file, and we are to rewrite this chunk. We should output CSS that includes the same selectors and existing declarations, but add visual properties consistent with the target style.

Let's interpret: We are refreshing this CSS. The existing declarations are layout/text. We should not change them. But we can add color, background, border, box-shadow, border-radius, transition to the same selectors. Also the badge.bg-warning could have a color etc. But careful: the .badge.bg-warning might already have background from Bootstrap, but we can override within media query. However, the original font-size 0.85rem is a typography property we should keep.

We need to follow the target style: card-mosaic with sharp edges. But these elements are not necessarily cards. Let's see selectors:

1. .app-hero-section .row .col-lg-7 — a column. We could add visual treatment? That might be weird. But the instruction allows visual changes only. We could set color, text-shadow? But maybe we should not add layout-affecting properties like background to a column? Background is visual, not layout. It's allowed.

2. .app-hero-section .badge.bg-warning — badge. We can change background-color, color, border, box-shadow, border-radius, transition.

3. .contact-channels-section article, .contact-quick-section .contact-card — cards. We can apply card-mosaic style: strong border, hard offset shadow, small radius, snappy transition.

Since the media query is for max-width 575.98px (mobile), we should adapt accordingly, but still fine.

Need to produce a complete CSS. We should not output markdown fences or explanations. We should preserve selectors exactly. We can add declarations to existing rules. We should not change the existing declarations. The existing declarations are:
- text-align: center;
- font-size: 0.85rem;
- padding: var(--space-md) !important;

We cannot change padding? Padding is a layout property. We must keep it similar ±20%. But the instruction says "padding, margin (keep similar values, ±20% maximum)". Since here it's var(--space-md) !important, we cannot change the value, but we can keep it. It's already there. We can add more declarations.

We should probably also add visual declarations to the media query. The target style "card-mosaic" is aggressive but we are in conservative mode, so we can't change layout structure, but we can add background colors, borders, shadows.

Let's design a fresh palette for sharp edges:
- Neutral background maybe #f8f7f4
- Accent colors: coral, teal, mustard, etc.
- Borders: 2px solid dark ink (#1e1e1e) or strong color.
- Hard offset shadows: 4px 4px 0px 0px rgba(0,0,0,0.2) or solid color.

For .app-hero-section .col-lg-7, maybe add a subtle background or text-shadow? But it's a column. We can set color to a deep navy and maybe a text-shadow? But text-shadow is visual. However, in a hero section, maybe the column contains text. Could set color and text-shadow. But the target style is card-mosaic, maybe not relevant to hero column. But we can still apply a vibrant color.

Let's inspect the original CSS. It only has a media query. It doesn't include base styles. So adding colors to these specific elements in mobile is acceptable.

We need to write the CSS. Let's plan:

For the column:
```
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #1a1a1a;
    text-shadow: 2px 2px 0 rgba(255, 183, 3, 0.3);
}
```
But text-shadow might be okay. However, if the column has multiple text elements, applying color to the column will inherit. Fine.

For badge:
```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #ffb703;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    border-radius: 0;
    box-shadow: 3px 3px 0 #1a1a1a;
    transition: all 0.15s ease;
}
```
Note: we must not change font-size. Keep it. We add visual props. But if we set background-color, we override Bootstrap bg-warning. That's okay.

For contact cards:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #ffffff;
    border: 2px solid #1a1a1a;
    border-radius: 0;
    box-shadow: 4px 4px 0 #1a1a1a;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
```
But transform is a layout/animation property? The instruction says animation-name can change, but transform is a property that can affect layout? Actually transform doesn't affect layout, but it's a visual property. However, the instruction says "display, position, grid-template-*, flex-direction, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align" are prohibited. Transform is not listed, so we can add it. But be careful: transform might be considered layout? It can create a containing block and affect fixed positioning, but in this context it's fine. However, the target style says hard offset shadows with 4px 4px 0px solid color. Usually no transform needed. We can add a hover transform? But the media query is mobile, hover may not apply. We can add transition but no transform. To be safe, avoid transform because it's not explicitly allowed? It says "animation-name (values like duration/timing CAN change)" but not transform. Actually transform is a visual property, not a layout property. The conservative mode prohibits certain properties. Transform is not on the prohibited list. But the general statement: "Only colors, shadows, radius, transitions, gradients." So we should only change/add those categories. Adding transform would be outside. Better avoid.

We can add background-color, border, border-radius, box-shadow, transition. These are allowed.

Should we add a different accent for each card type? The selector list applies to both article and .contact-card. We can't differentiate because they share the same rule. We could add separate rules, but that would change the CSS structure by adding new selectors. The instruction says "Preserving ALL selectors and layout exactly." We can add new rules? It says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — This likely means every selector from input must appear; new rules could be allowed? But it says "No AI-REWRITTEN comments" and "same layout". Adding new rules might alter cascade but not layout. However, to be safe, we should not add new selectors. We can only modify existing rules.

But the target "card-mosaic" may require different accent colors for different card types. Since the selector combines both, we cannot give them different colors without additional selectors. But maybe we can use CSS variables with nth-child? That would require new selectors. But we should not add new selectors. Perhaps we can set the same accent for both, still okay.

Alternatively, we can augment the existing declarations with visual properties. The media query also includes the badge. We can make the badge a different accent.

The output must begin with a media query. We'll produce:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb703;
        color: #1a1a1a;
        border: 2px solid #1a1a1a;
        border-radius: 0;
        box-shadow: 3px 3px 0 #1a1a1a;
        transition: all 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fff;
        border: 2px solid #1a1a1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 #1a1a1a;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}
```

But is this enough? We might want to add additional visual identities: like .contact-channels-section article maybe a different background? Since both are included, we could use CSS variables if they exist, but we don't know. We could set background-color to a muted color. Alternatively, we can add a rule for hover? The instruction says we can change transition, etc. But we shouldn't add new rules.

Let's consider: The "card-mosaic" target style says "Vibrant card colors on neutral background; Each card type a different accent." We can set the article and .contact-card to different background colors if we split the selector list into two rules. Is that allowed? The original has a selector list. The instruction says "Selector lists (commas)" preserved. It says "Preserving ALL selectors and layout exactly." If we split a selector list, we are not preserving the exact selector list? It says "Every selector character-for-character preserved?" Self-check. The selector list is `.contact-channels-section article, .contact-quick-section .contact-card`. If we split into two separate rules, the selectors are still there, but the selector list grouping is changed. Does that violate "selector lists (commas)"? It says under NEVER CHANGE: "Selector lists (commas)" — meaning the comma-separated group should not be changed? Probably it means do not add/remove selectors from the list, but splitting might be considered changing the structure. To be conservative, keep the list intact and assign the same visual style.

Could use CSS variables to assign different colors via inheritance? Not possible with same rule.

Maybe we can use `article` and `.contact-card` elements are different, but the rule applies to both. We can add a `background-color` that works for both. But the target wants vibrant card colors. We can choose a single vibrant accent, e.g., #f4a261 or #e76f51.

Alternatively, we can add `box-shadow` with a color that pops. That's fine.

Could we add `border` and `box-shadow` to `.contact-channels-section article, .contact-quick-section .contact-card` with two different accent colors via `&` or `:is()`? That would require adding selectors. Not safe.

Given the self-check, "Every selector character-for-character preserved?" If we keep the selector list exactly, yes.

Now, do we need to add a background color to the column? Maybe not; but we want a visual refresh. Could add `background-color: rgba(255, 255, 255, 0.6);` but that might be layout-ish? It's visual. But the hero section probably has a background image; adding background to a column might create a block behind text. Okay.

Let's also consider `border-radius` for sharp edges: "Small or zero border-radius (0-4px)". We'll use `border-radius: 0;` for cards and badge.

"Hard offset shadows: 4px 4px 0px solid color" Usually box-shadow syntax: `4px 4px 0px 0px #1a1a1a` or `4px 4px 0 #1a1a1a`. We'll use 4px 4px 0 #1a1a1a.

"Strong borders (2-3px solid)": use 2px solid #1a1a1a.

"Snappy transitions (0.15s)": use 0.15s ease.

Also, the original CSS may be part of a larger file. The class `.bg-warning` from Bootstrap has `--bs-badge-bg` or `background-color`. We override with `background-color: #ffb703`. Good.

Let's make sure we don't change font-size, text-align, padding. We keep them.

We should maybe include `border-style: solid` if we are setting border? But `border: 2px solid #1a1a1a` sets style. Good.

Let's think about color palette. Use neutral background? The background of page not in this CSS. We can set card background to a warm off-white #fff3e0? But "vibrant card colors" suggests cards themselves are colored, not just white with borders. For example, each card type a different accent: coral #ff6b6b, teal #4ecdc4, yellow #ffe66d, etc. But since we can't separate, choose one vibrant color for all cards? Maybe a bright cream? Actually the cards should be vibrant. Let's set background-color: #ff9f1c (orange) with dark border and shadow. But then any text inside the card would have to be dark. Since we can't change text color? We can set `color: #1a1a1a` to ensure legibility. That's allowed.

Alternatively, use a neutral white background and colored borders/shadows. The target says "Vibrant card colors on neutral background" — cards are vibrant. Let's pick a vibrant yellow-green? But cards might have text; we can set color dark. Let's choose `background-color: #f4d35e` (yellow) for both cards. But then in mobile, both card types same. That's okay.

But perhaps more tasteful: Use `background-color: #fdf0d5` with `border: 2px solid #1a1a1a; box-shadow: 4px 4px 0 #e63946;` — shadow is vibrant red while card is neutral. That may satisfy "vibrant card colors" less, but it's a design choice. The target says "Each card type a different accent" but we can't. Maybe we can use `box-shadow` color different for `.contact-channels-section article` and `.contact-quick-section .contact-card` if we add an `> `? No.

Could use CSS variables and custom properties: We could set `--card-accent` on a parent? But that would require adding a rule. Not allowed.

Let's keep it simple and faithful to the instruction: We can add the same style to both card selectors but with vibrant card background. Let's pick `background-color: #ffb703` (amber) for cards. But the badge also uses amber. Maybe differentiate badge with `#06d6a0` (teal). The hero column can have text color `#073b4c` (dark blue). The cards could be `#ffd166` (yellow) with dark border and shadow `#ef476f` (pink-red). That would be vibrant.

Let's define:
- Hero column: color #073b4c; text-shadow 2px 2px 0 rgba(255, 209, 102, 0.5).
- Badge: background #06d6a0, color #073b4c, border 2px solid #073b4c, box-shadow 3px 3px 0 #073b4c.
- Cards: background #ffd166, color #073b4c, border 2px solid #073b4c, border-radius 0, box-shadow 4px 4px 0 #ef476f, transition 0.15s.

This creates a vibrant palette. All are visual only. Good.

But note: The badge bg-warning normally has yellow background. Changing to teal might be weird for a warning badge, but the style refresh is arbitrary. It's okay.

Now, should we add `outline: none`? Not necessary. Could add `accent-color`? Not needed.

Also, the hero column `text-align: center` remains. We add `color` and `text-shadow`. Text-shadow is allowed. But is `text-shadow` a visual property? Yes.

Could