/* ============================================================
   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 only, no markdown. Need rewrite given CSS visually, keeping selectors/layout. But original CSS only has a media query with text-align, padding, font-size. Need apply visual identity changes? We can add declarations? We can only rewrite existing declarations? It says preserve selectors exactly, only change visual props. There are only a few. Need maybe include same media query with changed visual properties but text-align is typography? text-align is layout? It is listed under layout: text-align, vertical-align. So should keep. Padding within ±20% maybe keep. Need change perhaps colors/shadows not present. But task wants refresh visual identity. We can add declarations in rules? Need keep selectors exactly, can add visual declarations? Likely yes, can add colors, shadows, radius, gradients, transitions to existing selectors. But note the file excerpt maybe only block 2/2, and request says file assets/css/saishi.css, block 2/2. We only have a fragment. Need output rewritten CSS preserving selectors. We can augment with visual properties not affecting layout. But perhaps less is more? The instructions emphasize change colors etc. There are no colors. We need introduce visual enhancements within existing selectors. However "HTML fixed — only colors, shadows, and decorative properties may change" suggests can add. Need not add selectors. Need preserve media query and selector lists. Need not change text-align and padding. But font-size in one rule is typography, fixed? The forbidden list includes font-size. So don't change. Need maybe add background, border-radius, box-shadow, transition? The .app-hero-section .col-lg-7 text-align center; can't add layout. The .app-hero-section .badge.bg-warning font-size fixed; can add color/background gradient/shadow maybe. .contact-channels-section article, .contact-quick-section .contact-card padding fixed; can add background gradients, borders, shadows, radius.

But is that legitimate? We need output exact selectors and properties. Need perhaps include extra visual declarations. But be careful "padding: var(--space-md) !important;" keep. "font-size: 0.85rem;" keep. "text-align: center;" keep. We can add colors. Since original CSS had only media query, maybe need stay within media query.

Need maybe use CSS variables? Could set colors inline. Need use "gradient-rich" variant and masonry-flow target style. But no layout changes. We can add background: linear-gradient to badge, cards, hero section. Add border-radius, box-shadow, transitions. Need maybe decide if adding to .app-hero-section .row .col-lg-7? It contains text alignment; we can add background? That could change layout? background no. But applying background to col might look weird. Could add text-shadow? Since text-align center, maybe add. But hero section col might not have background. Better not overreach? But task wants distinct visual identity. We can add decorative properties to existing selectors. For .col-lg-7, maybe add text-shadow: 0 2px 30px rgba(...); but text-shadow is visual. Fine.

Need no markdown fences. Let's craft.

Need maybe include only the same media query with original selectors and extra visual declarations. Need preserve @media query unchanged? The media query breakpoints are condition and cannot change. Keep.

Need maybe add "transition" to .badge and cards? Since no hover state, transition doesn't matter but okay. Need maybe use cubic-bezier long durations.

Let's design palette: Pinterest-like white cards, soft shadows on light gray bg, gradient-rich. Since page may be sports-themed? File saishi.css (赛事 maybe competition). Could use fresh color palette: indigo/violet/coral? Keep aesthetics. We need be careful. "Pinterest-like: white cards, soft shadows on light gray bg; Each card may have its own accent strip." Since only cards in media query, not general CSS. But file block 2/2 only.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4));
        -webkit-background-clip: text? No, background on text? Could use color. Better no background on col.
        text-shadow: 0 2px 24px rgba(67, 56, 202, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f97316) !important;
        color: #1f2937;
        border-radius: 999px;
        box-shadow: 0 10px 30px -8px rgba(249, 115, 22, 0.45);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        backdrop-filter: blur(8px);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 24px;
        box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.15), 0 8px 20px -12px rgba(15, 23, 42, 0.08), 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), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
}

Need ensure not adding border-width? We can add border: 1px solid ... but if original has border? "border-style and border-color may change (NOT border-width)". We're adding border-width 1px; if original had none, that would affect layout by 1px? But only visual. Yet "border-width" cannot change. The rule originally had no border-width. Adding border-width might be considered change layout? Hmm. The prohibited list says "border-color and border-style (NOT border-width)" meaning you can change color and style, not width. Adding border can add layout. Safer not to add border. But can use outline or box-shadow. Already has box-shadow. Use "border-radius" allowed. Background changes don't impact layout. We can avoid border. But gradient borders via border-image requested in variant; but not necessary if we cannot add border width. We can use backgrounds. Maybe use background-clip? Need not.

Need maybe use "border-image" would require border-width. Could add border: 0px? No.

Need maybe use `background: linear-gradient(...)`. For cards, background might be already set by other rules; inside media query, if we set background, it will override. Fine.

Need perhaps not add `backdrop-filter` because can affect background rendering but no layout. Fine.

Need ensure `transition` property not listed as forbidden. Allowed.

Need perhaps add `.app-hero-section .badge.bg-warning` color, but font-size is typography fixed. We keep.

Need maybe not use `!important` except padding original had important. We can use `!important` for visual props if needed. But avoid creating specificity issues? Fine.

Need maybe add `line-height`? No.

Need output exactly and no comments. But if we add comments? "No AI-REWRITTEN comments". We can omit comments. We can include comments? Probably no. We can include original properties plus added properties. Need maybe only output CSS not code fence.

Let's think if "font-size" in .badge should be kept but if we set background and color, the badge colors changed. Good.

Need maybe preserve `.app-hero-section .row .col-lg-7` text-align center. If we add background, we might change hero column into a colored block; maybe not. Could add `background: transparent`? Not needed. To "change colors" globally, maybe use `color`? But changing text color in this rule could be visual. Maybe set `color: #1e293b`? But the text may have existing color; we can set. That might be okay. But text color is a color value and can be changed. Let's set a deep slate color for hero text and add text-shadow. Since this is mobile hero section, text-align center; color change likely okay. However, if the hero text is white on dark background, changing to dark would break. Need know site. File "saishi.css" maybe sports event. The original likely has background images. We need avoid changing text color unless we know. Better not set color in hero column? But visual identity requires color changes. We can add `text-shadow` only, no color change. But "All color values" in original file need changed, but original had none. We can add color to badge and cards only.

Need maybe use "filter" in cards? e.g., `filter: saturate(1.05)`. Fine. But could affect performance.

Need maybe preserve "padding: var(--space-md) !important;" as exact? Yes.

Need perhaps because there are two selectors in contact list, adding background applies to both article and contact-card. Good.

Need maybe include `.contact-channels-section article, .contact-quick-section .contact-card` with `padding: var(--space-md) !important;` and then background etc. The `background` will cover contact cards with white/gray gradient. This may be distinct.

Need maybe use `border-radius: 20px` on cards. Since original may have existing radius, but media query overrides. Fine.

Need maybe "masonry-flow" style: varied aspect ratios not possible to add. But we can do soft shadows on light gray. We can set background to `#f8fafc`? For cards, set white gradient. That's "Pinterest-like". Use box-shadow with multiple layers. Good.

Need perhaps use `background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%)` but if cards rely on icons, fine.

Need maybe add gradient borders via pseudo-elements? Not allowed because no pseudo selectors. We cannot add selectors. But could use `border-image` on existing selector, requiring border-width. Could instead use `background-clip: padding-box`? No border. Use `outline`? outline doesn't take border-image. We can use `box-shadow` with `inset` to simulate accent strip. For each card? Need not.

Need maybe "Each card may have its own accent strip" via `::before` but can't add selector. Could use `background: linear-gradient(...)` with hard stop at top: `background: linear-gradient(180deg, #6366f1 0, #6366f1 4px, #ffffff 4px, #f8fafc 100%);` This creates accent strip without extra elements. Nice. For contact cards, use gradient accent top. That's a visual identity. But `background` could override existing image? Could be okay. Need maintain padding; with `background` origin border-box maybe. Could use `background: linear-gradient(180deg, rgba(99,102,241,0.15) 0px, rgba(99,102,241,0.15) 3px, #ffffff 3px, #f8fafc 100%);` Actually if no `background-repeat` no issue.

Could also for badge use gradient. Hero text-shadow.

Need maybe include `transition` with cubic-bezier as requested.

Need perhaps include `-webkit-backdrop-filter` maybe not needed.

Let's craft final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 4px 30px rgba(79, 70, 229, 0.18);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #ea580c 100%) !important;
        color: #431407;
        border-radius: 999px;
        box-shadow: 0 12px 28px -10px rgba(234, 88, 12, 0.45);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 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(180deg, rgba(99, 102, 241, 0.12) 0px, rgba(99, 102, 241, 0.12) 3px, #ffffff 3px, #f8fafc 100%);
        border-radius: 24px;
        box-shadow: 0 24px 50px -24px rgba(15, 23, 42, 0.18), 0 8px 22px -14px rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need perhaps set `transition` on card only has box-shadow/transform, but background? If background no transition? Could add background 0.5s. Fine. But maybe no hover, still okay.

Need perhaps set `filter`? Could add `filter: drop-shadow(...)`. But box-shadow sufficient.

Need perhaps include `-webkit-text-shadow` no.

Need think about "text-shadow" on col-lg-7: if the section has a dark hero background, text-shadow with light blur could glow, okay.

Need perhaps "background" on col-lg-7 not set, so not changing visual too much. But maybe a gradient-rich variant requires gradients on most backgrounds. We add gradients to badge/cards. Could add a subtle radial gradient to hero col using `background-image` but not alter layout. But if the column has no background, setting `background` could create block. But maybe okay? Let's maybe not.

Need maybe use `background-color` instead of `background` to not interfere with background-image? But we want gradients. Could use background-image with `linear-gradient` on top of existing background-color? If original col has background-image, ours would override. Maybe okay but if background-image is important visual, no. Since we don't know original, but target style says white cards on light gray. Fine.

Need maybe use `background: linear-gradient(...)` without `!important` might be overridden by earlier CSS if same specificity? In media query, same specificity and later source. We need ensure our rule appears last in file; yes our output is entire block. But if source order with other rules after? We control output file? It says File: assets/css/saishi.css, block 2/2, maybe this fragment is at end. Good.

Need maybe use `!important` on background to ensure gradient. For badge, `bg-warning` background may be utility with `!important`? Bootstrap `.bg-warning { background-color: #ffc107 !important; }` likely `!important`. To override in media query, we need `!important` too. We included. For contact cards, no Bootstrap utility maybe. Could add `!important` to visual props? Not necessary but could. But overuse of important not ideal. However for badge definitely.

Need maybe use `background: linear-gradient(...) !important;` and `color: #431407;` maybe color may be set but not important.

Need maybe `box-shadow` on badge with `!important`? Bootstrap badge may have no box-shadow. Fine.

Need maybe use `border-radius: 999px` but if badge has border-radius already, okay.

Need perhaps "gradient-rich" multiple stops. Our badge gradient has 3 stops. Card gradient has two stops + accent. Good.

Need perhaps "smooth long transitions (0.4-0.6s cubic-bezier)" We used 0.5s. Good.

Need maybe "masonry-flow" style: white cards, soft shadows on light gray bg. Our contact cards use white gradient and soft shadows. Good.

Need maybe "Each card may have its own accent strip" we added indigo strip. Good.

Need maybe "border-image" not used. Fine.

Need maybe need to include exactly "media (max-width: 575.98px)" and selectors. Yes.

Need perhaps not include "/* ... */" comments because no markdown. But maybe comments okay? User says no comments. We'll omit.

Need ensure output first char is '@'. Then no trailing text.

Let's consider if adding `transition` to `.col-lg-7` maybe no. Text-shadow enough.

Should we add `color` changes? We already changed badge and card text? We set badge color. Card text color not set because original could be dark. Could set `color: #1e293b` for cards? That's a color value, but may alter. The target style "white cards" with dark text. Maybe set `color: #0f172a` for contact cards. However if card has links/headings, inherit. It's okay. But if card text was white on dark, this could