/* ============================================================
   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 while preserving selectors and layout. The original CSS is a media query block with three rules. We need to change visual properties only: colors, shadows, radius, transitions, gradients, etc. But the original rules are mostly typography and padding. Let's analyze each rule.

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 cannot change text-align, font-size, padding? Wait padding is layout, but we can change within ±20%. However, this is a media query for mobile. The target style is "asymmetric-blocks" and "airy-rhythm". But we must preserve layout. We can change colors, shadows, border-radius, etc. But these rules don't have color or shadow. We can add visual properties? The task says "Only change colors, shadows, radius, transitions, gradients." But we may also add new visual properties to existing selectors, as long as we don't change layout properties. However, we must keep the original declarations? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we cannot add new declarations. But we should be careful not to change typography, display, position, etc. Since the original has text-align and font-size, we must keep those unchanged because they are typography/layout. Padding is layout, we can adjust within ±20% but better to keep same? Actually padding is listed as "padding, margin (keep similar values, ±20% maximum)". So we can change padding slightly. But the original uses var(--space-md) !important. We can adjust the value? That would be a layout change. But we are allowed to keep similar values ±20%. So we could change --space-md? That's a custom property, but we don't have definition. Better keep padding as is because it's already using a variable.

But the task is to "Refresh this CSS visually" and the target style includes "large border-radius (16-28px)", "soft pillowy shadows", "bold contrasting blocks", "high contrast borders". For these selectors, we can add border-radius, background, box-shadow, border, transition, etc. However, we must not change layout, so adding background or border doesn't change layout if box-sizing is border-box? It could affect layout if box-sizing is content-box. But we don't know. In most CSS resets, box-sizing is border-box. To be safe, we can use outline instead of border, or use box-shadow to simulate border. Also border-radius doesn't affect layout. So we can add border-radius, box-shadow, background, etc.

But we need to be careful with the media query. We are rewriting the entire media query block. We can add new declarations to the existing rules. Also we can add new rules? The instruction says "Keep ALL selectors and layout exactly as-is." It doesn't preclude adding new selectors? But the task says "Rewrite this CSS visually. Keep ALL selectors and layout exactly as-is." That likely means we should preserve the existing selectors and not add or remove selectors. Adding new selectors would change the file? We should probably only modify the existing rules. But we can add declarations inside those rules.

However, the target style is "asymmetric-blocks" and "airy-rhythm". These are about layout patterns (unequal columns, mixed gaps), but we cannot change layout. So we can only apply visual aspects: large border-radius, soft pillowy shadows, high contrast borders, breathing room (via maybe padding? but we cannot increase padding beyond ±20%). The original padding is var(--space-md). We could change that variable? But we don't have the variable definition. We can set padding to a slightly larger value within 20%? If --space-md is, say, 1rem, 20% is 0.2rem. Not much. We could leave it.

Actually, maybe we should interpret "Only change colors, shadows, radius, transitions, gradients" as we can add these to the rules, and we must keep the existing declarations as they are, except maybe we can change color-related values if any. But there are none. So we add visual properties.

But the instruction also says "All color values: background, color, border-color, fill, stroke, outline-color" need to be changed. There are no color values in the original. So we need to introduce new color values.

Let's think about the selectors:

1. `.app-hero-section .row .col-lg-7` - This is a column in the hero section. On mobile, text-align center. We can add padding, border-radius, background, box-shadow? But it's a column, adding background might make the entire column colored, which could be a bold block. But we need to be mindful of existing layout. The column likely contains hero content. Adding a background with border-radius would create a card-like block. That aligns with "asymmetric-blocks" and "airy-rhythm". But we must not change the layout significantly. We can add padding? The original rule has only text-align. We can add `padding` but that would change layout. Maybe we can use `box-shadow` or `border-radius` without changing layout? Actually border-radius doesn't affect layout, box-shadow doesn't either (unless it affects overflow, but not layout). Background doesn't affect layout. So we can add those.

However, adding background and border-radius to a column might require the column to have some padding to display nicely. But the column likely already has padding from other rules. We can add `border-radius: 24px;` and `box-shadow: ...;` and `background: ...;`. But if the column doesn't have padding, the content might touch the edges of the rounded background. But we can't add layout? Padding is layout, but we can add padding as a visual? Actually padding is considered layout, but we are allowed to change padding within ±20%. We could add a small padding? The original rule didn't have padding, so adding padding is a change from no padding to something. Is that allowed? The rule says "keep similar values" but there was no padding. Adding padding would change layout. But the target style is "airy-rhythm" with generous spacing. Maybe we can add padding to the column? But the instruction says "NO LAYOUT CHANGES". The list includes padding as something to keep similar values, meaning we can adjust but not introduce? Actually the list "🔒 NEVER CHANGE" includes "padding, margin (keep similar values, ±20% maximum)". That implies we can change padding values, but if there's no padding, maybe we can add? It says "keep similar values" vs original. If original had none, adding padding might be a change. To be safe, we should avoid adding padding if it wasn't there.

But we can use `box-shadow` to create a visual border and background. However, background without padding might look cramped. Perhaps we can use `::before` or `::after` pseudo-elements? But we are not allowed to add selectors? Actually pseudo-elements are part of the selector? We can add them? The rule says "Pseudo-classes (:hover, :focus, ::before, ::after)" must be kept exactly. It doesn't say we can't add new pseudo-elements. But adding new pseudo-elements could be considered adding selectors. Better avoid.

Maybe the intended task is simply to apply a fresh color palette and shadow/radius identity to the existing rules, and since the original has no colors, we can add them. The emphasis is on visual identity, so adding background, border-radius, box-shadow, transition to these selectors is acceptable.

Let's see the second rule: `.app-hero-section .badge.bg-warning` - This is a badge with bootstrap's bg-warning class. We can change the background-color? But that would override the bg-warning utility. We can add `background` with a gradient? But we need to keep the selector. We can set `background: linear-gradient(...)`? That would override the warning background. That might be okay as a visual refresh. But we need to ensure the badge remains visible. We can change the color, border-radius, box-shadow, etc. The rule currently sets font-size: 0.85rem. We must keep that. We can add `border-radius`, `box-shadow`, `padding`? The badge likely has padding from bootstrap. We can add `box-shadow` and `border-radius`.

Third rule: `.contact-channels-section article, .contact-quick-section .contact-card` - These are cards. We can add background, border-radius, box-shadow, border, transition. We must keep the existing padding declaration. The padding is `var(--space-md) !important`. We can change the padding value? We can adjust it slightly, but it's using a variable. We can perhaps change the variable value by redefining `--space-md` scoped to these elements? That would be a layout change. Better keep as is. We can add `border-radius`, `box-shadow`, `background`, `border`, `transition`.

Now, the target style: "asymmetric-blocks" and "airy-rhythm". For the cards, we can make them with large border-radius (20px), soft pillowy shadows (multiple layers), and perhaps a subtle border. For the hero column, we can give it a bold contrasting background block? But the hero column on mobile is probably full width. We can add a background gradient and border-radius.

But we must be careful with Bootstrap's existing styles. The selectors are specific enough.

Let's craft a new CSS. We need to preserve the media query and rules. We'll add new declarations to each rule.

Potential issues:
- Adding `background` to `.app-hero-section .row .col-lg-7` might affect the layout if the child elements have their own backgrounds. But it's fine.
- Adding `box-shadow` might cause visual overflow? In a column, box-shadow doesn't affect layout, but it might be clipped by parent overflow. We don't know. But it's okay.

We should use a fresh color palette. The original file fingerprint is #98f9a1c9, not useful. We need a new palette. Let's use a modern, fresh combination. Maybe:
- Background: soft off-white `#f8f9fa`? But that might be too subtle.
- For the hero column block: a bold gradient from `#e0f2fe` to `#fdf4ff`? Or a deep indigo? Since it's an "asymmetric-blocks" style with bold contrasting blocks, we can set the hero column to a vibrant gradient like `linear-gradient(135deg, #6366f1, #8b5cf6)` with white text? But we can't change text color? We can add `color` to that rule, which is a visual property. But the rule didn't have color, so adding color is okay. But the text in that column might be dark; setting the background to a dark gradient would require setting color to white. That might conflict with other elements. Better to use a light background for the block: `linear-gradient(135deg, #faf5ff, #f0f9ff)` and a soft shadow. That gives a subtle block.

For the badge: maybe a vivid gradient: `linear-gradient(135deg, #fbbf24, #f59e0b)`, but the class is bg-warning, which is yellow. We can keep it in the same hue but add a gradient and stronger shadow. But the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. So we should not keep the same warning yellow? Actually we can change it to something else, like a coral or teal. But the class name `bg-warning` semantically suggests warning. However, the visual refresh can change it to a new warning color. Let's use a vibrant coral/orange: `linear-gradient(135deg, #ff7a59, #ff5e62)`? But that might be too aggressive. Maybe `linear-gradient(135deg, #ffb347, #ff6b6b)`.

For the contact cards: use a clean white background with a colored border and soft shadow. Since the target style is "asymmetric-blocks", we can alternate backgrounds? But the selector targets two different elements: `.contact-channels-section article` and `.contact-quick-section .contact-card`. We can give them different backgrounds in the same rule? Actually they are in the same rule, so they share the same declarations. We can use a single background for both. Maybe a light gradient or a soft card background.

But wait, the rule uses `padding: var(--space-md) !important;`. If we add `background-color`, the cards will have a background. We might also add `border-radius: 20px;` and `box-shadow`. The existing padding will ensure content is inside nicely.

Let's write the CSS.

We need to ensure that the original declarations are preserved:
- text-align: center;
- font-size: 0.85rem;
- padding: var(--space-md) !important;

We can add others.

Let's think about transitions. We can add `transition: box-shadow 0.3s ease, transform 0.3s ease;` but `transform` is a layout property? Actually transform is not in the "never change" list, but it's a visual change. However, adding a transition on transform doesn't change layout. But if we add a transform on hover, that would be a visual change. But we can't add a hover rule? We can add a transition to the base rule, but no hover rule exists. That's fine.

We should be careful about `!important`. The original padding has `!important`. We can keep it.

Now, for the hero column, adding `border-radius` might affect child elements if they have overflow hidden? But no. We can add `border-radius: 28px;` and `box-shadow: ...;` and `background: ...;`. Since it's a column that contains text, adding padding? We won't add padding. But the background will extend to the edges of the column. On mobile, the column is likely full width, so the background will be flush against the edges. That might look weird without padding. But we can add `padding` with a value similar to the space? However, the original rule didn't have padding, so adding padding would change the layout. But maybe we can use an inner shadow? No.

Alternative: instead of applying background to the column, we can apply it to the badge and cards only. For the hero column, we can add `border-radius` and `box-shadow` but no background? That wouldn't be visible. We could add a `box-shadow` that creates an outline outside the column, but again no background.

Maybe we can add a `border-left` or something? But that changes layout? Border-width is not allowed to change? Actually border-width is not in the "never change" list? It says "border-color and border-style (NOT border-width)" can change. So we can add a border with a width? Wait, the list of "must change" includes "border-color" and "border-style". The "never change" list doesn't mention border-width, but it likely should be kept. However, we can add a border with a width? That would change layout unless box-sizing is border-box. But to be safe, we can use `outline` instead of border. Outline doesn't affect layout. But outline doesn't have border-radius? Actually outline follows border-radius in modern browsers. So we can use `outline: 2px solid ...;` and `outline-offset: 2px;` to create a visual frame without layout change. That's a good technique.

For the hero column, we could add an `outline` and a `border-radius`. But outline won't show a background. Without a background, the radius is only visible if there is a border or outline. We can use a multi-layer box-shadow to create a "border" effect: `box-shadow: 0 0 0 1px rgba(...), 0 0 0 3px ...` etc. Actually box-shadow can simulate a border and not affect layout. So we can add `box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2), 0 20px 40px -10px rgba(99, 102, 241, 0.3);` and `border-radius: 24px;`. That creates a ring around the column. But if the column is full width, the ring will be at the edges of the column, which might be the entire width. On small screens, that's fine.

We could also add a background gradient to the hero column, but that would fill the column. If the column has no padding, the text will be flush against the rounded rectangle. That might be okay if there is already padding from parent? Actually the column `.col-lg-7` in Bootstrap has `padding-right` and `padding-left` (15px each). So there is some horizontal padding. Vertical padding may not exist. So the background would only cover the content area plus horizontal padding? Actually the background covers the entire element including its padding. So there is at least 15px horizontal padding. The vertical padding is zero, so the text might touch the top/bottom edges. But we can add `padding-top: 24px; padding-bottom: 24px;` to the rule? That would change layout. But we are allowed to change padding within ±20%? There is no padding originally, so adding 24px is a change from 0. The "keep similar values" might not apply. But maybe it's acceptable because the target style demands "generous spacing". However, the instruction is strict: "ONLY change colors, shadows, radius, transitions, gradients." It doesn't mention padding. Actually the list of "must change" includes "border-radius" but not padding. And the "never change" list includes "padding, margin (keep similar values, ±20% maximum)". So we can change padding by up to 20% from original. If original is 0, 20% of 0 is 0. So we cannot add padding. So we should not add