/* ============================================================
   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 only rewritten CSS. Need evaluate original CSS fragment. It's media query with layout-ish properties maybe no colors. Need refresh visual identity without changing selectors/layout. Need keep selectors exactly, pseudo etc. We can change colors/shadows/radius/transitions only. Since original has text-align, padding, font-size. padding can change ±20%. font-size cannot? It says typography font-size fixed? In locked list: typography font-family, font-size, font-weight... no changes. So font-size must remain 0.85rem. text-align cannot change. padding can within ±20% but it's using var(--space-md), could adjust variable? Need maybe no variables? We can perhaps change custom properties? The original uses var(--space-md) for padding; but if no definition, cannot change? We can keep. Need target style dense-dashboard and airy-rhythm. But layout pattern says tight grids, but HTML fixed no grid? Original only media query. Need output only CSS with same selectors. We can add color/background/shadow/radius to rules? We must preserve selectors exactly. We can change values only in declarations that are visual. In media query, text-align: center is layout (locked). font-size locked. padding can change ±20%. But with var? We might replace var(--space-md) with calc or value within ±20%. Need know --space-md unknown. Could keep as is. Need maybe add no new declarations? "Only colors, shadows, and decorative properties may change." We can add decorative properties? Usually refresh visual identity, maybe could add border-radius/background/box-shadow to elements. But that may be more than changing existing; allowed to change colors/shadows/radius. We can add properties? The prompt: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." So we can add decorative properties. But output must preserve selectors exactly. Need likely not alter layout. Could add background, color, border-radius, box-shadow? Need careful with strict? The original CSS has three rules. We can add visual properties to same selectors: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, and contact cards. However these are inside media query. We can style colors and shadows. Need "dense-dashboard" target plus airy-rhythm variant. But not an aggressive redesign; conservative mode. Need full rewrite of CSS only.

Need think: Original file fragment "assets/css/saishi.css#块2/2" likely just this entire file? It has three rules. We need output only CSS. Since no existing colors/shadows, we can introduce background, border-radius, box-shadow maybe. But we shouldn't alter layout. Could the media query rules include text-align and font-size and padding, which are locked. We can keep them exactly. But "Only colors, shadows, and decorative properties may change" means text-align can't change. We'll keep. Padding can change ±20%? But if keep var(--space-md), okay. If want change to fresh style, could change padding: calc(var(--space-md) * 1.15)? But that changes padding maybe allowed. But don't want break. Target airy-rhythm: generous spacing. Could increase padding +20% maximum: padding: calc(var(--space-md) * 1.2)!important; Need not include !important? Original important. Keep important? To preserve maybe. But class .contact-card perhaps padding changed. Yet target says generous spacing. However locked says padding ±20% max. We can adjust. But with var reference, multiplier might be okay. But "font-size fixed" so badge font-size unchanged.

Need maybe use color palette: cool grays #1e293b, #334155, accent blue #3b82f6; white cards on slate background. For mobile? Could style cards with background white, color, shadow. But if we add background to cards, need ensure text color? Could add color: #1e293b; maybe okay. But original may be text color inherited. "fresh palette" likely desired. Need avoid conflicting with existing classes? It's a refinement. Let's construct.

Need preserve selectors exactly, including media query. We can add extra visual declarations inside each rule. Since original uses .app-hero-section .badge.bg-warning with font-size only; we can add background/color/border-radius/box-shadow/text-shadow? But .badge.bg-warning might use Bootstrap warning styles. We can override with accent. Need keep font-size.

Potential issues: "text-align: center" is layout locked, but okay. Add background to .col-lg-7? Might look weird. Better maybe add no background to hero row column, only contact cards. But "visual changes only" can be subtle.

Need meet target "Dense dashboard": cool grays, accent blue, white cards on slate background. But media query only mobile. We can express slate background to body? Can't add selector not existing. Could add via existing selectors? Maybe .contact-card background white. .app-hero-section .badge.bg-warning accent blue. .contact-channels-section article maybe white card. Maybe .contact-quick-section .contact-card white card. Could also set .app-hero-section .row .col-lg-7 color? But it's a text column; maybe not.

Need decide if adding background to same selectors is okay. It could change visual identity but not layout. Yes.

Need maybe set border-radius: 1rem or 20px. Since target airy-rhythm large radius (16-28px). On mobile, cards can be 1.25rem. Maybe use variables? No.

Need ensure no markdown. Output raw CSS.

Let's craft:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        box-shadow: 0 6px 16px -6px rgba(59, 130, 246, 0.45);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        color: #1e293b;
        border: 1px solid rgba(30, 41, 59, 0.08);
        border-radius: 1.25rem;
        box-shadow: 0 10px 30px -12px rgba(30, 41, 59, 0.18), 0 2px 6px rgba(30, 41, 59, 0.04);
    }
}
```

Need consider if `border` property is visual? Adding border might alter box sizing if box-sizing border-box? Border width 1px could affect layout if box-sizing content-box? But layout could shift. Since target says border-color can change, border-style can change, not border-width. Adding border with width could be considered not allowed because "border-color and border-style (NOT border-width)" may change, implying border-width shouldn't change. We should not add new border if it changes dimensions. We can avoid border or use outline (doesn't affect layout). But prompt says outline styles allowed. We can use outline instead of border: `outline: 1px solid rgba(...); outline-offset: -1px;` This doesn't affect layout if outline doesn't. But can change visually. Should we add outline? Maybe okay. But background and box-shadow don't affect layout. Border-radius doesn't affect layout. So maybe remove border.

Need use `outline: 1px solid rgba(30,41,59,0.06);` maybe. But border-radius may affect background clipping. Good.

Need maybe `transition`? Could add transitions to cards: `transition: box-shadow 0.25s ease, transform 0.25s ease;` But transform is not in allowed changes? ? "transition timing, easing, duration" can change; adding transition could be okay. But transform property in transition doesn't change layout; but if no hover transform, not necessary. Adding transition is visual. But if we add transition but no interaction, okay. We can add `transition: background-color 0.25s ease, box-shadow 0.25s ease;` No transform to avoid layout.

Need maybe background with slate? For body? no selector. Could set `.contact-channels-section article` background white, card. The section background maybe slate but no selector. Could add a background to `.app-hero-section .badge.bg-warning` with linear-gradient. Good.

Need perhaps use custom properties? We can define `--accent` within media? Not necessary. If CSS variables at top absent, not needed. Could use color values directly.

Need maybe "conserve selection exactly" including `.app-hero-section .badge.bg-warning` not `.badge.bg-warning`. Good.

Potential issue: media query has `@media (max-width: 575.98px)` condition locked; keep exactly. Good.

Need maybe "text-align: center" and "font-size: 0.85rem" are not visual identity changes but preserved. Use exact indentation? Not necessary but can preserve. Need first char = @.

Need maybe include original padding only, and maybe no new padding modifications. But target airy-rhythm says generous spacing; original uses var(--space-md). Could multiply? But if output only CSS and original `--space-md` defined elsewhere, multiplying by 1.2 may be allowed. However if custom property is used in many places, not changing. Need perhaps set `padding: calc(var(--space-md) * 1.2) !important;` But `var(--space-md)` unknown, calc works. But if --space-md is a length like 1rem, calc(1rem * 1.2) okay. However "padding" can only change ±20%; 1.2 exactly max. The original used var(--space-md) which may be defined. Could make a visual change. But if --space-md is custom property with unitless? Still. But maybe unnecessary; better keep to avoid risk. But target airy-rhythm wants generous spacing; maybe use `padding: calc(var(--space-md) * 1.15) !important;` This stays within ±20. Yet if `--space-md` is defined as a CSS variable from another scope, calc is fine. But if original file is only this, `--space-md` may not be defined; but existing original uses it, so either it's defined globally or broken. We can keep. If we don't define, no need. Could maybe set `padding: var(--space-md) !important;` to preserve. Since "padding, margin (keep similar values, ±20% maximum)" we can adjust, but not required.

Need maybe include `background-color: #f1f5f9`? But on cards white. Need maybe a card on slate background: Could set article background white, section background slate? Can't set section. But we could set `background: #ffffff` on cards, good.

Need maybe add `color: #1e293b` on cards; but if card text contains headings, inherited color from card maybe. Fine.

Need maybe add `box-shadow` with multi-layer effect: `0 20px 40px -20px rgba(...), 0 6px 12px -6px rgba(...), inset 0 1px 0 rgba(255,255,255,0.8)`? `inset` doesn't layout. But card on white maybe. Need "soft pillowy shadows". Use outer shadows.

Need "Dense dashboard" might need tight compact, but variant airy-rhythm overrides with generous spacing, large radius. So our shadows/radius are airy. Colors slate/blue. Good.

Need perhaps choose background on badge: `background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; box-shadow: ...; border-radius: 999px;` Good.

Need maybe keep `.app-hero-section .row .col-lg-7` with `background: transparent`? no.

Need maybe add `@media (max-width: 575.98px) { ... }` only.

Need think about custom property "space-md" maybe from bootstrap? If we set `padding: calc(var(--space-md) * 0.8) !important;` That is within ±20 and compact, but target airy says generous; so use 1.2. But if `--space-md` is e.g. `1.5rem` (24px), 1.2 = 28.8px, okay. If `--space-md` = 4rem, 20% would be huge but okay. Use `calc(var(--space-md) * 1.15)` to be safe? Max 1.2. Use 1.15.

But what about original "padding: var(--space-md) !important;" and target "Aggressive: padding 32-56px" may not align if --space-md is 1rem. We can make padding value fixed? Need know unknown. Could replace with `padding: calc(var(--space-md) + 0.25rem) !important;` That adds fixed 4px, within 20% only if original >? Not guaranteed. Using multiplier is safe proportionally. But if original var is 0? Not. Use `* 1.2`. Good.

Need maybe add "border-radius: 1.5rem" to article and card; target 16-28px. `1.5rem = 24px`. Good.

Need maybe add `box-shadow` with slate and blue tint: `0 18px 40px -18px rgba(30, 41, 59, 0.25), 0 4px 12px -4px rgba(59, 130, 246, 0.08);` Nice. We can also add `background: linear-gradient(180deg, #ffffff, #f8fafc)`? White card on slate background, not too gradient. Could use `background: #ffffff`.

Need maybe "text-align: center" means color of hero text? Could set `color: #334155`; maybe original hero text may have its own class color. But setting color on col may override? It might affect all text in hero. Maybe fine. Use `color: #334155;` to ensure slate text. But if there are buttons/links, color inherited could affect. Better not set color on column to avoid unanticipated. But visual identity includes "cool grays". We can set `caret-color`? No.

Need maybe set on `.app-hero-section .row .col-lg-7` `text-shadow: 0 1px 2px rgba(255,255,255,0.6);`? If text over image, maybe. But not necessary.

Need maybe add `background: rgba(255,255,255,0.6)`? not.

Need ensure all selectors exactly: `.contact-channels-section article` and `.contact-quick-section .contact-card` separated by comma. We'll keep.

Need maybe output no extra spaces? Fine.

Let's draft carefully.

Potential problem: Adding `background` and `box-shadow` to `.contact-channels-section article` inside media query might create a card look on mobile only. Is that desired? Yes.

Need maybe use `outline` not border. Let's include `outline: 1px solid rgba(30, 41, 59, 0.06); outline-offset: -1px;` but this may not clip with border-radius? Outline follows border-radius in modern browsers but may be square? Actually outline follows border-radius in modern. But outline-offset negative. It's okay. But adding outline no layout. Maybe use `border-color`? We can set `border: 0`? no.

Need perhaps add `-webkit-backdrop-filter`? Not necessary.

Need maybe add `background` on badge with `linear-gradient(135deg, #3b82f6, #2563eb)` and `border-radius: 999px`. If Bootstrap badge already has border-radius, this changes but allowed. It may affect pill shape. Good.

Need maybe badge should be warning? Now blue. Good because palette.

Need maybe text color white on blue ensure contrast. Good.

Need maybe "badge.bg-warning" may have background from Bootstrap `bg-warning`!important? Specificity: `.app-hero-section .badge.bg-warning` (0,3,0) vs Bootstrap `.bg-warning` (0,1,0), so override. Good.

Need maybe font-size locked 0.85rem. Keep.

Need maybe if `font-size` is 0.85rem, line height maybe. not.

Need maybe "contact cards padding var --space-md" should keep `!important` because original. Use `padding: calc(var(--space-md) * 1.2) !important;` Is `calc(var(--space-md) * 1.2)` within ±20%? yes. But if CSS custom property is not calculable? It is. Need no spaces? We can write `calc(var(--space-md) * 1.2)`. Good.

Need maybe "max-width 575.98px" exactly. Use same.

Need maybe "media query breakpoints conditions only" keep.

Need perhaps not include `transition` if no state? Could include to satisfy "refresh visual". Let's add `transition: box-shadow 0.3s ease, background-color 0.3s ease;` to cards. But if no hover, no effect. It is a decorative property? Transition timing changes allowed. Since original no transition, adding is okay. But might conflict with no JS. Fine.

Need maybe add `transition` to badge too: `transition: box-shadow 0.3s ease, transform 0.3s ease;` But if transform not changed? no. Could use `transition: none`? no.

Need maybe "only colors, shadows, and decorative properties may change" means transition is in allowed