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

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: #241c38;
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: #4c1d95;
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid #ddd6fe;
}

.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 #8b5cf6;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, #f6f2ff 0%, #efe7ff 100%);
    border-radius: 0 18px 18px 0;
    margin-block: var(--space-md);
    color: #6b6480;
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    margin-block: var(--space-sm);
    box-shadow: 0 1px 2px rgba(76, 29, 149, 0.08), 0 8px 24px -6px rgba(124, 58, 237, 0.22);
}

.post-content a {
    color: #7c3aed;
    text-decoration: underline;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-content a:hover {
    color: #5b21b6;
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: linear-gradient(135deg, #ede9fe 0%, #e4dbff 100%);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.9em;
    color: #be185d;
}

.post-content pre {
    background: linear-gradient(135deg, #3b0764 0%, #4c1d95 55%, #6d28d9 100%);
    color: #f8f5ff;
    padding: var(--space-md);
    border-radius: 18px;
    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 #ddd6fe;
    text-align: start;
}

.post-content table th {
    background: linear-gradient(180deg, #f3efff 0%, #ebe2ff 100%);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid #a855f7;
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.toc-box ol li a:hover {
    color: #6d28d9;
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: linear-gradient(135deg, #f3efff 0%, #e9e0ff 100%) !important;
    color: #5b21b6 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-tags .badge:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    color: #ffffff !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: linear-gradient(135deg, #2e1065 0%, #4c1d95 38%, #7c3aed 72%, #c084fc 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 8, 58, 0.35) 0%, rgba(124, 58, 237, 0.22) 100%);
    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 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 18px 38px rgba(46, 16, 101, 0.45));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(245, 240, 255, 0.68) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: linear-gradient(160deg, #f8f5ff 0%, #efe6ff 50%, #f5edff 100%);
}

.qr-card {
    transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: #f59e0b;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.12), 0 18px 42px -10px rgba(124, 58, 237, 0.38);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: linear-gradient(200deg, #f3efff 0%, #e9e0ff 55%, #f7f3ff 100%);
}

.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 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 8px rgba(76, 29, 149, 0.1), 0 24px 48px -14px rgba(124, 58, 237, 0.34);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #c084fc 0%, #8b5cf6 50%, #f59e0b 100%);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: linear-gradient(180deg, #fdfbff 0%, #f4eeff 100%);
}

.app-showcase-section img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 14px 28px rgba(76, 29, 149, 0.28));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: #8b5cf6;
    transform: translateX(5px);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.1), 0 14px 34px -10px rgba(124, 58, 237, 0.28);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: linear-gradient(180deg, #ffffff 0%, #f6f1ff 100%);
}

.contact-channels-section article {
    transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
    border: 1px solid #e9e2ff;
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 8px rgba(76, 29, 149, 0.1), 0 24px 48px -14px rgba(124, 58, 237, 0.32);
    border-color: #8b5cf6;
}

.contact-channels-section article ul li {
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: linear-gradient(165deg, #f7f3ff 0%, #ece4ff 100%);
}

.contact-quick-section .contact-card {
    transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 8px rgba(76, 29, 149, 0.1), 0 24px 48px -14px rgba(124, 58, 237, 0.34);
}

.contact-quick-section .contact-card i {
    transition: transform 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: linear-gradient(200deg, #f4efff 0%, #e9e0ff 100%);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid #ddd6fe;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.18), 0 6px 18px -6px rgba(124, 58, 237, 0.3);
}

.contact-form-section button[type="submit"] {
    transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(76, 29, 149, 0.18), 0 16px 32px -10px rgba(124, 58, 237, 0.48);
}

/* Contact Commitments */
.contact-commitments-section {
    background: linear-gradient(180deg, #f9f5ff 0%, #ede4ff 100%);
}

.contact-commitments-section .bg-white {
    transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 8px rgba(76, 29, 149, 0.1), 0 24px 48px -14px rgba(124, 58, 237, 0.34);
}

.contact-commitments-section .bg-white i {
    transition: transform 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
}

.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: #ede6ff;
    border-color: #ddd6fe;
    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: #8b5cf6;
    background-color: #f3ecff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: #8b5cf6;
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(76, 29, 149, 0.18), 0 16px 32px -10px rgba(124, 58, 237, 0.48);
}

/* ============================================
   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 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(46, 16, 101, 0.22), 0 22px 44px -12px rgba(124, 58, 237, 0.45);
}

.hero-buttons .btn-warning {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #3b0764;
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(245, 240, 255, 0.18);
    color: #ffffff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #ede6ff;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8b5cf6 0%, #5b21b6 100%);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #a78bfa #ede6ff;
}

/* ============================================
   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: #ffffff !important;
        color: #000000 !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: #000000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444444;
    }

    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: #000000 !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 cubic-bezier(0.22, 1, 0.36, 1);
}

.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 to produce a rewritten CSS for the given block. It's a media query with three rules. We must keep selectors and layout properties exactly. We can change colors, shadows, radius, transitions, gradients. But the original CSS doesn't have any colors or shadows directly—it only has font-size, padding. So we need to add visual identity changes? The instructions: "Only change colors, shadows, radius, transitions, gradients." But if there are no such properties in the original, we can add them? "Refresh the visual identity" might imply we can add properties that are visual. However, conservative mode says "HTML is FIXED — only colors, shadows, and decorative properties may change." It also says "You MUST CHANGE (visual identity only): ..." So it expects changes. But original has no colors. We can introduce them? But we cannot alter layout. Adding background, color, box-shadow, border-radius, etc. is allowed. But we must be careful not to change layout properties. The original only has text-align, font-size, padding. Those are layout/typography and not in the "MUST CHANGE" list—actually they are in the "NEVER CHANGE" list (text-align is listed under layout? Yes, text-align is under layout in the forbidden list). So we cannot change text-align or padding. That means we should keep them as is, but we can add new properties like background, border-radius, box-shadow, transition, etc. However, the instructions say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." So we can add new declarations? The original CSS doesn't have them, but we can add visual properties. But the rule "You MUST CHANGE ..." implies we should change existing ones. Since there are no colors, we might need to add them? The target style is symmetric-grid, gradient-rich. It's a media query block targeting specific elements. We can add gradients, shadows, etc. But we must not change the existing declarations. It says "only colors, shadows, and decorative properties may change." That means we can modify those if they exist. But they don't exist. So maybe we just keep everything the same? That would be no change. But the task expects a refresh. The "MUST CHANGE" includes "All color values: background, color, border-color, fill, stroke, outline-color" but if there are none, we can't change them. However, we could add them? The instructions say "Refresh the visual identity without changing layout structure or class names." It doesn't forbid adding properties. But the output should be the rewritten CSS. Since there are no visual properties, we might add some. But the conservative mode says "only colors, shadows, and decorative properties may change." That implies we can change those, but we can also add them? Typically in these tasks, we are expected to rewrite the CSS, changing existing values and possibly adding new visual properties. But the original CSS is minimal. To satisfy the target style "gradient-rich" and "symmetric-grid", we could add gradients, border-radius, box-shadow, transitions. However, we must be careful: the selectors are specific, and adding properties like background might affect layout? No, background doesn't affect layout. border-radius doesn't. box-shadow doesn't. transition doesn't. So it's safe. We can add those to enhance visual identity.

But wait: the file is "assets/css/saishi.css#块2/2" — it's a block of CSS. The task says: "File: assets/css/saishi.css#块2/2" and "Mode: CONSERVATIVE". So we are only rewriting this block, not the whole file. The original block is a media query. So we should output the rewritten media query.

We need to decide what to change. The 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;
    }
}

We must keep text-align: center; font-size: 0.85rem; padding: var(--space-md) !important; unchanged. We can add visual properties to these selectors. For example, we could add background, border-radius, box-shadow, etc. But would that be appropriate? The task says "Refresh the visual identity". Since there are no colors, we can introduce a new palette. The target style is "symmetric-grid" and "gradient-rich". But this is a mobile media query. We can add gradients to the elements. However, we must be cautious: adding background to `.app-hero-section .row .col-lg-7` might be odd because it's a column. But it's allowed. The instruction: "Only change colors, shadows, radius, transitions, gradients." So we can add these properties. But we must not change layout properties. Adding `background` is fine. Adding `border-radius` is fine. Adding `box-shadow` is fine. Adding `transition` is fine. We can also add `color` to text. But we should not change `font-size` or `text-align` or `padding`. So our changes will be purely additive.

But the instruction "You MUST CHANGE" lists properties. If they don't exist, we can't change them. So maybe we just add them. The output should be the rewritten CSS. We need to ensure we don't break anything. We'll keep the original declarations exactly and add new ones.

However, the target style "symmetric-grid" suggests equal grids, but this is a media query for small screens. The original uses Bootstrap classes like col-lg-7. We can't change layout. So we'll just add visual flair.

We also need to consider the "gradient-rich" effect variant: "Linear-gradient or radial-gradient on most backgrounds", "Gradient borders via border-image", "Multiple stops for richness", "Smooth long transitions (0.4-0.6s cubic-bezier)". So we can add gradients to backgrounds, use border-image for borders, multiple stops, and transitions.

Let's design:

For `.app-hero-section .row .col-lg-7`:
- It has text-align: center. We can add a subtle background gradient? But it's a column, maybe we don't want to obscure content. We could add a radial gradient to the background or a linear gradient border. Perhaps add `border-radius` and a `box-shadow` with a gradient-like effect? But box-shadow can't be gradient directly. We can use multiple shadows. We can also add a `background` with linear-gradient. But be careful: adding background might change the appearance of the whole column. Since it's a hero section, maybe a subtle gradient is fine. We could also add `color` to text? Not necessary.

For `.app-hero-section .badge.bg-warning`:
- It's a badge. It likely has Bootstrap's bg-warning which sets background color and color. But in this media query, only font-size is changed. So we can add a gradient background, border-radius, box-shadow, etc. But note: the selector is `.app-hero-section .badge.bg-warning`. The `.bg-warning` class already sets background-color. If we add `background` with gradient, it will override the background-color? Actually, `background` is a shorthand, and if we set it, it will override any previously set background-color. But since this is a media query, it will apply only on small screens. That's fine. We can set a linear-gradient background, border-radius, box-shadow, and maybe a border-image for gradient border. But we must not change padding or font-size. We can add `transition` for hover effects.

For the contact sections:
- `.contact-channels-section article, .contact-quick-section .contact-card` have padding. We can add background gradient, border-radius, box-shadow, border, etc.

We need to ensure we use the new palette. The target palette is "Balanced harmonious palette". We can choose a modern palette: maybe shades of indigo, teal, and coral, or a gradient from #6366f1 to #8b5cf6, etc. Let's define some CSS custom properties? The instruction says we can change CSS custom properties (--color-*, --shadow-*) values. But we can't add new custom properties? We can, but it's not necessary. We can just use direct values.

Since the original doesn't have custom properties, we can just use direct colors.

We need to keep the media query condition exactly: `@media (max-width: 575.98px)`. That's a condition, we cannot change it.

We must not change the order of selectors or the structure.

Let's write the rewritten CSS. We'll preserve the original declarations and add new visual ones.

For `.app-hero-section .row .col-lg-7`:
- Add `background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));` (subtle)
- Add `border-radius: 24px;`
- Add `box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1), 0 2px 8px rgba(139, 92, 246, 0.08);`
- Add `transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);`
- Maybe add `color: #1e1b4b;`? But text-align is center, maybe not needed.

But we must be careful: adding background to a column might affect layout? No.

For `.app-hero-section .badge.bg-warning`:
- Add `background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);` (warning gradient)
- Add `color: #ffffff;` (since bg-warning usually has dark text, but we can change)
- Add `border-radius: 9999px;` (pill shape)
- Add `box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4), 0 1px 3px rgba(217, 119, 6, 0.3);`
- Add `border: 1px solid transparent;` and `background-clip: padding-box;`? For gradient border, we can use `border-image: linear-gradient(135deg, #fbbf24, #d97706) 1;` but that might conflict with border-radius. Using border-image with border-radius doesn't work well. Alternatively, we can use a pseudo-element, but we cannot add pseudo-elements because that would change the selector? We can add pseudo-elements? The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the NEVER CHANGE list? Actually, it says "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE (would break HTML layout)". Wait, it says: "Pseudo-classes (:hover, :focus, ::before, ::after)" are listed under "NEVER CHANGE". That means we cannot change pseudo-classes? But we can use them? The list is under "NEVER CHANGE (would break HTML layout)". It says: "🔒 NEVER CHANGE (would break HTML layout):" and then it lists "🏷️ SELECTORS (CRITICAL - HTML is fixed): • Class names: keep EXACTLY ... • Pseudo-classes (:hover, :focus, ::before, ::after) ...". So we must keep pseudo-classes exactly as they are. That means if there are no pseudo-classes in the original, we cannot add any. So we cannot add `::before` or `:hover` rules. We can only modify existing selectors. So we cannot add new selectors with pseudo-classes. We can only add properties to the existing selectors. That's fine.

So for the badge, we can just add background, color, border-radius, box-shadow, transition. We cannot add a pseudo-element for gradient border. But we can use `border-image` if we want. However, border-image with border-radius is not supported. But we can just use a solid border with a color that matches the gradient, or use `box-shadow` to simulate a border. The instruction says "Gradient borders via border-image" is part of the effect variant. So we can use `border-image` for some elements. But for the badge, maybe we can use a simple border with a gradient? Not possible. We can use `border: 2px solid transparent; background: linear-gradient(...) padding-box, linear-gradient(...) border-box;` That is a technique for gradient borders with border-radius. It requires two backgrounds: one for the padding box and one for the border box. But that uses `background` twice. We can do that. Let's consider:

For badge:
```
background: linear-gradient(135deg, #fbbf24, #f59e0b) padding-box,
            linear-gradient(135deg, #fbbf24, #d97706) border-box;
border: 2px solid transparent;
border-radius: 9999px;
```
That gives a gradient border with rounded corners. That's a nice effect. But we must ensure we don't break the existing `background` from `.bg-warning`? Since we are in a media query, and we set `background`, it will override. That's fine.

We can do similar for other elements.

But wait: the original has `font-size: 0.85rem;` for the badge. We must keep that. And we must not change `padding` or anything else.

For the contact sections:
- `.contact-channels-section article, .contact-quick-section .contact-card`
- Add `background: linear-gradient(145deg, #ffffff, #f8fafc);` or something.
- Add `border-radius: 20px;`
- Add `box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.1), 0 8px 10px -6px rgba(139, 92, 246, 0.1);`
- Add `border: 1px solid transparent;` and use `border-image`? Or just a solid border with a color. We can use a gradient border with `border-image` but that doesn't work with border-radius. So maybe just a solid border with a color from the palette. Or we can use the double background technique. But that requires setting `background` to multiple layers. Let's keep it simpler: use `border: 1px solid rgba(99, 102, 241, 0.2);` and `border-radius: 20px;`. That's fine. But the effect variant says "Gradient borders via border-image". We can use `border-image` on elements that don't need rounded corners? But they probably do. We can use `border-image` with `border-radius`? It's not supported. So we might skip gradient borders for rounded elements. Alternatively, we can use `border-radius: 0`? But that would change the visual style drastically. The target style is symmetric-grid, which might imply sharp corners? Not necessarily. We can keep some rounding. For gradient-rich, we can add gradients to backgrounds and use multiple stops. We can also add `border-image` to elements that are not rounded, but here all elements might benefit from rounding. We'll use the double background technique for gradient borders on the cards and badge.

Let's design a cohesive palette:
- Primary: Indigo #6366f1
- Secondary: Violet #8b5cf6
- Accent: Amber #f59e0b
- Background: very light gray #f8fafc
- Text: dark slate #0f172a

We'll use gradients from indigo to violet, and amber for the badge.

Now, we must output only the CSS, no markdown. So we'll write the media query with the added properties.

We need to ensure we don't change any forbidden properties. The original has:
- `text-align: center;` (forbidden to change)
- `font-size: 0.85rem;` (forbidden to change)
- `padding: var(--space-md) !important;` (forbidden to change)

We will keep those exactly. We will add new declarations after them? The order of properties within a rule doesn't matter for CSS, but we should keep the original ones and add new ones. We can also change existing ones if they are visual? But they are not visual in the sense of colors/shadows. text-align and font-size are typography/layout, so we cannot change them. So we just add.

Let's write:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 50%, rgba(59, 130, 246, 0.03) 100%);
        border-radius: 24px;
        box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08), 0 2px 8px rgba(139, 92, 246, 0.06);
        transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) padding-box,
                    linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) border-box;
        border: 2px solid transparent;
        border-radius: 9999px;
        color: #ffffff;
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4), 0 2px 5px rgba(217, 119, 6, 0.3);
        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%) padding-box,
                    linear-gradient(145deg, #6366f1 0%, #8b5cf6 50%, #3b82f6 100%) border-box;
        border: 2px solid transparent;
        border-radius: 20px;
        box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.15), 0 8px 15px -6px rgba(139, 92, 246, 0.1);
        transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
}
```

Wait, we added `transform` in transition, but we didn't change transform itself. That's fine, it's just a transition property. But we must not add `transform` property itself? The forbidden list doesn't include transform. Actually, transform is not in the forbidden list. But we are not adding a transform property, just a transition. That's allowed. However, we should be careful: the target style is symmetric-grid, which might imply no fancy transforms. But it's just a transition, no actual transform. That's fine.

But we must ensure we don't violate the "NEVER CHANGE" list. Let's check:
- We changed `text-align`? No, we kept it. We added background, border-radius, box-shadow, transition. Those are allowed.
- We changed `font-size`? No.
- We changed `padding`? No.
- We added `border` and `border-radius` and `color` and `box-shadow` and `transition`. All allowed.
- We used `background` with multiple layers. That's allowed.
- We used `border: 2px solid transparent;` That's a border-width change? The original had no border. Adding a border adds width. The instruction says "border-color and border-style (NOT border-width)". So we cannot change border-width? Wait: "border-color and border-style (NOT border-width)" is listed under "You MUST CHANGE". That means we can change border-color and border-style, but NOT border-width. That implies we should not change border-width. But if the original has no border, adding a border would be adding a border-width. Is that allowed? The rule says "NOT border-width" meaning we cannot change border-width. If it's not there, we can't add it? That would mean we cannot add new borders. But the instruction also says "Refresh the visual identity" and the effect variant says "Gradient borders via border-image". That implies we can add borders. The "NEVER CHANGE" list doesn't include border-width. It includes "width, height, min/max-width, min/max-height". It doesn't explicitly forbid adding border-width. But the "MUST CHANGE" list says: "border-color and border-style (NOT border-width)". That means when changing borders, we should only change color and style, not width. But if there's no border, we can add one? The phrasing is ambiguous. To be safe, we might avoid adding borders that change the box size, as that could affect layout. Adding a border to an element that didn't have one will increase its box size unless `box-sizing: border-box` is set. But we cannot change `box-sizing`. So adding a border could break layout. That's why they say NOT border-width. So we should not add borders that add width. Instead, we can use `outline` or `box-shadow` to simulate borders. Or we can use `border` with the same color as background, but that still adds width. Alternatively, we can use `border-image` without changing border-width? `border-image` requires a border-width to be set. If no border-width, `border-image` doesn't show. So we cannot use `border-image` without setting border-width. Therefore, to be safe, we should NOT add any new borders. We can only change existing borders if they exist. But in the original, there are no borders. So we cannot add borders. We can use `box-shadow` to create a border-like effect, or `outline`. The instruction says we can change `outline styles (color, type)`. So we can add an outline? But outline doesn't take up space. That could simulate a border without affecting layout. However, outline is usually for focus states. But we can add `outline: 2px solid ...` to create a border-like effect. But that might be odd. Alternatively, we can use `box-shadow` with spread to create a border. That's a common technique. For example, `box-shadow: 0 0 0 2px #6366f1, 0 4px 6px rgba(0,0,0,0.1);` That creates a 2px border without affecting layout. That's safe. So we can use multiple box-shadows to simulate borders. That aligns with "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)". So we can use box-shadow with spread to create borders, and use gradients in the box-shadow? But box-shadow cannot be gradient directly. We can use multiple box-shadows with different colors to simulate a gradient border? Not exactly. But we can use a single color or multiple colors. For gradient borders, we can't do it with box-shadow. But we can use `background` with `background-clip` to create a gradient border, but that requires setting `border` to transparent with a border-width. If we set `border: 2px solid transparent;` we are adding a border-width. That would affect layout unless `box-sizing: border-box` is set. But we cannot change `box-sizing`. So if we add a border, the element's total width/height will increase by the border width, which could break layout. So we must avoid adding borders that increase size. The safest is to not add any border-width. So we should avoid `border` entirely. We can use `box-shadow` with spread to simulate a border, and we can use multiple box-shadows with different colors to create a gradient-like effect (though not a true gradient). For example, `box-shadow: 0 0 0 2px #6366f1, 0 0 0 4px #8b5cf6;` That creates a two-color border. That's not a gradient, but it's multi-layer. Alternatively, we can use `background` with `background-clip: padding-box` and `background: linear-gradient(...) border-box;` but that requires a border. Actually, the technique with two backgrounds and `border: 2px solid transparent` works without affecting layout if the element has `box-sizing: border-box`. But we don't know if it does. In Bootstrap, `box-sizing: border-box` is often set globally. But we cannot assume. The original CSS doesn't set `box-sizing`. So it's safer to avoid adding borders. We can use `outline` instead. `outline` doesn't affect layout. We can set `outline: 2px solid #6366f1;` and `outline-offset: -2px;` to keep it inside. That would create a border-like effect without changing size. And we can use `outline` with a color. But outline can't be gradient. However, we can use `outline-color` and `outline-style`. The effect variant says "Gradient borders via border-image". But if we can't use border-image safely, we might skip it. The instruction says "You MUST CHANGE" and lists "border-color and border-style (NOT border-width)". That implies we should only change border-color and border-style if there are existing borders. Since there are no borders, we don't need to change them. So we can ignore borders entirely. We'll focus on background gradients, box-shadow, border-radius, transitions, filters, opacity, etc.

So let's revise: no borders. Use box-shadow for depth and maybe a subtle ring. Use background gradients.

For `.app-hero-section .row .col-lg-7`:
- Keep `text-align: center;`
- Add `background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.05));`
- Add `border-radius: 24px;`
- Add `box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.1), 0 8px 20px -8px rgba(139, 92, 246, 0.08);`
- Add `transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);`

For `.app-hero-section .badge.bg-warning`:
- Keep `font-size: 0.85rem;`
- Add `background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);`
- Add `color: #ffffff;`
- Add `border-radius: 9999px;`
- Add `box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5), 0 4px 15px rgba(251, 191, 36, 0.4), 0 2px 5px rgba(217, 119, 6, 0.3);` (a ring + shadow)
- Add `transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);`

For the contact sections:
- Keep `padding: var(--space-md) !important;`
- Add `background: linear-gradient(145deg, #ffffff, #f8fafc, #f1f5f9);`
- Add `border-radius: 20px;`
- Add `box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.12), 0 8px 15px -6px rgba(139, 92, 246, 0.08), 0 0 0 1px rgba(99, 102, 241, 0.1);` (a subtle ring)
- Add `transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);`

We can also add `color` to text? The original doesn't specify color. We can add `color: #0f172a;` for the contact sections? But that might override existing colors. It's safe to add, but not necessary. We'll add for completeness.

We must ensure we don't change any layout properties. We are adding background, border-radius, box-shadow, transition, color. All are visual.

Now, check the "NEVER CHANGE" list: we didn't change any of those. We kept all selectors exactly, including commas and spaces. We kept the media query condition exactly. We kept the order of selectors.

One thing: we added `transition` with `all` for the badge. That's fine, but `all` could affect layout if there's a hover that changes layout? But there is no hover here. It's just a transition property. It's allowed.

We need to output only the CSS, no markdown fences. So we'll write it as plain text.

Let's double-check the original CSS for any hidden properties. It's exactly as given.

We must also ensure we don't use any AI marker comments. We won't.

Now, let's write the final output.

We should format it nicely with indentation.

I'll write:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 50%, rgba(59, 130, 246, 0.05) 100%);
        border-radius: 24px;
        box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.1), 0 8px 20px -8px rgba(139, 92, 246, 0.08);
        transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
        color: #ffffff;
        border-radius: 9999px;
        box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5), 0 4px 15px rgba(251, 191, 36, 0.4), 0 2px 5px rgba(217, 119, 6, 0.3);
        transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
        border-radius: 20px;
        color: #0f172a;
        box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.12), 0 8px 15px -6px rgba(139, 92, 246, 0.08), 0 0 0 1px rgba(99, 102, 241, 0.1);
        transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
}
```

Check: The original had `padding: var(--space-md) !important;` with `!important`. We kept that. The original had `text-align: center;` and `font-size: 0.85rem;` we kept those. We added new properties. The order of properties: we put the original ones first, then new ones. That's fine.

We must ensure we didn't change any forbidden properties. We didn't change `display`, `position`, `grid-template-*`, `flex-direction`, `width`, `height`, `padding`, `margin`, `font-family`, `font-size`, `font-weight`, `line-height`, etc. We added `color` which is allowed. We added `background`, `border-radius`, `box-shadow`, `transition`. All allowed.

We didn't change `text-align` or `font-size` or `padding` values.

We used a new palette: indigo, violet, blue, amber. That's harmonious.

We used gradients with multiple stops.

We used box-shadows with multiple layers.

We used transitions with cubic-bezier and durations 0.45s-0.5s, within 0.4-0.6s range.

We used border-radius.

We did not use border-image because of potential layout issues. But the effect variant says "Gradient borders via border-image". We didn't use it. Is that a problem? It says "Effect variant: gradient-rich" with bullet points. It's not mandatory to use every single item. We used gradients on most backgrounds, multiple stops, smooth long transitions. We didn't use gradient borders via border-image. We could try to incorporate it safely. For the badge, we could use `border-image` if we set a border width, but that would change size. However, we can use `outline` with a gradient? Not possible. We can use `background` with `background-clip` to create a gradient border without border-width by using multiple backgrounds and `background-clip: padding-box, border-box`? Actually, the technique with two backgrounds and `border: 2px solid transparent` requires a border. But we can achieve a gradient border without a border by using `background: linear-gradient(...) padding-box, linear-gradient(...) border-box;` and setting `border: 2px solid transparent;`. That still adds a border. But if we use `box-shadow` with inset and multiple layers, we can simulate a gradient border? Not really. Alternatively, we can use `border-image` with `border-width: 2px;` but that would change size. So we'll skip it. The instruction says "You MUST CHANGE" but it doesn't say you must use every effect. It's a variant, so we should try to incorporate as many as possible. But safety first.

We could use `border-image` on elements that already have a border? None do. So we'll skip.

We can also add `filter` or `backdrop-filter`? Not necessary.

We can add `opacity`? Not needed.

We can add `accent-color`? Not applicable.

We can add `caret-color`? Not applicable.

So our output is good.

Now, we need to output only the CSS. No markdown fences. So I'll just write the CSS as above.

But wait: the original had `@media (max-width: 575.98px) { ... }`. We kept that. We must ensure the closing braces are correct. Yes.

One more check: we added `color: #0f172a;` to the contact sections. That's a color property, allowed. It might override existing text color, but that's a visual change. It's fine.

We added `color: #ffffff;` to the badge. That's also fine.

We didn't