/* ============================================================
   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 respond with rewritten CSS. Need follow constraints. We have original partial CSS file? It's only @media max-width block. Need "refresh visual identity WITHOUT changing layout structure or class names." Need output only rewritten CSS preserving selectors. But original only has media query with a few rules, none colors maybe. Need likely need output same selectors with perhaps changed values? Need "colors, shadows, radius" but no colors in original. Maybe request expects transformation with target style card-mosaic/gradient-rich. But HTML fixed. Need probably rewrite within provided fragment, preserving at-rules/selectors/properties? However constraints say can change color, shadow, radius, transitions, gradient, not layout. The original block has font-size, padding, text-align. Those are typography/layout (padding ±20% allowed maybe). Need maybe add visual properties within same rules? Need be careful: The file "assets/css/saishi.css#块2/2" likely part of larger CSS; they need refresh visual identity of this chunk. We can change values like font-size? It's typography fixed. Original has `font-size: 0.85rem`; we cannot change font-size. `text-align: center`; cannot change (layout). `padding` margin can keep similar ±20%. Since no visual colors, could add color-related properties? Need not change layout. Could introduce gradients? But likely desired "rewritten CSS" with same selectors. We can change padding to slightly different? But that's not visual identity maybe. Need maybe add backdrop-filter, transitions, border-radius to these elements? However original rules only set font-size/padding/text-align; adding properties is allowed? "Only colors, shadows, and decorative properties may change." Could add decorative properties while keeping layout. Need no markdown.

Need decide.

Let's parse original:

@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 preserve @media query condition? Yes breakpoints conditions only can't change. Need preserve selectors exactly. Need rewrite visual-only. We can keep `text-align: center;` because no change. `font-size: 0.85rem;` keep. `padding: var(--space-md) !important;` can adjust? Maybe use calc? Need within ±20%. `var(--space-md)` unknown; perhaps keep. Could add `border-radius`, `background`, gradients etc? Need not break.

But task says "Refresh this CSS visually" and "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." If output only original rules with no colors, impossible. Could maybe have context missing? The file fingerprint and "块2/2" maybe implies this is second chunk, and need output full chunk? They say "File: assets/css/saishi.css#块2/2" maybe original CSS is only these lines. Need maybe apply visual refresh to those lines. Need maybe change `padding` to something more card-like and add `border-radius`, `box-shadow`, `transition`, perhaps `background` gradients. But for hero row centered text? Decorative irrelevant. We need maintain accessibility? Let's craft a visually refreshed CSS using common custom properties? But no definitions.

Potential output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 100%);
        border-radius: 1.25rem;
        box-shadow: 0 0.5rem 1.5rem rgba(2, 132, 199, 0.08), inset 0 1px 0 rgba(255,255,255,0.6);
        backdrop-filter: blur(8px);
        transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #78350f;
        border: 1px solid rgba(251, 191, 36, 0.4);
        border-radius: 999px;
        box-shadow: 0 0.5rem 1rem rgba(245, 158, 11, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
        border-radius: 1.25rem;
        box-shadow: 0 0.5rem 1.5rem rgba(2, 132, 199, 0.06), inset 0 1px 0 rgba(255,255,255,0.5);
        backdrop-filter: blur(10px);
        transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

Would that be okay? Need preserve `font-size` unchanged. Yes. Need maybe `text-align` unchanged. Padding unchanged. Selectors unchanged. Media unchanged. Added decorative props. But if original `.badge.bg-warning` already has background color, we can override with gradient. Need maybe `color` and border. Good.

But target style "card-mosaic" with grid spans? Not relevant; no grid in fragment. Could use with `border-image`? Hard to keep. Maybe use gradient border via background. But fine.

Need ensure no "AI-REWRITTEN" comments. No markdown. Use exactly.

Should we worry about `@media` order? Keep as original.

Need maybe not add properties that change layout? `background`, `border-radius`, `box-shadow`, `backdrop-filter` no layout. `border: 1px solid ...` changes border width? They said can change border-color and border-style (NOT border-width). Border shorthand sets width 1px; not allowed. Avoid `border: 1px solid ...` because border-width unchanged? Original had no border so adding border width can change layout. Use `outline` or `box-shadow` instead. For badge, could use `outline: 1px solid ...`? Outline doesn't affect layout. But they said outline styles can change. But outline may be okay. Could use `box-shadow: 0 0 0 1px rgba(...)` as ring; doesn't use border-width. That's decorative. Need not use border. Use `box-shadow` inset ring. Good.

Need maybe `border-radius` allowed. `backdrop-filter` allowed. `filter` maybe.

Need maybe use `color` not for badge? It's typography? `color` allowed. `background` allowed. `text-shadow` allowed.

Let's craft with rich gradients. Need maybe avoid `padding: var(--space-md) !important;` changed? We can keep. Maybe `border-radius` on article/card plus background gradient might alter appearance.

Need maybe use same custom properties? Could set `background: linear-gradient(145deg, var(--color-surface) ...)`. But no definitions. Use literal rgba/hex.

Need maybe use `transition` on `.badge` etc. But if no hover changes, no effect. Better not add transition to elements with no hover? Could add anyway.

Need maybe `.app-hero-section .row .col-lg-7` center; adding gradient to column could affect children? It creates a block background around text/hero. Could be desired card mosaic. But "without changing layout" maybe adding background to a wide column may not be intended. But visual refresh. Hmm.

Maybe original is mobile-specific; adding gradient to hero column may make it a card. Could be okay. However need avoid adding `background` to `.col-lg-7` at mobile only? Then it might have a big card. Might be okay.

Could instead only alter existing values: `text-align` cannot. So need add visual properties.

Need maybe consider `padding: var(--space-md) !important;` could keep but add `border-radius: calc(var(--space-md) / 2);` maybe. Need not rely on unknown.

Let's design more distinct:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.15), transparent 60%), linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
        border-radius: 1.5rem;
        box-shadow: 0 0.75rem 2rem rgba(8, 47, 73, 0.08), inset 0 1px 0 rgba(255,255,255,0.25);
        backdrop-filter: blur(12px);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(120deg, #fde68a, #f59e0b 55%, #d97706);
        color: #451a03;
        box-shadow: 0 0.25rem 0.875rem rgba(217, 119, 6, 0.35), 0 0 0 2px rgba(255,255,255,0.4) inset, 0 0 0 3px rgba(217,119,6,0.2);
        border-radius: 999px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.35);
        transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), radial-gradient(circle at 100% 0, rgba(168, 85, 247, 0.12), transparent 50%);
        border-radius: 1.125rem;
        box-shadow: 0 0.5rem 1.5rem rgba(2, 132, 199, 0.08), 0 0.125rem 0.375rem rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.35);
        backdrop-filter: blur(10px);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need avoid transform transition? adding transform could be layout? It's transition property, not actual transform. Fine. But if no interaction, not matter. Maybe on hover not declared. Could keep.

Need maybe add hover rules? Cannot add new selectors? They didn't forbid adding selectors? "Preserving ALL selectors" doesn't necessarily mean no new ones? But HTML fixed; likely should not add. Better no.

Need maybe set `accent-color`, `caret-color` not relevant.

Need maybe choose "card-mosaic" target: Use distinct accent for card types: `.contact-channels-section article` vs `.contact-quick-section .contact-card`. Since selector list applies same style; cannot differentiate without new selector. We can leave list same but maybe add a second rule? But "preserving ALL selectors" means not required. We can add separate selector? That would alter HTML? No, selectors are valid. But instruction says "preserving ALL selectors exactly" maybe we cannot change rules but can add? It says "Only rewrite CSS, preserving ALL selectors and layout exactly". Adding rules with existing selectors doesn't change selectors, but adds selectors? Better not.

Could instead output separate rules for `.contact-channels-section article` and ` .contact-quick-section .contact-card` but this would create same? It would alter original selector list but not layout. Yet "selector lists (commas)" not to change. Keep as list.

Need maybe not include `transform` because can trigger new stacking etc. Not harmful. But keep no transform.

Need perhaps use `background-blend-mode`? No.

Need maybe ensure "gradient borders via border-image" requested; but border-image alters border area and could affect layout? It requires border-style and border-width; not allowed. Avoid.

Need maybe use `outline` border: E.g. `outline: 1px solid rgba(...); outline-offset: 2px;` Does outline change layout? No. But this could add visual border. Let's use perhaps on contact cards: `outline: 1px solid rgba(255,255,255,0.08); outline-offset: -1px;` This is decorative. Need preserve border-width? outline not border. Good.

Need maybe add `-webkit-backdrop-filter`? Could be extra. But modern. Could include both; not necessary. Need maybe keep syntax with standard `backdrop-filter`.

Need perhaps include `@media (max-width: 575.98px)` exactly. Need first char = @. No markdown.

Need think if `background` on `.col-lg-7` affects text-align? Not. But `border-radius` on a block with no overflow hidden; okay.

Need maybe use custom property values? Could use var `--space-md` in padding. Keep.

Need maybe not use color modifications on `.badge.bg-warning` because `bg-warning` from Bootstrap has important? CSS order maybe. But our file may be after. Ours can override. But it's in media query; `bg-warning` has `background-color: #ffc107!important;` maybe our `background` no `!important`, won't override if class uses important. To be safe, use `background: linear-gradient(...) !important;`? But do we want `!important`? The original only used padding !important. If `.badge.bg-warning` has background-color with `!important`, our background will not override without `!important`. Need maybe add `!important` to decoration? Is that okay? It doesn't change layout. But to ensure visual change, use `background: linear-gradient(...) !important;`? Yet the rule of output says no AI comments; !important allowed. But perhaps avoid unnecessary. Need check Bootstrap: `.bg-warning { background-color: #ffc107 !important; }`. Yes, likely important. Since our stylesheet maybe loaded after Bootstrap, normal background can't override important. Need use `!important`. But if we add `background: ... !important`, okay. Likewise color maybe not important. Need maybe `box-shadow` no important. Could also set `background-image`? Bootstrap's background-color doesn't affect background-image; can layer gradient on top by setting `background-image` only! Since gradient is a background-image, it will appear over background-color. But our `background` shorthand resets and with no important loses to background-color important's background-color, but background-image may still show? If `background` shorthand fails due to important? A non-important background-color is ignored due to important, but background-image not in Bootstrap's important rule. However our `background` shorthand includes background-image; since all properties with normal importance, background-image applies. `background-color` applies too but its value may be ignored if conflicting? Actually cascade per property: background-image normal vs none normal; ours wins. background-color normal vs Bootstrap important; Bootstrap wins. So gradient visible. Good. But if we set `background: radial-gradient(...)` shorthand, it sets background-color to transparent? It includes color as last layer maybe transparent, but with important on Bootstrap's bg-color, transparent loses; okay. So gradient stays. No need important. But for `box-shadow` and border-radius, works.

Need maybe handle `.app-hero-section .badge.bg-warning` background image maybe Bootstrap has no background-image. Good.

Need maybe include `background-color`? No.

Need maybe use `color: #451a03 !important`? Bootstrap badge color perhaps inherited/dark? Not sure. `.badge` maybe color: #fff for bg-warning? In Bootstrap 5, `.badge.bg-warning` has `color: #111`? Actually bg text color depends on `--bs-badge-color` maybe #fff? Could be not. But to guarantee contrast, use `color: #451a03;` without important may be overridden by `.badge { color: var(--bs-badge-color); }`. Could use `!important`? Hmm.

Let's include `color: #451a03 !important;` maybe okay. But the original had no color. Adding important could affect text only; okay. But maybe not necessary if `bg-warning` has `color: #000`? But use important to ensure. Maybe too aggressive? Fine.

Need maybe add `text-shadow` to badge. Could make text readable. Good.

Need maybe add `-webkit-backdrop-filter` for Safari: Could include both. But standard enough. Use both?