/* ============================================================
   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 CSS only. Need rewrite visually but given very limited CSS. Need preserve selectors and layout. Original:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

Need refresh visual identity. But these rules mostly layout: text-align, font-size, padding. Cannot change display etc, but can change text-align? Text-align is listed in never change typography? Actually "text-align, vertical-align" under NEVER CHANGE layout. Need preserve. font-size can't change. Padding can change within ±20%? var(--space-md) can't know. We can modify CSS custom properties? The rules use var(--space-md), and task says CSS custom properties values can change. But then padding is using var, maybe we can redeclare --space-md? But only in media query? Could change padding value perhaps with calc? But cannot change width etc; padding can within ±20%. But if we change --space-md elsewhere maybe risky. We only have this snippet? User gave entire file? They showed just block? Need assume this is file content. Need output rewritten CSS with same selectors. Can add declarations only, no new selectors? We need "visual identity" maybe add color/shadow etc to these specific selectors. But classes don't have enough visual properties. We can add new visual declarations to existing rules: text-shadow, background, color? But would alter. Need perhaps set colors, shadows, border-radius, transition within existing rules. But .app-hero-section .row .col-lg-7 is just text-align. We can add color, text-shadow? But then on mobile only. Need keep layout, typograph? We cannot change font-size but can change color and text-shadow. For badge, can change background, color, border radius, box-shadow maybe. For contact cards, can change background, border, shadow, radius? But padding must be similar. Need preserve padding via var or adjust. Let's be careful.

Need perhaps rewrite CSS to add visual identity with "horizontal-strips" bold colors, "sharp-edges": hard offset shadows, small radius, strong borders, snappy transitions. But existing media query targeted elements. Need apply to those. Could add box-shadow, border-radius, border, etc. Need also maybe add a new CSS custom property at root? Not allowed? Could include variable definitions? It would be new selector. No. Need preserve selector exactly. Could change var values by defining custom property on the same selector? Example .app-hero-section .badge.bg-warning { --space-md: ...; padding: var(--space-md) !important; }? That doesn't help if not in padding. Actually if we add --space-md: 1rem to selector, then padding var resolves. But we can modify padding value maybe. But task says padding similar ±20%. The original padding is var(--space-md), unknowable. Don't change.

Maybe can use existing property values? Need make visual change. Let's craft output with only original rules plus aesthetic declarations. Ensure no layout change. Add background colors etc.

But maybe better to provide a new version:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2430;
        text-shadow: 2px 2px 0 rgba(255,214,102,0.35);
    }

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

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

Need check: We are setting background on article, which might be okay but no layout. Need use .bg-warning; Bootstrap's bg-warning may have background-color via !important. Our background might not override if bootstrap has !important. But okay. Could use box-shadow etc. Need maybe add hover? Can't add selectors. So no.

Need perhaps "alternating background colors per strip" but only article and contact-card both same. Could maybe use nth-child? That would be new selector. Not allowed. So no.

Need maybe include more color properties from original within existing selectors. Already.

Need output no markdown, first char CSS. Need ensure final answer not with code fences. Keep exactly the same structure except added declarations. Need include no comments.

But let's consider if "background" declaration changes may be considered layout? no. Border-width? We set border: 2px solid, but "border-color and border-style (NOT border-width)" can change; border-width not. Oops border: 2px solid sets border-width. Not allowed. Need use border-style and border-color only; border-width must be same? Original had no border-width. But adding border-width would change layout, possibly not allowed. We should avoid border-width. Use outline instead? "outline styles (color, type)" can change. But outline-width? It says outline styles color, type; not outline-width. Might be okay? Better use box-shadow as border? But sharp edges need strong borders. Yet rule says NEVER border-width. Could use outline: 3px solid #... That sets outline-width, but not in never? It says outline styles (color, type) only. But using shorthand sets width. Better use outline-color and outline-style? Need width? Without width default medium. Actually outline-style solid requires border width? Default medium. Could use `outline: medium solid #...` not sure. Maybe avoid border-width entirely by using `box-shadow: 0 0 0 2px #1f2430` which simulates border. But also add hard offset shadow? Can combine: `box-shadow: 0 0 0 2px #1f2430, 4px 4px 0 #1f2430` this creates border plus offset. Good. Border-radius 0 okay. We should not set border at all.

Need also no `transition: all 0.15s ease-in-out`? That's allowed. Good.

Need maybe "Sharp edges" zero radius. Setting border-radius: 0 is visual, okay.

Need maybe "background" set as shorthand. Good.

Need perhaps `filter` or `backdrop-filter`? Could add `filter: drop-shadow(4px 4px 0 rgba(...))`? But box-shadow already. No need.

Need perhaps "text-shadow" allowed. Good.

Need possibly add `accent-color` or `caret-color`? No.

Need maybe `color` modifications in first rule. Fine.

Need perhaps maintain text-align.

Need maybe adjust border colors. Good.

Need maybe not set background on `.contact-channels-section article` if it originally had background image etc. But okay.

Need maybe use `color: ...` may affect child text? okay.

Potential issue: We set `background` on `.app-hero-section .badge.bg-warning`, but Bootstrap `.bg-warning` likely has `background-color` with !important or CSS custom property? Actually `.bg-warning` in Bootstrap uses `--bs-warning-rgb` and `background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;`. Our `background` cannot override !important unless also !important. Should we add `background: #ffb627 !important;`? In CSS, `!important` can override. Could add, but then it's not just visual? okay. Original didn't have !important except padding. We could add !important to background to override. But is that too much? The instruction says not to change padding important? Actually "padding: var(--space-md) !important;" so can't change. Adding `!important` to background is okay. But maybe not needed. The user wants visual identity changed. Should override. Add `background: #ffb627 !important;`? But then we're adding important declaration, allowed. But maybe too aggressive. Let's decide.

Given "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." Need make changes clear.

Need perhaps add "global" color changes? Can't add selectors. But perhaps we can modify custom properties on the existing elements? Example:
.app-hero-section .badge.bg-warning {
    --bs-bg-opacity: 1;
    --bs-warning-rgb: 255, 182, 39;
    ...
}
But not needed.

Alternative: Could output same media query but add more properties:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2118;
        text-shadow: 2px 2px 0 rgba(255, 183, 77, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb627 !important;
        color: #211d18;
        border-radius: 0;
        box-shadow: 0 0 0 2px #211d18, 4px 4px 0 #211d18;
        transition: all 0.15s ease-in-out;
    }

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

Could maybe set `--space-md: 1rem`? no.

Need maybe decide whether to include `background-color` vs `background`. Since original has no rest? `background-color` is a color value, okay. It won't override? `.bg-warning` uses important, so we need `!important`. For article, not necessarily. Could use `background-color: #fff6e5;` no important.

Need maybe adjust `--space-md`? "padding is var(--space-md)" we can't know. Keep.

Could maybe add `outline` instead of box-shadow "0 0 0 2px" to create border. But box-shadow okay.

Need maybe preserve line breaks? fine.

Need maybe not add comments.

Let's consider if setting `.app-hero-section .row .col-lg-7 { color... }` could affect text color of hero in mobile but not layout. Fine.

Need maybe "horizontal-strips" full width? Can't change layout. Could use background on articles to create strips. Good.

Need maybe include `border-radius: 0` on all, but `border-radius` might be layout? no.

Need maybe use "hard offset shadows: 4px 4px 0px solid color". In CSS box-shadow cannot have `solid`. We can implement `4px 4px 0 #...`. Good.

Need maybe `box-shadow: 4px 4px 0 #1f2430` plus maybe `0 0 0 2px` to simulate border. Good. If need "strong borders (2-3px solid)" can use `outline: 2px solid` but no border-width. Hmm.

Let's examine constraints: "border-color and border-style (NOT border-width)" says can change border-color and border-style but not border-width. If original has border-width maybe can leave; we shouldn't introduce new width. But "border-color and border-style" implies they expect border shorthand perhaps? Yet they explicitly say not border-width. Better not use `border` or `border-width`.

"outline styles (color, type)" means can change outline-color and outline-style, but not outline-width. So no `outline: 2px solid`. We can set `outline-width` indirectly? Don't.

Box-shadow is fully under "box-shadow" can redesign. Using `0 0 0 2px` creates a border-like shadow. This is allowed because box-shadow can have whatever offsets/blur/spread. Great.

Need maybe transition "all" might affect properties we didn't intend, allowed. Could use `transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;` This changes transition timing/duration, allowed. No hover to trigger though. fine.

Need maybe "filter: saturate(1.1)"? Could add `filter: saturate(1.15);` But might affect all children, okay. Yet maybe not needed. Could be "more distinct" maybe add subtle `filter`? Hmm.

Need perhaps "accent-color" not relevant.

Need maybe set `backdrop-filter`? Not relevant.

Could perhaps use `box-shadow` to create the "horizontal strips" vibe? Maybe set `article` with `border-radius: 0` and `box-shadow` hard offset.

Need maybe choose palette more fresh. Original info not given. Need choose distinctive palette. Let's pick "cobalt + tangerine + cream" maybe. Colors:
- Dark ink: #1c2333
- Cream paper: #f7f1e3
- Tangerine: #ff9f1c
- Teal? Maybe.
Let's choose:
`#1e2a38` deep navy ink.
`#f4f0e6` cream.
`#ffb027` amber.
`#0f766e` teal? Maybe.
Sharp edges.

Need perhaps set `background-color: #f9f2e7` for article, `box-shadow: 0 0 0 2px #16222e, 5px 5px 0 #16222e`. Good.

Need maybe make first rule's color `#16222e`. Text shadow `3px 3px 0 rgba(255, 176, 39, 0.3)`.

Need maybe `transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1)`? Snappy transitions. Good.

Need maybe add `border-radius: 0` to badge and card.

Need maybe set `color` on article and card.

Potential issue: Setting `background-color` on `.contact-channels-section article` could override components already have background, but okay.

Let's check all original declarations preserved:
- `.app-hero-section .row .col-lg-7 { text-align: center; }` preserve plus new.
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` preserve plus new.
- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` preserve with comma and semicolon. Need keep exact selector list. Yes.

Need maybe order: if we put `background-color: #ffb627 !important;` before `font-size`, doesn't matter.

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

Need maybe no markdown fences. Good.

Let's craft final output. Use double quotes? Doesn't matter. Keep semicolons.

Need maybe final code:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #16222e;
        text-shadow: 2px 2px 0 rgba(255, 176, 39, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb027 !important;
        color: #16222e;
        border-radius: 0;
        box-shadow: 0 0 0 2px #16222e, 5px 5px 0 #16222e;
        transition: all 0.15s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f9f2e7;
        color: #16222e;
        border-radius: 0;
        box-shadow: 0 0 0 2px #16222e, 5px 5px 0 #16222e;
        transition: all 0.15s ease-in-out;
    }
}

Need maybe use `box-shadow: 5px 5px 0 0 #16222e, 0 0 0 2px #16222e;` In CSS, `0 0 0 2px` is offset-x 0 offset-y 0 blur 0 spread 2. Good.

But maybe combine `box-shadow: 5px 5px 0 0 #16222e, 0 0 0 2px #16222e;` This yields hard offset 5px and border 2px. Good. But if dark border plus dark shadow same color, then hard offset is not visible under border? It appears as dark rectangle offset, with element background cream; border drawn as shadow ring at element bounds, offset shadow behind. Nice. But both same color, okay. Could use accent color for offset shadow to create strong contrast: `box-shadow: 5px 5px 0 0 #ffb027, 0 0 0 2px #16222e;` That's more fresh. In target "Hard offset shadows: