/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need respond with rewritten CSS. But original CSS snippet has no colors, shadows, radius, transitions? It's a media query with layout-ish properties: text-align, font-size, padding. But padding variable! Need keep selectors, font-size, text-align, padding maybe within ±20%. There are no colors. Need "refresh" but impossible? We can add visual properties? We must preserve selectors exactly. We can add maybe color properties? But shouldn't change layout. Need likely output equivalent or slightly adjusted padding. Need following constraints. Original file fingerprint maybe includes CSS vars referenced? Actually only snippet. Need refresh. Since no colors, perhaps set color, background? But that would add to existing selectors. "Only colors, shadows, radius, transitions, gradients." We can add color/background-color but not necessary. Need be careful: Inside @media max-width 575.98px. We can introduce color? But classes are app-hero-section, contact channels, etc. However "HTML fixed, visual changes only". We can modify values: font-size? It is typography, cannot change. text-align can't change. padding variable is layout but can vary ±20%. Since padding: var(--space-md) !important. We could replace with calc? Keep same? Need not change maybe.

Maybe the task is to rewrite entire CSS with fresh visual identity but file only contains this query. Could add effects to these selectors? For .contact-channels-section article, .contact-quick-section .contact-card maybe add border radius, box-shadow, background? This would be new properties. Spec says "refresh visual identity WITHOUT changing layout structure or class names" and "ONLY colors, shadows, and decorative properties may change" so can add colors/shadows. Need possibly preserve paddings. Could update padding slightly? However layout pinned. Need maybe leave same. Since "make colors, shadows, and radius MORE distinct this round. Use fresh palette." We need add background colors maybe to dark strip? But target style horizontal-strips aggressive not applicable? It says layout pattern aggressive, but mode conservative. Need apply visual variant sharp edges: hard offset shadows 4px 4px 0, small radius, strong borders, snappy transitions. Since there is no hover, maybe transitions can be on these cards.

