/* ============================================================
   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 answer CSS rewrite conservative mode. Need apply style asymmetric-blocks, gradient-rich. Need only visual properties. Original CSS has media query, selectors unchanged. Need keep layout. Need maybe no colors provided except none. Need introduce gradient-rich effects while preserving text-align and padding! Need respect no layout changes; padding only ±20% if change. Original has `.app-hero-section .row .col-lg-7 { text-align: center; }` and `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` and `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`. Need preserve selectors and properties? We can add visual properties within same rules? The instruction: refresh CSS visually. Keep all selectors and layout exactly. "Only change colors, shadows, radius, transitions, gradients." But original only layout properties text-align/font-size/padding. Need maybe add color etc to those elements? Yes likely. Need preserve text-align, font-size, padding. Need maybe update padding value? It's var(--space-md) can't change? We could change to same or ±20? Better keep var(--space-md) !important. Need add visual identity: maybe in media query, add `background`, `border-radius`, box-shadow, color? But should we alter only within existing rules. The prompt "keep ALL selectors and layout exactly as-is" means don't change selectors or layout. We can add properties. Need ensure no visual changes to layout. Add gradient/background to hero column? Badge? contact article/card? We can use `background`? But that is visual, but if article originally no background? Could affect layout? likely not. Need maybe gradient borders via border-image, but if adding border might affect layout (border width). We should avoid border widths? Can change border-color/style but if no border originally, adding border can alter layout. Better use box-shadow/outline without layout. Need "gradient-rich" but can apply backgrounds to elements. Need maybe use `background` and `color`, etc.

Need output CSS only. Ensure no markdown fences/preamble. Need preserve media query.

Let's design:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(88,28,135,0.12), rgba(236,72,153,0.08));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f59e0b, #ef4444, #f59e0b);
        background-size: 200% 200%;
        animation: gradient-shift 6s ease infinite;
        box-shadow: 0 10px 30px -12px rgba(245,158,11,0.6), 0 4px 10px -6px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
        border-radius: 999px;
        color: #fff;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
        backdrop-filter: blur(12px);
        border-radius: 1.25rem 0.625rem 1.25rem 0.625rem;
        box-shadow: 8px 8px 28px -16px rgba(30,27,75,0.25), -6px -6px 24px -18px rgba(244,63,94,0.2);
        transition: box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), background 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.3s ease;
    }
}
```

Need check "transform" animation? Adding transform might affect layout? It's a visual transform only, not layout. But no hover to activate. Fine maybe not needed. But "transition" property okay. Could include `transition: box-shadow .45s cubic-bezier(.4,0,.2,1), background .45s cubic-bezier(.4,0,.2,1);`. Need no animation names unless defined? Original no keyframes. If using animation with keyframes not defined, fine? But maybe better avoid adding custom animation requiring keyframes? We can use `background-size` but no animation. Gradient-rich with static gradients and multiple stops. "Smooth long transitions" need transition. Add transitions.

Need concern `.badge.bg-warning` original maybe bootstrap badge background; if we set background gradient with `background-size` but no animation. Fine.

Need concern `.app-hero-section .row .col-lg-7` applying gradient text could hide text? We set color transparent and background-clip text. But if text doesn't have padding? It's span? Could be okay, but "conservative" maybe shouldn't change color? But color values can change. If no `background-clip: text` browser support might make invisible? Since `color: transparent` could hide. Better avoid making text transparent. We can instead add a decorative background behind the column? But adding background to column might appear behind text, but careful. Let's choose add `color: #0f172a`? Actually original no color set, inherits. To make visual identity, maybe set color to dark? But this rule applies at mobile. We can set `color: #1e1b4b;` and maybe `text-shadow`? But "high contrast" maybe.

Could add `background` to `.app-hero-section .row .col-lg-7`? Since `col-lg-7` contains content; adding a gradient background may create a colored block behind entire text, okay but if no padding maybe not. But better not alter layout. We can add `color: #1e1b4b;` and maybe `text-shadow: 0 2px 8px rgba(244,63,94,0.15);` Not sure.

Need preserve `.app-hero-section .badge.bg-warning` font-size unchanged. Add color, background gradient, box shadow, border radius. Need maybe `border: 0`? If badge already has border maybe no. Don't add.

Need contact cards. Original padding var(--space-md) !important. We'll keep exactly. Add background gradient, border-radius, box-shadow, transition. Could add `border: 1px solid rgba(...)`? Since adding border affects size unless border-box maybe not. Avoid border. Could use `outline`? Maybe not.

Need be cautious with `backdrop-filter` if unsupported but okay. "filter, backdrop-filter" change allowed.

Need include gradient-rich. Let's craft final CSS. Need no markdown. Use only original selectors and add visual declarations. Ensure "display, position, grid..." unchanged (we don't touch). `text-align`, `font-size`, `padding` unchanged. `font-family` etc unchanged.

Need maybe add `border-radius` to all three? For hero column, maybe not. For badge and contact cards. Good.

Need maybe add `background-clip` etc. Use `-webkit-background-clip` on badge? For text color? On badge background, no need. Could not use.

Need "asymmetric-blocks" target style: unequal columns, mixed gaps, bold padding contrasts. But output cannot change grid/flex. We can only visual. Maybe use borders/radius. But no layout. We can create asymmetric border radii on cards: `border-radius: 1.5rem 0.75rem 1.75rem 0.5rem;` This matches asymmetric blocks. Add gradients. Good.

Need perhaps apply different backgrounds to each section: first rule hero column has subtle gradient, second badge warm gradient, third cards light gradient. That gives bold contrasting blocks. Need high contrast borders? Use box shadows rather than border to avoid layout. We can use `outline`? For "High contrast borders" maybe `outline: 2px solid rgba(...)` but outline doesn't affect layout; allowed. However outline maybe visible. Could add to badge and cards? Let's consider.

For `.app-hero-section .badge.bg-warning`, original Bootstrap warning badge maybe has `--bs-badge-color`? Not sure. Setting `outline: 1px solid rgba(153,27,27,0.25)` might be okay. But careful if badge has text. Fine.

For contact cards, `outline: 1px solid rgba(99,102,241,0.2)` maybe. But this could create double outline? Okay.

Need maybe add `border-color`? We can add transparent border? Don't. Use outline.

Need ensure query is preserved. We should output with `@media (max-width: 575.98px)` exactly.

Let's think whether adding `transition` to contact card could be considered layout? No.

Need perhaps avoid `animation` due to no keyframes. But gradient-rich static is enough. Maybe use CSS custom properties: `--radius: 1.25rem...`? Could but not needed.

Need maybe use `background-image` for card, and `background-color` fallback, gradient. Fine.

Need maybe use `color: #111827` in first rule to ensure foreground contrast with gradient behind? If we add background gradient to hero column, text needs color. Let's design final:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e1b4b;
        background: linear-gradient(180deg, rgba(224,242,254,0.55), rgba(224,231,255,0.35));
        border-radius: 0.5rem 2rem 0.5rem 2rem;
        box-shadow: 0 24px 48px -32px rgba(30,27,75,0.28), inset 0 -1px 0 rgba(255,255,255,0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);
        background-size: 160% 160%;
        color: #fff;
        border-radius: 999px;
        box-shadow: 0 12px 32px -12px rgba(239,68,68,0.55), 0 4px 12px -8px rgba(245,158,11,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
        outline: 1px solid rgba(255,255,255,0.35);
        outline-offset: 2px;
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), outline-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.96) 0%, rgba(243,244,255,0.82) 45%, rgba(254,242,242,0.72) 100%);
        backdrop-filter: blur(14px);
        border-radius: 1.75rem 0.75rem 1.5rem 0.875rem;
        box-shadow: 12px 12px 36px -18px rgba(30,27,75,0.3), -8px -8px 32px -20px rgba(244,63,94,0.18), inset 0 1px 0 rgba(255,255,255,0.8);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Need check if `background` property setting on `.app-hero-section .row .col-lg-7` could cause layout? Only if element has no padding, background will paint under content; no layout. But if col already has `background` from something, we may override; okay. `box-shadow` visual only. `border-radius` modifies rounding, okay.

Need check "asymmetric-blocks" means "default style (Aggressive only): unequal columns..." But we can't change columns. Our block backgrounds and asymmetric radii simulate. Maybe use `border-radius` asymmetric.

Need maybe no `outline` or could be visible. Fine.

Need ensure `font-size` in badge is unchanged; yes. `text-align` unchanged. Padding unchanged.

Need maybe `line-height`, etc not touched. Good.

Need maybe "background-size" with gradient but no animation; okay. "gradient-rich" via multiple stops. Multiple stops in hero, badge, card.

Need maybe use `background: radial-gradient(...)` too. Could combine multiple background layers. Let's enrich: For hero column, use `background: radial-gradient(circle at 20% 10%, rgba(236,72,153,0.12), transparent 40%), linear-gradient(...)`. For badge, use `background: linear-gradient(120deg, #fbbf24 0%, #f97316 40%, #ef4444 80%, #fb7185 100%);`. For cards, use layered radial + linear. That would satisfy.

Need no keyframes.

Need maybe `transition` on hero column? Could add `transition: background 0.6s ... ;`. But no hover. Fine.

Need maybe `color` of badge `#fff` may change font color; okay. But original badge bg-warning likely has dark text for contrast. Changing to white text on orange might reduce contrast? Orange #f97316 and white contrast around 2.3? Actually #f97316 luminance .357? with white contrast maybe 2.8? Not great. Use dark text? For warning badge, dark text #7c2d12 maybe. But visual identity perhaps use `color: #431407`? Hmm.

Need maybe maintain accessibility. The badge `bg-warning` from Bootstrap has yellow background and dark text. If we set gradient from amber to red, white text on amber may be low contrast. Better use `color: #fff` with `text-shadow: 0 1px 6px rgba(0,0,0,0.35)`? But white on orange is borderline. Could use `color: #3b0a10` maybe high contrast. But "bold contrasting blocks" maybe white text. Let's see. We can use darker background? The gradient includes red `#dc2626`, white good. On amber, not. Better use `color: #451a03`? But over red, dark brown poor. Maybe use `color: #fff` and include a darker gradient from orange to red, no amber? Let's choose `background: linear-gradient(135deg, #f97316, #ef4444 55%, #be123c);` White on red okay, on orange #f97316 white contrast 2.8 not enough. But if a badge is small, maybe okay for decorative. Could choose `color: #7f1d1d`? Hmm.

Since target style "bold contrasting blocks", white text on deep rose/red gradient is good. Use red shades: `#f43f5e`, `#e11d48`, `#be123c`. White contrast on #e11d48 is about 4.6? Actually #e11d48 relative luminance 0.212? Contrast ~3.9? Need maybe use `#be123c` dark enough. White on #be123c maybe 5.9. Let's use gradient `#f43f5e` to `#be123c`. That's rose/red. But original bg-warning is yellow; changing to red is okay? "Colors throughout file replaced with fresh palette". Fine. Use `color: #fff;`.

Need maybe include "gradient borders via border-image". Since adding border-image without border-width impossible? Could use `border: 0px solid transparent; border-image: ...`? Border-image works with border-style; zero width no appearance. Could set `border: 0`? But property `border-image` alone doesn't matter if no border. Could set `border: 1px solid transparent; border-image: linear-gradient(...) 1;` but adding border changes layout. However `border: 1px solid transparent` might be okay if element box-sizing border-box? But layout could shift by 2px. Since instruction says don't change border-width, "border-width" not change. We shouldn't add border width. Instead use `outline` or `box-shadow` to simulate gradient border. Could use `background-origin: border-box` with `border: 1px solid transparent`, but that changes border-width. Not allowed. Use `outline` with outline-color transparent? Maybe not.

Need maybe `box-shadow: 0 0 0 1px rgba(...)` acts as border. Visual only. Good.

Need maybe add `filter: saturate(...)`? Allowed. Could add to hero `filter: drop-shadow(...)` but not necessary.

Need maybe "transition timing, easing, duration" – we can add transition. Good.

Need perhaps "text-shadow" – add to badge.

Let's craft final concise CSS. Need no leading/trailing explanatory. Need use exact selectors, plus maybe `-webkit-backdrop-filter`? Not necessary but can include same property? It duplicates property but selectors unchanged.