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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite the CSS visually. Original CSS has media query with three rules. We need to keep selectors exactly, keep layout properties unchanged. Only colors, shadows, radius, transitions, gradients, etc. But original CSS is mostly font-size and padding, which are not allowed to change? Wait, padding can change ±20%. But font-size is not allowed to change (typography fixed). However, the rules are selectors with font-size and padding. But the instruction says keep same layout and typography. The original only has font-size and padding. We cannot change font-size. Padding can change ±20% but need to keep similar. Also there's a var(--space-md) value — we can change the variable? But the variable is likely defined elsewhere. However, the CSS we output should preserve the property names and selectors. We must not change font-size. We could change padding? But layout constraint says width, height, padding, margin keep similar ±20%. We could adjust padding slightly. But the target style is horizontal-strips, but this is just a media query small snippet. We need to apply visual changes: colors, shadows, radius, etc. However there are no color properties currently. We could add color-related properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." We can add new properties to existing rules? The original rules have font-size and padding. We could add color, background, border-radius, box-shadow, text-shadow, etc. But we must ensure not to alter layout. Adding box-shadow or color doesn't affect layout. Adding backdrop-filter could affect but not layout. But we must keep the selectors and existing properties. We should probably replace the values with new values? But font-size cannot change. So we should keep font-size as is. Padding can be adjusted slightly for new style. The target style is horizontal-strips, but this is a media query for small screens. Maybe we can apply visual enhancements within these rules.

But the output must be ONLY the rewritten CSS. Since the file fingerprint includes entire file? Actually the file is assets/css/saishi.css and we are given a block #2/2, meaning the second block of the file? The original CSS snippet is just this media query. We need to rewrite it. But the target style suggests the whole file should be redesign, but we only have this snippet. We need to apply visual identity changes to these rules. We can add color, background, border-radius, box-shadow, etc. However we cannot add arbitrary selectors, only existing selectors. We can add new declarations inside existing rules. We can also modify existing declarations' values (except font-size, etc.).

We need to be careful: The first rule selector is `.app-hero-section .row .col-lg-7` with text-align: center. Text-align is layout? It's not allowed to change. So keep.

Second rule `.app-hero-section .badge.bg-warning` with font-size: 0.85rem. Font-size cannot change. Keep. But we can add background, color, box-shadow, border-radius, etc. to that badge. The class bg-warning is Bootstrap likely yellow. We can override background and color perhaps, but text-align? Not relevant.

Third rule `.contact-channels-section article, .contact-quick-section .contact-card` with padding. Padding can change ±20%, but the original uses var(--space-md). We can change the value to a custom valid padding, but must keep within ±20% of the computed value? We don't know --space-md value. But maybe we can leave it or change to a fixed value. If we change to fixed, might not match. Better to keep var(--space-md) to avoid layout change. But we can add border-radius, box-shadow, background, transition, etc.

We need to implement glow-effects: glow shadows, halo on hover, medium radius, subtle pulsing animations. Since we have only these three selectors, we can apply effects to them. Also target style horizontal-strips: alternating backgrounds, full-width sections. But our selectors are within hero and contact sections. We can set backgrounds to alternate? The hero section .col-lg-7 is a column, not full-width. We could add background gradient? Hmm.

We must respect "strong color zones" maybe via background on the badge, card, etc.

Let's read the constraints again. In aggressive mode? Actually the mode is conservative. The target style says "Layout pattern (Aggressive only): ..." but the task says conservative. So we cannot change layout structure. We can only change visual properties.

Thus, for this snippet, we should produce a refreshed CSS with new colors, shadows, radius, transitions, gradients. Since the original CSS only has three rules, we can add properties. But we need to ensure all property changes are within the allowed categories. We cannot change display/position etc. Adding background is okay. Adding box-shadow is okay. Changing font-size is not. Changing padding within ±20% is okay. However we don't know the original value. The original uses var(--space-md). If we change to e.g., `1.75rem !important` maybe that's within ±20%? --space-md in many design systems is 1.5rem or 2rem. We could keep it to be safe.

We need to output the CSS with the same selectors, same existing declarations (possibly with adjusted values), and new declarations.

Let's plan:

Original:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

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

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

We need to "refresh this CSS visually". We'll keep the media query and selectors exactly. We can modify values:

