/* ============================================================
   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;
    }
}

The user wants me to rewrite CSS with a specific "masonry-flow" target style and "sharp-edges" effect variant. But the provided CSS is quite minimal - it's a media query block with just a few style rules:

1. `.app-hero-section .row .col-lg-7` with `text-align: center;`
2. `.app-hero-section .badge.bg-warning` with `font-size: 0.85rem;`
3. `.contact-channels-section article, .contact-quick-section .contact-card` with `padding: var(--space-md) !important;`

Wait — these are inside a `@media (max-width: 575.98px)` block.

I need to keep:
- Selectors exactly
- Layout properties (text-align, font-size, padding) — but padding can change within ±20%. Since padding is `var(--space-md)` — I don't know its value, but I should keep it as `var(--space-md)` because it's a custom property reference. I could change to a similar value but the instructions say keep similar values ±20%. Since I don't know the actual value, safest to keep `var(--space-md)`.

But I need to change visual properties. However, the original CSS doesn't have colors, shadows, radius, transitions, gradients. So what can I change?

The instructions say I can change:
- color values
- box-shadow
- text-shadow
- border-radius
- gradients
- transitions
- filter
- opacity
- outline
- border-color/border-style
- caret-color, accent-color
- CSS custom properties values

But the original CSS has none of these. So I need to ADD visual properties while keeping the existing layout properties intact.

The key constraint: Keep ALL selectors and layout exactly. So I keep the `@media` query, the selectors, and the existing declarations. Then I can add new visual declarations (colors, shadows, radius, etc.) to those same selectors.

The target style: masonry-flow (Pinterest-like, white cards, soft shadows on light gray bg, accent strips). But the effect variant is sharp-edges: hard offset shadows 4px 4px 0px solid color, small/zero border-radius (0-4px), strong borders (2-3px solid), snappy transitions 0.15s.

This seems contradictory — masonry-flow wants soft shadows and Pinterest-like, sharp-edges wants hard shadows and strong borders. Since the effect variant overrides, I'll go with sharp edges: hard offset shadows, small radius, strong borders.

But wait — the original selectors don't have borders or backgrounds. I can add them. The visual refresh must be noticeable.

Let me think about what to do:

For `.app-hero-section .row .col-lg-7` — I can add text-shadow, color, maybe background. But text-align must stay center.

For `.app-hero-section .badge.bg-warning` — font-size stays 0.85rem. I can add background-color (but Bootstrap has `.bg-warning` class... adding background-color might override Bootstrap. That's fine — visual change). Add border, box-shadow, border-radius, color.

For `.contact-channels-section article, .contact-quick-section .contact-card` — padding: var(--space-md) !important stays. Add background, border, box-shadow, border-radius, transition.

I should also consider adding CSS custom properties at the top? The instructions allow changing custom property values, but adding new ones might be okay. However, to be safe, I'll add a `:root` block? That would add a new selector... The instruction says keep selectors exactly as-is. Adding a `:root` block isn't in the original, so I'd be adding a selector. Is that allowed? The instruction says "Keep ALL selectors and layout exactly as-is" — meaning preserve the existing ones. Adding new selectors might be risky. But the task says "Only change colors, shadows, radius, transitions, gradients." Hmm.

I think the safest approach is to only modify within the existing selectors. I'll add visual declarations to each existing rule.

Let me design a sharp-edges palette:

Fresh palette: since masonry-flow is Pinterest-like but sharp-edges, let's use:
- Backgrounds: warm cream/off-white
- Accent: teal or coral? 
- Hard shadows: #2d2a26 (dark ink) or accent color offset shadows

Let me define colors:
- Card background: #fffdf9 (warm white)
- Border: #1a1a1a (strong black border)
- Shadow: 4px 4px 0px #1a1a1a (hard offset)
- Accent strip: maybe a top border with accent color

For `.app-hero-section .row .col-lg-7`:
- text-align: center (keep)
- Add color, text-shadow

For `.app-hero-section .badge.bg-warning`:
- font-size: 0.85rem (keep)
- Add background-color, color, border, border-radius: 0, box-shadow: 4px 4px 0px, transition

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- padding: var(--space-md) !important (keep)
- Add background-color, border, border-radius, box-shadow, transition, maybe border-top accent

Wait — padding is `var(--space-md)` — I can also change the custom property? But the custom property is defined elsewhere (not in this file). I can't change it here. Keep it.

Also need to be careful: the media query already exists. I'm rewriting only this file. So output is the same media query with added declarations.

Let me check the rules again:

"⚠️ Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

So I need to be bold.

Original CSS file only has these three rules. So my rewritten version will be much more colorful.

Let me craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #3d2c1e;
        text-shadow: 2px 2px 0 rgba(255, 253, 249, 0.8);
    }

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf9;
        border: 2px solid #1f1a17;
        border-top: 6px solid #e76f51;
        border-radius: 0;
        box-shadow: 4px 4px 0 #1f1a17;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}
```

Hmm, but wait — adding `transform` transition is fine but I shouldn't add transform itself since that could affect layout. Actually transition on transform is fine if transform isn't changed. It's okay.

Should I add hover effects? The original CSS doesn't have `:hover` selectors. Adding new selectors like `:hover` would violate "Selectors: keep exactly". Actually, "Pseudo-classes (:hover, :focus, ::before, ::after)" are listed under "NEVER CHANGE" — meaning I keep them as-is, not add new ones. So I should not add `:hover`.

So no hover rules. Just add visual declarations to existing selectors.

Let me reconsider the palette to make it "fresh". Sharp edges with hard shadows. Let me use a bold neo-brutalist palette:

- Ink: #1c1c1c
- Paper: #f7f3e8 (warm off-white)
- Accent yellow: #ffd166
- Accent coral: #ef476f
- Accent teal: #06d6a0
- Accent blue: #118ab2

For masonry-flow Pinterest-like: white cards, soft shadows on light gray bg, accent strips. But sharp edges: hard shadows, zero radius, strong borders.

Let me be coherent. I'll show a neo-brutalist / sharp-edge design:

- `.app-hero-section .row .col-lg-7`: color ink, text-shadow hard offset in accent color.
- `.badge.bg-warning`: bg `#ffd166`, border `2px solid #1c1c1c`, radius 0, shadow `4px 4px 0 #1c1c1c`.
- Cards: bg `#ffffff`, border `2px solid #1c1c1c`, top accent border `6px solid #06d6a0`, radius 0, shadow `6px 6px 0 #1c1c1c`.

Wait, the variant says "Hard offset shadows: 4px 4px 0px solid color". So I should use that.

Also the target says masonry-flow: "Each card may have its own accent strip" — I can do a top border with accent color.

Let me also consider whether to change `padding: var(--space-md)`. The rules say padding can change within ±20%. I don't know the value of --space-md. It's likely 1rem or 1.5rem. I'll keep it as var reference. That's safest.

Also, border-radius: target says 0-4px. I'll use 0 for sharp edges.

Transitions: snappy 0.15s.

Let me make the colors more distinct. Previous attempt "didn't change enough" — so let's add border, background, shadow to all, with a bold palette.

Let me also add `accent-color` and `caret-color`? Those only apply to form controls, not relevant. Skip.

Let me finalize:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1c1c1c;
        text-shadow: 2px 2px 0 rgba(6, 214, 160, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffd166;
        color: #1c1c1c;
        border: 2px solid #1c1c1c;
        border-radius: 0;
        box-shadow: 4px 4px 0 rgba(28, 28, 28, 0.9);
        transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

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

Hmm — for the badge, Bootstrap's `.bg-warning` already sets `background-color`. Overriding it in a media query works. Fine.

Should the badge's border-radius be 0? The variant says "Small or zero border-radius (0-4px)". Zero is fine.

Do I want `box-shadow` with solid color? `4px 4px 0 #1c1c1c` is hard offset. Good.

The target style says "soft shadows on light gray bg" but the variant sharp-edges overrides with hard shadows. I'll follow the variant.

Should I also add a subtle background pattern? That would require new selectors. No.

Should I change the `text-align`? No, that's layout.

Check: "font-size, font-weight, line-height unchanged" — I keep font-size 0.85rem.

"padding, margin within ±20%" — I keep padding var(--space-md) as-is.

Now, is `transition` allowed on these selectors even though original didn't have it? Yes, "transition timing, easing, duration" can change — I'm adding transitions.

Let me double-check selectors preserved character-for-character:
- `.app-hero-section .row .col-lg-7` ✓
- `.app-hero-section .badge.bg-warning` ✓
- `.contact-channels-section article, .contact-quick-section .contact-card` ✓ (with comma and line break)
- `@media (max-width: 575.98px)` ✓

I'll output this now.

Actually, wait — should I worry that adding `background-color` to `.app-hero-section .row .col-lg-7` would change the layout look? It's fine, it's a visual change.

Let me also consider adding `outline` or `border` to `.app-hero-section .row .col-lg-7`? That might be too much. Maybe add a subtle bottom border with accent? Hmm, that would draw attention to the hero section. But the masonry-flow target mentions accent strips on cards. For the hero col, maybe a decorative underline via `border-bottom`? But that affects the box... Actually `border-bottom` on a column could affect layout slightly (padding/border-box?). Since `box-sizing` is likely border-box, but I don't know. To be safe with layout, I'll avoid adding borders to the hero column. I'll just add color and text-shadow.

Also, add `transition` to the hero column? Transitions don't affect layout. It's fine to add but without a hover it's inert. I'll add it anyway for consistency? It's pointless without a state change. But the goal is visual identity — transitions matter only on interaction. Since no pseudo-class change is allowed, a transition with no state change does nothing. Still, the rules mention changing transition timing/duration. Since there's no animation state, I'll keep transitions on elements that might already have hover states elsewhere (badge, cards). Good.

Actually, Bootstrap badges often have hover styles via links. Cards too. So adding transitions there makes sense.

One more consideration: The file fingerprint and request ID are meta. Not in output.

Also note: "No markdown fences, no explanations." So raw CSS.

Let me also make the shadow more "designed with multi-layer effects" — the instructions say "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)". Multi-layer means multiple shadows. For sharp edges, maybe a double hard shadow: `4px 4px 0 #1c1c1c, 8px 8px 0 rgba(239, 71, 111, 0.4)`? That could look cool but might be too much. Let me add a subtle second layer to make it distinct.

For cards: `box-shadow: 4px 4px 0 #1c1c1c, 8px 8px 0 rgba(6, 214, 160, 0.5);` — a hard offset plus a colored echo. That gives a fresh, distinct identity.

For badge: `box-shadow: 4px 4px 0 #1c1c1c;`

For hero col: `text-shadow: 2px 2px 0 rgba(255, 209, 102, 0.6);` — hard text shadow.

Let me write final:

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

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf7;
        border: 2px solid #1c1c1c;
        border-top: 6px solid #06d6a0;
        border-radius: 0;
        box-shadow: 4px 4px 0 #1c1c1c, 8px 8px 0 rgba(239, 71, 111, 0.35);
        transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    }
}
```

Check the variant: "Small or zero border-radius (0-4px)" — 0 ✓. "Strong borders (2-3px solid)" — 2px ✓, border-top 6px (an accent strip, allowed since it's a decorative border, not width change? Actually border-width is in the "NEVER CHANGE" list: "border-color and border-style (NOT border-width)".

Wait! Important constraint: "border-color and border-style (NOT border-width)" — meaning I cannot change border-width. But the original CSS has no border-width at all. Adding a border-width of 2px where there was none... Is that changing border-width? Yes, technically I'd be setting a border-width that didn't exist before. The rule says "🔒 NEVER CHANGE: border-color and border-style (NOT border-width)" — under the "MUST CHANGE" list