/* ============================================================
   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 rewritten CSS only, no markdown. Need examine original. It's a media query block with selectors and declarations. Need preserve selectors exactly. Only visual properties allowed. Original has:

@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 "Refresh this CSS visually" but properties listed are text-align, font-size, padding—mostly layout/typography not allowed? Need comply with conservative rules: Font-size and text-align unchanged. Padding can change within ±20%. But of var(--space-md) unknown. Need visual changes maybe none possible? Need still output CSS preserving selectors. Could add color/background/shadow etc? But original has no colors. Need maybe not add properties? We need refresh visual identity without changing layout. The original CSS file snippet contains only media query for mobile visual adjustments. The task says "Refresh this CSS visually" but only these declarations. We are allowed to change colors, shadows, border-radius, transitions, etc. Might add background, border-radius, transition, box-shadow to elements? But would that alter layout? It may. We can change font-size? Not allowed. text-align not. padding can ±20. But need "Refresh". We need perhaps maintain same media query and selectors, and maybe adjust padding slightly within tolerance, maybe add color/background/box-shadow? But adding to `.app-hero-section .badge.bg-warning` could be visual. However it may affect layout (badge). Yet allowed "visual properties" can be added? Since original none, we can add color values, background, shadow. But likely expected to preserve declarations and might add visual properties to create style. Need be careful: Conservative says only colors, shadows, decorative properties may change. Maybe output can include same declarations plus new visual declarations? Selectors same; no layout properties changed. The original has text-align center—can't change. font-size unchanged. padding from var(--space-md) unchanged or slight change? Since no actual pixel, can leave unchanged. Need maybe transform into asymmetric-blocks + soft shadows? This is only media query so limited.

Let's parse requirement: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So output must include same selectors and layout. The original declarations include text-align, font-size, padding. Since allowed visual changes only, we should not change text-align, font-size. Padding can change but not necessary. We can add color/background/shadow declarations because they are visual and don't affect layout. But adding background/border-radius to `.badge.bg-warning` could affect visual but not layout? It might. Fine. But "No layout structure" maybe okay. Need output only CSS.

Need decide exact new visual identity. "asymmetric-blocks" with bold contrasting blocks, each section different background, high contrast borders. But only three selectors in mobile media. Could style:
- `.app-hero-section .row .col-lg-7` unchanged text-align center. Maybe add? It's a column, could add backdrop-filter? But maybe not necessary. Could add background? It might affect all col. Better not.
- `.app-hero-section .badge.bg-warning` could be styled with background? But class bg-warning implies Bootstrap background. We can override background? Need "colors replaced with fresh palette", maybe use gradient background, border, shadow, border-radius. But on badge, background/border could change. We can set `background: linear-gradient(...)` and `border: 1px solid ...`, `box-shadow`, `border-radius`.
- `.contact-channels-section article` and `.contact-quick-section .contact-card` should get padding unchanged, maybe add background, border-radius, box-shadow, border, transition. But on mobile, cards with backgrounds might create asymmetric blocks. Need high contrast borders. Use `padding: var(--space-md) !important` maybe keep; can change padding to `calc(var(--space-md) * 0.9)`? That is a changed padding within ±20? But using var unknown. Safer leave unchanged. Add `border-radius: 1rem`, `border: 1px solid #e8e0f0`, `background: rgba(...)`, `box-shadow` soft. Could add `transition` but no hover.

Need preserve selector list exact line break? Yes. Need preserve `@media (max-width: 575.98px)` and selectors. We can keep declarations and add new ones. Maybe include `color` etc.

But need "asymmetric-blocks" layout pattern: unequal columns, mixed gaps, bold padding contrasts. However we cannot change grid/flex. Since original is only media query. We could add "background-color" to sections but no layout. Maybe not enough.

Maybe "asymmetric-blocks" target style is for overall CSS but this is only a snippet; we need apply to this snippet as much as possible. The effect variant soft shadows: multi-layer box-shadow, border-radius 12-24px, smooth transitions.

Let's craft CSS:

@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, #ffb347 0%, #f57c00 100%);
        border: 1px solid #e65100;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(245, 124, 0, 0.25);
        border-radius: 999px;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fff;
        border: 1px solid #ece4f5;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

But is adding `transition: transform` not allowed? We can change transition values but not animation-name. Fine.

Need check "Only change colors, shadows, radius, transitions, gradients." We added background gradient (okay), border (color, style) okay but border-width? We used `border: 1px solid`, but never change border-width? Rule says "border-color and border-style (NOT border-width)". We are adding border-width from none to 1px—technically adding border could affect layout due to box sizing? If box-sizing content-box, border adds dimensions, but likely Bootstrap includes border-width? Hmm. Better avoid adding `border` because border-width not allowed? Actually border property sets width, style, color. Rule says border-color and border-style may change, not border-width. Adding border creates new width. Could use `outline` instead? But outline does not affect layout. But target high contrast borders can use box-shadow with 0 0 0 1px color inset/outset. This is shadow not layout. Use `box-shadow: 0 0 0 1px #e65100, 0 4px 8px ...`. That gives border-like border without layout. Nice.

Need maybe avoid adding background to `.badge.bg-warning` because Bootstrap has background-color utility; overriding is okay. Gradient might be aggressive but fine. Use no border. Use `border-radius` allowed.

Need maybe use `backdrop-filter`? Not necessary.

Need maybe for `.contact-channels-section article` and `.contact-quick-section .contact-card`, background `#fff` might override existing backgrounds? Original no background. Bootstrap might have no background. Adding background can affect visual but not layout. Could use CSS custom properties? Might not need.

Need perhaps set color? Could add `color: #1f1b2e` to article/card to make text contrast. That's allowed. But could override inherited color. Fine.

Need maybe set `border-radius` on first selector too? `.app-hero-section .row .col-lg-7` is a column, adding border-radius/background would change background across entire column; not necessary. We can leave as-is maybe to satisfy "same layout". But the task demands refresh visual identity. Since the only rule for mobile hero is text-align center, already center. Could add `color` etc? Maybe not.

Potential issue: Original only has three blocks. If we add declarations, we are not "rewriting" every property? We can. Need ensure no markdown.

Let's think if output should include all original declarations unchanged? Yes. In block 2, original includes `text-align: center;`, `font-size: 0.85rem;`, `padding: var(--space-md) !important;`. We should preserve these. We can add after them. We should not reorder? Could but okay. Need preserve `!important`. Need preserve selector list with comma and line break? Yes.

Need maybe use `background` etc with `!important`? If Bootstrap utilities use important? `.badge.bg-warning` background utility likely uses `background-color` with !important? In Bootstrap 5, `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` Actually background-color is important. To override, you need `background-color: ... !important;` or `background: ... !important`. The style output should probably include `!important`. Since original declarations include `!important` for padding, to override Bootstrap utilities maybe use important. The task says preserve original selectors and only change visual properties; adding `!important` maybe okay. Need decide.

If using `background: linear-gradient(...) !important;` it will override Bootstrap bg-warning. Good. For article/card, no need.

Need maybe use `-webkit-backdrop-filter`? no.

Let's craft refined CSS:

@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, #ffb84d 0%, #f57c00 100%) !important;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(245, 124, 0, 0.18), 0 20px 40px -10px rgba(245, 124, 0, 0.28);
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        color: #2a2438;
        border-radius: 18px;
        box-shadow: 0 0 0 1px #ece4f5, 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

Need maybe "High contrast borders": box-shadow uses 1px solid color. Good. "asymmetric blocks": different section backgrounds? We have background only card and badge. Could make `.contact-channels-section article` background maybe #faf7ff and `.contact-quick-section .contact-card` another background, but selector list applies both same declarations. Can't differentiate without separate selector; but selector list must remain. Could use CSS variables? We could set `background: var(--card-bg, #fff);` but not necessary. Could use `:nth-child` not allowed? Could add new selectors? No, selector lists only same; adding selectors would change. We don't need.

Need maybe add background to `.app-hero-section .row .col-lg-7`? Could be "asymmetric" but not needed. Maybe set `background: rgba(255,255,255,0.6); backdrop-filter: blur(12px); border-radius: 24px;` on hero column. But this changes visual significantly and could be okay. However the original only had text-align center; adding backdrop-filter could affect performance but not layout. It would put a card behind entire hero column, might be weird. The target style "Bold contrasting blocks: each section different background" can be achieved by card backgrounds. We can avoid.

Need maybe include `border-radius` on hero column? It would be huge; not needed.

Need think about "asymmetric-blocks" layout pattern with unequal columns etc. Since we can't change layout, perhaps the selected snippet's target style might not fully apply; still use bold contrasts + soft shadows.

Need check preservation of class names:
- `.app-hero-section .row .col-lg-7` exact.
- `.app-hero-section .badge.bg-warning` exact.
- `.contact-channels-section article,` line brake and `.contact-quick-section .contact-card` exact.
Selectors preserved.

Need check layout:
- No display/grid/flex changed.
- `padding: var(--space-md) !important` unchanged. Good.
- `font-size: 0.85rem` unchanged.
- `text-align: center` unchanged.
- New box-shadow etc don't affect layout if box-sizing? box-shadow no layout. `border-radius` no layout. `background` no layout. `color` no layout. `transition` no layout. Good.

Potential problem: `transition: transform 0.35s ease, box-shadow 0.35s ease` in selector `.badge.bg-warning` might not matter. But adding transition property is allowed. It doesn't change animation name. Fine.

Need perhaps use `border-radius: 999px` for badge; allowed. "Large border-radius (12-24px)" but pill is okay for badge? Using 999px could be considered visual. Maybe use `border-radius: 12px` or `0.75rem`. The target variant says 12-24px. Since badge with gradient pill looks nice. But "soft-shadows" perhaps large radius. Could use `border-radius: 12px` for badge. However `.badge` default rounded-pill? Bootstrap badge default has `border-radius: 0.375rem` maybe. `bg-warning` not pill. We can set `border-radius: 12px` to align with target. But `badge` likely intended pill? In Bootstrap, badge usually `border-radius: 0.375rem.` If we set 999px, it looks pill. That may be okay. But target style says large border-radius 12-24. I'll use `border-radius: 12px` maybe more aligned. Yet badge with `padding` from Bootstrap and pill radius might look fine. Let's choose `border-radius: 12px`.

Need maybe include `box-shadow: 0 0 0 1px rgba(...)` on badge as border. For badge, box-shadow with outer ring plus soft shadow. Add:
`box-shadow: 0 0 0 1px #e65100, 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(245,124,0,0.25);`
This gives border. But if badge already has border? no. Good.

Need maybe set `-webkit-box-shadow`? Not needed; box-shadow standard.

Need perhaps include `filter`? no.

Need maybe add `caret-color`? not relevant.

Need maybe use CSS variables? no.

Need perhaps include `@media (max-width: 575.98px)` exactly. Yes.

Need no markdown fences. First character `@`. Need maybe preserve blank lines? Could output with blank lines between blocks. Fine.

Let's ensure no comments. The system says no `` comments. We can have no comments at all.

Let's consider if original file has block 2/2; perhaps there may be a preceding CSS in the file that we don't see. We are only responsible for snippet. Output should only snippet. Good.

Need maybe if `padding: var(--space-md) !important` is a layout property; we can keep. We should not alter. Good.

Potential issue about `background: #ffffff` on `.contact-channels-section article` and `.contact-quick-section .contact-card`: If the original sections already have background colors, overriding with white might be too much but fine. The target style "bold contrasting blocks each section different background" so if both article and card white, not different. Could use two backgrounds by using CSS variable with separate `background` but selector list can't separate. Could perhaps use `background: linear-gradient(145deg, #faf7ff, #ffffff);` for both; this is a gradient. That gives soft block. Or use `background: color-mix(in srgb, #fff 85%, #f3e9ff)` but support okay. Maybe use `background: linear-gradient(145deg, #f8f5ff 0%, #ffffff 100%);` to add subtle block. But if both, it's repeated. Fine.

Need maybe add `border-radius` 18px to cards. Good.

Need consider `box-shadow: 0 0 0 1px #ece4f5, 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)`