- `.app-hero-section .row .col-lg-7` keep text-align: center; add maybe background? But text-align center is already there. Adding a background could make it a "strip"? But the column isn't full width. We could add a subtle text-shadow to headings? But selector is on column, not heading. Maybe add a background gradient to the column? But that would be a visual change. However, the column may contain content; adding background could look like a strip. But careful: the column is inside a row; adding background to col-lg-7 could be okay. But it might change layout? Background doesn't affect layout. We can add border-radius, padding? We can add padding? That would change layout if padding wasn't there before. Better not add layout properties. Only add visual ones like background, box-shadow, border-radius? Border-radius would have no effect unless background exists. We can set `background: linear-gradient(...)` and `border-radius: 16px;` and maybe `box-shadow: 0 0 24px rgba(accent, 0.4);`. But this might create a block with background. Yet the column has text-align center; if we add background, it will apply to entire column area. Does that preserve layout? Yes, background doesn't affect layout. Padding/height unchanged. So okay.

- `.app-hero-section .badge.bg-warning` keep font-size: 0.85rem. We can add a new background color, color, border-radius, box-shadow, maybe transition. This would change visual identity. The badge with bg-warning probably has yellow background; we can override with a new accent color glow. Need to ensure the selectors match Bootstrap classes. Since we're changing visual identity, we can define new background and color. Use `background: linear-gradient(135deg, #... , #...)` or a solid. Add `box-shadow: 0 0 16px rgba(...)`. Add `border: 1px solid rgba(...)`. Add `transition: box-shadow 0.3s ease, transform 0.3s ease;` But `transform` is a layout property? Transform can affect visual layout but not layout structure. However, the instruction says layout properties like display, position, etc. unchanged. Transform is not listed. It might be allowed? It says "only colors, shadows, and decorative properties may change." Transform is decorative. But it could move elements. Yet we can skip transform transitions to be safe. We can add `transition: box-shadow 0.3s ease, background-color 0.3s ease;` That's allowed.

- `.contact-channels-section article, .contact-quick-section .contact-card` keep padding: var(--space-md) !important. We can add background, border-radius, box-shadow, transition, maybe `backdrop-filter`. Add `background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 24px rgba(accent,0.2);` But backdrop-filter can affect visual. It's allowed. Need to be careful about compatibility. Also add `transition: box-shadow 0.3s ease, transform 0.3s ease;` Again transform maybe.

Since the target effect has "Halo on hover: 0 0 32px rgba(accent, 0.6)" and "Subtle pulsing animations", we need to add `@keyframes`? But the file snippet lacks any @keyframes. We can add a new @keyframes inside the media query? The original CSS has no keyframes. We can add a new keyframe animation for the visual effect. But we need to preserve the media query block. We can add `@keyframes glowPulse` inside or outside the media query. Since we're only outputting the rewritten CSS, we can include new keyframes? The instruction says preserve selectors, but adding keyframes doesn't conflict. However, the output should be the rewritten CSS for the provided snippet. It may be okay to add @keyframes. But we must ensure "No markdown fences" and no extraneous comments. The keyframes name can be new. But the instruction: "@keyframes names (values inside CAN change)" means if there were existing keyframes, we can change values but not names. But there are none. Can we add new @keyframes? The task is to "Refresh this CSS visually" in this block. It would be acceptable to add animation declarations and a keyframe. But we must not change the media query conditions. If we add keyframes inside the media query, the animation is only for small screens. That's fine.

But adding a new @keyframes might be considered "new selector"? It's not a class/ID/element selector. It's an at-rule. The constraints say selectors preserve. We can add at-rules? The original has @media. So adding @keyframes is allowed? It doesn't change HTML. It's a decorative property. However, the target style says "Subtle pulsing animations". We can implement by adding `animation: glowPulse 2s infinite alternate;` to badges/cards. That requires keyframes. We can define keyframes.

But we need to be careful: The provided block is only the media query. If we add @keyframes outside, it will be part of the rewritten CSS. That's fine.

Let's craft a cohesive new palette. Since target style is "horizontal-strips" and "glow-effects", we need a fresh palette. We can use cream, dark, white alternating. For these specific components, we can set:

- Hero column: cream background with subtle orange glow? Or maybe white. But since hero section is likely at top, we can make it a light cream zone: `background: #FFF9F0;` with a soft glow `box-shadow: 0 0 40px rgba(255, 170, 60, 0.25); border-radius: 16px;` But the column might contain headline; adding a background to the whole column might create a card-like effect. That's a visual change.

- Badge: accent color (e.g., amber/orange) with glow. Use `background: linear-gradient(135deg, #FFB84D, #FF8A3D);` color `#1F1A17` or white. `box-shadow: 0 0 16px rgba(255, 138, 61, 0.5); border-radius: 999px;` (badge pill). Also `animation: glowPulse 2s infinite ease-in-out;`

