/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to refresh the CSS visually while keeping selectors and layout unchanged. The original CSS is a media query block with some mobile styles. We can only change visual properties: colors, shadows, radius, transitions, gradients, opacity, etc. But we must not change font-size? Actually the original has font-size: 0.85rem for badge. That's typography, and we are not allowed to change font-size. So we need to keep that. Also padding is in the original, but padding is layout and we can change within ±20%. The original uses --space-md variable. We can change the value? The variable is defined elsewhere, but the rule uses padding: var(--space-md) !important;. We can change padding? We could change to a different value, but must be careful. We are allowed to change padding/margin within ±20%. Since it's a var, we could either leave it or replace with a different padding value that is visually similar. But the instruction says "layout structure and class names" fixed, but "padding, margin (keep similar values, ±20% maximum)". So we can adjust but not dramatically. The original padding uses a custom property, but we don't know its value. We might keep it or change to a literal value approximately similar. However, we should probably preserve the var usage because removing CSS variables might be considered changing custom property usage? The allowed changes include "CSS custom properties (--color-*, --shadow-*) values". So we can change values of custom properties, but not remove them. Since --space-md is not a color/shadow, we should not change that. Keep it.

The media query structure: @media (max-width: 575.98px) { ... } with three rules. We can add new rules? No, must preserve selectors exactly. We can modify the declaration blocks by adding new visual declarations (like box-shadow, border-radius, background, etc.) as long as we don't change layout. But we need to be careful not to add properties that affect layout? Any property that is not in the "never change" list is allowed. We can add color, background, box-shadow, text-shadow, transition, etc. We can also change existing color property. The original has none. So we need to inject visual identity.

We must output only rewritten CSS, preserving all selectors exactly. The selectors are:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

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

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

We need to keep text-align: center, font-size: 0.85rem, padding: var(--space-md) !important. But we can add color, background, etc. The first rule is for a column in hero section; we can add text color maybe? But that might change global color? It's okay, visual. The second rule for badge: we can add background, color, border-radius, box-shadow. The third rule for contact cards: add border-radius, background, box-shadow, transition.

But we must keep the media query condition unchanged. The output should be the entire CSS, with same selectors and layout declarations unchanged, plus new visual declarations.

We also need to ensure we don't change font-size. The second rule has font-size: 0.85rem; keep exactly.

We can change padding? It's already using var. We'll keep it. But we might want to adjust? Not needed.

