/* ============================================================
   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 in a conservative mode, keeping HTML fixed and only changing visual properties. The target style is "masonry-flow" with a Pinterest-like palette (white cards, soft shadows on light gray bg) and "gradient-rich" effect variant (linear/radial gradients, gradient borders, smooth long transitions).

The original CSS is:

```css
@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;
    }
}
```

I need to only change visual properties. Let me see what's there:
- `text-align: center;` - this is typography/layout, should not change... Actually text-align is under typography which is "font system fixed" so I must NOT change it. Keep it.
- `font-size: 0.85rem;` - font-size is fixed, keep.
- `padding: var(--space-md) !important;` - padding can change up to ±20% but I need to keep it similar. `var(--space-md)` is a custom property. I could keep the var reference or change it? Changing the value of the custom property would change layout potentially. I should keep it as `var(--space-md)` because that's a layout-related token. But I could potentially change the var... no.

Hmm, but the task says to refresh visually. The original CSS is very minimal. I need to add visual properties while preserving all selectors. But the constraints say "preserving ALL selectors and layout exactly". Since the original CSS has these rules, I can add additional visual declarations within the same selectors... but the rule says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". 

I think the idea is: I may add new visual-only declarations to the existing selectors (colors, shadows, borders, gradients, transitions) while keeping the existing layout declarations unchanged. But I must be careful: adding `color`, `background`, `box-shadow`, etc. to these selectors is allowed since they don't affect layout.

However, the context: this is "块2/2" (block 2 of 2), part of a larger file. The media query only contains these three rules. I need to update the visual identity.

Let me think about what to do. Since it's a partial file (block 2), the selectors are only these. I should add visual properties to each selector block:

1. `.app-hero-section .row .col-lg-7` - text-align: center is layout/typography, keep. Add maybe color? But hero section... Actually adding color could be risky but it's visual. I'll add gradient text? Maybe. But careful: this is a container that might contain multiple elements. Adding a background to it could break the design. Better to add subtle decorative properties.

2. `.app-hero-section .badge.bg-warning` - This is a badge with `bg-warning` Bootstrap class. I can override the background with a gradient, add box-shadow, border-radius, etc. That would be a nice visual upgrade. Keep font-size.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - These are cards. Pinterest style: white cards, soft shadows, rounded corners. I can add background, box-shadow, border-radius, transition. Keep padding.

Let me construct the CSS. I need to maintain the media query condition exactly: `@media (max-width: 575.98px)`.

For the badge with `bg-warning`, I could do:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #ffb347, #ff6b6b);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    border-radius: 999px;
    ...
}
```

But wait — `bg-warning` in Bootstrap is a background-color utility. Overriding background with gradient is fine.

For the cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, #ffffff, #f8f9fc);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.04);
    border-radius: 20px;
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Hmm but the constraint says: "width, height, padding, margin (keep similar values, ±20% maximum)". I'm keeping padding as is. Border-radius doesn't affect layout. Box-shadow doesn't affect layout. Background doesn't. Transition doesn't.

But wait — should I add `transform` on hover? That would require a `:hover` selector. I can't add new pseudo-classes? The rules say "Pseudo-classes (:hover, :focus, ::before, ::after)" — preserve them. It doesn't say I can't add new ones. But adding `:hover` rules would be adding new selectors, and the instruction says "preserving ALL selectors". Adding would not preserve exactly... I think safer to not add new selectors. I'll just add visual declarations to existing selectors.

Also, the target style mentions "Each card may have its own accent strip" — I could use `::before`? No, adding pseudo-elements would be adding selectors. Better not.

Let me consider the "gradient-rich" variant: use gradients on most backgrounds. For the hero column, maybe a subtle text gradient? But `text-align` is there. I could add `color: transparent; background: linear-gradient(...); -webkit-background-clip: text; background-clip: text;` — that might be aggressive but it's visual-only. However, applying background-clip to a container with multiple children could be problematic. The `.col-lg-7` likely contains text. A gradient text on the whole column could be risky. But it's a visual change only. Hmm.

Actually, I'm overthinking. The original block is a media query for mobile. It's likely a small part of a bigger stylesheet. My job is to refresh this portion visually while keeping all rules.

Let me produce a reasonable visual refresh:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8), transparent 60%);
        border-radius: 24px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #f4a261 55%, #e76f51);
        box-shadow: 0 6px 20px rgba(244, 162, 97, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 999px;
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f8f9fb 100%);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 18px;
        box-shadow: 0 2px 8px rgba(30, 41, 59, 0.04), 0 12px 32px rgba(30, 41, 59, 0.06);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, but for `.app-hero-section .badge.bg-warning` — Bootstrap warning badge typically has background-color: #ffc107 and color: #212529. If I set a gradient, the text color stays as Bootstrap's. That's fine.

But there's a concern: the instruction says "All color values" must change. I need to make sure I'm replacing colors. The original has no colors in this block. So I'm adding fresh colors.

Also the "gradient borders via border-image" — I could use border-image on cards. But border-image with border-radius doesn't work well (border-image is drawn outside radius). Better avoid.

Let me think about whether adding `background` to `.col-lg-7` is a good idea. That column could be a text container. A radial gradient background on just the column might create a subtle glow. That's visual-only, okay. But it could be ugly. Alternatively, I could leave that rule with only text-align and add something subtle like `color`? No, changing text color of a whole column could be bad. 

Actually, maybe I should keep it minimal and just add a subtle backdrop-filter? No, backdrop-filter could be okay but might cause performance issues. Hmm.

Let me reconsider: The instructions say "MUST CHANGE (visual identity only): All color values, box-shadow, text-shadow, border-radius, gradients, transition timing, filter, backdrop-filter, opacity, outline, border-color/style, caret-color, accent-color, custom properties". Since the original CSS has none of these, I should add them to fulfill the mission.

But I also must be careful not to overreach. Let me apply:

1. For `.app-hero-section .row .col-lg-7`: add a subtle radial gradient background and text-shadow? Text-shadow on a column could affect headings. Maybe add `text-shadow: 0 2px 12px rgba(...)`? That would apply to all text inside, which might be a nice soft glow. But it might look bad. Maybe not.

Actually, since the hero section likely has a headline, a soft text shadow could be a deliberate design choice. But it applies to all text in the column which may include paragraphs. Hmm.

Let me be more conservative: just add a decorative background gradient to the column. "gradient-rich" says "Linear-gradient or radial-gradient on most backgrounds". So yes.

2. For the badge: gradient background, border, shadow, radius, transition.

3. For the cards: gradient background (with subtle tint of accent), border, radius, multi-layer soft shadow, transition for a hover lift feel (though no hover selector — transition can still apply to future state changes). Actually transition alone doesn't do anything if there's no state change, but it's part of the style and could be triggered by media query changes. It's a valid visual property.

I'll write it.

But hold on: the original file is `assets/css/saishi.css`, "块2/2" (part 2 of 2). So this block is only the media query at the end. The final output should be just this media query, rewritten. I shouldn't add anything outside it.

Also, I should double-check: "border-color and border-style (NOT border-width)" — I can add `border: 1px solid ...` which sets border-width. That violates "NOT border-width"? The rule says I can change border-color and border-style, not border-width. Adding a border where there was none adds width. Hmm, that could affect layout dimensions. Actually adding a border changes the box size unless box-sizing: border-box. Many frameworks use border-box. But to be safe, I could use `box-shadow: inset 0 0 0 1px rgba(...)` instead of an actual border, which simulates a border without layout impact. That's safer.

Similarly, for the badge, adding a border could change its size. Better to use box-shadow for the border effect, or outline. Outline doesn't affect layout? Outline is drawn outside the element and doesn't affect layout in most cases. Actually outline does not affect layout. So I can use `outline: 1px solid rgba(...)` or `box-shadow: 0 0 0 1px ...` which also doesn't affect layout.

Hmm, but box-shadow doesn't affect layout at all, so I can use `box-shadow: 0 0 0 1px rgba(...), 0 6px 20px ...` for a border-like ring.

For the cards, an inset ring via box-shadow is a good trick: `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8), 0 2px 8px ..., 0 12px 32px ...`.

But wait, if box-sizing is border-box, adding a 1px border would shrink the content area but not the outer size. The instruction says padding can change ±20% max. Border-width is not allowed to change? It says "border-color and border-style (NOT border-width)" — so I should not touch border-width. Adding a border where none existed adds width. I'll avoid actual borders and use box-shadow rings instead.

For the badge, Bootstrap's `.badge` has `border-radius: 0.375rem` or similar by default. Overriding border-radius is allowed (visual only). Fine.

Now, transition — adding a transition to the card is fine because it doesn't affect layout.

Let me also consider `backdrop-filter` — could add a frosted glass effect to the badge. But on a small badge, it's unnecessary. Skip.

Let me craft the final CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 255, 0) 75%);
        border-radius: 28px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(120deg, #ffe29f 0%, #ffa99f 50%, #ff719a 100%);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 8px 24px rgba(255, 113, 154, 0.35), 0 2px 8px rgba(255, 162, 95, 0.25);
        border-radius: 999px;
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f6f8fc 100%);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(15, 23, 42, 0.04), 0 16px 40px rgba(15, 23, 42, 0.06);
        border-radius: 22px;
        transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, `border-radius` transition is weird. Better transition box-shadow, background, and transform. But transform on the base state? Transition alone won't trigger. Still, it's a style hint. Actually, adding `transform: translateZ(0)` to the card could create a stacking context, but that's a layout/compositing thing. Not necessary.

Maybe for the card, I'll add `backdrop-filter: blur(8px)`? No, the card has its own background, so it's not needed.

Let me also think about the target "masonry-flow" style: Pinterest-like white cards, soft shadows on light gray bg. But this is only the mobile media query; the cards are the `.contact-channels-section article` and `.contact-quick-section .contact-card`. I'm making them white-to-light-gray gradient with soft shadows. Good.

"Each card may have its own accent strip" — I can't add pseudo-elements, but I can use `background-image` with a linear-gradient top accent? For example, a gradient background that has a colored strip at the top using background-size and background-position? Something like:

```css
background: 
    linear-gradient(135deg, #ff9a9e, #fecfef 20%, #f6f8fc 40%);
```

But that would make the whole card pinkish. Hmm. I could do a horizontal accent strip via `background-image: linear-gradient(...), linear-gradient(...)` where the first is a thin strip with background-size. But that requires extra declarations. Actually:

```css
background:
    linear-gradient(to right, #6a11cb, #ff6b9d) top / 100% 4px no-repeat,
    linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
```

This creates a 4px accent strip at the top of each card without