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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite the CSS visually only, preserving selectors, layout, typography etc. The original CSS is a small media query with a few rules. We need to change colors, shadows, radius, transitions, gradients. The selectors are:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 { text-align: center; }
    .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
    .contact-channels-section article,
    .contact-quick-section .contact-card { padding: var(--space-md) !important; }
}

We can change visual properties within these rules. However, the rules currently only set layout-ish properties: text-align, font-size, padding. Those are in the "NEVER CHANGE" list: text-align is typography layout? Actually text-align is listed under layout in the "never change" section: text-align, vertical-align. Font-size is typography fixed. Padding is layout but can vary ±20%. So we cannot change these property values? The instructions say "only colors, shadows, and decorative properties may change." But the original CSS has no colors, shadows, transitions, gradients. We need to add visual decorations without changing the existing declarations? We can add new declarations to the same selectors? The output must preserve the layout exactly and change only visual identity. We can add color, background, border-radius, box-shadow, transition, etc. to these selectors. The existing declarations for text-align, font-size, padding must remain essentially the same? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we should keep the existing property assignments but can also add new visual properties. We might adjust padding slightly within ±20%? But probably not necessary. The "dense-dashboard" target style wants compact, but we must not change layout structure. Since the original has padding var(--space-md) !important, maybe we can change that to a different padding value? It says keep similar values, ±20% maximum. But the instruction also says "NEVER CHANGE: padding, margin (keep similar values, ±20% maximum)". So we can change padding within ±20%. But careful: it's using a CSS custom property var(--space-md). We could change the custom property value? But custom properties are defined elsewhere. We are only given this file snippet. We can define new custom properties? The instruction says CSS custom properties values can change, but if we define them here, we might affect other files. Better not introduce new custom property definitions unless originally there. However, we can change the padding to a concrete value within ±20% of the computed var value. But we don't know the value. Safer to leave padding as is.

We need to add visual flair: background gradients, border-radius, box-shadow, transitions. However, adding background to `.app-hero-section .row .col-lg-7` might alter appearance but not layout. But this is a media query for small screens; adding background to a col might be okay. We should be conservative and only add decorative properties that don't affect layout.

Let's examine the selectors:

1. `.app-hero-section .row .col-lg-7` — a column within hero section. On small screens, text-align center. We could add background gradient? That might be too much. Maybe add a background gradient to the column to make it stand out, with border-radius and box-shadow. But this might overlap with existing backgrounds. The hero section likely has a background already. Adding a background to col could be visually distinct. But it may conflict. Better to add only a subtle transition and maybe a text-shadow? Text-shadow is allowed. But the target is dense-dashboard, gradient-rich. We could apply a gradient background to the badge and article cards.

2. `.app-hero-section .badge.bg-warning` — a badge with Bootstrap warning background. We can override background with a gradient, change color, border-radius, box-shadow, transition. The existing font-size is 0.85rem, keep it. We can add background: linear-gradient(...) and color, border, etc. This is visual.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. We can add background gradient, border, border-radius, box-shadow, transition, etc. The existing padding is var(--space-md) !important; keep it. Add visual properties. Also maybe a hover effect? Could add transition and on hover change shadow/transform. Transform is not layout? Transform is a visual property, allowed? It might affect layout? transform doesn't affect layout, but the instruction says only colors, shadows, radius, transitions, gradients. Transform not in the allowed list. So avoid transform. We can add transitions for background, box-shadow, border-color.

We can add ::before/::after? The selector list is for article and .contact-card. We can add pseudo-elements to those selectors? The instruction says pseudo-classes (:hover, :focus, ::before, ::after) are selectors that must be kept exactly if present, but we can add new ones? It says "Selectors: keep EXACTLY" and lists pseudo-elements. It doesn't explicitly forbid adding new selectors, but the output should preserve all selectors. Adding new selectors would change the CSS structure. The task says "Keep ALL selectors and layout exactly as-is." That implies we cannot add new selectors. So we should only modify existing rules and the declarations within them. We can add new declarations to existing selectors, but not new selectors. So no ::before.

Thus we must enhance visual appearance solely via existing selectors. We can add properties like background, border, border-radius, box-shadow, color, transition, etc. to the three rules.

Let's craft a fresh palette: dense-dashboard with cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background. Gradient-rich: use linear-gradients.

We need to ensure we don't change text-align, font-size, padding.

For `.app-hero-section .row .col-lg-7`: We can add:
- background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%); maybe too much.
- backdrop-filter: blur(4px); (allowed)
- border-radius: 1rem; (visual)
- box-shadow: 0 8px 32px rgba(30, 41, 59, 0.3); (visual)
- transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); (transition)
- color: #f8fafc; text-shadow: 0 2px 4px rgba(0,0,0,0.2); (color, text-shadow)

But adding a background to a column might change the look dramatically. Is that acceptable? Yes, visual refresh.

For `.app-hero-section .badge.bg-warning`: We can override the Bootstrap bg-warning with a gradient:
- background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%); (accent blue/purple)
- color: #ffffff;
- border: 1px solid rgba(255,255,255,0.2);
- border-radius: 999px; maybe already pill
- box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
- transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;

But the badge is "bg-warning" so it's likely a yellow badge. We can change to blue gradient. That's fine.

