/* ============================================================
   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 with a "masonry-flow" target style and "glow-effects" variant. But the original CSS is very small - it's just a media query with some rules. There's not much to work with here visually.

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

This is a mobile media query. The selectors are:
1. `.app-hero-section .row .col-lg-7` - has `text-align: center` (layout/typography - text-align is in the "don't change" list? Let me check: text-align is listed under layout/typography that should NOT be changed. So I need to keep `text-align: center`.)

Wait, the never-change list includes `text-align, vertical-align` under typography. So I can't change that.

2. `.app-hero-section .badge.bg-warning` - has `font-size: 0.85rem` (font-size is in the never-change list). So I can't change that.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - has `padding: var(--space-md) !important` (padding is in the never-change list, keep similar ±20%). I should keep padding.

So actually the original CSS has almost nothing that I'm allowed to change. The only things I could do:
- Add new visual properties that don't affect layout (like colors, shadows, radius, transitions, filters, etc.) to these selectors.
- But I must not change existing properties that are protected.

The instructions say: "You MUST change: All color values, box-shadow, text-shadow, border-radius, gradients, transitions, filter, backdrop-filter, opacity, outline styles, border-color, border-style, caret-color, accent-color, CSS custom properties."

But the original CSS has NO colors, NO shadows, NO border-radius, NO transitions, etc. It only has text-align, font-size, and padding.

So to refresh the visual identity, I can ADD new visual properties to these selectors. The instruction says "Only colors, shadows, and decorative properties may change" and "layout structure and class names" are fixed.

I need to:
1. Keep all selectors exactly.
2. Keep `text-align: center`, `font-size: 0.85rem`, `padding: var(--space-md) !important`.
3. Add visual enhancements consistent with "masonry-flow" (Pinterest-like white cards, soft shadows on light gray bg) and "glow-effects" (glow shadows, halo on hover, medium radius, subtle pulsing animations).

But wait - the padding uses `var(--space-md)`. I could redefine `--space-md`? The instructions say CSS custom properties (--color-*, --shadow-*) values can change. But `--space-md` is a spacing variable, not a color/shadow one. It's risky. Padding changes are allowed ±20% only. But redefining `--space-md` globally could affect a lot. Since we only output this snippet, and the variable is referenced, I shouldn't redefine it because it would change padding (which is protected). Better to keep the padding declaration as-is.

However, I can add decorative properties:
- For `.app-hero-section .badge.bg-warning`: add background gradient, box-shadow glow, border-radius, transition, etc. But careful: `bg-warning` is a Bootstrap class that sets background-color. If I add a background override, it might affect layout? No, background doesn't affect layout. It's a visual change. The instructions say all color values should be replaced with fresh palette. Since there's no color in the original, adding one is fine.

Wait, but the "target style" says "masonry-flow" with Pinterest-like white cards. However, this is a media query for mobile. The rule targets `.contact-channels-section article` and `.contact-quick-section .contact-card` - those are card elements. I could give them card-like styling: white background, soft shadow, border-radius, etc. But the original rule only sets padding. Adding background/shadow would be a visual identity refresh.

But adding `background` to a card that may already have a background could override existing styles. The instruction says I can change colors. Adding a white background to a Bootstrap card might not be desirable if the card already has one. But the target style says "white cards, soft shadows on light gray bg". Hmm.

Actually, let me re-read the task. The original CSS is being refreshed. My job is to produce output. The safest approach is to:
- Keep every existing declaration exactly as-is (since they're layout/typography protected).
- Add new visual properties (colors, shadows, radius, transitions, filters) to the same selectors to achieve the glow-effects and masonry-flow feel.

But there's a risk: The instructions say "Every selector character-for-character preserved?" - yes. "display, position, grid-template-*, flex-direction unchanged?" - yes. "width, height, padding, margin within ±20%?" - yes, keeping padding exactly. "font-family, font-size, font-weight, line-height unchanged?" - yes, keeping font-size exactly. "Colors throughout the file replaced with fresh palette?" - there were none, so I'll add fresh ones. "Shadows redesigned?" - added. "Border-radius adjusted?" - added.

The target style mentions "masonry-flow" with "flex-wrap: wrap with varied flex-basis" or grid. But I cannot change layout properties like flex-basis, grid-template-columns, etc. Since the original media query doesn't have any flex/grid, adding them would change layout - forbidden. So I should NOT add layout properties. The "masonry-flow" style guidance is about the overall design system, but since HTML is fixed and layout cannot change, I can only apply the color palette (Pinterest-like: white cards, soft shadows on light gray bg) and the glow effects.

The effects variant says:
- Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)
- Halo on hover: 0 0 32px rgba(accent, 0.6)
- Medium radius (8-16px)
- Subtle pulsing animations

So I can add:
- For cards: background: #fff, border-radius: 12px, box-shadow: 0 0 24px rgba(accent, 0.4), transition, hover glow.
- For badge: gradient background, glow, border-radius, maybe a pulse animation.

But adding `background: #fff` to an element might override existing background images/colors. The instruction says I MUST change all color values. In this snippet, there are none. Adding a background is consistent with the "visual identity" refresh. However, `.badge.bg-warning` is a Bootstrap warning badge (yellow). The target palette is Pinterest-like with accents. The badge could get an accent gradient (e.g., warm amber/peach) with a glow.

Let me also consider: the instructions say I can add `@keyframes` names but use existing names? Actually "animation-name (values like duration/timing CAN change)" means I keep animation-name values? Wait: "🎬 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 `@keyframes` names must be preserved if they exist, but I can add new keyframes with new names? It says "@keyframes names (values inside CAN change)" - so if I add new keyframes, I need to add new names. Since there are none in the original, I can add new ones. But adding new keyframes could be considered adding new selectors? No, keyframes are not selectors in the HTML-matching sense.

The media query is `@media (max-width: 575.98px)` - I must keep that exact condition.

Now, one concern: Adding `background` to `.contact-channels-section article` and `.contact-quick-section .contact-card` would set a white card background in mobile. That matches the target palette. But if the original card already has a background from another stylesheet, this would override it. That's fine - the task is a visual refresh.

But I should be careful with `!important` - the original padding uses `!important`. I'll keep the padding declaration intact and append new declarations after it.

Also `.app-hero-section .row .col-lg-7` - this is a column inside a row. Adding visual properties might not make sense (it's a text container). Maybe I can add a subtle text-shadow? The target says "text-shadow" can change. But this is a hero section on mobile, centered text. Adding a glow to hero text might be nice. However, I don't want to change text-align. Adding `text-shadow` would be a visual change. But the hero section might already have a heading; the `.col-lg-7` is a column wrapper. Text-shadow on the column would inherit? Text-shadow inherits, so the whole column's text would have a glow. That could be a nice "glow" effect. But risky - could look bad. However, the task is to add glow effects. Let me think.

The target style: "Pinterest-like: white cards, soft shadows on light gray bg. Each card may have its own accent strip." Since we can't add accent strips without pseudo-elements? Wait, can I add ::before/::after? The instructions say pseudo-classes (:hover, :focus, ::before, ::after) are preserved - meaning if they exist, keep them. Adding new pseudo-elements would change the selector list? Actually adding `::before` to an existing selector means creating a new rule with a new selector, which might be acceptable since it's decorative. But the instructions are strict: "Selectors: keep EXACTLY" - I think this means don't modify existing selectors, but adding new rules with pseudo-elements could be seen as adding new selectors that target the same HTML elements. The HTML is fixed, and pseudo-elements don't require HTML changes. Many CSS refreshes add pseudo-elements for decorative strips. But to be safe/conservative, I should avoid adding new selectors unless necessary. The instruction "Only colors, shadows, and decorative properties may change" suggests I can add decorative properties to existing selectors. Pseudo-elements are decorative. However, I'll be conservative and mostly add properties to existing selectors.

Actually, let me reconsider: The output should be "the rewritten CSS, preserving ALL selectors and layout exactly". Adding a new rule with `.contact-card::before` would be adding a selector not in the original. The instruction "Every selector character-for-character preserved?" means original selectors must be preserved, not that new ones are forbidden. But to be safe, I'll add a minimal number of new rules only if they're clearly decorative (e.g., ::before accent strip). Hmm.

Given the "CONSERVATIVE MODE" heading, I should minimize additions. I'll keep the three existing rules and add visual properties within those rules. I may add one `@keyframes pulse` for a subtle pulsing animation.

Let me draft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(255, 122, 89, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff6b6b);
        border: none;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 107, 107, 0.45), 0 4px 14px rgba(255, 107, 107, 0.25);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
        animation: glow-pulse 2.4s ease-in-out infinite;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 32px rgba(255, 107, 107, 0.65), 0 6px 20px rgba(255, 107, 107, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border: 1px solid rgba(255, 122, 89, 0.12);
        border-radius: 14px;
        box-shadow: 0 2px 16px rgba(94, 96, 206, 0.08), 0 0 24px rgba(255, 122, 89, 0.18);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 8px 28px rgba(94, 96, 206, 0.14), 0 0 32px rgba(255, 122, 89, 0.4);
        transform: translateY(-2px);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 24px rgba(255, 107, 107, 0.45), 0 4px 14px rgba(255, 107, 107, 0.25);
    }
    50% {
        box-shadow: 0 0 32px rgba(255, 107, 107, 0.65), 0 6px 20px rgba(255, 107, 107, 0.35);
    }
}
```

Wait - `transform: translateY(-2px)` - is transform a layout property? It's a visual/transform property. The instructions list "filter, backdrop-filter" as changeable, and "opacity" etc. Transform isn't explicitly listed. But it's a decorative animation property that doesn't change the layout structure (it's a visual transform, no reflow). However, the "NEVER CHANGE" list doesn't mention transform. Adding transform on hover is a common visual effect and doesn't change layout. But `transition` includes transform. It should be fine. However, `transform` on a card can create a stacking context; still not layout-affecting.

But wait - the instructions say padding and margin must stay similar. Adding `transform: translateY(-2px)` on hover is a visual effect, not a permanent layout change. I'll keep it subtle or omit it. Hmm, conservative mode - maybe I should avoid transform to be safe. Instead of transform, I can rely on box-shadow changes for the halo effect. The effects variant only mentions shadows and pulse animations, not transforms. So I'll skip transform.

Also, adding `background: #ffffff` to `.contact-channels-section article` and `.contact-quick-section .contact-card` - that's a color change. Good. But what if those cards already had backgrounds and this overrides? That's fine.

The badge: `.badge.bg-warning` already has a Bootstrap background. I'm overriding with a gradient. Also Bootstrap badge has `border-radius: 0.375rem` by default. I set `border-radius: 12px` which is medium radius (8-16px). Good.

But I also set `border: none` - is border-style allowed to change? "border-color and border-style (NOT border-width)" can change. Bootstrap badges have `border: 1px solid transparent` typically? Actually `.badge` has no border by default. `border: none` sets border-style to none, which is allowed. But it's safer to just leave border alone or set `border: 0`. Actually `border: none` changes border-style and border-width. Border-style is allowed to change. OK.

Wait, but if I set `border: none`, that's shorthand for `border-style: none; border-width: medium; border-color: currentcolor`. That's allowed. But maybe I should just not add a border at all. Hmm.

For the hero column text-shadow: text-shadow is in the "must change" list (if present) and I can add it. But would it affect much? The `.col-lg-7` contains the hero text. A soft glow could look nice but might be too much. The effects variant says glow shadows in accent color. I'll use a subtle one.

Now, what about the `@keyframes glow-pulse` - I'm adding a new keyframes name. That's allowed since the original had none. But I need to make sure `animation-name` I reference exists. Good.

However, I'm a bit concerned about adding `:hover` rules. The original CSS has no `:hover` selectors. The instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" must be kept exactly - but if they don't exist, can I add them? Adding `:hover` pseudo-classes is a decorative enhancement and doesn't change HTML or layout. I think it's acceptable; the effects variant explicitly mentions "Halo on hover: 0 0 32px rgba(accent, 0.6)", which requires a hover rule. So adding `:hover` is necessary to fulfill the variant.

But to stay conservative, maybe I can combine the hover effect into the same rule using a `transition` and an existing hover? No, I need a hover selector. I'll add hover rules for the badge and cards.

Now, about the padding `var(--space-md)`: The instructions say CSS custom properties values can change, but only `--color-*` and `--shadow-*` are mentioned in parentheses. `--space-md` is a spacing variable. Changing it would affect layout (padding), so I must NOT change it. I'll keep it