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

The user wants me to rewrite the CSS in a conservative mode, keeping all selectors and layout exactly as-is, but changing colors, shadows, radius, transitions, gradients, etc. The target style is "vertical-flow" with warm minimal colors: off-white #faf8f3, soft black #2d2d2d, and one muted accent (sage #87a878 or terracotta #c47b5a). The effect variant is "glow-effects" with glow shadows in accent color, halo on hover, medium radius (8-16px), subtle pulsing animations.

However, the original CSS is quite small — it's just a media query with a few rules. Let me look at it:

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

I need to preserve all selectors and layout exactly. But I can add visual properties. The constraint says I cannot change layout properties like padding (well, padding "keep similar values, ±20% maximum"). So I can't change the padding value much. Actually padding is listed as "keep similar values, ±20% maximum". So I could change `var(--space-md)` to something within 20%? But `var(--space-md)` is a CSS variable. I might define custom properties --space-md? Actually the HTML is fixed but the CSS can have custom properties. Hmm, but I need to be careful.

Let me think about what I can change:

1. `text-align: center;` — this is a layout property (text-align is listed as "text-align, vertical-align" under layout). So I must NOT change it.

2. `font-size: 0.85rem;` — font-size is typography, must NOT change.

3. `padding: var(--space-md) !important;` — padding must keep similar values ±20%. `var(--space-md)` depends on definition. I could keep using `var(--space-md)` or change to a slightly different value. Since I don't know the value of --space-md, but I can potentially define it in a :root? That might be too invasive. Actually I can change the padding to a similar value within 20%. But I don't know the base. Safer to keep `var(--space-md)` as-is since it's a layout property. Actually, the instructions say padding must keep similar values (±20% maximum). Keeping it exactly the same is fine. But the task says "Only change colors, shadows, radius, transitions, gradients." So I should focus on those.

Given the original CSS has no colors, shadows, radius, transitions, gradients, I need to ADD them without changing the layout. But I cannot change selectors? Wait, I can keep the selectors exactly and add new declarations within them. I can also add new rules? The instruction says "Keep ALL selectors and layout exactly as-is." It says the selectors must be preserved character-for-character. It doesn't explicitly forbid adding new selectors. But typically, in these tasks, you rewrite the CSS with the same selectors but new visual declarations. I think I can add new declarations to existing rules, and possibly add new rules that don't change layout.

However, there's a risk: adding new rules with new selectors might be considered changing HTML? No, it's just CSS. But the conservative mode says HTML is fixed. Adding CSS rules is fine as long as they don't change layout. But the instruction says "Every selector character-for-character preserved?" — meaning the original selectors must appear exactly. It doesn't say I can't add more.

But the safest interpretation: rewrite the CSS, keep the same blocks with same selectors, but add visual properties. Also, I could add a `:root` block to define custom properties, or add `@keyframes` for pulsing animations (the effect variant calls for subtle pulsing animations). Adding @keyframes is allowed since "animation-name (values like duration/timing CAN change)" and keyframes names preserved but values can change. Actually I can add new keyframes too.

Wait, the instructions say:

🎬 ANIMATION & MEDIA:
  • @keyframes names (values inside CAN change)
  • @media query breakpoints (conditions only)
  • @import, @font-face, @supports, @charset
  • animation-name (values like duration/timing CAN change)

So I can add @keyframes. And I can keep the @media query breakpoint.

Let me think about the target style. The site is a "saishi" (competition) CSS. The design should become vertical-flow: single column, large vertical gaps, narrow content max-width centered. But I cannot change layout properties like max-width? Wait, max-width is listed under width/min/max-width — cannot change layout. But the original CSS doesn't have any width. The target style says "Aggressive only" meaning the layout pattern is aggressive, but the mode is conservative, so I should NOT change layout aggressively. The instructions clearly state: "Layout pattern (Aggressive only)" — meaning that pattern is for aggressive mode. In conservative mode, I keep layout.

So I should focus on color/shadow/radius/transition.

Given the original CSS is just a media query, I need to add visual flair. Let me add:

- Background colors, text colors, border colors, shadows, transitions to the existing selectors.
- Use the warm minimal palette: off-white #faf8f3, soft black #2d2d2d, accent sage #87a878 or terracotta #c47b5a. Maybe use both sage and terracotta? The palette says "One muted accent (sage #87a878 or terracotta #c47b5a)". I'll pick one — sage is nice for glow. Let's go with sage #87a878 for the accent.

