/* ============================================================
   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 with rewritten CSS. Need inspect original. It's media query max 575.98. Only layout-ish? Actually 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 visually refresh without changing layout structure/class names. But only these declarations. Need maybe add visual properties? Since colors, shadows etc. We can modify potentially add border-radius/box-shadow/transitions? But only allowed visual changes. We need keep selectors. The instruction says output only rewritten CSS preserving all selectors and layout exactly. We can change font-size? No font-size forbidden. But original uses font-size:0.85rem; we cannot change. Could add visual properties to these selectors? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Need apply visual identity changes within existing rules maybe add declarations. But HTML fixed, class names same. We can add box-shadow etc to existing selectors (not layout). However media query has 3 rules. Need maybe change padding? No padding considered layout and keep within ±20%? Original padding var(--space-md) maybe not numeric. Should we preserve. Need target symmetric-grid + sharp-edges. Need maybe set text-align unchanged? text-align is layout? In never-change list includes text-align, so not change. But original text-align center. Need keep. Font-size in never-change, keep. Padding in never-change, keep. We can add color, background? But the selectors are elements maybe badges/cards. Need perhaps implement sharp edges by adding border-radius:0; box-shadow:4px 4px 0px rgba; border maybe 2px solid. But contact-card perhaps has no border? We can add border: 2px solid currentColor? However if no border originally? Need ensure layout unaffected? Border-box likely okay but border adds width; but not layout? border-color style can change, border-width never change? It says border-color and border-style (NOT border-width). So cannot change border-width if existing. But we could add border-width? "NEVER CHANGE: border-color and border-style (NOT border-width)" means don't change border-width but can add? Hmm likely need not add border-width. Better avoid adding border-width. Could add box-shadow with 0 0 0 2px? But box-shadow is allowed. Hard offset 4px 4px 0px solid color is weird because box-shadow spread has no solid? Could use `4px 4px 0px 0px #...`. It's ok.

Need maybe include only original selectors? Since only CSS is this block. Need perhaps rewrite with fresh palette. Also media query conditions cannot change. Need preserve @media. Need keep selectors. Need make more distinct. Maybe transform:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #1c1917;
        border-radius: 2px;
        box-shadow: 3px 3px 0 0 #1c1917;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 #1e3a8a;
        background: #ffffff;
    }
}

But is adding background to contact-card okay? It changes visual but not layout. Need careful with "background" allowed. Current color maybe maybe there is variable. Need maybe accent-color? Hmm.

Need be "conservative" but "more distinct". The original file snippet only has 3 rules. Need ensure no unrequested layout changes. Also note @media rule in file maybe part of larger? We only output this block.

Need use balanced harmonious palette and consistent shadows. Sharp edges variant. Need maybe hard offset shadows: 4px 4px 0px solid color. But box-shadow is `4px 4px 0 0 #d97706` maybe offset.

Need check no forbidden changes. Adding colors in text-align rule doesn't change layout. But `text-shadow` maybe okay. But in `.app-hero-section .row .col-lg-7`, if applied color to hero section maybe might affect overall. But okay.

Need maybe not include `border` because border-width. Could use box-shadow to simulate border. We can use multiple box-shadows: `0 0 0 2px #...`, then `4px 4px 0 0 #...` to create hard offset border? Actually box-shadow spread is not border but visually. Good.

Need maybe keep theme colors. Balanced harmonious palette: use indigo/amber/slate? Need consistent. Let's choose palette:

- Primary ink: #1e293b (slate-800)
- Accent: #f59e0b (amber-500)
- Accent deep: #b45309 (amber-700)
- Background tint: #f8fafc (slate-50)
- Secondary: #0f172a
- Highlight border: #334155

Need symmetric-grid? Maybe applies to page, but not in CSS. Maybe use grid? Not relevant. We can maybe add `border-radius: 2px` to badges/cards. Need maybe use `transition: box-shadow 0.15s ease, transform 0.15s ease;` but transform is layout? It's animation, allowed? "transition timing" allowed, but transform changes visual; not in prohibited list? Not listed? It says only colors, shadows, radius, transitions. Could include transform? Maybe avoid.

Need maybe include `outline`? Not needed.

Need maybe include `backdrop-filter`? Not.

Need maybe make "sharp edges": zero/small radius, hard shadows. Should we use `border-radius: 0` for badge/card? But adding radius to `.badge.bg-warning` might conflict if existing not present? Original doesn't show, but final style all CSS includes maybe. We can set `border-radius: 0;` maybe. But if original had border-radius, this would change. That's allowed. Need maybe use `box-shadow: 4px 4px 0 0 rgba(15,23,42,0.9);`.

Need perhaps add `background` to contact card? It might override existing theme and create contrast. But since CSS isn't showing all, could be okay. But we should avoid too many additions? The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say add properties? Could interpret "rewritten CSS" with same selectors, can modify existing values and add chromatic properties. Need be careful not to alter layout.

Let's craft final CSS block with same selectors and added declarations. Need perhaps respect `!important` for padding. We can add `!important` to visual? Not necessary.

Need preserve @media (max-width: 575.98px). Keep selectors and order.

Potential issue: If we add `background: #ffffff` to `.contact-channels-section article`, `.contact-quick-section .contact-card` without `!important`, there may be no specificity conflict? But original CSS may include backgrounds. We need likely use same `!important`? We can include `background: #ffffff !important;` but that's visual. However `!important` is not layout. Could be okay. But if existing theme has dark background, changing to white might be too harsh? But target palette balanced. Perhaps better use `background: #f8fafc;` for cards. Need no important maybe.

Need choose final. Let's produce:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 0 2px 0 rgba(248,250,252,0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #d97706);
        color: #1e293b;
        border-radius: 2px;
        box-shadow: 3px 3px 0 0 #1e293b;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 #d97706;
    }
}

Need maybe text-shadow in first rule with color. If text-align center, no layout issue.

Need maybe include "sharp edges" and "symmetric-grid" maybe add `border-radius: 0` instead of 2? Sharp edges variant says 0-4px, okay 2px.

Could add `transition: box-shadow 0.15s step-start, background-color 0.15s ease;` but `step-start` maybe weird. Snappy transitions. Need maybe include `transition` in each selector. But original didn't have hover; adding transition no effect unless hover elsewhere. But okay. Maybe not.

Need maybe include `box-shadow` on badge with multiple layers: `3px 3px 0 0 #1e293b, 0 0 0 2px #1e293b;` to create hard border. But second layer with 0 offset 0 blur 2 spread creates solid 2px ring inside? Actually spread extends in all directions; with offset 0 creates 2px outline around element, outside. It might be okay, no layout. It might look like border. But first shadow offset 3px 3px with 0 spread? Need syntax: `3px 3px 0 0 #1e293b, 0 0 0 2px #1e293b` gives solid shadow offset plus ring. Good.

Need maybe use `--space-md` unchanged.

Potential issue: In CSS, `background: linear-gradient(...)` is allowed. But if the original badge has `bg-warning` from Bootstrap, background-color with important? Our class selector `.app-hero-section .badge.bg-warning` specificity 0,3,0? Actually `.app-hero-section` (0,1,0), `.badge` (0,1,0), `.bg-warning` (0,1,0) = 0,3,0. Bootstrap `.bg-warning` likely 0,1,0; `.badge` 0,1,0. So ours likely wins. But need maybe `!important`? Not necessary but to be safe. But if using gradient, add `!important` to override? Could alter visual. Maybe include `color: #1e293b !important;`? Not needed.

Need maybe no explanations.

But wait, user says "File: assets/css/saishi.css#块2/2" maybe only a block. Need output rewritten CSS. Need maybe include full file? It provided original snippet only. We should output same media query with modifications.

Need be mindful of "NEVER CHANGE" list includes "padding, margin (keep similar values, ±20% maximum)". The original padding is `var(--space-md) !important`, we keep exactly. Good.

Need maybe "font-size" cannot change. We keep `font-size: 0.85rem;`. Good.

Need "text-align" cannot change. We keep `text-align: center;`.

Need not change media condition. Keep.

Need perhaps `color` added to `.app-hero-section .row .col-lg-7` changes theme. Good.

Need perhaps "text-shadow" addition. Good.

Need perhaps `@keyframes` none.

Need perhaps "caret-color, accent-color" don't need.

Need maybe "outline styles" no.

Let's think if we should add `border-radius` to first rule? Not necessary.

Should we include `box-shadow` with hard offset "solid" color. We can do `box-shadow: 4px 4px 0 0 #1e293b` but this is "offset x/y, blur radius 0, spread 0". Good.

Need maybe "4px 4px 0px solid color" from variant weird, but we can use `4px 4px 0 0`.

Need maybe "symmetric-grid" target style perhaps wants equal grid layouts; but CSS block doesn't have grid. We cannot change layout. Maybe not.

Need maybe preserve `!important` on padding only. If add background with `!important` maybe not; maybe okay. But if need override existing background, we could use `background: #ffffff !important;` to be consistent? But this changes rule with `!important`, no layout. However could be seen as aggressive. Yet original had `!important` on padding due to Bootstrap. If not adding important, might still apply due to specificity. Good.

Maybe better to not add `color` to first rule? But target style has balanced palette. The user explicitly says previous attempt didn't change enough. This snippet is very small. Need significantly change. Add box-shadows, colors, radius, transitions.

Could perhaps include `transition` in all rules, though no hover. Example:
`transition: box-shadow 0.15s ease, background-color 0.15s ease;`

Need maybe add `accent-color: #d97706;`? Badge? no.

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

Let's formulate final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 0 2px 0 rgba(248, 250, 252, 0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
        color: #1e293b;
        border-radius: 2px;
        box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #1e293b;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }

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

Need maybe use first declaration `box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #1e293b;` The ring extends outside and may be clipped? Badge in hero section might not have overflow hidden? Probably okay. However if it overlaps adjacent elements, shadow doesn't affect layout. Fine.

Could set `box-shadow: 4px 4px 0 0 #1e293b;` only instead of ring. But variant says strong borders. A 2px ring from box-shadow visually gives strong border. Good.

Need maybe ensure all colors changed from original. Original had no colors; so added fresh. Good.

Need maybe if "background: linear-gradient(...)" stops with 0%, 100% is okay.

Need maybe `transition` on first rule? no effect.

Need maybe `cursor` not in allowed? no.

Need maybe use `border-radius: 0` to satisfy sharp edges? Sharp edges variant says small or zero 0-4px. 2 is small. Good.

Need maybe need "consistent shadows" from palette. The badge shadow and card shadows differ colors but consistent style. Maybe choose same shadow color for all to be consistent. Maybe use `#1e293b` for all? Then card shadow indigo. But if background white, shadow indigo. Could use `#d97706` for badge and `#1e293b` for cards. Consistent enough? Maybe symmetric-grid target "consistent shadows" so use same hard shadow color for both: `#1e293b`. But accent color then only background. Better: use `#1e293b` shadow for all, plus ring on badge. Then cards shadow `4px 4px 0 0 #1e293b`. Badge shadow `4px 4px 0 0 #1e293b`, ring `0 0 0 2px #1e293b`. That is consistent. But then card no strong border except hard shadow. Maybe okay. We can add a ring to card as well? `box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #1e293b;` That creates heavy border. But maybe too much. The target style says strong borders 2-3px solid. Multiple shadow layer gives border. Let's use on both badge and card:
`box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #1e293b;`
Actually if shadow offset is 4px 4px, and ring is 0 0, the ring appears on top-left too. Visual border all around plus solid offset shadow. That's okay.

For card, applying ring around entire card can be visually strong. No layout.

Could set `outline: 2px solid #1e293b; outline-offset: 2px` but outline styles allowed? outline color/type can change, but adding outline width