/* ============================================================
   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 rewritten CSS only. Need follow conservative mode. Need inspect original small media query with three rules. Need visually refresh but no layout/typography changes. Can change colors, box-shadow, border-radius, transitions, gradients etc. Original has no colors/shadows/transitions. Could add maybe? Need careful: selectors same, properties perhaps only visual. For each rule perhaps adjust? But original includes font-size, padding. Those are typography/layout, can't change? Font-size forbidden. Padding max ±20%; but maybe leave same. Need refresh visual identity maybe add? Need only colors etc? Perhaps within media query, there is `text-align`, `padding`, `font-size` that are non-visual? Actually text-align is typographic but originally set. Could leave unchanged.

Need maybe can add border-radius or transitions? Need not change display/position etc. Could add visual properties to elements? But if add properties within existing rules, okay? It might be visual. But "HTML fixed — only colors, shadows, and decorative properties may change." Decorative properties include border-radius, transition, etc. Adding box-shadow maybe okay? But existing selector unchanged.

Need maybe solve with fresh color palette, gradient-rich. Could add `background` or `border`? But could alter layout if border width; can change border-color/style but not width. Better no dimensions.

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 maybe output exact selectors and adjusted visual properties? Since no colors. Maybe add background gradient to badge? But `.badge.bg-warning` already has a Bootstrap bg-warning background. Could override background with gradient, add border/radius/shadow? Need border-radius could affect layout but visual only. But font-size unchanged. For `.app-hero-section .badge.bg-warning`, maybe make gradient-rich: `background: linear-gradient(135deg, #ffd166 0%, #ff9f43 100%);` But then Bootstrap `bg-warning` background overridden. Add `box-shadow: 0 4px 16px rgba(...)`; border-radius maybe. But class `badge` may have rounded-pill etc. Border-radius change can affect shape; allowed. But if we add border-radius, maybe no layout? It's visual.

For `.contact-channels-section article, .contact-quick-section .contact-card`, padding remains but can add background, border-radius, box-shadow, transition. But if we add background to cards, it may affect visual. `article` maybe not card? Need target style masonry flow with white cards soft shadows. However inside media query for mobile, maybe don't want too much. But task says refresh visual identity, target style.

Need maybe change `text-align: center;`? It's layout/typography. Can't change. Need leave.

But maybe "Only rewrite CSS" could include original plus extra visual declarations. Need ensure no selector changes? Adding declarations is fine. But if adding properties inside the same block, selectors preserved. Need not use `!important`? Could keep existing. Could add with `!important`? Maybe no. Need be careful not accidentally override font-size/padding. Keep those exact.

Maybe can add media queries? No, output only original media block maybe with extra declarations. The original CSS only one media query. Output should include same. But could we add new CSS not in original? Hmm task says "Rewrite this CSS visually" with all selectors preserved. Could add new selectors? No because HTML fixed and only current selectors. Need not add any.

Need maybe define `--space-md`? No.

Let's craft conservative output:

@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;
        background: linear-gradient(135deg, #ffd166 0%, #ff9f43 50%, #f77f00 100%);
        border: 1px solid rgba(247, 127, 0, 0.35);
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(247, 127, 0, 0.18), 0 2px 4px rgba(255, 209, 102, 0.25);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 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, #ffffff 0%, #fdfbf7 100%);
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But wait: Did we change `background` to white cards, but original HTML maybe article might have background? It's okay. Could set `background-color`? Gradient. Need maybe "col-lg-7 text-align center" no visual. We could add maybe `background`? But it's a column, no.

Need maybe `border` property changes? Original no border. We add `border` with width:1px — This changes layout? Since border adds to element box if box-sizing border-box? Bootstrap uses border-box. If no border originally, adding 1px border will alter interior space but not outward width maybe. But visual only? Border-width is not allowed to change? They said border-color and border-style (NOT border-width). If original had no border, adding border introduces border-width => forbidden? Since "border-color and border-style (NOT border-width)" implies may change existing border width but not add? Likely avoid border-width. Use `outline`? outline doesn't affect layout. But can use `box-shadow` to emulate border. Use `outline: 1px solid rgba`? Outline is visual and no layout. Need "outline styles (color, type)" can change, but adding outline? Maybe okay? Better avoid border. Use `box-shadow: 0 0 0 1px rgba(...)` for inset/outer border. This doesn't affect layout.

But for `.badge.bg-warning`, border-radius without border is okay. Use `box-shadow: 0 0 0 1px rgba(...), 0 ...`. Good.

Need maybe `transition: transform`? Transform not listed? It says visual? Could be decorative but could affect layout? `transform` doesn't affect layout. But no interaction? Maybe no hover. It's okay. But if no hover, transition useless? Could still be transition when class changes? Hmm. But perhaps no need. Could add `transition` anyway. Target says smooth long transitions. But transitions need trigger. Could use `transition` property on card. Fine. But "transform" property is not listed in forbidden, so okay, but perhaps adding transform property may have no layout. But if no transform states, transition no effect unless hover style inherited from elsewhere. Also media query could apply to elements that have hover styles from main CSS. Adding transition helps.

Need maybe "gradient-rich" target: use gradients on card backgrounds and badge. Could also gradient on article? Use `background: linear-gradient(180deg, #fff, #faf9f7)`. That's okay.

But maybe adding background on `.contact-channels-section article` could affect because article may have other background within and card style. But target "Pinterest-like: white cards, soft shadows on light gray bg" and gradient variant. Fine.

Could we apply gradient background to `.app-hero-section .row .col-lg-7`? It's a column inside hero section, adding background would make big rectangle. Not good. Leave.

Need maybe perhaps add `color` to badge? It might have inherited color; Bootstrap warning has dark text. Could add `color: #6b3a00;` to ensure contrast. But font color is a color property, allowed. Need maybe "white cards, soft shadows" color? For gradient, use rich. Add `color: #4a2c00` or `#3d2c00`. Need maybe `box-shadow` to use Pinterest-like. Good.

Need maybe "soft shadows on light gray bg" changes background of body? We don't have selector. Could add `background-color` to `article` only. Target maybe article as card. Need no body selector in original. Cannot add selectors. Fine.

But maybe we can change `background` of `.contact-channels-section article, .contact-quick-section .contact-card` to `rgba(255,255,255,0.9)` with gradient? But the file "saishi.css" likely has main CSS elsewhere. Our output only block 2/2, maybe there are other blocks. Need not create new selectors.

Need maybe "gradient borders via border-image" could use `border-image` no border width? Existing no border. Can't add border width. Could use `outline` maybe? `outline: 1px solid rgba(...)` with `outline-offset: -1px`? outline doesn't affect layout, okay. But outline can't round? It follows border-radius. Could use outline. We can add `outline: 1px solid rgba(...)`. However outline is not supported in border-radius? It follows border-radius in modern browsers, okay. But adding outline to article/card may be okay. But "outline styles (color, type)" could change; adding outline okay? Hmm.

Need maybe `background` + `color` etc. Let's decide.

Let's parse original exact:
```
@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 comments? no.

Potential issue: "Only colors, shadows, and decorative properties may change." Adding `transition`, `box-shadow`, `background` to these rules is decorative. But in media query, adding `background` to `.contact-channels-section article` maybe changes visual significantly. Good.

Need maybe adjust `border-radius` in badge from `.badge`? If `.badge` component has border-radius already, setting `border-radius: 999px` might alter but allowed. For cards, `border-radius: 20px` perhaps.

Need perhaps add `box-shadow` with multiple layers. For badge:
`box-shadow: 0 8px 24px rgba(249, 115, 22, 0.15), 0 2px 6px rgba(251, 146, 60, 0.2), inset 0 1px 0 rgba(255,255,255,0.35);`
This gives rich gradient. But no hover state, okay.

Need maybe add `text-shadow`? Could add to badge? Badge text maybe, but font-size small. Fine:
`text-shadow: 0 1px 0 rgba(255,255,255,0.25);`
But on gradient maybe. Allowed. Need maybe not.

Need maybe add `filter`? `filter: saturate(1.05)`? Not needed.

Need maybe use `background: linear-gradient` with multiple stops. For card background, maybe:
`background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(255,252,245,1) 45%, rgba(250,247,242,1) 100%);`
This is subtle.

Need maybe "Pinterest-like: white cards" but "masonry-flow" target mainly layout; but no layout change allowed. We can still style cards white and shadows.

Need maybe final output no markdown. Need include entire CSS with indentation. Need exact selectors and properties.

But wait: Could the original `@media (max-width: 575.98px)` in file "块2/2" maybe only part of CSS; There may be an expected answer with same CSS but colors changed. Since original has no colors, maybe our output could just be original unchanged. But task asks "refresh visual identity" and target "gradient-rich"; need add visual properties.

Need think of other possible "colors" within original? None. To satisfy, we need inject colors. But if adding new properties doesn't change original selectors. Good.

Need ensure not change `font-size` or `padding` values. But maybe we could change `font-size` by replacing with `font-size: 0.85rem` unchanged. Could use `padding: var(--space-md)!important` unchanged. Good.

Need maybe add `box-sizing`? That's layout, don't.

Need maybe avoid `transition` with `transform` because transform not part of color/shadows? But "decorative properties may change." Transition timing/easing/duration is explicitly allowed. So transition okay.

Need maybe maybe `background` in `.app-hero-section .row .col-lg-7`? Let's consider if hero section column with text-align center. Could add `background`? No, would cover large area. But maybe `background: transparent`? No.

Need maybe maybe add `background` to `.contact-channels-section article, .contact-quick-section .contact-card`: The card already may have `background-color: #fff` from outside, but our gradient overrides. Good.

Need maybe maybe `box-shadow` to `.app-hero-section .badge.bg-warning`: The badge may already have `box-shadow` from outside; override. Good.

Need maybe `border-radius` on `.contact-channels-section article, .contact-quick-section .contact-card`: If they are rectangular full-width mobile, radius 20px is okay. But if cards already have radius, fine. Could be too big for mobile. Maybe `16px` more modest. But target gradient-rich, not necessarily radius. Use `18px`.

Need maybe `@media (max-width: 575.98px)`: The layout on mobile often cards full width, 20px radius may look fine. But no layout change. Good.

Need maybe `article` could have `padding: var(--space-md)!important` and adding background/border-radius might reveal backgrounds; if article has no background and parents gray, it'll be card. Good.

Potential issue: We add `background` to a `contact-channels-section article` but if article is a flex item with aspect ratio? Doesn't matter.

Need maybe use `backdrop-filter: blur(8px)`? Could add to card if glassmorphism? But target gradient-rich, maybe not.

Need maybe "White cards, soft shadows on light gray bg" but body background not changed. Could add a subtle `box-shadow` but white card on whatever background. That's okay.

Need maybe maybe the `.contact-channels-section article` should have its own accent strip. Could use `box-shadow: inset 0 3px 0 #f59e0b`? But on mobile might not be okay. Target "Each card may have its own accent strip." Could add inset top shadow to simulate accent strip without border-width. Use `box-shadow: inset 0 4px 0 #f77f00, 0 10px 30px ...`; This changes visual only. Nice. For `.contact-card` too? They may be different. But accent strip on both maybe consistent. The target says each card may have its own accent strip. Use one color? Maybe gradient? Could apply to `article` and `contact-card` same accent? Pinterest style maybe white card with accent strip. Let's do:

`box-shadow: inset 0 3px 0 #f59e0b, 0 12px 32px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.04);`

This has inset accent strip. But if card already has overflow hidden? Box-shadow inset follows rounded border. Good. Need maybe card has border-radius, so accent strip curve. Good.

Potential issue: Box-shadow with inset `0 3px 0` might overlay content at top if card's top padding is small; but visual strip overlays background, not content. It's okay.

Need maybe `border-radius` for card should be maybe 16px. Good.

Need maybe `badge` with gradient perhaps:
`background: linear-gradient(120deg, #fbbf24 0%, #f59e0b 45%, #f97316 100%);`
`box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255,255,255,0.35);`
`border-radius: 999px;`
`color: #5b3a00;` maybe contrast. But `badge.bg-warning` in Bootstrap already `color: #000`? Bootstrap's `.bg-warning` sets background-color but text remains body color, likely dark. If we set `color: #4a2d00`, okay.

Need maybe `background: linear-gradient(...)` but `.bg-warning` uses `background-color` (not shorthand) maybe our `background` will override. Fine.

Need