We need to use the target style: editorial-magazine with glow effects. Colors: cream/beige background (#f5f1e8), ink black text (#1a1a1a), accent deep red (#c44536) or olive (#6b705c). We'll choose deep red as accent. Glow shadows: 0 0 24px rgba(accent, 0.4), halo on hover 0 0 32px rgba(accent, 0.6). Medium radius 8-16px.

We need to apply to the existing selectors. Since they are inside a mobile media query, we can add mobile-specific visual enhancements.

Let's craft:

For the first rule .app-hero-section .row .col-lg-7:
- This is a col. We could add text color: #1a1a1a (ink) maybe already inherited. But we can set color explicitly. Maybe add a subtle text-shadow? But hero text might be heading. We can add text-shadow for editorial feel? But be careful not to affect readability. Set color: #1a1a1a; and text-shadow: 0 1px 0 rgba(255,255,255,0.3) maybe? Or glow? But on mobile center align, maybe a subtle glow not needed. Let's add a subtle drop shadow? Actually we can add a gentle text-shadow with accent tint: text-shadow: 0 0 24px rgba(196,69,54,0.15); This is a glow effect. Since there is no background, the text will get a soft glow. That is a visual change.

For second rule .app-hero-section .badge.bg-warning:
- Original badge likely uses Bootstrap bg-warning (yellow). But we can override background with our accent? The selector uses .badge.bg-warning, which has Bootstrap background. We can override with background: linear-gradient(...) or background-color. We need to keep the layout but can change color. Use accent deep red background, white text. Add box-shadow glow, border-radius, border? We can add border: 1px solid rgba(255,255,255,0.3)? But border-width is not to be changed? Actually border-width is in the "never change" list? Wait, "border-color and border-style (NOT border-width)" means we can change border-color and border-style, but not border-width. So we can add border: 1px solid ...? That would set border-width if not already present. The original has no border. Adding a border with a width is adding a new border-width, which would affect layout? It adds to element size but box-sizing might handle it. But the rule says "NOT border-width" meaning do not change border-width values. If original has no border, adding one might be considered adding a new border-width, not allowed? The allowed list: "border-color and border-style (NOT border-width)" — meaning we can change color and style, but cannot change width. If there is no width, we should not add a width. So avoid adding border. Instead use box-shadow to simulate.

We can set background-color: #c44536; color: #fff; border-radius: 50rem? But border-radius is allowed. For a badge, rounded pill shape is common. But original .badge likely already has border-radius. We can override with a medium radius? Actually badge may have its own border-radius. We can set border-radius: 8px; or 16px. Let's use 12px. But if it's a pill, 12px might change shape. The instruction allows border-radius visual rounding. So we can set border-radius: 12px; and box-shadow: 0 0 24px rgba(196,69,54,0.4); This creates glow. Add transition: box-shadow 0.3s ease, background-color 0.3s ease; But there is no :hover rule for this badge in original. We can't add a :hover rule because selectors must stay exactly as original. The instruction says pseudo-classes are preserved, but we cannot add new ones because HTML is fixed? It says "Pseudo-classes (:hover, :focus, ::before, ::after)" as selectors to keep exactly. In output, we should not add new selector rules. We could add a transition on the existing rule so when a hover occurs (from browser default or other CSS), it transitions. That's fine.

For third rule .contact-channels-section article, .contact-quick-section .contact-card:
- This is a list selector. Add background: #f5f1e8? But the body background might already be that. We can set background-color: rgba(255,255,255,0.5) maybe? To make cards stand out. Or use linear-gradient with cream and white. Use color: #1a1a1a. Add border-radius: 16px. Add box-shadow: 0 0 24px rgba(196,69,54,0.15) or a multi-layer shadow. Since these are contact cards, we can give them a soft glow and an inner highlight. We can add transition: box-shadow 0.3s ease, transform 0.3s ease. But transform is layout? Actually transform is in visual effects? The "never change" list doesn't mention transform. But changing transform on hover would need a hover rule. We can't add hover. But we can set transition property, but without a hover state, it won't animate. But it's okay to have transition for when hover rules from external CSS apply. However, if we add transform in the rule itself, that would change layout/positioning. So avoid.

We can add box-shadow: 0 4px 12px rgba(26,26,26,0.08), 0 0 24px rgba(196,69,54,0.2); This is a multi-layer shadow with a subtle glow. Use border-radius: 16px. Also maybe set backdrop-filter: blur(4px) if background transparent. But let's not overdo.

Also, we need to ensure the output has no markdown fences and no comments. We'll write the CSS exactly.

One more thing: The first rule already has text-align: center; we can keep that and add color and text-shadow. But if we add color, it might override a more specific color for children? It's okay.

We need to preserve the original declarations exactly. So each rule must include the original declaration(s) unchanged (except visual ones? Actually text-align is not visual? It's layout/text alignment, and it's in the "never change" list? The list includes text-align, vertical-align. So we must not change it. Keep it. font-size is in never change. Keep. padding is in never change but can be adjusted ±20%; we'll keep the exact var usage to be safe.

We can add new declarations after the originals in each rule.

Let's construct:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 0 24px rgba(196, 69, 54, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536, #a03628);
        color: #fff;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(245, 241, 232, 0.85);
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(26, 26, 26, 0.06), 0 0 24px rgba(196, 69, 54, 0.18);
        backdrop-filter: blur(4px);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}

But wait: The backdrop-filter property changes visual with blur. Is that allowed? Yes, allowed. But we must be careful: backdrop-filter may create a new stacking context, but that doesn't affect layout. Fine.

However, we need to ensure the padding is kept exactly as original. The original uses var(--space-md) !important. We keep it. We also added background etc. But note: if we add background to the same rule, it might override the body background for the card? It's fine.

The "col-lg-7" rule: we added text-shadow. That's good. But if the hero section has a background image, text-shadow might help.

The badge rule: original might rely on .badge.bg-warning having a yellow background. We are overriding with red. That's a visual identity change. The "bg-warning" class name remains but the appearance changes. That's allowed? The instruction says "Class names: keep EXACTLY" — we are keeping the selector. The class name still exists, but the visual is changed. Yes, allowed because we're changing colors.

One potential issue: "bg-warning" in Bootstrap has a yellow background. If we override with background gradient, the badge will no longer be warning color. But target style asks for a single accent color, so we can make it accent. Good.

But we need to be careful with the rule order. The original file may have other rules outside this media query. We are only outputting the rewritten version of this snippet. The task says "File: assets/css/saishi.css#块2/2" — perhaps they want us to rewrite this chunk only? The instruction says "Output the rewritten CSS now" and we have the original CSS as the chunk. So we should output the entire chunk rewritten.

Let's double-check allowed property changes:

- background: allowed (color values, gradients).
- border-radius: allowed.
- box-shadow: allowed.
- text-shadow: allowed.
- transition: allowed (timing, easing, duration).
- backdrop-filter: allowed.
- color: allowed.

We did not change:
- text-align: kept.
- font-size: kept.
- padding: kept.
- !important: kept? The original has !important on padding. We kept it. Good.

We must not add any new selectors. We did not.

One thing: The selector list .contact-channels-section article, .contact-quick-section .contact-card has two selectors. We preserved exactly.

Now, should we include the original media query exactly? Yes.

Let's think about the "glow-effects" variant: "Subtle pulsing animations" — but we cannot add @keyframes because we are not allowed to change @keyframes names? Actually we can add new @keyframes? The instruction says "@keyframes names (values inside CAN change)" — meaning we can change values inside existing keyframes, and names stay same. But adding a new @keyframes would be a new selector? The never-change list includes "@keyframes names" as things to keep. It doesn't say we can't add new ones. However, adding a new @keyframes would introduce a new selector (keyframe name) and a new animation property on existing rule. Is that allowed? The "selectors" list doesn't include keyframes, but it says "Pseudo-classes (:hover, :focus, ::before, ::after)" etc. It doesn't mention @keyframes except "@keyframes names" in the never change list. It says "@keyframes names (values inside CAN change)" — so the name must remain if it exists, but we can add new? Normally in a conservative refresh, we should avoid adding new animation names because it could be considered a structural change? Actually adding an animation to an existing rule would change behavior, but it's visual. However, if we add a keyframes with a new name, that's a new rule. It could be okay, but the task says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." If we add a new @keyframes rule, we are adding a new selector (the keyframe name). That might violate "preserving ALL selectors" because we are adding a selector. Better to avoid. Since the original has no animation, we won't add pulsing. The "subtle pulsing" is an effect variant, but we need to consider whether we can apply it without adding keyframes. We could set an animation using an existing keyframe name? But we don't know if any exist. Better to skip pulsing, or use CSS transitions that simulate pulse? Not possible. We can use `animation` with a standard name? That would require keyframes. Since we cannot add keyframes, skip pulsing. The glow shadows and halo on hover are enough. But halo on hover requires a hover selector, which we can't add. However, if there is already a hover rule elsewhere for these cards, our transition will apply. But we cannot add a hover rule. So we just set up transitions and shadows. That's acceptable.

Alternatively, we could add a `@media (hover: hover)` or `:hover`? No, not allowed.

Thus our output is good.

Let's refine the shadows to be more editorial and glow.

For the contact cards, we want a cream/beige background. In the target palette, the overall background is #f5f1e8. So on mobile, the cards might sit on that. We can set background to rgba(255,255,255,0.6) or a linear gradient from #fff to #f5f1e8. But we need to keep the padding. Let's use `background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(245,241,232,0.4));` and `backdrop-filter: blur(6px);` This creates a frosted glass effect. But note: backdrop-filter can be heavy on mobile. Still allowed.

Actually, we need to be careful: Adding `background` to the contact cards may change the visual of the entire card, which might have images or icons. It's fine.

Maybe we should not set a background that is too opaque because it may hide underlying content. Use semi-transparent.

Let's also consider the badge: We should keep the .badge font-size unchanged, but add `font-weight`? Not allowed. So no.

Maybe add `box-shadow: 0 0 24px rgba(196,69,54,0.4), inset 0 1px 0 rgba(255,255,255,0.2);` That's nice. And `background: linear-gradient(135deg, #c44536, #8c2e22);`

For the hero text, maybe don't