/* ============================================================
   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, changing only visual properties like colors, shadows, radius, transitions, gradients, etc. The target style is "asymmetric-blocks" with "glow-effects" variant. However, the original CSS is very small — it's a mobile media query with just three rules:

1. `.app-hero-section .row .col-lg-7` with `text-align: center;`
2. `.app-hero-section .badge.bg-warning` with `font-size: 0.85rem;`
3. `.contact-channels-section article, .contact-quick-section .contact-card` with `padding: var(--space-md) !important;`

These are layout/typography properties. In conservative mode, I can't change:
- text-align (it's in the layout list? Actually text-align is listed under "never change" — yes it says text-align, vertical-align should not be changed)
- font-size (under typography — never change)
- padding (can change ±20% — padding is allowed to change within ±20%)

Wait, the instructions say padding/margin can change within ±20%. So I can adjust padding slightly, but it would be odd. But also, the target style is asymmetric-blocks with glow effects, but the CSS given is quite minimal. I need to output the same selectors but possibly add visual properties? The instructions say "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

In conservative mode, I should keep the selectors, and I can add decorative properties like box-shadow, border-radius, transitions, etc., to the existing rules without breaking the layout. But I must be careful not to change the layout properties.

Let me analyze the original CSS:

```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 refresh this visually. Since the selectors are minimal, I could add box-shadow, border-radius, transition, etc., to these elements — but I must be careful that adding box-shadow to `.app-hero-section .row .col-lg-7` could affect layout? No, box-shadow doesn't affect layout. Border-radius doesn't either. Transitions don't either.

However, adding visual properties to a col-lg-7 might not make much sense since it's a column. But since the instruction says "Only change colors, shadows, radius, transitions, gradients" — I think the intent is that I should add these visual properties to the existing selectors.

But wait — there's a risk. The original CSS only contains these three rules. If I add new visual properties to them, that's within the scope. But I must keep the original layout properties unchanged: `text-align: center`, `font-size: 0.85rem`, `padding: var(--space-md) !important`. Actually padding can change ±20% — but with `var(--space-md)` it's a custom property reference. I can't really change it by 20%. I could keep it as is.

Actually, let me re-read the instructions: "Only change colors, shadows, radius, transitions, gradients." So maybe for this specific CSS, since there are no colors/shadows/radius/transitions/gradients in it, I should add them. The safest approach is to add visual enhancements to each selector while preserving the existing declarations.

Let me think about what makes sense:

1. `.app-hero-section .row .col-lg-7` — text-align: center — I can add:
   - `box-shadow: 0 0 24px rgba(accent, 0.4);` — but on a column? It might create a glowing block. Since the target style is asymmetric blocks with glow, maybe adding a subtle glow to the column.
   - `border-radius: 16px;`
   - `transition: box-shadow 0.3s ease;`
   - On hover, a stronger glow. But hover within a media query is fine.
   - Also maybe a background color? But background is a color change. I could add a background gradient? The rules say "gradient colors and stops in linear/radial/conic-gradient" can change. Adding a gradient background might affect the look but it's a visual property. But changing background of a col could change the appearance significantly — but the instructions allow changing all color values (background, color, border-color, etc.). Hmm, but "NEVER CHANGE" includes layout properties. Background doesn't affect layout. So I can add background.

But wait — in the mobile media query, the hero section column with text-align center. If I add a box-shadow to a column, it might create an odd block effect. But the user request is to apply the target style. However, the conservative mode says "HTML is FIXED — only colors, shadows, and decorative properties may change." Adding box-shadow is a decorative property. So it's allowed.

But I must be careful: `.app-hero-section .row .col-lg-7` is a column inside a row. In mobile, it likely stacks. Adding a glow/shadow to a full-width column could look like a glowing box. That could be intentional for "glow effects".

2. `.app-hero-section .badge.bg-warning` — badge. I can add:
   - `box-shadow: 0 0 12px rgba(accent, 0.4);` for a glow
   - `border-radius: 12px;` (medium radius 8-16px)
   - `transition: box-shadow 0.3s ease, transform 0.3s ease;` — but transform is a visual property. Is transform allowed? The "never change" list doesn't mention transform. It says "display, position, grid-template-*, width, height, padding, margin, gap, justify-content, align-items, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, text-align, vertical-align, font-*, line-height, letter-spacing, text-transform, white-space, word-break". Transform is not on the never-change list. So I can add transform. But conservative mode says "only colors, shadows, and decorative properties may change" — transform is decorative. I'll keep it subtle.
   - Maybe add a hover glow: `:hover { box-shadow: 0 0 32px rgba(accent, 0.6); }` — but wait, adding :hover pseudo-class? The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" should be kept exactly. It doesn't say I can't add new pseudo-class rules. Hmm, "Keep ALL selectors ... exactly as-is" — so I should not add new selectors? The instruction says "Selector lists (commas)" and "Pseudo-classes" are things to keep exactly. It says "Keep ALL selectors and layout exactly as-is." That implies I shouldn't add new selectors, including new pseudo-class selectors. Adding a new `:hover` rule would be adding a new selector. That might violate the constraint.

Let me check: "🏷️ SELECTORS (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" — this is under "NEVER CHANGE". It means if the original has a `:hover`, keep it. But does it prohibit adding new ones? The "NEVER CHANGE" section is about things I must preserve, not necessarily things I can't add. But "Keep ALL selectors and layout exactly as-is" suggests the selector list is fixed. Adding `:hover` would change the selector list. To be safe, I won't add new selectors. I'll keep exactly the selectors present.

So I can only modify the existing three rules. I can add visual declarations inside them.

Let me think about the target style colors. The target style doesn't specify a specific accent color. Since the original CSS uses `.bg-warning` (Bootstrap warning - amber/yellow) and custom properties like `var(--space-md)`, the accent color should probably be something warm. Since the target style is "asymmetric-blocks" with "glow-effects", I'll use a warm accent color like #ff9f43 or a glowing amber/cyan. But let's keep it coherent.

The instructions say: "Colors throughout the file replaced with fresh palette?" — the original file doesn't have colors, so I need to add new colors.

Let me design:

- Accent color: #f59e0b (amber) or #ff8a00. Since it's a badge bg-warning, an amber glow makes sense.
- For the hero column: maybe a subtle radial-gradient background? But that might conflict with the existing design. Adding a background to a column could be okay since "each section different background" from asymmetric-blocks. But I must be careful — the original rule only sets text-align. Adding a background is a color change, which is allowed. However, on mobile, a full-width col with a glowing background might be desirable.

But let me think about "conservative" — the spirit is to refresh visual identity without breaking layout. Adding a background to a column is visually impactful but doesn't break layout. However, if the page has its own background and images, a glow background might clash. Yet the task explicitly says to apply the target style with bold contrasting blocks and glow effects. I'll go for it but keep it tasteful.

Let me design the three rules:

1. `.app-hero-section .row .col-lg-7`:
   - text-align: center (keep)
   - Add: `border-radius: 16px;` (medium radius)
   - Add: `box-shadow: 0 4px 24px rgba(245, 158, 11, 0.35), 0 0 0 1px rgba(245, 158, 11, 0.2);` (glow with high contrast border feel)
   - Add: `transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease;`
   - Add: `background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));` (subtle gradient)

   But wait, adding a background gradient to a column might create a visible block. Since the style is asymmetric-blocks, and this is the hero column, a subtle warm gradient glow is fine.

2. `.app-hero-section .badge.bg-warning`:
   - font-size: 0.85rem (keep)
   - Add: `border-radius: 12px;`
   - Add: `box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);` (glow)
   - Add: `transition: box-shadow 0.3s ease, filter 0.3s ease;` — filter changes? filter is allowed as a changeable property. Adding a transition for filter is fine.
   - Add: maybe `backdrop-filter`? Not needed.
   - Since we can't add `:hover`, we can't do the "halo on hover". But the "glow effects" variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)". Without adding a :hover selector, I can't implement hover. However, I could use `animation` for a subtle pulsing glow — the variant mentions "Subtle pulsing animations". I can add a `@keyframes` animation. But adding `@keyframes` would add a new at-rule. The instruction says "animation-name (values like duration/timing CAN change)" — meaning if `animation-name` exists in the original, I can't change it, but can change values. But there is no `animation` in the original. Am I allowed to add an animation? The "NEVER CHANGE" list includes "@keyframes names (values inside CAN change)" — so @keyframes names exist in the original? There are none. Adding a new @keyframes is adding a new rule, which might violate "Keep ALL selectors ... exactly as-is". But @keyframes is not a selector per se. Hmm.

   To be safe, I won't add @keyframes. I'll just add box-shadow and transition.

   Actually, wait — transitions only apply when a property changes. Without a :hover, the transition won't trigger unless there's a class change or state change. But adding a transition is harmless and allowed. However, to satisfy the "glow effects" with pulsing, I could use an animation. Since there are no @keyframes in the original, adding one might be risky. But the instruction says "@keyframes names (values inside CAN change)" — this implies existing @keyframes names must be preserved. It doesn't explicitly forbid adding new ones. But "Keep ALL selectors and layout exactly as-is" — @keyframes aren't selectors. Still, adding @keyframes changes the file structure significantly.

   Let me consider: The file "saishi.css" block 2/2 — this is part of a larger file. Other blocks may have other rules. This media query is a block. I should output just this block. Adding @keyframes inside the media query is possible, and it would only apply on mobile. It doesn't break layout. But it's a new rule. The task says "Only change colors, shadows, radius, transitions, gradients." An animation isn't exactly a transition or gradient. But it's a decorative effect. The "glow-effects" variant explicitly calls for "Subtle pulsing animations". So adding an animation is aligned with the target.

   However, to keep it truly conservative, I will avoid adding new keyframes and instead design the glow with a static box-shadow, since the original selectors are unchanged. But that fails the "pulsing" requirement.

   Let me re-read: "✨ EFFECT VARIANT: glow-effects ... Subtle pulsing animations" — this is a target aesthetic, not necessarily a strict requirement. But since I'm asked to refresh with this style, I should try to incorporate a pulse. Since I can't add a :hover, an animation is the way to go. I'll add a @keyframes inside the media query. Is that allowed? The "NEVER CHANGE" says "@keyframes names (values inside CAN change)" — this is about preserving keyframes that exist. Adding new ones is not prohibited. But the output requirement: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Preserving selectors means the selectors in the output match the input. Adding @keyframes doesn't add a selector. I think it's acceptable.

   But wait — the output should be the rewritten version of this file block. If I add @keyframes, I'm adding rules. That's a bit more than "refreshing" but still within decorative changes. Since the target style explicitly asks for pulsing animations, I'll include a subtle pulse animation on the hero column and badge. But I must be careful: adding animation to a col might create layout-affecting visual changes? No, animation is visual only.

   Actually, let me be cautious. The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't mention animations. But the variant says "Subtle pulsing animations" — those would be animations. However, the "ANIMATION & MEDIA" section says "animation-name (values like duration/timing CAN change)" — this implies if there is an animation-name, I can change its duration/timing, but the name stays. Adding a new animation would require a new @keyframes and a new animation property. That's beyond "change" — it's "add". The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

   Hmm, "transition" is listed, "animation" isn't. To be safe and strictly follow the constraints, I should NOT add animations. I will stick to transitions, shadows, radius, gradients.

   But then the "Subtle pulsing animations" variant isn't satisfied. The user requested the variant though. Let me weigh: the user's explicit task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So the allowed changes are colors, shadows, radius, transitions, gradients. Animations are not listed. I'll follow the explicit task over the style guide's effect variant. I'll use transitions only, which can produce subtle pulsing if the property oscillates — but without keyframes, no oscillation. So no pulse. That's fine; the variant is a guide, not a hard requirement.

   Actually, I could implement a "pulse-like" effect using transition on an element that already toggles state? No, without keyframes, no.

   Alternatively, I can add a `transition` to the badge so that when the page loads, if a class is added dynamically, it animates. But that's not a pulse.

   Let me reconsider adding a @keyframes. The self-check says "Every selector character-for-character preserved?" — @keyframes is not a selector. "display, position, grid-template-*, flex-direction unchanged?" — yes. "width, height, padding, margin within ±20%?" — padding unchanged. "font-family, font-size, font-weight, line-height unchanged?" — font-size unchanged. "Colors throughout the file replaced with fresh palette?" — I'm adding colors. "Shadows redesigned?" — yes. "Border-radius adjusted?" — yes. "No AI marker comments?" — yes.

   I think adding a @keyframes is safe as long as the main selectors are preserved. But the instruction "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" could be interpreted as: the output CSS should be the same as input but with visual values changed. Adding @keyframes changes the structure. Yet the target style explicitly mentions pulsing animations. There's a tension.

   Given the explicit statement "Only change colors, shadows, radius, transitions, gradients", I will NOT add animations. I'll make the glow static and rich. The transitions will be present for interactive states elsewhere