For cards:
- background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%); (white cards on slate)
Actually if container is slate, cards white. Use white gradient.
- border: 1px solid rgba(59, 130, 246, 0.2);
- border-radius: 1rem; maybe 0.75rem for dense-dashboard.
- box-shadow: 0 8px 16px rgba(30, 41, 59, 0.08), 0 2px 4px rgba(30, 41, 59, 0.04);
- transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
- color: #1e293b; maybe not necessary.

We can add a background to the column and cards. Since the original padding is var(--space-md) !important, our added padding? We won't add padding.

We need to be careful with the `.app-hero-section .row .col-lg-7` background in a mobile media query. Applying a full background to the column might create a box with background around the text. It might be okay. To be more conservative, we could use a text-shadow and a subtle background gradient with low opacity. Let's do:
background: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.2) 100%);
backdrop-filter: blur(6px);
border-radius: 1.25rem;
box-shadow: 0 10px 30px rgba(30, 41, 59, 0.25);
color: #f8fafc;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

But adding color might override inherited text color. That's okay, visual.

However, the column might already contain other elements with different colors. Forcing color could be bad. But it's a hero section column, likely title text. We can keep.

Alternatively, we could add a background to the badge and cards only, and just add a subtle text-shadow to the column. But the task wants "gradient-rich" so need gradients on most backgrounds. We can add a gradient background to the column with a very subtle tint, not too strong. Use a semi-transparent gradient that doesn't overpower.

Let's consider the original context: It's a sports event? The file name saishi.css (比赛? maybe competition). The hero section likely has a background image already. Adding a background to col might overlay. Better to use background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(99,102,241,0.05) 100%); border-radius: 1.5rem; box-shadow: 0 8px 32px rgba(30,41,59,0.1); border-left: 4px solid #3b82f6; (border-left changes width? but border-width is allowed? It says border-color and border-style may change, NOT border-width. So we cannot add border-width if it wasn't there. Adding a border with default width would be a change. We can set border: 1px solid ... but that's adding width. The instruction says "border-color and border-style (NOT border-width)" meaning we should not change border-width. But if there was no border, adding a border would introduce width, changing layout (box model including border). However, if we add border with `box-sizing: border-box`? The layout might change slightly. To be safe, avoid adding borders unless they replace existing borders. We can use outline? Outline doesn't affect layout. We can add `outline: 1px solid ...` or `outline: 2px solid ...` and `outline-offset`? Outline doesn't take space. The instruction says "outline styles (color, type)" can change, but not mention adding outline property. It says "outline-color" change, but we can add outline property as decorative. It doesn't affect layout. So we can use outline for borders to avoid layout shifts.

Better to use box-shadow to simulate borders, which doesn't affect layout. We can add `box-shadow: inset 0 0 0 1px rgba(...)`. That's a decorative border without layout change.

For cards, they likely already have a border or shadow from original CSS. But our snippet doesn't show them. We can override with our shadow. Adding box-shadow is safe.

We need to preserve `padding: var(--space-md) !important;` in the card rule. We'll keep that declaration exactly. Add other declarations.

Let's structure output: The media query block with same selectors and same existing declarations. We can add extra declarations after the existing ones or before. Order doesn't matter mostly. We can place visual properties before or after. To ensure they apply, we keep original declaration and add new ones.

Let's draft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(30, 41, 59, 0.1) 50%, rgba(59, 130, 246, 0.15) 100%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 1.25rem;
        box-shadow: 0 8px 32px rgba(30, 41, 59, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        color: #f8fafc;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #3b82f6, #6366f1 50%, #8b5cf6);
        color: #ffffff;
        border-radius: 999px;
        box-shadow: 0 4px 18px rgba(59, 130, 246, 0.45), 0 1px 3px rgba(30, 41, 59, 0.2);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 40%, #e2e8f0 100%);
        border-radius: 0.875rem;
        box-shadow: 0 12px 28px rgba(30, 41, 59, 0.08), 0 4px 12px rgba(30, 41, 59, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        color: #1e293b;
        transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.3s ease;
    }
}

But we have transform in badge transition. Transition property lists transform, but we are not allowed to change transform? The transition itself is allowed. But the property "transform" in a transition list is not changing transform, just transitioning it. However, if transform isn't used, it's harmless. To be safe, remove transform from transition.

Also, note that `.badge.bg-warning` is a Bootstrap badge; we are overriding background. That's fine. We should maybe preserve the warning aspect? The target palette wants accent blue, so yes.

The media query is max-width: 575.98px. On small screens, we want dense-dashboard. The dense-dashboard style has compact padding. We didn't change padding. The cards maybe have `var(--space-md)` from original, which is likely 1rem? We keep.

We need to ensure we are not violating "width, height, padding, margin within ±20%" — we didn't alter them. We added border-radius, box-shadow, background, color, text-shadow, transition, backdrop-filter. Good.

We also must ensure "text-align, vertical-align" unchanged: we keep text-align: center. font-size kept. Good.

Now, perhaps we should not add `color: #f8fafc` to the hero column because it might affect children and override them. But yes, a fresh visual identity.

Could add `caret-color` or `accent-color`? Not necessary.

Let's also consider using CSS custom properties for colors? The original doesn't define any. We can just use hex values.

One issue: adding `backdrop-filter` to the hero column might not have an effect if background is transparent. We have background with rgba, so it will blur what's behind the column. That's a nice gradient-rich effect.

Another issue: The column may have its own background inherited from a CSS variable