/* ============================================================
   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 modify CSS. Need preserve selectors and layout/typography. Given only small media query with rules. Need refresh visual only. We can adjust colors? Currently no colors. Need add? We can change properties that are color/shadow/radius etc. But we must not change layout fixed properties. We have padding var(--space-md) !important, font-size 0.85rem. These typography/layout protected cannot alter. Selectors: @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; } }

Need output rewritten CSS only. Need change colors/shadows/radius etc, but there are no colors. Need maybe add box-shadow, border-radius, background? We can add visual properties as long as not layout? Colors okay. Need keep same selectors, same text-align, font-size, padding (padding within ±20? It is var reference, cannot change padding). We can add color, background, border-radius, box-shadow, transitions maybe. But careful: On elements that may be existing. Need fresh palette, glow. Since only media query small, context unknown. We can add properties that enhance visual, but might affect existing styles? We should "refresh visual identity" within constraints, add new color declarations. But don't alter protected properties. Need maybe for .app-hero-section .row .col-lg-7 add text-shadow? But text-align center stays. For badge add box-shadow, color? font-size unchanged. For contact cards add border-radius, background, box-shadow, transition, border? Need not alter width etc.

Need choose target style asymmetric-blocks / glow-effects. But selectors are not structurally changed. Use colors: maybe deep indigo backgrounds, amber accents? Need ensure variables? Could use custom properties? We can set CSS custom props values? Need preserve existing custom props? It says CSS custom properties values can change. But original doesn't define. We can define within media? Need maybe use var(--space-md) remains. We can add colors using variables that may exist? Unknown. Safer hardcode.

Need ensure not changing layout: Adding border-radius doesn't affect layout. box-shadow doesn't. transition okay. But adding background/border may affect visual not layout, okay. But adding border can affect dimensions unless border-width previously 0? Actually border adds to box size if box-sizing content-box; but likely border-box. However can change layout visually maybe not layout structure. Need avoid border-width because "border-color and border-style (NOT border-width)" not border-width changes. We can set border: 1px solid color? That is border-width, prohibited. So avoid setting border-width. Use box-shadow for borders. border-radius can be added. background okay. color okay. text-shadow okay. backdrop-filter may be too much. Need maybe use outline? outline doesn't affect layout, okay.

Need be careful text-align protected, font-size protected, padding protected. We can add color, background, text-shadow, box-shadow, transition, border-radius, backdrop-filter, maybe filter. For badge .bg-warning: it already has bootstrap bg-warning color. We can add background: #...? This may override? Could set color and box-shadow. But if .bg-warning has bootstrap background color (yellow) and we add background? We can set background: linear-gradient? That changes color, okay. But font-size remains. Need maintain accessibility. It's in mobile. We can set badge background to amber gradient and color dark, glows. But then class name bg-warning no longer "warning" but okay.

Need ensure for .contact-channels-section article and .contact-quick-section .contact-card: They both may be cards. We can add border-radius, box-shadow, background, transition, maybe backdrop. Need not alter padding. Since original has padding var(--space-md) !important. We can add background: maybe random dark sections. But in media query, the cards maybe become full width? We can add background. Target style "asymmetric-blocks" not applicable since structure fixed. But glow effects: use 0 0 24px rgba(accent, 0.4). Need choose accent color e.g. #f59e0b or #38bdf8. We can set --? Maybe define custom props? Use accent color. Since only visual, okay.

Need output only rewritten CSS. Need maintain selectors exact with commas? The comma list with line break? Preserve. Need order? Fine.

Need maybe add @media same. Within, add:
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #fff7ed;
    text-shadow: 0 2px 24px rgba(251,146,60,0.45), 0 0 8px rgba(251,146,60,0.25);
}
But careful .col-lg-7 likely a column with text? text-align center and color perhaps if hero. Add text-shadow maybe okay.

.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    color: #431407;
    box-shadow: 0 0 18px rgba(251,146,60,0.55), 0 4px 12px rgba(0,0,0,0.25);
    border-radius: 999px;
}
But .badge already has border-radius? Fine.

.contact... article/card:
    padding: var(--space-md) !important;
    background: rgba(30, 41, 59, 0.75);
    border-radius: 16px;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,0.4), 0 0 0 1px rgba(251,146,60,0.25), 0 0 24px rgba(251,146,60,0.12);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, box-shadow .3s ease, background .3s ease, border-radius .3s ease;
But transform is layout? It's a visual transform, could affect layout? transform doesn't change layout. But we don't have hover? Could add transition for hover, but no hover selector. If no hover, okay. Maybe future hover? We don't define hover. We can include transition only.

Need maybe use --space-md? Keep as is. But adding backdrop-filter could create containing block? Visual only. It might affect? Fine.

Need ensure not using border-width. We can use box-shadow ring with 0 0 0 1px rgba, that's equivalent to border but no layout. Good.

Need maybe "asymmetric-blocks" can be represented by colorful section backgrounds? We can set .contact-channels-section article and .contact-quick-section .contact-card different backgrounds? Since selectors are combined, can use :nth-child? Adding pseudo-class would be new selector? Need keep selector list exact? Could set both same. But target style maybe each section different background; however we only have a group. We can set background gradients with different hue? Since comma list, both same. Could use CSS var with multiple backgrounds? no. We can add .contact-channels-section article { ... } separately? That would be adding selector, allowed? It says keep selectors exactly, do not change selectors; adding selectors probably not allowed. We must not add new selectors. So cannot target separately. But could use :nth-child? That's adding pseudo-class. Don't.

Need maybe use @media max-width 575.98px unchanged. Should not change breakpoint. Keep.

Need output no markdown. But before final, need ensure no "AI comments". Let's craft.

Need perhaps also include all original declarations exactly? We are allowed to change color etc, but text-align and font-size and padding are layout/typography, keep. We'll keep them same values. font-size: 0.85rem. padding: var(--space-md) !important. text-align: center.

Need maybe set color for hero text? This is a visual change. Need maybe set background gradient on section? We can't add .app-hero-section background because selector only .row .col-lg-7. We could set background on the column; this could make block. But if it is a column, background may stretch, okay. But could alter visual. Use something.

Target glow effects: box-shadows with 0 0 24px rgba(accent,0.4), hover? We don't have hover; but maybe add box-shadow to elements. Good.

Need maybe use CSS custom properties? Could define root? Not within media? Could define on elements with `--accent-color: #f97316;`? But not necessary. Maybe set `accent-color` property for form controls? Not relevant.

Need maybe include `caret-color`? no.

Need ensure no colors from original? None. So okay.

Let's craft final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #fff7ed;
        text-shadow: 0 2px 18px rgba(251, 146, 60, 0.35), 0 0 32px rgba(251, 146, 60, 0.2);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f97316);
        color: #3b1c0a;
        box-shadow: 0 0 16px rgba(249, 115, 22, 0.5), 0 0 40px rgba(249, 115, 22, 0.25), 0 4px 10px rgba(0, 0, 0, 0.2);
        border-radius: 999px;
        transition: box-shadow 0.3s ease, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(15, 23, 42, 0.8);
        border-radius: 18px;
        box-shadow: 0 0 24px rgba(56, 189, 248, 0.15), 0 0 0 1px rgba(56, 189, 248, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.4s ease, background 0.4s ease, border-radius 0.4s ease;
    }
}

Need maybe use `transform` in transition but if no hover, not needed. But transition without hover still okay. Could include transform? Targets may already have transform? We shouldn't change transform property, but transition property includes transform not actual. Fine. But "transition timing, easing, duration" can change; transition property includes more properties. Fine.

Need consider `border-radius: 999px` on badge may be okay. `border-radius: 18px` for contact cards. Target 8-16, medium radius; 18 slightly high. Use 16px. Hero text shadow okay.

Need maybe "halo on hover": since no hover selector, we can't add hover. But if original CSS had hover elsewhere, not in this file. We can add transitions but not hover. Should we add :hover to these selectors? That would add new pseudo-classes, not allowed. So no.

Need maybe exploit `@media` to include `@media (hover:hover)`? That would be adding new media, not allowed? "Keep @media breakpoints conditions only" probably keep existing media only. Don't add.

Need maybe ensure no markdown fence. Use raw CSS. But final answer desired. Need maybe not include explanation. Good.

Let's double-check constraints:
- All color values replaced? We didn't have original colors. We added.
- box-shadow redesigned multi-layer yes.
- text-shadow yes.
- border-radius adjusted yes.
- gradients yes.
- transition yes.
- filter/backdrop-filter yes (backdrop-filter).
- opacity? none.
- outline? none.
- border-color/style? none.
- caret/accent? none.
- custom props? none.

Need maybe target style asymmetric-blocks could be represented by `text-align:center` as unchanged. Fine.

Potential issue: Setting `color` on `.col-lg-7` might alter typography color, not font family/size, allowed. Good.

Potential issue: `background` on `.badge.bg-warning` overrides Bootstrap warning, okay. But if `bg-warning` uses `!important`? Bootstrap often `.bg-warning { background-color: #ffc107 !important; }` So our rule lacks `!important`. Same specificity? `.app-hero-section .badge.bg-warning` has higher specificity (3 classes) than `.bg-warning` (1 class); even without important, it wins. Good.

Potential issue: `.app-hero-section .row .col-lg-7` adding `text-shadow` could apply to entire column, perhaps too strong. But it's a visual refresh. Good.

Potential issue: `backdrop-filter` on contact cards with background alpha could be nice. It can be heavy but okay.

Potential issue: Keeping `padding: var(--space-md) !important` exactly. Yes.

Need maybe order? fine.

Need use palette: orange/amber and cyan/blue. Bold contrasting. Good.

Need maybe "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" We used 0 0 24px cyan on cards, orange on badge. Good. Halo on hover? No hover; but we included glow. Good.

Need maybe "Medium radius (8-16px)" Use 16 for cards, pill badge. Good.

Need maybe "subtle pulsing animations" but no keyframes possible? We could change animation? Original no keyframes. We cannot add @keyframes? It says animation/@keyframes names preserved; values inside can change. It doesn't necessarily forbid adding @keyframes, but adding would require adding selector? Also output only rewriting original. Adding new @media or @keyframes could be considered changing structure? It says `@keyframes names (values inside CAN change)`. Could add keyframes but need add animation to elements; animation property is not in protected list? It is allowed to change `animation-name` values? Actually "animation-name (values like duration/timing CAN change)" means if there is an animation, can change. If adding? Maybe allowed? But likely should avoid adding new structural constructs. However "subtle pulsing animations" in style variant suggests maybe we can add animation. But original CSS has no animation. Should we add a pulse animation? It would require a new @keyframes rule and animation property on elements. Are we allowed? The prompt says "Only colors, shadows, and decorative properties may change" and "transition timing, easing, duration" but not explicitly animation. In the NEVER CHANGE list, "animation-name (values like duration/timing CAN change)" indicates animation-name property can be changed but not necessarily adding. We should be conservative: avoid adding @keyframes because it changes CSS structure, not just property values. Also "Keep ALL selectors and layout exactly as-is" @keyframes is not a selector? But it might be okay. Yet to be safe, no new animations.

Need maybe use `transition` to make future hover smooth. Good.

Need maybe include `outline: none`? No.

Need maybe "opacity" can change; could add `opacity` to backgrounds? no need.

Need maybe set `caret-color`? no.

Potential issue: The badge selector `.app-hero-section .badge.bg-warning` might be in a dark hero, our background gradient orange. Good.

Need perhaps use `border-radius: 0.75rem` with var? We can use rem. Fine.

Let's craft final with no code fences. Need first character = CSS. Use exact media. Need preserve comma list exactly with newline. Good.

Let's think if adding `background` to `.col-lg-7` might make an asymmetric block. Could use background: transparent? no. Maybe not.

Could add `background: linear-gradient(180deg, rgba(249,115,22,0.08), rgba(249,115,22,0.02));` to column, but might affect readability. The target "bold contrasting blocks: each section different background" can be achieved by giving column subtle tinted overlay. However `.col-lg-7` background can make block if no padding. But okay. Need avoid `background-clip`? no. We could set background to transparent? no.

Maybe use `box-shadow: inset 0 1px 0 rgba(255,255,255,0.1)`? But no need.

Let's maybe include `background: transparent`? Not a change. Hmm.

Need not overdo. The user complained previous attempt didn't change enough. Need make distinctive. Let's be more aggressive with colors:
- Hero column text color maybe `#fef3c7` and text-shadow orange. 
- Badge gradient from `#fde047` to `#ea580c`, dark maroon text, glow.
- Cards background `linear-gradient(145deg, rgba(15,23,42,0.9), rgba(30,41,59,0.8))`, border-radius 20? target 16. Use cyan border ring and glow. Also maybe add `border-radius: 20px`? Target says medium 8-16. Use 16.

Need perhaps use `box-shadow` multi-layer:
`0 0 24px rgba(56,189,248,0.35), 0 0 48px rgba(56,189,248,0.15), 0 12px 32px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(56,189,248,0.25)` 
This creates glow and ring