I need to be careful: the existing selectors target `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. I can add colors, shadows, transitions, etc.

But note that `.col-lg-7` is a Bootstrap column. Adding background/shadow to it might change visual but not layout. That's fine.

Let me craft the new CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2d2d;
        background: linear-gradient(135deg, rgba(250, 248, 243, 0.9), rgba(255, 255, 255, 0.4));
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(135, 168, 120, 0.35), 0 8px 24px rgba(45, 45, 45, 0.08);
        padding: 2rem; /* wait, padding is layout, must keep similar. Original has no padding here. Adding padding could change layout. Hmm. */
    }
    ...
}
```

Wait, adding padding would change layout. The original `.app-hero-section .row .col-lg-7` has no padding declaration, so it inherits Bootstrap's padding (likely 15px via .col-lg-7 inside .row). Adding padding would change layout. I should avoid adding padding/margin/width/height. I can only add properties that don't affect layout: color, background, border (border-width? "NOT border-width" — can't change border-width, but can change border-color and border-style). Adding border would change layout unless it's already there. Since border width is unchanged (default 0), adding a border would add layout effects. Actually border is part of box model, so adding a border changes layout. The instruction says "border-color and border-style (NOT border-width)" — meaning IF there is a border, change its color/style, not width. But adding a border where there was none changes layout. Hmm. So I should avoid adding borders to elements that didn't have them.

Similarly, box-shadow doesn't affect layout. background doesn't affect layout. color doesn't. border-radius doesn't affect layout (well, it clips, but not layout). transition doesn't affect layout. So I'll stick to those.

Let me add box-shadow, background, color, border-radius, transition, backdrop-filter maybe.

For `.app-hero-section .badge.bg-warning` — this is a badge with Bootstrap warning background. I can change the background color, color, box-shadow, border-radius. But `bg-warning` class from Bootstrap sets background-color. My rule can override it. Since this is inside the media query, it'll apply. I can set background to sage accent, color to off-white, add glow.

For `.contact-channels-section article` and `.contact-quick-section .contact-card` — these are cards. I can add background, border-radius, box-shadow, transition.

But wait, the original rule only applies at max-width: 575.98px. So these visual changes would only apply on mobile. That's fine; the task is to refresh the CSS as-is. But the target style's glow effects should be visible. Maybe I should also add a global `:root` or a non-media-query rule? The instructions say "Every selector character-for-character preserved?" If I add new selectors, that could be seen as not preserving? Hmm, but it says "preserved" not "only". But conservative mode likely means rewrite the given CSS while adding visual properties. Adding new selectors outside the media query would change behavior beyond the original. Is that allowed? The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." I think adding new rules with new selectors is risky but might be acceptable. But to be safe, I should keep the same structure: the same media query with the same selectors, just enriched.

However, the "glow-effects" variant calls for "Subtle pulsing animations." To add a pulsing animation, I need an @keyframes and an animation property. I can add the @keyframes at the top level (outside the media query) and reference it within the existing rules. That's allowed: @keyframes names can be new. The animation property added to existing selectors doesn't change layout (it's visual). So I can do that.

Let me plan the new CSS:

- Keep `@media (max-width: 575.98px)`.
- In `.app-hero-section .row .col-lg-7`: keep `text-align: center;` and add visual properties. But could adding a background gradient to a Bootstrap column mess with layout? Background doesn't affect layout. Good.
- In `.app-hero-section .badge.bg-warning`: keep `font-size: 0.85rem;` and add background, color, border-radius, box-shadow, transition. Maybe also an animation pulse.
- In the combined selector for article/card: keep `padding: var(--space-md) !important;` and add background, border-radius, box-shadow, transition, maybe backdrop-filter.

I need to think about the padding: `var(--space-md)` stays. Adding a background to the card is fine.

Let me also consider: The original file fingerprint and request ID aren't relevant.

Color palette details:
- Off-white: #faf8f3
- Soft black: #2d2d2d
- Sage: #87a878
- Maybe a lighter sage: #a3b89a
- Darker sage for text: #6b8f5e
- Terracotta could be a secondary accent but we'll stick with sage for consistency.

Glow effects:
- box-shadow: 0 0 24px rgba(135, 168, 120, 0.4) — wait, sage #87a878 in rgba: 135, 168, 120. Yes.
- Halo on hover: 0 0 32px rgba(135, 168, 120, 0.6). Add hover transitions. But there are no hover selectors in the original. Can I add `:hover` pseudo-classes? The instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" — "Selectors: keep EXACTLY". That means if a selector has :hover, keep it. It doesn't forbid adding new :hover rules. But adding new selectors might be iffy. The "glow-effects" variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)" — to implement, I'd add a `:hover` rule. But that would be a new selector. Is that allowed? The conservative instructions say "Keep ALL selectors and layout exactly as-is" and "Every selector character-for-character preserved?" This implies not adding new selectors. But then how to implement hover glow? I could use a transition on the base and rely on existing hover states (e.g., Bootstrap card hover) — but that's not explicit. Alternatively, I can add a `:hover` to the existing selector list. I think that's acceptable as a "visual" enhancement, but it technically adds a new selector. Hmm.

Let me re-read: "🏷️ SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY (.post-card stays .post-card) ... Pseudo-classes (:hover, :focus, ::before, ::after) ... Selector lists (commas) ... Combinators (>, +, ~, descendant spaces) ... Attribute selectors ... Element types ... IDs". This section says keep these exactly — meaning don't rename or restructure. It doesn't explicitly say "don't add new selectors." But the self-check says "Every selector character-for-character preserved?" Usually in these tasks, the generated CSS should include exactly the same selector set. Adding new ones might be penalized. To be safe, I'll avoid adding new selectors. Instead, I can apply transitions so that if there's an existing hover (like a link or button), it transitions smoothly. But for the cards, there might be existing hover from other CSS. I can add a `transition` on the base so any hover state changes are smooth. But the hover itself won't be defined in my CSS. Hmm.

Alternatively, I can use animation with `@keyframes` for the pulsing glow, which doesn't require hover. The variant says "Subtle pulsing animations" — that can be a continuous soft pulse, not necessarily hover. So I'll add an `animation` to the cards and badge that pulses the box-shadow.

OK let me design.

Base visual identity:

For `.app-hero-section .row .col-lg-7`:
- color: #2d2d2d
- background: linear-gradient(145deg, rgba(250, 248, 243, 0.96), rgba(240, 235, 224, 0.6))
- border-radius: 16px
- box-shadow: 0 0 24px rgba(135, 168, 120, 0.35), 0 12px 28px rgba(45, 45, 45, 0.06)
- transition: box-shadow 0.35s ease, transform 0.35s ease (transform is layout? Transform doesn't affect layout, it's visual, but it could be considered layout? It's not listed as prohibited. Actually transform is not listed under either category. It's a visual property. So I can use it. But to be safe, maybe avoid transform.)

Wait, I should double-check: is `transform` allowed to change? It's not in the never-change list, and it doesn't affect layout (unless it changes position visually). Changing transform can overlap content but doesn't reflow. The instruction says "Only change colors, shadows, radius, transitions, gradients." Transform is not in that list either. So maybe avoid transform. I'll just use box-shadow and background.

For the badge:
- color: #faf8f3 (off-white text on sage)
- background: linear-gradient(135deg, #87a878, #6b8f5e) (sage gradient)
- border-radius: 12px (pill-ish)
- box-shadow: 0 0 20px rgba(135, 168, 120, 0.45)
- animation: pulseGlow 3s ease-in-out infinite

For the cards:
- background: linear-gradient(145deg, rgba(250, 248, 243, 0.92), rgba(255, 255, 255, 0.65))
- border-radius: 14px
- box-shadow: 0 0 24px rgba(135, 168, 120, 0.3), 0 10px 30px rgba(45, 45, 45, 0.08)
- transition: box-shadow 0.3s ease, background-color 0.3s ease
- Maybe a backdrop-filter: blur(8px)? backdrop-filter is allowed to change. It could be nice for a glassy look. But it might have performance issues; still allowed.

I should also add `@keyframes` for the pulse. Let's define:

```css
@keyframes softGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(135, 168, 120, 0.35), 0 8px 20px rgba(45, 45, 45, 0.06);
    }
    50% {
        box-shadow: 0 0 32px rgba(135, 168, 120, 0.6), 0 12px 28px rgba(45, 45, 45, 0.1);
    }
}
```

But note: adding a `box-shadow` inside `@keyframes` and also as a base property. The animation overrides the box-shadow during animation. That's fine.

However, I need to be careful with the `!important` on the card padding. Keep it.

Also, `backdrop-filter` could be added: `backdrop-filter: blur(10px);` — but if the background is semi-transparent, it gives a frosted glass effect. Nice.

Now, the