/* ============================================================
   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 to rewrite the CSS visually, keeping selectors exactly, layout properties unchanged. The original CSS is a media query with some rules. We need to change only visual properties like colors, shadows, radius, transitions, etc. But the original CSS rules are quite minimal: text-align (layout), font-size (typography), padding (layout). However, per instructions, we must not change layout, typography, etc. But we can add visual properties? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since the original CSS has no colors/shadows/radius, we could add them? But careful: we must not add new properties that alter layout? Adding box-shadow, border-radius, background, etc. is allowed. Also changing existing colors if any. There are none. So we can add visual styling to the selectors within the media query. However, we must not change text-align, font-size, padding. But we can add properties like background, border-radius, box-shadow, transition, etc.

But wait: The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." That means we must output the same selectors and the same layout properties with same values? Actually, "preserving ALL selectors and layout exactly" means don't change selectors and layout. We can alter/add visual properties. But should we keep the existing properties? Yes, they are layout/typography and cannot be changed. We can add new declarations inside each rule. The goal is a visual refresh.

We need to apply target style "centered-stage" and effect "airy-rhythm". Let's interpret.

Media query: max-width 575.98px. So this is mobile styles.

Rules:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
   We can add: background? box-shadow? border-radius? But careful: this is a column inside a row. Adding background might look odd. But we can add a soft spotlight background, border-radius, padding? Padding is layout? We cannot change padding (strict layout), though adding padding would change layout, so no. But we can add box-shadow? If the element already has background? Not sure. To maintain layout, we can add visual decor like background-color with semi-transparency, border-radius, maybe a subtle gradient. But since it's a column, adding border-radius and box-shadow could create a card look. That aligns with "centered content" and "airy rhythm." But we must ensure we don't change layout. Adding box-shadow doesn't change layout. Adding background doesn't change layout. Adding border-radius doesn't change layout.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
   This is a badge with class bg-warning (Bootstrap warning color). We can change background? But bg-warning is a Bootstrap utility class. Changing the background-color via our override might work. We can add color, box-shadow, border-radius, etc. The font-size must stay. We can add transition, filter, etc.

3. .contact-channels-section article,
   .contact-quick-section .contact-card {
       padding: var(--space-md) !important;
   }
   This sets padding to a CSS variable. We cannot change padding. But we can add background, border-radius, box-shadow, transition, etc. The selector list must be preserved exactly.

We need to produce a complete CSS file. The original is just a media query. We can add declarations inside each rule. Also maybe add new rules? No, "preserving ALL selectors" means we keep existing selectors, but can we add new selectors? The task likely expects only the same selectors. Adding new selectors would change structure? Probably not allowed. We should only modify existing selectors and add visual properties to them.

We need to ensure all colors, shadows, radius are refreshed. Since there are none, we'll add them.

Let's design with palette: dark stage #0f0f1a, premium gold or deep purple accent. On mobile, we want a spotlight feel. But the media query is for small screens, so maybe a subtle dark background for the hero column? Let's think.

The hero section likely has a dark background already. We can add a radial gradient or box-shadow to create a spotlight. For .col-lg-7, we can add background: radial-gradient(circle at center, rgba(255,215,0,0.15), transparent 70%)? But that might affect readability. Better: add a subtle border/glow.

For the badge, we can give it a gold gradient background, deep purple text, box-shadow, border-radius.

For contact cards, add card-like styling: background color, border-radius, box-shadow, transition.

We must be careful with `!important` on padding. We can add other properties without !important.

Also, since this is within a media query, we can use CSS variables? The original uses var(--space-md). We cannot change --space-md? We could define --space-md in :root? But that would add a new selector. Probably not needed.

We need to output only the rewritten CSS, preserving the media query and all layout/typography values exactly.

Let's construct:

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;
    }
}

Now add visual properties:

For .col-lg-7:
- Add background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.12), rgba(15, 15, 26, 0.6) 75%);
- Add border-radius: 28px;
- Add box-shadow: 0 24px 48px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
- Add backdrop-filter: blur(8px); (but this may affect layout? No, but might be performance heavy. It's okay)
- Add border: 1px solid rgba(255,215,0,0.2); (border-width changes? Adding border width changes layout by 2px, but since we didn't have border before, adding border could alter content size. The instruction says "border-color and border-style (NOT border-width)" — we must not change border-width, but can we add border-width? It says NOT border-width, meaning we cannot change border-width values. Adding a new border-width is changing it from 0 to 1px, which affects layout. So we should avoid adding border if it changes layout. But border-radius and box-shadow don't affect layout. Background doesn't affect layout. So better avoid border. We can use outline instead? Outline doesn't affect layout. But outline is drawn outside, can affect visuals but not flow. The instructions allow outline-color and outline-style, but outline-width is not listed? Actually "outline styles (color, type)" — they mention outline styles, so we can use outline. But outline might overlap. We'll use box-shadow to simulate border.

- Add transition: box-shadow 0.3s ease, background 0.3s ease; but these are visual.

For .badge.bg-warning:
- Add background: linear-gradient(135deg, #ffd700, #b8860b); (This changes background from warning yellow to gold gradient. Good.)
- Add color: #0f0f1a; (text color)
- Add box-shadow: 0 8px 24px -6px rgba(255, 215, 0, 0.6);
- Add border-radius: 999px; (pill shape, "airy rhythm" maybe large radius)
- Add transition: transform 0.25s ease, box-shadow 0.25s ease; but transform is layout? transform is visual but can affect layout? It doesn't affect document flow. We can add transform on hover? But we don't have hover selector. We can just add transition for future. But adding transform property without hover does nothing. We can add transition anyway.

- Add backdrop-filter? No.

For .contact-channels-section article, .contact-quick-section .contact-card:
- Add background: rgba(255,255,255,0.04); (subtle light on dark stage)
- Add border-radius: 20px;
- Add box-shadow: 0 12px 32px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
- Add transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; but transform could change on hover only. Since no hover, okay.
- Add backdrop-filter: blur(6px); maybe.

But note: The padding on those elements is var(--space-md) !important. If we add box-shadow and border-radius, it might look like cards. Good.

We need to ensure the original properties remain unchanged: text-align: center; font-size: 0.85rem; padding: var(--space-md) !important;. We must keep them exactly. We can add declarations after them.

Also, the media query itself remains @media (max-width: 575.98px). The target style "centered-stage" suggests max-width 720-960px, but that's for aggressive layout. We cannot change media query. The effect "airy-rhythm" suggests generous spacing, large border-radius, soft pillowy shadows. We'll add border-radius: 24px maybe. But we cannot change padding. So we'll add internal spacing via box-shadow? No.

We should also consider that the original selectors have high specificity. Our added declarations will apply. We can use CSS variables for colors? Might be overkill. Better use actual values.

Let's craft a coherent visual identity:

- Dark stage background: #0f0f1a. The media query is for mobile, so we can assume the body has that background. For elements, we can use semi-transparent backgrounds that blend.

- Spotlight: radial-gradient on .col-lg-7 to make it seem lit.

- Accent: gold #ffd700 and deep purple #6a0dad (or #7b2d8e). Let's use a rich purple #4b0082 or #5b2a86. For text on gold, use dark purple.

- Soft pillowy shadows: multi-layer shadows with large blur, low opacity.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.18), rgba(15, 15, 26, 0.35) 68%, rgba(15, 15, 26, 0.85) 100%);
        border-radius: 28px;
        box-shadow:
            0 32px 64px -16px rgba(0, 0, 0, 0.7),
            0 8px 24px -8px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            inset 0 0 48px rgba(255, 215, 0, 0.04);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd700 0%, #d4af37 55%, #b8860b 100%);
        color: #171226;
        border-radius: 999px;
        box-shadow:
            0 12px 28px -6px rgba(255, 215, 0, 0.55),
            0 4px 12px -4px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 24px;
        box-shadow:
            0 24px 48px -16px rgba(0, 0, 0, 0.65),
            0 8px 24px -12px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            inset 0 0 32px rgba(91, 42, 134, 0.08);
        transition: background 0.35s ease, box-shadow 0.35s ease;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

But wait: Adding `backdrop-filter` might affect the visual but not layout. However, in a mobile media query, it could be performance heavy. But allowed.

We should also consider `text-align: center` for `.col-lg-7` — adding background and border-radius to a column might create a box. But if the column contains a row? Actually .col-lg-7 is a grid column. Adding border-radius and background to it might be fine. But the class is col-lg-7, which in Bootstrap is a column that at lg breakpoint spans 7. At small screens (max-width 575.98), all columns stack full width. So the col-lg-7 becomes full width. Applying background and radius to it creates a full-width section. That might be okay.

But if the hero section already has padding, adding border-radius to the column could clip? No.

We need to ensure we don't change `padding`. We didn't.

Now, the instruction says "Colors throughout the file replaced with fresh palette?" There were no colors, so we add new ones. Good.

Shadows redesigned: yes.

Border-radius adjusted: yes.

No AI marker comments.

Should we include the original properties exactly? Yes. We have text-align, font-size, padding. We added a space and new lines. That's fine.

We should not change the selector list. The comma-separated selector is preserved exactly.

Output only CSS, no markdown.

Let's double-check for allowed vs forbidden:

- text-align: unchanged.
- font-size: unchanged.
- padding: unchanged (var(--space-md) !important).
- background: added allowed.
- border-radius: added allowed.
- box-shadow: added allowed.
- color: added allowed.
- transition: added allowed.
- backdrop-filter: added allowed.
- -webkit-backdrop-filter: added allowed. Does this count as a new property? It's fine.

We didn't change any display, position, grid, width, height, margin, gap, font-family, font-weight, line-height, letter-spacing, etc.

One concern: The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding `backdrop-filter` might be beyond "colors, shadows, radius, transitions, gradients" but it's a visual property. It says filter, backdrop-filter are among things you MUST change (actually "filter, backdrop-filter" are listed as things you can change). So allowed.

Another concern: We added `background` to `.badge.bg-warning`. Since `.bg-warning` is a Bootstrap utility with `background-color: #ffc107 !important`? Actually Bootstrap's `.bg-warning` uses `background-color: #ffc107 !important` (in Bootstrap 5, utilities use !important). Our rule `background: linear-gradient(...)` without !important may not override the utility if it has !important. In Bootstrap 5, `.bg-warning` is `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`. Because of `!important`, our normal background won't override. To ensure our visual refresh applies, we may need to use `background: linear-gradient(...) !important;` or use `background-image`? But background-image is not a color? It's a visual property. The instruction says we can change gradients. To override Bootstrap's important, we might need `!important`. But adding `!important` is allowed? The instruction doesn't forbid it. But we must be careful: The original `font-size: 0.85rem` has no !important. We keep it. For background, we can add `background: linear-gradient(...) !important;` to ensure override. Also `color` might be overridden by Bootstrap? `.badge` has color #fff. We want dark text, so we should add `color: #171226 !important;`? Since .badge sets color: #fff. But our rule comes later with same specificity? Actually `.app-hero-section .badge.bg-warning` has higher specificity than `.badge`, so it will override. But if `.badge` has `color: var(--bs-badge-color)` no !important, our color applies. For background utility, it has !important, so we need !important. To be safe, use `background: linear-gradient(...) !important;`. But does the instruction allow `!important`? It doesn't mention. It's part of CSS, not a layout property. It's okay.

Similarly, for `.contact-channels-section article` etc., the padding has !important. We keep it. We add background etc. without !important.

For `.col-lg-7`, we add background and box-shadow. No important needed.

Let's revise to include `!important` on badge background to override Bootstrap. Also for `color`, maybe use `color: #171226;` no important.

Also for `.badge.bg-warning`, we might want to add `box-shadow` but the