- Contact cards: white/cream with dark? Could alternate? But the selector covers both article and contact-card. We can set them to a versatile design: `background: rgba(255,255,255,0.8); border: 1px solid rgba(255, 170, 60, 0.3); border-radius: 16px; box-shadow: 0 12px 32px rgba(120, 70, 20, 0.12), 0 0 24px rgba(255, 138, 61, 0.25); backdrop-filter: blur(8px); transition: box-shadow 0.3s ease, background-color 0.3s ease, transform 0.3s ease;` But adding transform could cause movement on hover; maybe okay. We can even add `@media (hover:hover)` for hover effect on the cards? Wait, we are already inside a small screen media query. Hover on small screens isn't typical, but we can still add pseudo-class :hover? The instruction says pseudo-classes (:hover) are selectors and we must keep them, but we can add new ones? The selector list can't change? Actually we are allowed to add new rules with existing selectors plus pseudo-class? The instruction says "Selectors: keep exactly" for the given CSS. But we can add new selectors? It says "HTML is fixed — only colors, shadows, and decorative properties may change." That implies we may add new CSS rules with selectors that already exist in HTML. But the prompt says "Keep ALL selectors and layout exactly as-is." This likely means do not rename/restructure existing selectors, not that you cannot add new rules. But to be safe, we should not introduce new CSS rules, only modify existing rules. However, we can add hover declarations to existing rules? To have hover, we need a separate rule with `:hover` selector. That would be a new selector. But the instruction says "No markdown fences... Only the rewritten CSS" — we can output a new rule? Hmm.

Let's reread the prompt: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." Then later in "NEVER CHANGE" it includes "Pseudo-classes (:hover, :focus, ::before, ::after)" meaning preserve existing pseudo-classes. It does not say you cannot add new ones. But then in "SELF-CHECK" it says "Every selector character-for-character preserved?" That could mean all selectors in the input are preserved, but new ones could be added. However, the phrase "Selector lists (commas)" etc. The safest interpretation: The output should be only the original selectors with modified declarations. Adding new selectors might be considered changing the file structure. In the example of CSS transformation tasks, the original selector set is the contract. We should not introduce new selectors. Therefore, we cannot add `:hover` rules. Maybe we can use `transition` to imply hover? No, without :hover rule, no hover effect.

But we can still create a pulsing animation using `animation`, which doesn't require new selectors. That satisfies glow-effects. Also the "halo on hover" maybe we can't implement because no hover rule. We could add `@media (hover:hover)` rule? No.

Given the constraint "Selectors: keep EXACTLY" we will not add any new selectors. We will only modify the declarations of the existing rules. We can still add `animation` property, so pulsing animations work. We can add box-shadow to badges and cards. The "halo on hover" could be achieved through animation pulsing between normal and stronger glow. That's acceptable.

We need to choose a color palette. "horizontal-strips" suggests alternating zones. But we only have three selectors. We can assign:

- Hero column: warm cream/light background strip.
- Badge: strong color zone (accent).
- Contact cards: white/glass with dark/cream contrast.

Let's define colors:

Primary accent: warm amber/orange #F7931E maybe.
Dark: #262220
Cream: #FFF8F0
White: #FFFFFF
Alternative accent for glow: maybe teal? But horizontal-strips might want alternating dark/cream. Since only three components, maybe make the hero column dark? But hero section likely has text; text color defaults dark. We can't change text-align but can change color? To keep readability, if we set background dark, we need to set body text color? The selector is the column; descendants are headings and paragraphs. We can set `color: #FFF;` on the column, but that would inherit to all descendants if no explicit color. That could be okay. But the instruction says typography fixed, but color is allowed. So we can make the hero column a strong dark zone with glow. However, the badge is inside the hero column; if the column is dark, the badge should stand out. The contact cards could be cream. But the target pattern is "white / cream / dark / white". Let's do:

- Hero column: dark background `#1E1B18` with a warm glow: `box-shadow: 0 0 32px rgba(247, 147, 30, 0.35); border-radius: 16px; color: #FFF7EF;` This creates a strong dark zone.
- Badge: amber/orange gradient with glow: `background: linear-gradient(135deg, #FFB347, #FF8C42); color: #1E1B18; box-shadow: 0 0 16px rgba(255, 140, 66, 0.6); border-radius: 999px;`
- Contact cards: cream/white: `background: #FFF9F0; border: 1px solid rgba(247, 147, 30, 0.25); border-radius: 16px; box-shadow: 0 12px 32px rgba(120, 70, 20,