/* ============================================================
   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 given CSS with only visual changes. The original CSS is a media query block with three rules. We need to keep all selectors, layout properties (none present except padding in one rule), typography, etc. Only change colors, shadows, radius, transitions, gradients, etc.

Original CSS:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

We need to refresh visually. But wait, there are no colors, shadows, radius, transitions, gradients in the original. So perhaps we can add visual properties that don't change layout? But the instructions say "Only change colors, shadows, radius, transitions, gradients." However, we cannot change layout, display, position, width, height, padding, margin, etc. We can add properties like color, background, border-radius, box-shadow, transition, etc., to the existing selectors.

But the original has no such properties. To refresh, we can add new visual properties. However, we must be careful not to change layout. Adding border-radius to an element might affect layout? Usually not if box-sizing is border-box, but could affect background clipping. Adding box-shadow doesn't affect layout. Adding transition doesn't affect layout. Adding color doesn't affect layout. So we can add some color, shadow, transition to the existing selectors to give a visual refresh.

But we must keep the existing declarations exactly? The instruction: "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say to keep existing declarations; it says to refresh. So we can modify existing declarations if they are visual? But there are none except padding (which is layout) and font-size (typography, not to change). So we must keep padding and font-size as-is. We can add new declarations.

Also, the media query remains. We can add visual properties within the media query. But we should not change the media query condition.

Let's analyze each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is layout/typography? It's text alignment, which is in the "never change" list (text-align). So we must keep it. We can add visual properties like color, background? But this is a column container; adding background might affect visual but not layout if it's within existing box. But the target style is "centered-stage" with dark stage and premium gold accent. Maybe we can add a background? But that might be too much. We can add transition? No, text-align isn't transitionable meaningfully. We can add border-radius? That would be weird on a column. Actually, we can add a background gradient? But this could change the visual significantly, but the instruction says refresh visual identity. So it's allowed.

However, we need to be cautious: the selector `.app-hero-section .row .col-lg-7` is a column inside a row. In Bootstrap, col-lg-7 is a grid column. Adding background to it might be okay. But the original didn't have background; we can add a subtle background to create a spotlight feel.

But the target style "centered-stage" says "Dark stage #0f0f1a, bright content area, premium gold or deep purple accent." We can incorporate that.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is typography, keep as-is. We can add color, background-color, border-radius, box-shadow, transition. The badge already has bg-warning (Bootstrap class) which sets background-color. We can override with a custom color? But the selector includes `.bg-warning`, which is a Bootstrap utility class. If we override background-color, that would change the visual but not layout. That's allowed. But we need to be careful: the badge.bg-warning might have default colors from Bootstrap. We can override with premium gold accent.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is layout, keep exactly. We can add border-radius, box-shadow, background, transition, etc.

Now, we should also consider adding a global visual refresh? The original CSS is only inside a media query. We cannot add new selectors outside the media query because the output must preserve selectors exactly? Actually, the instruction: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." We can add new rules? Usually, in these tasks, we should only rewrite the given CSS, not add new selectors. The safest is to only modify the existing rules within the same media query. We can add properties to existing selectors.

But the target style says "centered content: max-width 720-960px, margin: 0 auto" etc. That would require adding properties to existing selectors, but those selectors are specific elements, not a general container. We cannot add a new selector for a container because it doesn't exist. So we will focus on the selectors we have.

Let's think about what visual changes we can make:

For `.app-hero-section .row .col-lg-7`:
- Add `color: #f8f9fa;`? But that might affect text color. Since it's a col, it contains content. We can set a background gradient? But that might be too broad. Maybe add a subtle background glow? Or add a border-radius and padding? But padding is layout, cannot change. Border-radius on a column might clip background if any. But if no background, doesn't matter. We can add a box-shadow? That would create an effect.

Maybe better to add a transition for hover? But there's no hover state.

For `.app-hero-section .badge.bg-warning`:
- This is a badge. We can change background-color to a gold gradient, color to dark, border-radius to 50px, box-shadow, transition. That would refresh the visual.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- These are cards/articles. We can add background, border-radius, box-shadow, transition. But note that padding is set with `var(--space-md)` and important. We can't change that. We can add a subtle border? Border-width cannot change? Actually, border-width is not listed in the "never change" list? Let's check: The "NEVER CHANGE" list includes "border-color and border-style (NOT border-width)". So we can change border-width? Wait, it says "border-color and border-style (NOT border-width)" under never change? Actually it says: "🔒 NEVER CHANGE (would break HTML layout): ... border-color and border-style (NOT border-width)" Hmm, that means border-color and border-style should not change? Wait, let's re-read the instructions.

In the "YOU MUST CHANGE" list: "border-color and border-style (NOT border-width)" is listed as must change? Actually, in the list under "✅ YOU MUST CHANGE (visual identity only):" there is:
  • All color values: background, color, border-color, fill, stroke, outline-color
  ...
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)

So we must change border-color and border-style, but not border-width. In the "NEVER CHANGE" list, it doesn't mention border. So we can change border-color and border-style. But we cannot add border if none exists? Actually, we can add a border. Adding a border with width > 0 will change layout (box-sizing may compensate, but if box-sizing is content-box, it will change size). But we are allowed to change border-color and border-style, not border-width. If we add a border, we are setting border-width (default medium, which is 3px) which would change layout. To be safe, we should not add new borders unless we also set border-width to 0? That would be pointless. Better to avoid changing border.

Similarly, box-shadow doesn't affect layout.

Let's see the target style: "soft-shadows" with multi-layer shadows, large border-radius (12-24px), smooth transitions. So for cards, we can add border-radius: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12); transition: box-shadow 0.4s ease; Maybe also a background color.

But note: The original card may already have a background from other styles not in this file. We are only adding to this media query. Adding a background color here will apply at small screens only. That's fine.

We should also think about the "centered-stage" palette. "Dark stage #0f0f1a, bright content area, premium gold or deep purple accent." Since these are small screen tweaks, we could apply a deep purple accent to the badge, and give the content cards a bright background with a subtle shadow.

But we must not change font-size, padding, text-align, etc.

Let's craft the rewritten CSS.

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 can add properties:

For `.app-hero-section .row .col-lg-7`:
- Add `color: #ffffff;`? But that might override text color. The background might be dark, so white text could be good. But the column may not have a dark background; adding a background might be needed. Let's add:
  - `background: linear-gradient(135deg, rgba(15,15,26,0.8) 0%, rgba(30,27,75,0.6) 100%);`
  - `border-radius: 24px;`
  - `box-shadow: 0 8px 32px rgba(0,0,0,0.18);`
  - `transition: background 0.4s ease, box-shadow 0.4s ease;`
  - `color: #f8f9fa;` (if content is text)
  
  But wait, the selector is `.col-lg-7`, a grid column. Adding background to a grid column might be visually heavy. Also, text-align center is already there. The target style says "Centered content... text-align: center for headings" but this is a col, not a heading. Hmm.

Maybe for this selector, we can just add a subtle text-shadow? Or a transition? But we want to refresh visual identity. We can add a background with a radial gradient to create a spotlight effect.

Alternatively, we can add a `border-radius` and `box-shadow` to give the column a card-like appearance. But that would change the visual quite a bit. However, the instruction says we can.

Let's think about the badge: `.app-hero-section .badge.bg-warning` — we can change `background-color` to a gold gradient, `color` to dark, `border-radius: 50px`, `box-shadow: 0 4px 12px rgba(255,193,7,0.3)`, `transition: all 0.3s ease`.

For the cards: `.contact-channels-section article, .contact-quick-section .contact-card` — add:
- `background: rgba(255,255,255,0.05);`? But the target says "bright content area". Maybe `background: #ffffff;` and `color: #0f0f1a;`? But we shouldn't set color globally because it might affect text. We can set a subtle background and shadow.

But note: The cards might have an existing background. Adding a background in a media query will override at small screens. That's acceptable.

Let's decide on a palette:
- Deep purple accent: `#7c3aed` or `#6d28d9`.
- Gold accent: `#f59e0b`, `#fbbf24`.
- Dark stage: `#0f0f1a`.
- Bright content: `#f8f9fa` or `#ffffff`.

For the col, maybe a transparent background? Actually, the "centered-stage" says dark stage, bright content area. We can make the col a "bright content area" by giving it a light background with soft shadow. But then the badge would be gold. That could look good.

However, the col is inside a hero section; making it a white card might look like a floating card. That fits with soft-shadows variant.

Let's write:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(15,15,26,0.05), 0 20px 40px -10px rgba(15,15,26,0.12);
        transition: box-shadow 0.4s ease, transform 0.4s ease;
        color: #0f0f1a;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
        color: #0f0f1a;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(245,158,11,0.35);
        transition: 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.06);
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 12px 24px -8px rgba(0,0,0,0.12);
        transition: box-shadow 0.4s ease, background 0.4s ease;
    }
}
```

But we need to check: Are we allowed to add `transform`? The "NEVER CHANGE" list doesn't mention transform. But transform could affect layout? It doesn't affect layout flow, but it visually moves the element. However, we are only adding a transition for transform, not an actual transform. That's fine. But to be safe, we might avoid transform. We can transition only box-shadow and background.

Also, adding `color` to the col might override existing text color. Since the target is "bright content area", dark text on light background is good. But the col may contain headings that have their own color; setting color on the parent will inherit. That's okay.

However, we must consider specificity and existing styles. The original CSS only set text-align. Our additions are within the same rule, so they will apply. But if there are other rules with higher specificity, they might override. That's fine.

Let's check the badge: Bootstrap `.badge` has `padding: .35em .65em; font-size: .75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .375rem; background-color: #ffc107; color: #212529;` etc. Our `.app-hero-section .badge.bg-warning` has specificity higher than Bootstrap's `.badge`? Let's see: Bootstrap selector `.badge` is one class; `.bg-warning` is another; combined with `.app-hero-section .badge.bg-warning` has two classes plus ancestor, so higher specificity. So our background will override. We set border-radius to 999px, overriding Bootstrap's .375rem. Good.

Now, for the cards: We set `background: rgba(255,255,255,0.06);` This is a semi-transparent white, which on a dark background gives a subtle raised effect. But the target says "bright content area". Maybe for the contact section, the background might be dark? Not sure. Since we don't know, a translucent white overlay is safe. But the original didn't have background. We could add a solid white background with dark text to make it bright. But that might be too much of a change, and could affect readability if the text is already dark. However, the target style says "bright content area". Let's use a soft white background: `background: #ffffff;` and `color: #0f0f1a;`? But setting color on the card might override text colors inside, which could be bad. Better to use a very light background and keep text colors as is. Since we don't know, maybe a neutral light background like `#fdfdfd` and a soft shadow.

But note: `padding: var(--space-md)` is set. If we add a background, the padding will be the background area, which is fine.

Let's refine:

- For col: `background: rgba(255,255,255,0.85);` with backdrop-filter? That might be nice. But `backdrop-filter` can be added. However, on mobile, might be heavy. But it's okay.

Maybe use `background: #ffffff;` with `box-shadow`. Since the hero section might have a dark background, a white card would pop.

Let's also add `border-radius: 24px` to match soft-shadows.

For badge: `background: linear-gradient(135deg, #f59e0b, #fbbf24);` and `border-radius: 16px` instead of full pill? The target says large border-radius 12-24px. 999px is a pill,