/* ============================================================
   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: rewrite CSS visual only. Need preserve selectors/layout. Original CSS small media query:

@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 visual identity without changing layout structure/class names. Since no colors/shadows/radius/transitions here except maybe padding. Need preserve all selectors exactly. Can change color properties maybe add? But only rewrite CSS preserving selectors. Need target style symmetric-grid sharp-edges. But original has no colors. We can add visual properties? We must "Refresh visual identity" and "All color values ... changed" but there are no color values. We may alter padding? Target says layout pattern but aggressive only; conservative can't change dimensions much. "padding, margin (keep similar values, ±20% maximum)" but original has padding var(--space-md) !important; The media query uses padding important; if we change to another var? But --space-md unknown. We could leave. However task likely expects adding colors/shadows? But media query rules only layout/text-align/font-size/padding. Cannot change font-size? Typography fixed, font-size cannot change. text-align fixed. So only padding can be adjusted but up to ±20% and also must preserve. Yet to "refresh" maybe we should not modify? Need output CSS only. Could add color/border etc inside existing rules? But that would alter appearance and perhaps layout? It might be okay visual changes only, but adding properties to rules is allowed? The instruction says "All color values: background, color, border-color..." but no existing. "Only colors, shadows, and decorative properties may change." We can add colors? Hmm.

Need satisfy target style symmetric-grid and sharp edges. Maybe update padding values? 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;
    }
}

We must not change media breakpoint. Selector exact. Layout values not to change. text-align and font-size cannot change. padding can change within ±20%. But if original uses var, unknown. Could replace var(--space-md) with something? That is padding value. But "keep similar values, ±20% maximum" impossible due unknown. We can keep var(--space-md). But then no visual change. Maybe need add border-radius/box-shadow etc. But adding properties won't change layout? box-shadow does not layout. border-radius no layout. transitions no layout. We can add colors to badges maybe. But in media query, might override.

Need think of "request ID" etc. User expects CSS output only. We should produce CSS with same selectors and adjusted visual properties. Could add color, background-color, border, box-shadow, border-radius, transition maybe. But in media query, these rules apply at max-width. Should we add colors inside these specific selectors? The target style: hard offset shadows, sharp edges, symmetric-grid. The original selector .badge.bg-warning could get shadow? But it's inside media query. However perhaps need "refresh entire file" even if only media query partial. But prompt includes only this block? It says file assets/css/saishi.css #块2/2. Perhaps this is a CSS chunk from a larger file. We should rewrite only given chunk. Need output same selectors with modifications that fit.

Need be careful: "display, position, grid-template-*, flex-direction unchanged" but if we add visual props okay. "Width, height, padding, margin within ±20%" means avoid modifying padding var. "font-size unchanged". "Colors throughout file replaced with fresh palette?" No colors output. We can introduce colors maybe.

Let's consider target style: symmetric-grid, sharp-edges. Since media query includes "contact-channels-section article, .contact-quick-section .contact-card" perhaps we can add "border: 3px solid #..." and "box-shadow: 4px 4px 0 #..." but adding padding change? box-shadow no. But these cards may already have other styles; adding border changes layout potentially (border-width counts box size unless border-box? unknown). Avoid border because could alter layout? The prompt says border-color/style can change not width, but adding border is decorative. But adding 3px border would change layout. In conservative mode, we can change border-style/color but not width? "border-color and border-style (NOT border-width)" means don't add width. If adding border includes width, violates. So avoid border-width. But box-shadow unaffected.

Need maybe use outline? "outline styles (color, type)" can change/add? It doesn't affect layout. Could add outline maybe. But "all color values" perhaps okay. But adding outline might affect visual but no layout.

Need follow "sharp-edges": small border-radius (0-4px), hard offset shadows, strong borders (2-3px solid), snappy transitions. Could add no direct because media query? We could add to .badge.bg-warning? Something like "box-shadow: 4px 4px 0 rgba(...); transition: box-shadow 0.15s ease, transform 0.15s ease;" But transition property with transform may need transform property. However transform changes layout? It's okay but not desired. "transition timing, easing, duration" can be changed. If add transition to badge, no layout change. But "snappy transitions" maybe not needed.

Need perhaps adjust padding to "calc(var(--space-md) - 4px)"? That's replacing padding value. But could break because var unknown; but in CSS, calc with custom property and pixel subtraction is okay? The custom property value could be "1rem" or maybe "0.75rem"; calc works. But if var undefined? It wouldn't. Better preserve exact var. Yet no visual change.

Maybe we can answer just the same CSS because there is nothing to refresh without violating constraints. But "You are expert CSS designer... Refresh visual identity without changing layout structure." There must be modifications. We need generate a CSS that reflects a fresh visual identity but within the given code. Maybe we can add a new CSS custom property declaration? The original media query can include custom properties? We could set --space-md? That would change padding if we alter var. But we shouldn't change padding? Hmm.

Could add decorative properties to .app-hero-section .row .col-lg-7? It has text-align center only. We can add background color? That might affect visual but not layout. Could add "color: #1e2a3a;" but that changes text color. That's allowed. Could add "caret-color", "accent-color", etc. But text-align center already; adding color is a visual refresh. Yet in media query, maybe the element is a text container; adding background color would look weird. But requirement is visual identity.

Could add CSS rule for "contact-channels-section article, .contact-quick-section .contact-card" with "border-radius: 4px; box-shadow: 4px 4px 0 rgba(45,55,72,0.15); transition: box-shadow 0.15s ease, transform 0.15s ease;" But "transform" property changed? Transition transform doesn't require transform. But box-shadow visible only if background already set? It may be. Add "background-color: #fff"? This could alter if already set? But perhaps okay. But if there is no background, box-shadow appears only around text? Actually box-shadow on element with no background creates shadow around element's border box; with transparent background, shadow still visible? box-shadow draws shadow even if background transparent, but it's painted behind content and shows through if background transparent? Need recall: box-shadow uses element's border-box shape and is painted behind background, but if background transparent, shadow is visible because shadow is external to borders? It is visible. But if transparent background and text on top, shadow may show faintly. Fine.

But "All color values: background, color, border-color, fill, stroke, outline-color" we can change background maybe. But "color values" means all colors replaced; adding colors. Since original doesn't specify.

Need inspect target style: "symmetric-grid" "Balanced harmonious palette, Consistent shadows." But our selectors maybe only small pieces; maybe the file has multiple grid sections elsewhere. We can perhaps set variables? In a media query, we can set custom properties on root? But no. Could add brand colors to badge.

Potential approach: maintain selectors and media query, and within each rule add decorative properties that align with target:
- For hero col-lg-7: maybe "color: #2d3436;" and maybe "text-shadow: none;"? But typography? text-shadow allowed. But in mobile hero, maybe not needed. Could leave no color.
- For badge bg-warning: It uses Bootstrap class "bg-warning", currently yellow background. Since existing class bg-warning handles background. We can add "box-shadow: 4px 4px 0 rgba(244, 162, 60, 0.35);" and "border-radius: 4px;" and maybe "transition: box-shadow 0.15s ease, transform 0.15s ease;" and "color: #2b2118;"? But badge bg-warning has its own background; adding color maybe changes text. Font-size unchanged. Add "padding" maybe? Typography? no. But badge likely has padding; not in rule. We can add "border-radius: 4px" to override Bootstrap's rounded-pill? Actually Bootstrap badge has pill border-radius 50rem; changing to 4px would be sharp edges. Good.
- For contact cards: Add "border-radius: 4px; box-shadow: 4px 4px 0 rgba(...)"; keep padding var. Maybe add "background-color: #fff;" to match palette. Also "transition: box-shadow 0.15s ease-in-out;" But if no hover rule, transition is pointless but okay. Could add "box-shadow: 4px 4px 0 #..." visible only if maybe no shadow. Good.

Need avoid changing layout: adding background-color won't layout. box-shadow no. border-radius affects background if background exists, but not layout? It can affect rounded corners of background and border box, but border radius doesn't affect layout box. Fine. outline maybe no. Transition no.

Need perhaps add "filter: drop-shadow" no.

Need use colors from a balanced harmonious palette and consistent shadows. We can choose per target: "symmetric-grid" likely balanced. Palette maybe slate + amber/teal. Since bg-warning badge, use amber shadow. Cards use teal/blue? Let's craft.

Original CSS uses `--space-md`. Need preserve.

Possible output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 4px;
        box-shadow: 4px 4px 0 rgba(180, 83, 9, 0.25);
        transition: box-shadow 0.15s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.12);
        transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
    }
}

Need consider: adding color might violate? no.

But is adding `color` to hero col an unnecessary visual change? Yes, but okay. Yet "font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform" cannot change, but color okay.

Could use custom properties to update colors? But no root.

Need ensure no comments. Need not output markdown fences. Good.

However, is adding `transition: transform` with no transform maybe fine. But "display, position, grid-template..." unchanged. Good. Padding unchanged. Font-size unchanged. text-align unchanged. The selectors exactly same. Media query same. Good.

Need perhaps more "fresh palette" from target style: sharp edges requires strong borders 2-3px solid. We can't add border-width. Could use outline: 2px solid #...? It draws outside and doesn't affect layout. But "outline styles (color, type)" can change. Could add `outline: 3px solid #e2e8f0; outline-offset: -3px;` to cards for sharp edge. But outline doesn't affect layout. However adding outline may conflict with accessibility? Fine. But if there is existing outline? no.

Could add `outline: 3px solid rgba(241,245,249,0.8)` to cards? Maybe.

Need think about target style "Hard offset shadows: 4px 4px 0px solid color" — that's like box-shadow with 0 blur and spread? In CSS, "box-shadow: 4px 4px 0 0 rgba(...)" maybe exactly. Use no blur/no spread. Let's use `box-shadow: 4px 4px 0 0 rgba(...)`.

Need maybe set `border-radius: 4px` for badge and cards. For hero, no.

Need maybe set `caret-color` or `accent-color`? Not needed.

Could produce:
@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;
        border-radius: 4px;
        box-shadow: 4px 4px 0 0 rgba(244, 63, 94, 0.25);
        transition: box-shadow 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 4px 4px 0 0 rgba(2, 132, 199, 0.18);
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}

But target palette perhaps "symmetric-grid" with balanced colors. Could use amber shadow for badge because badge is warning (yellow). Use slate/teal cards.

Need maybe no `color` on hero to avoid change? But we need "fresh color palette." I'll add `color: #0f172a;` and maybe `text-shadow: none`? Hmm.

Need think about "sharp edges" with "strong borders (2-3px solid)"—we can use `outline: 3px solid` on cards, and maybe `outline-offset: -3px`? But adding outline could alter focus? no.

Could write:
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 4px 4px 0 0 rgba(15, 23, 42, 0.12);
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}
But `transform` not set; still ok.
Maybe need "uniform gap" but no gap changes.

Need not include placeholder comment. Good.

Let's ensure no markdown. final only CSS.

But before final, consider if changing `background-color: #fff` on contact cards may override a transparent background that was intended to show a pattern/image. Yet visual identity refresh could be okay. If original had `background: #fff` already, no issue. If original had dark background, override could change layout? no.

Need maybe preserve `!important` on padding only. If add `background-color` no important. Good.

Need maybe change `box-shadow` property not "hard offset shadows" because if card has existing shadow from another rule, this one in media query may override depending specificity. `.contact-channels-section article, .contact-quick-section .contact-card` specificity 0,1,1? Since same as possibly other rules; media query last in file maybe. But in original chunk, adding box-shadow may or may not apply in cascade. Fine.

Need perhaps add `outline: 3px solid #1e293b;` to match sharp edges. But it could be ugly. Yet target style says strong borders. Outlines can simulate borders without layout effects. Let's include? Maybe yes for "sharp-edges" variant:
`outline: 3px solid #e2e8f0; outline-offset: -3px;` on cards. But outline around card with negative offset draws inside; if background white, okay. It could conflict with border-radius? Outline follows border-radius in modern browsers? Outlines may not follow radius in older, but okay. But too much. Maybe not needed; box-shadow is enough. The prompt says "Strong borders (2-3px solid)" but in conservative mode border width not change. Adding border style/color without width impossible. Could use `outline` as strong border. Let's use on card list to satisfy "strong borders" visually:
`outline: 3px solid #0f172a; outline-offset: -3px;` gives a hard inner border. That plus box-shadow gives sharp graphic. But if cards have no background, outline outlines rectangle; with background white, nice. It doesn't affect layout.

Need include `transition: box-shadow 0.15s ease, outline-color 0.15s ease;`