/* ============================================================
   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 rewrite CSS visually but this snippet is only media query with three rules, very few visual properties. We need preserve selectors exactly, preserve properties that are layout? But in snippet properties are text-align, font-size, padding. Those are typography/layout-ish. Padding can vary within ±20%. But we should probably not alter too much. The instructions say visual identity only: colors, shadows, border-radius, etc. However this snippet has no colors. We must output rewritten CSS with same selectors and same properties? We can add visual properties? We need ensure "only rewritten CSS, preserving all selectors and layout exactly." If original CSS only has those declarations, maybe we can adjust padding within ±20% and maybe modify font-size? But font-size is typography and fixed. Wait "Typography fixed" includes font-size, font-weight etc. So cannot change font-size. text-align is layout? It is text-align, under "text-align, vertical-align" in never change. So cannot change. padding can vary ±20%. So we could alter padding slightly. But maybe we should not change anything because no color/shadow. However task requires visual refresh. We might add color/background? But adding properties may alter visual identity but not layout. The output must be CSS for that media query. We can perhaps change padding from var(--space-md) to calc? Hmm.

We need be careful. The original 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;
    }
}
```

We can refresh visual identity by:
- For .app-hero-section .row .col-lg-7 maybe add background gradient? But this element is a column, adding background might be too much. But "visual changes only" maybe okay. Yet text-align must stay. Adding properties like backdrop-filter could be okay. But the self-check says "display, position, grid-template-*, flex-direction unchanged" not adding. But we are allowed to add colors, shadows, radius, transitions, gradients. We should avoid layout changes.

Maybe transform? Not allowed. So we can add:
- color? background? border-radius? box-shadow? transition? backdrop-filter? But if we add background to col-lg-7, it may change look, but not layout. However "layout structure unchanged" means box model not changed, but background does not affect layout.

But "Only colors, shadows, and decorative properties may change." Add decorative is fine.

Need target style asymmetric-blocks and gradient-rich. The original does not have any of that. We can make visually refreshed but conservative. Since HTML fixed and selectors preserved, we can add declarations only within existing rules? We must keep all original declarations? "preserving ALL selectors and layout exactly" means we should keep the rules and likely the declarations that affect layout. But we can add visual declarations.

Potentially we could change the `padding: var(--space-md) !important` to `padding: calc(var(--space-md) * 1.1) !important` within 20%, but that's layout-ish and unnecessary. Better keep padding same? It said "padding, margin (keep similar values, ±20% maximum)" so can keep same exact. Since original uses var, we cannot know value, but we could modify --space-md? Not defined here. To be safe, keep unchanged.

For font-size: cannot change. text-align: cannot change. So original declarations must stay exactly? If we output same declarations plus added visual ones, we satisfy? The task: "Refresh this CSS visually." But if we don't change any original visual values, maybe okay because we add new visual properties. But output must be rewritten, and maybe we should change `padding: var(--space-md)` to `padding: var(--space-lg)`? That could be layout change but within ±20%? But `--space-lg` maybe different. Better not.

We can change `font-size: 0.85rem` to something? Not allowed. So keep.

Maybe we can leverage `background` and `color` on the badge? The selector `.badge.bg-warning` is a Bootstrap warning badge; we can change background to gradient and color? Original rule only font-size, but could add background: linear-gradient; border-radius; box-shadow; color. That would visually refresh. That's allowed.

For `.col-lg-7`, add a subtle gradient text? We can change `text-align: center`? No. But can add `background` maybe. Since this is a hero section on mobile, adding a gradient background to the column might be too much but "asymmetric-blocks" style with bold contrasting blocks. However with media query max-width 575.98 only mobile. Could be nice to make hero column a gradient panel. But .col-lg-7 is a grid column with padding? Bootstrap columns have padding. Adding background might alter inside width? No.

But if we add `border-radius` and `box-shadow`, could be decorative but may affect overflow? not layout.

Need perhaps add `transition` to all? But for mobile only, transitions maybe irrelevant.

Also for contact cards (padding original), we could add gradients, border-radius, box-shadow, backdrop-filter, border. That would be visual refresh. But careful: `.contact-channels-section article` and `.contact-quick-section .contact-card` are separate elements; adding backgrounds could affect readability. But visual identity change desired. Since HTML fixed, class names same.

Need not include comments.

We must think about "asymmetric-blocks" target style and "gradient-rich" effect. In a media query for small mobile screens, asymmetric columns don't apply because single column. But visual can use gradient backgrounds.

We need output CSS only, no markdown. We'll preserve the @media condition exactly. Preserve selectors exactly. Add declarations.

But "conservative mode" says ALL selectors and layout exactly, visual identity only. We can add declarations but not remove existing. However "Only the rewritten CSS, preserving ALL selectors and layout exactly." Does "rewritten" mean all original declarations must remain? I'd keep all original declarations verbatim. Then add new declarations.

Let's craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
        border-radius: 1.25rem;
        box-shadow: 0 8px 24px -12px rgba(0,0,0,0.12);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff8c1a, #ffb347);
        color: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        box-shadow: 0 4px 16px -4px rgba(255, 140, 26, 0.5);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 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, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1rem;
        box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.18);
        backdrop-filter: blur(8px);
        transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
    }
}
```

But note adding `transform` in transition is okay? It doesn't set transform. Fine.

Could we use `border-image` for gradient border? That might be tricky because border-image doesn't work with border-radius. We can use `border: 1px solid transparent; background: linear-gradient(...) padding-box, linear-gradient(...) border-box;` But that's more complex. Since target says "gradient borders via border-image" but we don't need to strictly apply all effects. However gradient-rich variant says "Linear-gradient or radial-gradient on most backgrounds; Gradient borders via border-image; Multiple stops for richness; Smooth long transitions." We could implement gradient backgrounds and maybe for contact cards use `border: 1px solid; border-image: linear-gradient(...) 1;` but then border-radius with border-image is not supported in some browsers? But we can use border-image; border-radius can be ignored? Actually border-image and border-radius are mutually exclusive? In CSS, border-image takes precedence and border-radius won't clip to border image? Let's recall: if border-image is set, border-radius doesn't apply? In many cases border-radius is ignored for border-image. But we can use `background` double-layer to mimic gradient border with border-radius:
```
border: 1px solid transparent;
background: linear-gradient(#0f172a, #0f172a) padding-box,
            linear-gradient(135deg, #... , #...) border-box;
```
But this requires original background color. We don't know existing background. On mobile, cards might have their own background from other CSS. Overriding with gradient may be too bold. However we are to refresh visual identity, so it's fine.

Maybe we should not add heavy backgrounds to .col-lg-7 because it's a column and might be invisible? But it's a mobile hero. Could be okay. Maybe use only text shadow? But target style "asymmetric-blocks" implies bold contrasting blocks. At mobile, we can make hero column a subtle block.

Need maintain exact selectors. Yes.

We also need preserve `text-align:center` and `font-size:0.85rem` and `padding: var(--space-md) !important`. Good.

But perhaps we should not modify `color` or `background` on `.badge.bg-warning` because Bootstrap `.bg-warning` sets background-color with important? Actually `.bg-warning` is `background-color: #ffc107 !important;` in Bootstrap 5. Our `background` shorthand without `!important` may be overridden by `.bg-warning`'s `background-color` because of specificity? `.badge.bg-warning` specificity 0,2,0 vs Bootstrap `.bg-warning` 0,1,0, so our rule wins even without important if after? But if Bootstrap loaded after? The original CSS file likely loaded after Bootstrap. But to be safe, use `background: linear-gradient(...) !important;`? But we are told not to add comments, but !important is okay. But "original CSS" had no important except padding? For `.bg-warning`, it might need `!important` to override. But adding !important to background won't break layout. Should we use `background: linear-gradient(...) !important;`? Could do. Same for color. But if we add !important, okay. Yet conservative? Fine.

However changing badge background from warning yellow could affect semantics (warning color). But visual identity refresh may allow. But in mobile hero, badge is a "warning" badge; perhaps it indicates "New" or "Limited". Changing to orange gradient keeps warning. Fine.

Need perhaps use original Bootstrap variables? Unknown.

Let's think about the "asymmetric-blocks" target style maybe is more about layout pattern, but since layout cannot change, we only apply color. This is contradictory but okay.

Maybe we should produce a "refreshed" CSS by replacing the existing paddings with slightly different values? Not needed.

Could use `padding: calc(var(--space-md) - 0.25rem)`? This is a layout change but within ±20% maybe. But no need.

Let's decide final output.

We should ensure no CSS comments or extra.

Maybe we can add `background-clip: text`? No.

Let's test if our added `backdrop-filter: blur(8px)` might be okay. It has no layout effect. Good.

Need ensure `transition: transform` perhaps not needed. If no transform, transition unused but okay.

Could add `:hover`? We cannot add pseudo-classes because selector changes? The instructions say pseudo-classes in existing selectors are preserved, but can we add new selectors? Probably not: "Only rewrite, preserving all selectors exactly." Adding hover rule would change selectors. Better not.

Need maybe use `@media (max-width: 575.98px)` exactly. Good.

Let's consider if `.contact-channels-section article` and `.contact-quick-section .contact-card` are grouped. We keep grouped list.

We may want to modify `padding` from `var(--space-md)` to something to reflect bold padding contrasts? But not allowed to alter too much. We can use `padding: calc(var(--space-md) + 0.125rem) !important;` but it's unnecessary. Might violate "keep similar values". The exact same is safest.

Let's maybe add `margin`? No.

Need maybe use `box-sizing`? No.

Let's craft final code with original declarations first, then added. The `badge` color should set `color: #2d1b00;` to maintain contrast against orange. But original badge text likely dark? Warning yellow with dark text. We can set `color: #2d1b00;` for readability.

For the `.col-lg-7`, if we add a background gradient with low alpha, it may show as a soft block. But note Bootstrap `.row` has `--bs-gutter-x` and columns have padding; background might extend to padding box, covering full column area. This may create a visible panel. It's okay.

Could instead use `background-image: radial-gradient(circle at 30% 0%, rgba(...), rgba(...));` etc. But target gradient-rich. We can use multi-stop linear-gradient.

Let's produce:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.04) 100%);
        border-radius: 1.25rem;
        box-shadow: 0 12px 32px -16px rgba(0,0,0,0.25);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffdd80, #ffb347, #ff8c1a);
        color: #2d1b00;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 999px;
        box-shadow: 0 6px 20px -6px rgba(255, 140, 26, 0.45);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
        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, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 60%, rgba(0, 0, 0, 0.02));
        border-color: rgba(255, 255, 255, 0.15);
        border-style: solid;
        border-width: 1px;
        border-radius: 1.25rem;
        box-shadow: 0 14px 36px -18px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(10px);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, original contact rule did not specify border-style or border-width; but adding `border-width: 1px` is layout? Border width is in "border-color and border-style (NOT border-width)" in never-change? Actually they say "border-color and border-style (NOT border-width)" in allowed? Let's read: Under ✅ MUST CHANGE: "border-color and border-style (NOT border-width)" meaning border-color and border-style can change, but border-width cannot. They explicitly say border-width should not change. If original CSS didn't set border-width,