/* ============================================================
   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 rewrite CSS visually, conservative. Need output only CSS. Need inspect original. It's a media query with some rules. Must preserve selectors exactly, layout values? It has text-align, font-size, padding. padding is layout but can keep similar ±20%. We can change colors/shadows/radius/transitions etc but there are none. Need refresh visually. However original has no color declarations. We can add color, background, border, shadows, transitions? But within media query. Need preserve selectors: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article, .contact-quick-section .contact-card`. Need keep text-align center? That's layout, maybe not change? It's allowed? We must not change text-align. Keep font-size? must not change. Padding: keep similar; original `var(--space-md) !important`; can't change variable? Could keep same. But need visual identity refresh: add glow effects, card mosaic? But only these selectors. Could add color, background, border-radius, box-shadow, transitions, etc. Need be careful with HTML fixed. We can add properties. But selectors unchanged. Should output only CSS. Need perhaps apply glow-effects to these elements. Since target style is card-mosaic with glow effects. For col-lg-7 maybe text align center. Could add color, text-shadow. For badge, background maybe gradient? But `.bg-warning` class existing Bootstrap; we can override `background`, `color`, `box-shadow`, `border-radius`. For contact cards, they already have padding; add background, border-radius, box-shadow, transition, hover glow. Hover inside media? Need `:hover` pseudo-classes? Could add `.contact-channels-section article:hover`? Original selector list includes articles and contact-card. We can add hover rules maybe but changing selectors? Adding new selectors okay? The rule says selectors must preserve exactly; but can add new selectors? It says every selector preserved. Probably we can add additional selectors? "Keep all selectors ... exactly as-is" perhaps means existing selectors must remain; we can add new? In CSS rewrite, adding hover is a visual change but new selector may be considered changing selectors. Usually allowed to add pseudo-classes? It says pseudo-classes: keep exactly. Likely no new selectors? But can add declarations to existing rules. We can add `transition` and maybe `box-shadow` on base rule. No hover needed.

Need maybe output similar structure. Since original is inside media query. Could add CSS properties within each rule. Need ensure not modify layout. Add decoration.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2a1a3a;
        text-shadow: 0 2px 8px rgba(255,215,0,0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff6a00);
        color: #1a0f00;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 106, 0, 0.4);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 24px rgba(108, 99, 255, 0.2);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

Need maybe `backdrop-filter` not necessary. Need ensure padding unchanged. Good.

But target "card-mosaic" with vibrant colors per card type, medium gap. We don't have grid items. But can use background gradients. Need "glow shadows in accent color: 0 0 24px rgba(accent,0.4), halo on hover 0 0 32px rgba(accent,0.6)". We can add a hover rule? Could add within media query separate selector. Is that allowed? It says selectors preserved exactly. Could maybe append `:hover` to existing selector? That changes selector. But need "halo on hover". Hmm.

Maybe we can use `@media (hover: hover)`. No. Better to add a hover rule using same selector plus `:hover`? But "Every selector character-for-character preserved?" If we output existing selectors plus new ones, existing ones preserved. But the instruction "Selector lists (commas)" etc. It says "Keep all selectors exactly as-is" likely means use original selectors as is. Additional selectors may violate? In previous tasks, expected to rewrite declarations only, not add selectors. But adding hover selectors might be acceptable? They said "only colors, shadows, and decorative properties may change"; new selector with hover is decorative. Hmm.

The task: "Refresh the visual identity WITHOUT changing layout structure or class names." It doesn't forbid adding hover states. The self-check says "Every selector character-for-character preserved?" That is about existing selectors. Adding new selectors would mean not all selectors in file preserved? There are none in input. It says "Keep ALL selectors and layout exactly as-is". I think safest not add new selector rules. But then no hover halo. Could use `transition` on base, and use `box-shadow` already glowy. Maybe acceptable.

Alternatively, use `:focus-within`? no.

Maybe we can add `@media (max-width: 575.98px)` same; no new selectors. Could maybe include `filter: drop-shadow` etc.

Need maybe output only. Let's think about exact color palette. Could use accent colors: warning #ffb347, accent #6c63ff, perhaps article background has different accents per card? But selector targets all contact-channels article and contact-card same. Can't differentiate. Could use pseudo-classes like `:nth-child` but that would be new selectors and HTML structure unknown. Not safe. Could use CSS variables? Same.

Could add `border-left` style with accent? But border-color allowed, border-style allowed. Use border-left: 4px solid #6c63ff maybe. But width could affect layout? border-width is not to change? It says "border-color and border-style (NOT border-width)", so can't add border-width? Actual original rule has no border. We can set border-style but need width? Better not.

Need maybe add `outline`? allowed. But not necessary.

Need be careful with `!important`: original padding has `!important`. Keep.

Need "same layout" but padding within ±20%. We keep exact.

Let's craft polished CSS.

Maybe include CSS custom properties? Not needed.

Let's ensure every selector original preserved. Yes.

Maybe add `background-color` to `.app-hero-section .row .col-lg-7`? It is a column maybe no. Could use `color`.

Let's produce final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2350;
        text-shadow: 0 2px 12px rgba(108, 99, 255, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd76d 0%, #ff9e2c 100%);
        color: #3b1d00;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 158, 44, 0.45);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f2efff 100%);
        border: 1px solid rgba(108, 99, 255, 0.15);
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(31, 20, 60, 0.08), 0 0 24px rgba(108, 99, 255, 0.2);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }
}

But no hover. Could maybe use `@media` with `(hover: hover)` and same selectors? no.

Maybe we can add `transform` in transition but no transform.

Need maybe "pulsing animations" target. Could add `animation` property with keyframes? Original CSS has no keyframes; adding new keyframes may be considered okay? "Keyframes names preserved" only existing. Adding new named keyframes is a new selector-like thing. But the target includes subtle pulsing animations. We could add `animation: pulse-glow 2s infinite alternate;` to cards. But then need `@keyframes` rule, which may be okay because animation values can change. However "only colors, shadows, and decorative properties" animation is decorative. But it adds keyframes selector. Hmm. The instruction says @keyframes names preserved (values inside CAN change) likely if input has keyframes; but adding new names? Not prohibited? Maybe output should not have extra `@keyframes`? It might be okay. But "HTML fixed" no issue. "Layout structure" no issue. However self-check says "every selector preserved" and @keyframes are not selectors? They are at-rules. Could add.

But if we add animation, it may create motion; target says subtle pulsing animations. Should we? Yes maybe.

Need decide. The final output should be CSS only, no markdown. We can add @keyframes pulsing. But within media query, keyframes can be at top-level. Need if outside media query? Could define inside media query? CSS allows @keyframes inside @media? It is valid but not universally? Actually @keyframes can be nested within @media, yes. But easier top-level after? But output first char should be CSS; okay.

Need not disrupt. Maybe add `animation: glow-pulse 2.8s ease-in-out infinite alternate;` to badge/cards. Then @keyframes inside media after rules. But original CSS only media query; output may include @keyframes inside @media. Good.

Need be careful if @keyframes not needed.

Let's craft with glow pulse for badge and cards. Since `.app-hero-section .badge.bg-warning` and contact cards both with box-shadow. Use same keyframes `glowPulse`? Need animation names maybe no conflict. Use `glow-pulse`. Values: from box-shadow low, to high. But `box-shadow` animation works. Need if multiple shadows? use keyframes with same shadows but different opacity. Could be complex.

But perhaps not required. The effect variant says "Subtle pulsing animations". Let's incorporate.

Add:

@keyframes soft-glow {
    0% { box-shadow: 0 0 24px rgba(255, 158, 44, 0.35); }
    100% { box-shadow: 0 0 36px rgba(255, 158, 44, 0.6); }
}

But if used for cards with different shadow, need separate keyframes. Could use CSS variables? Not necessary.

Maybe keep simple: for badge, `animation: pulse-glow 3s ease-in-out infinite alternate;` and keyframes `pulse-glow` with accent. For cards, use another `card-glow`.

Need if we add `animation` property, it is decorative. But risk: some devices reduce motion. Could be fine.

Need preserve layout: animations don't change layout.

Let's design final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #241c3f;
        text-shadow: 0 2px 12px rgba(124, 92, 255, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd76d, #ff9e2c);
        color: #341a00;
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(255, 158, 44, 0.4);
        animation: badge-glow 2.8s ease-in-out infinite alternate;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #eef0ff);
        border: 1px solid rgba(106, 76, 255, 0.12);
        border-radius: 18px;
        box-shadow: 0 12px 32px rgba(20, 10, 50, 0.08), 0 0 24px rgba(106, 76, 255, 0.18);
        animation: card-glow 3.4s ease-in-out infinite alternate;
    }
}

But if we add animation for card-glow, it overrides box-shadow at keyframes? Keyframes will animate box-shadow. Need define with multiple shadows.

Add:

@keyframes badge-glow {
    from { box-shadow: 0 0 24px rgba(255, 158, 44, 0.35); }
    to { box-shadow: 0 0 36px rgba(255, 158, 44, 0.65); }
}

@keyframes card-glow {
    from { box-shadow: 0 12px 32px rgba(20, 10, 50, 0.08), 0 0 24px rgba(106, 76, 255, 0.18); }
    to { box-shadow: 0 12px 32px rgba(20, 10, 50, 0.12), 0 0 36px rgba(106, 76, 255, 0.38); }
}

Need if using animation with shorthand includes infinite alternate. Good.

Need "Halo on hover" maybe not possible without hover selector. Could add to base with animation alternates. Maybe enough.

Could also use `transition: box-shadow 0.3s ease` but animation overrides. No need.

Need check if "transition timing, easing, duration" can change; we add.

Need make sure not changing font-size. okay.

Need maybe not use `border` because border-width? We set `border: 1px solid` which is border-width, but original had no border. The forbidden is "border-color and border-style (NOT border-width)" maybe they don't want changing border-width. If adding new border width, does that affect layout? It could. To be safe, avoid setting border. Use `outline` maybe also width. Better avoid extra border to not alter box sizing. Since `box-sizing` might be border-box. Adding border could shrink content if width fixed. Contact cards width may be 100%; adding border maybe could affect? In border-box, no change. But not necessary. Could use `outline: 1px solid`? Outline doesn't affect layout. But outline width? could be decorative. We can use `box-shadow` to simulate border: `inset 0 0 0 1px rgba(...)`. That is better; doesn't affect layout. Great. So replace border with inset box-shadow? But box-shadow already used. We can include inset ring as first shadow. Good.

Badge: no border.

Need maybe "card-mosaic" vibrant card colors. We can give cards a vibrant gradient background: `linear-gradient(145deg, #ffffff, #eef0ff)` is okay, but not vibrant. Could make more distinct: `linear-gradient(145deg, #f5f3ff, #dfe6ff)` with accent. But "Vibrant card colors on neutral background". On mobile, cards could be soft pastel with accent glow. Maybe better.

Could use `background: linear-gradient(145deg, rgba(255, 215, 0, 0.12), rgba(108, 99, 255, 0.08)), #ffffff;` This adds a vibrant tint. But using rgba and multiple backgrounds maybe. Good.

Let's craft:

background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(108, 99, 255, 0.12)), #fff;

But `background` will replace any existing background; likely okay. For badge, use vibrant orange.

Need maybe `backdrop-filter: blur(12px)`? Decorative, but could affect performance. Not necessary.

Need maybe `filter: drop-shadow` for badge. But box-shadow is enough.

Need maybe `border-radius: 14px` for badge is "medium radius (8-16px)". Good. For cards 18px maybe 18 is a bit above; 16 exactly. Let's use 16px. For badge 12px. Good.

Need maybe `box-shadow` with glow. Good.

Need maybe `overflow` unchanged? not in original. okay.

Need maybe `transition` for hover. Since no hover, but if any existing? none. Could still add transition for glow animation? not necessary.

Need maybe `app-hero-section .row .col-lg-7` no background; on hero, text centered. We can add `background: linear-gradient(...)`? It's a column with content; adding background could look weird. Better no.

Need maybe use `caret-color`, `ac