Need include only CSS selectors exactly:
@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 can add color declarations in each rule. Need ensure selectors kept exact. Add:
- .app-hero-section .row .col-lg-7 { text-align: center; color: #1a1a1a; } maybe no layout.
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background-color: ...; color: ...; border: 2px solid ...; border-radius: 0px; box-shadow: 4px 4px 0px #etc; }
But "badge" class might still exist. Need no change font-size. Add display? Not allowed. But could not add.
- contact cards: keep padding but maybe use var(--space-md) or slightly changed? They disallow width/height/padding margin only ±20%. Since use var can't know. We can keep var(--space-md). Could change to calc(var(--space-md) * 0.9) to be within and visually distinctive? But maybe variable calculation not needed. Conservative. Use same padding, add border, border-radius, box-shadow, background, transition.

Need perhaps use "sharp-edges" variant with hard offset shadows: 4px 4px 0px #1a1a1a, border-radius: 0px, border: 2px solid #1a1a1a, transition: all 0.15s ease. Need include background colors. Fresh palette: Maybe deep navy + cream + chartreuse/amber? Target style horizontal stripes: alternating white/cream/dark/white. But no layout. Could just set dark background on hero card and bright accent on badge. We need "Use a fresh palette." Pick palette: Background #f7f3e8 (cream), Dark #14213d, Accent #fca311, Muted #e5e5e5. Alternatively "sharp edges" with crimson/teal.

Need be mindful: `.badge.bg-warning` bootstrap class bg-warning currently might have background via Bootstrap. We add background-color to override? But if property order same; external CSS order maybe. OK.

Need not change font-size etc.

Maybe original snippet has semicolons. Need output valid CSS.

Need consider "consume absolute maximum thinking" yet final final only CSS. We can produce.

Let's craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #fca311;
        color: #14213d;
        border: 2px solid #14213d;
        border-radius: 0px;
        box-shadow: 4px 4px 0px #14213d;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

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

But wait transform not allowed? @keyframes values can change but not listed? It says only colors, shadows, and decorative properties may change. Transition is allowed explicitly "transition timing, easing, duration" but not transition-property? We can change transition property to transform? It introduced transform property? Actually transition transform doesn't apply unless transform state. We can include transition-property but no transform. Maybe don't mention transform if no hover. But can set transition on all? all 0.15s ease. Allowed? transition timing/easing/duration. But not property? It can be all. use transition: all 0.15s ease;. This could affect layout? no. Good.

Need maybe no "background-color" on hero row because could affect entire row and not desired. But target horizontally strips maybe full-width strip. However selector `.app-hero-section .row .col-lg-7` targets column, not whole section. Could add background? inside mobile, maybe white. Not needed. "All color values" replace? Original had no colors. We can add.

Need maybe `.app-hero-section .badge.bg-warning` font-size is typography and unchanged. It's fine.

Need maybe include `accent-color`, `caret-color`? No.

Could use `filter`? no.

Need ensure border-radius "small or zero". 0px.

Could perhaps use `outline: 3px solid #fca311; outline-offset: 2px`? But outline adds layout? Outline does not affect layout. Decorative. Maybe added to cards? Could use outline but more effects. But maybe hard offset shadow plus border enough.

Need perhaps add `background: #fffdf5`? We can use hex.

Need maybe add `box-shadow: 4px 4px 0 0 #14213d;` But CSS property syntax: box-shadow: offset-x offset-y blur-radius spread color. `4px 4px 0px #14213d` lacks spread? actually two lengths? Syntax: offset-x offset-y blur-radius spread-radius color. If only 3 lengths: offset-x offset-y blur-radius. Need spread 0? `4px 4px 0 0 #14213d` is better. They specified "4px 4px 0px solid color" but solid isn't in box-shadow. Use `4px 4px 0px 0px #14213d`. Good.

Need maybe `border: 2px solid #14213d` okay.

Need maybe `background-color` on .contact-card. `contact-channels-section article` maybe article element could be `article` with own background. Fine.

Need maybe make transition all 0.15s ease-out? okay.

Need output exact CSS no fences. Use final.

But let's think: The "target style: horizontal-strips" says alternating background colors per strip. Our CSS doesn't create strips because fixed selectors. However can set card backgrounds maybe white/cream. But perhaps need use CSS variables? There are no variables. We can't add new backgrounds to hero row? Maybe "Alternating: white / cream / dark / white pattern" could be represented in mobile by hero col dark, badge accent, cards cream? We can do that:
- .app-hero-section .row .col-lg-7: maybe `color: #14213d; background-color: #fffdf5;` But if set background on col, may create block visible. But no width/height changed. It could be okay. But if row background already a color, adding col background could change visual. It won't layout. However some might be undesirable. We can add.
- badge: dark navy background with bright yellow text? But `.badge.bg-warning` semantic warning: yellow. Could instead dark badge? But "fresh palette" maybe use `#111827` background and `#fbbf24` text. Need "sharp edges" maybe 0 radius. But original target says horizontal strips, alternate. Could use amber accent.
- contact cards: cream #fffdf5 with dark border and shadow; maybe additional `border-top: 6px solid #f59e0b`? This uses border-width? Actually border-top-width would change? border-color/style only allowed, not border-width. But could set border: 2px solid, already. We cannot change border-width. But if adding `border-top: 6px solid` that changes border-width and violates. Use border: 2px solid and maybe `outline: 3px solid #fca311; outline-offset: -5px;` no outline-width? Actually outline-style/color changes allowed? They say outline styles (color, type), but outline-width not listed. To be safe, avoid outline width. Maybe box-shadow inset could create accent top? Could use `box-shadow: 4px 4px 0px 0px #14213d, inset 0px 4px 0px 0px #fca311;` This is decorative, no layout. Nice. We can use multi-layer shadows. This would be more distinct. Need avoid `inset 0 4px`? It just draws. Good.
- `border-radius: 0px` hard edges.

Need maybe "transition all 0.15s ease" but if no hover no matter. Could add `:hover`? Cannot change selectors? Actually pseudo-classes allowed but adding new ones? "Pseudo-classes (:hover, :focus, ::before, ::after)" maybe means keep existing; adding new pseudo-class selectors would change selectors perhaps not allowed? There were no pseudo-classes. Adding `:hover` would add selectors not in original, likely not allowed? They said selectors preserved; could be interpreted as cannot add selectors. So don't add hover.

Need maybe `transition: box-shadow 0.15s ease, background-color 0.15s ease;` on elements, but no change without hover. Fine.

Let's verify no extra properties that violate. For `.app-hero-section .row .col-lg-7`, we can add `color` and `background-color`; they're visual. No layout. But does this selector apply in media query to text-align center; adding colors might not change layout. OK.

Should we use `background-color: #14213d; color: #ffffff;` on hero col? That could fill column with dark navy on mobile. The target "dark strip" maybe yes. But if the col has only text, it will show dark block behind text. Might alter look but not layout. However if hero row already has background image? HTML might have existing background; adding CSS background may overlay/block image. But we don't know. Conservative perhaps avoid background on large section. Better to add only text color. But "refresh identity" requires more color. We can add color to hero text and badge/contact cards.

Could add `color: #14213d;` to hero text and `background-color: transparent`? no.

Maybe use CSS custom properties? Original mentions `var(--space-md)`. Could we define `:root`? Would be new selector, not allowed. No.

Need maybe adjust `padding: var(--space-md) !important;` to `padding: calc(var(--space-md) * 0.85) !important;` This is within 20%? Space-md could be standard 1rem, calc 0.85rem. But if `var` resolves, yes. However if CSS custom property isn't defined? It is. It would change layout slightly. The rule says "keep similar values, ±20% maximum". 0.85 is 15% less. Could do. But maybe unnecessary. We can keep same to avoid layout change. Yet need make more distinct. We can instead set `padding: var(--space-sm) !important`? Unknown; maybe too different. Keep same.

Need maybe output without comments. Since original has no comments.

Let's craft final.

But maybe "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." Need ensure we don't output same CSS with tiny changes. So add strong hard shadows and backgrounds. Let's choose palette:
- Ink: `#0b0c10`
- Paper: `#f4f1ea`
- Accent: `#ff4d00` (orange red)
- Secondary accent: `#00c2a8` maybe? 
But target style horizontal strips: white / cream / dark / white. Maybe use:
- White: `#ffffff`
- Cream: `#faf7f0`
- Dark: `#1f2937`
- Accent: `#f59e0b`
Need "fresh palette" maybe a 70s retro: `#1a1a1a`, `#f5f0e1`, `#e63946`, `#2a9d8f`. Hard offset shadows.

Let's settle:
- `--space` no.
- Hero col: color `#1a1a1a`? Actually dark.
- Badge: background `#f5f0e1`? No.
- Contact articles/cards: background `#f5f0e1`, border `#1a1a1a`, box-shadow `4px 4px 0 0 #1a1a1a`.

Need maybe changed `bg-warning` to `#ffd166` (soft yellow) with dark text and border.
- Badge: `background-color: #ffd166; color: #1a1a1a; border: 2px solid #1a1a1a; border-radius: 0; box-shadow: 4px 4px 0 0 #1a1a1a;`
- Contact cards: `background-color: #fff8f0;` maybe cream. 
- Could also set `.app-hero-section .badge.bg-warning` `caret-color` no.

Need maybe include `filter: drop-shadow`? Not necessary.

Potential issue: `.badge.bg-warning` original has Bootstrap background with CSS variable? But our rule specificity maybe `.app-hero-section .badge.bg-warning` is more specific than `.bg-warning`, good. It will override.

Potential issue: `color` on `.app-hero-section .row .col-lg-7` could override bootstrap? Fine.

Need maybe if using `box-shadow: 4px 4px 0 0 #1a1a1a;` It is 1px? Actually 0 spread. This is hard offset. Good.

Need perhaps "border-radius: 0px" on all elements. Good.

Need maybe "transition: all 0.15s ease" but transition is allowed. We can use `transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;` But no hover. Fine. Maybe `all 0.15s ease` is simplest. This could potentially animate layout if anything changes; but no changes. Good.

Need perhaps add `outline: none`? no.

Let's final with original exact selectors and formatting.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffd166;
        color: #1a1a1a;
        border: 2px solid #1a1a1a;
        border-radius: 0px;
        box-shadow: 4px 4px 0 0 #1a1a1a;
        transition: all 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffaf2;
        border: 2px solid #1a1a1a;
        border-radius: 0px;
        box-shadow: 4px 4px 0 0 #1a1a1a;
        transition: all 0.15s ease;
    }
}

Need maybe `box-shadow: 4px 4px 0px 0px #1a1a1a;` Use 0px for clarity. Good.

Could adjust padding by subtracting 5%