/* ============================================================
   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 only, preserving selectors and layout. Need inspect original CSS. It's a small media query. Need change visual identity only. 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 preserve layout, typography, selectors. Need visually refresh: colors, shadows, radius, gradients, transitions, etc. But the rules only include text-align, font-size, padding. Cannot change these? They are layout/typography, but we may add visual properties? We must not change font-size? Font-size is typography, fixed. text-align is layout? It says text-align is layout, cannot change. padding layout, can keep similar values. We can add color, background, border-radius, box-shadow, transition to same selectors, but that might be weird and potentially change visual identity. Need obey: colors throughout file replaced with fresh palette? There are no colors currently. Need add visual properties to make fresh. But "Only change colors, shadows, radius, transitions, gradients." Since original has no visual properties, we can introduce them. Need ensure not changing layout. Adding color/background not layout. But need be careful with .badge.bg-warning: background-color from Bootstrap utility class; if we set background with gradient, it changes. We can add a gradient background to badge, plus color, border-radius, box-shadow, transition. Also for hero row col-lg-7 maybe we can add color/text-shadow? But text-align center is fixed. Could add color, text-shadow. For contact articles/cards, adding background/border-radius/shadow maybe visual. But the original had padding with !important. We can preserve padding exactly? Need keep same padding value. Could add background, border-radius, transition, box-shadow. We also might change custom property --space-md? No, maybe not. But padding uses var(--space-md); we can't change layout. Could leave.

Need maybe include @media query same. Need preserve selectors exactly.

Need no markdown. Need output as CSS.

Need "horizontal-strips" target style, gradient-rich variant. Since original is just mobile responsive tweaks, we can apply gradients.

Potential solution:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6c445 0%, #f29b2a 55%, #e67e22 100%);
        color: #2b1a0e;
        border-radius: 999px;
        box-shadow: 0 8px 24px -6px rgba(230, 126, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s 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.12), rgba(255,255,255,0.04));
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 1.25rem;
        box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need check constraints: "border-radius visual rounding only" allowed. "filter, backdrop-filter" allowed. "opacity" allowed. "border-color and border-style" allowed. "transition timing, easing, duration" allowed. "background" maybe color value, gradients allowed. "color" allowed. "text-shadow" allowed. "box-shadow" allowed. Need "display, position, grid-template-*, flex-direction unchanged" yes none. "padding, margin within ±20%" padding unchanged. "font-size unchanged" yes 0.85rem unchanged. "text-align unchanged" text-align center unchanged. Need no AI comments.

But is adding background to col-lg-7 okay? It might be a hero section. If col has text-align center, adding color is fine. But maybe "color" changes all text. Accept.

Need maybe use "border: 1px solid ..." uses border-width? They say "border-color and border-style (NOT border-width)"—we can add border but use 1px? It says NEVER CHANGE border-width. Original had no border, adding border-width 1px is adding layout? It says only border-color and border-style may change; NOT border-width. So we should not add border-width if original none? Better avoid border property entirely to not violate. Use box-shadow inset to simulate border? Or use outline? Could use outline: 1px solid? But that's also border-width? Hmm. The constraints say "outline styles (color, type)" allowed, not width. Better not add border or outline if width change. We can use background and box-shadow only.

Need maybe "backdrop-filter: blur(10px)" allowed. But if no background transparency, okay.

Need maybe avoid setting `transform` in transition? We can transition transform but no transform property. That's fine. But adding transition maybe okay. But no hover rule, so transition not necessary. Could set transition anyway. But we might want no transform. Use transition for box-shadow, background, color.

Need maybe "horizontal-strips" style with alternating white/cream/dark/white full-width sections. But this CSS is only mobile responsive. Could add gradients to the section? There are no selectors for sections, only article/card. We could add background to article/card with dark/cream alternating? But no.

Maybe original intended file larger? But user provided only this snippet. Need rewrite only what's given. We can add more visual properties but not new selectors. We should not invent selectors. Need "All color values: background, color, border-color, fill, stroke, outline-color" — there were no fill/stroke. We can add "color" etc.

Need perhaps "gradient-rich" with multiple stops. Use multiple backgrounds for article/card. Need ensure no layout change. Maybe use background with layered gradients. Example:

background:
  radial-gradient(circle at 15% 20%, rgba(255,255,255,0.18), transparent 35%),
  linear-gradient(135deg, #221f1a 0%, #2e2a24 50%, #17150f 100%);

This adds a dark card background. But if contact cards originally white? On mobile maybe okay. Need alternate strips: white/cream/dark. Could make article/card dark and badge warm. Hero text cream. That might work.

However, a concern: `.contact-channels-section article` may be in a section with dark background? We don't know. Adding dark backgrounds could hurt contrast. But target style "strong color zones" perhaps okay. We can make article background a rich cream gradient instead of dark, with dark text. But the badge warning already dark text on yellow. Need color contrast.

Let's craft a cohesive palette:

- Deep espresso: #241f1a
- Cream: #faf3e7
- Warm gold: #f2b544
- Terracotta: #e56b3a
- Teal accent: #1f7a7d maybe.

Target horizontal-strips: alternating white / cream / dark / white. But media query small screens; maybe cards become strips.

Maybe use:

.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #faf3e7;
    text-shadow: 0 2px 16px rgba(36, 31, 26, 0.4);
}

But if hero section background is dark, cream text good. If not, could be wrong. Original hero likely dark? Unknown. But we need choose.

Badge:
background: linear-gradient(120deg, #ffe29a 0%, #f7b733 40%, #fc4a1a 100%);
color: #26180a;
box-shadow: 0 10px 30px -10px rgba(247, 183, 51, 0.75), 0 2px 6px rgba(0,0,0,0.08);
border-radius: 2rem;
transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;

Maybe also `outline: 2px dashed rgba`? No width not allowed? Actually outline width not allowed? "outline styles (color, type)" allowed but width not. Avoid.

Cards:
background:
  radial-gradient(circle at 0% 30%, rgba(255, 255, 255, 0.14), transparent 40%),
  linear-gradient(145deg, rgba(255, 248, 235, 0.96) 0%, rgba(255, 255, 255, 0.98) 45%, rgba(250, 243, 231, 0.94) 100%);
color: #2b251e;
border-radius: 1.5rem;
box-shadow: 0 24px 48px -20px rgba(36, 31, 26, 0.4), 0 4px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);

Need maybe no border.

But "padding: var(--space-md) !important;" original. We keep exactly. But note if we add border-radius and background, padding remains good.

Need maybe `backdrop-filter` on cards? If using opaque backgrounds, backdrop-filter has no effect. Could use semi-transparent and backdrop-filter. But if background is mostly opaque, no need. However "gradient-rich" and "backdrop-filter" allowed. But avoid unnecessary.

Need maybe not use `color` on card? Original no color. Adding color may change text. That's visual.

Need maybe include `accent-color`, `caret-color`? Not relevant.

Need maybe custom property values? We can set `--space-md`? No because would change layout. Don't.

Need maybe create gradient border using box-shadow? Good.

Need maybe use `background-clip: text`? Could change text appearance, but maybe not.

Need perhaps use `transition: background 0.5s...` but no hover. It's okay.

Need ensure all colors are fresh and distinct. Need "Previous attempt didn't change enough" — but we don't have previous. Make strong.

Let's think if user expects true "horizontal-strips" pattern. Since only this CSS, we can inject gradient "strips" by using linear-gradient backgrounds on the article/card. The alternating backgrounds: `.contact-channels-section article` and `.contact-quick-section .contact-card` are two separate targets in one rule. We can give them different backgrounds by separate rules? But selector list must remain? We can split into two rules? The instruction says preserve selector lists? "Selector lists (commas)" must be preserved. We can preserve the combined selector list and apply same background. But then no alternation. But if we want different backgrounds, we'd need separate selectors, which would change selector list structure. Not allowed. Could use `:nth-child`? New pseudo? That would be adding selector, not allowed? Probably not. Better preserve exactly.

Could use two background layers within same background to have a horizontal strip effect? The card background can have a linear-gradient strip at top? That would be decorative. Example:

background:
  linear-gradient(180deg, rgba(247, 183, 51, 0.25) 0%, rgba(247, 183, 51, 0) 8px),
  radial-gradient(circle at 85% 20%, rgba(229, 107, 58, 0.15), transparent 28%),
  linear-gradient(160deg, #fffaf0, #f6ead8);

This simulates a colored top strip. Good.

Need maybe use "horizontal-strips" on the hero col? Could add a background with horizontal bands? But that could affect hero layout? It's inside col; adding background maybe okay but not strip. Better keep simple.

Need maybe use `background: linear-gradient(180deg, #ffb347, #ffcc33)` on badge. Nice.

Need maybe use `box-shadow` multi-layer.

Let's build final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2c241a;
        text-shadow: 0 3px 18px rgba(250, 243, 231, 0.55);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(120deg, #ffe5a3 0%, #f7b733 45%, #f07818 100%);
        color: #241a10;
        border-radius: 2rem;
        box-shadow: 0 12px 28px -10px rgba(247, 183, 51, 0.9), 0 2px 6px rgba(36, 26, 16, 0.12);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s 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(180deg, rgba(247, 183, 51, 0.22) 0%, rgba(247, 183, 51, 0) 10px),
            radial-gradient(circle at 90% 15%, rgba(240, 120, 24, 0.16), transparent 32%),
            linear-gradient(145deg, #fffaf0 0%, #f6ead8 55%, #fbefdc 100%);
        color: #2b241c;
        border-radius: 1.5rem;
        box-shadow: 0 24px 50px -22px rgba(36, 26, 16, 0.45), 0 4px 12px rgba(36, 26, 16, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Need check `transform` in transition but no transform property. Could be fine, but it may imply transform capability if hover rule elsewhere? There is no hover. It's okay. But "transition timing" allowed.

Potential issue: In `.app-hero-section .badge.bg-warning`, Bootstrap class bg-warning sets background-color: #ffc107 !important maybe. Our `background` shorthand with gradient will override? Need check CSS specificity: `.app-hero-section .badge.bg-warning` specificity (0,3,0)? Bootstrap `.bg-warning` (0,1,0) with !important? Actually Bootstrap `.bg-warning { background-color: #ffc107 !important; }` if so! Our rule doesn't use !important, so Bootstrap's !important would win. Original probably no override. To ensure gradient applies, we may need use `background` with `!important`? But could change? Adding importance okay? Not prohibited. But original uses `!important` for padding only. To override Bootstrap bg-warning important, we need `background: linear-gradient(...) !important;` or `background-color: transparent`? Let's think. Bootstrap 5 `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`. Since it has !important, our normal background won't override. To make visual change effective, use `background: linear-gradient(...) !important;` but important not forbidden. However "colors, shadows, radius, transitions, gradients" can have !important. Need also maybe `color` not important unless Bootstrap text color? But bg-warning is background only. Use `background: linear-gradient(...)