/* ============================================================
   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 given CSS visually while preserving layout. The original CSS is short, media query block. Target style: vertical-flow, warm minimal palette (off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a). Effect: glow-effects: 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.

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

We can change visual properties. The selectors remain same. The declarations allowed: we must not change text-align (it's typography/alignment? Actually text-align is listed under typography and layout? It says text-align, vertical-align under layout that we shouldn't change? Let's check: In NEVER CHANGE list: "text-align, vertical-align" is under 📐 LAYOUT. So we cannot change text-align. Also font-size cannot change. So in first rule we cannot change text-align: center; because that's layout/typography fixed. But we could add other visual properties to the same selector? The instruction: "You must change all color values... Only change colors, shadows, radius, transitions, gradients." But we can add new decorative properties? It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can modify existing values and add properties that are visual (color, background, border-color, box-shadow, text-shadow, border-radius, transition, etc.) but cannot alter layout/typography properties. We could add background, border-radius, box-shadow, etc. to the elements. But carefully: adding padding would be layout, but we are told not to change padding. Adding background wouldn't change layout. We can add border-radius, box-shadow, transition. However, we must preserve existing padding? The original has padding: var(--space-md) !important; in third rule. We cannot change it, but we could add background, border-radius, box-shadow, transition. We must not change font-size, text-align.

But the task says "You MUST change (visual identity only)": all color values, box-shadow, text-shadow, border-radius, gradient colors, transition timing, filter, opacity, outline, border-color/style, caret-color, accent-color, CSS custom properties. Since there are no colors currently, we need to introduce visual properties. The target style asks for glow effects, accent color, etc. We need to ensure we aren't changing layout properties. So we can add new declarations to existing rules, as long as we don't change the protected properties. But if we add box-shadow, transition, background, border-radius, that's fine. But the output should preserve selectors and existing declarations? The instruction says "Only change colors, shadows, radius, transitions, gradients." So we are not supposed to change text-align and font-size, but we can leave them as they are. We can add new properties. We should keep the existing declarations exactly? It says preserve selectors and layout exactly. It doesn't explicitly say preserve existing non-visual declarations, but in "NEVER CHANGE" it says these properties cannot change. The existing text-align: center; and font-size: 0.85rem; are in the NEVER CHANGE list, so we must keep them as-is. Padding is also in never change but we can keep. Actually padding is allowed to change within ±20% but we should better keep same to be safe, or modify slight? Since the instruction says "Only change colors, shadows, radius, transitions, gradients" and padding isn't listed as allowed, I will not modify padding. The original has !important; we should keep !important? Important is not a property, it's a flag. We should keep it to preserve specificity behavior, but after visual refresh maybe we can keep. Yes, keep !important.

We can add new properties in each rule:

First rule: `.app-hero-section .row .col-lg-7` on mobile:
- Could add background? But this is a column container, adding background might affect layout? Background doesn't affect layout. Could add border-radius, box-shadow? Might be weird. Better to just leave as is? But task says "Refresh this CSS visually" meaning we should make changes. We can add a subtle glow? Hmm.

Maybe we can restyle the badge in second rule:
- `.app-hero-section .badge.bg-warning` : We can change background-color? The class is .bg-warning which is a Bootstrap class; we can override background-color, color, border, box-shadow, border-radius, transition. For example use terracotta accent, glow shadow, radius. But we must not change font-size. We can add `background-color`, `color`, `box-shadow`, `border-radius`, `transition`.

Third rule: `.contact-channels-section article, .contact-quick-section .contact-card`:
- We can add background, border-radius, box-shadow, transition, maybe border. But careful: these elements might already have background from other CSS; adding here only affects mobile. Could give cards a warm off-white background, soft shadow, glow on hover? We can add `transition: box-shadow 0.3s ease, transform 0.3s ease;` but transform is not listed as forbidden? It's not listed in NEVER CHANGE? It says layout properties include position, display, flex, grid, width, height, padding, margin, gap, justify/align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, text-align, vertical-align. Transform is not in the list, but changing transform might affect visual layout (move element). The instructions say "Only change colors, shadows, radius, transitions, gradients." Transform isn't among those, so avoid adding transform. We can add transition on box-shadow, background-color, border-color, border-radius. That is okay. But note transitioning border-radius is not always desirable but allowed. We can add `transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;`.

We need to incorporate glow-effects variant: "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" and "Halo on hover: 0 0 32px rgba(accent, 0.6)" but we can only do hover if there is :hover selector. The original CSS doesn't include :hover. We could add :hover selectors? But "Selectors are fixed" — we cannot add new selectors? Actually the instruction says "Every selector character-for-character preserved?" It means we cannot remove or rename existing selectors, but can we add new selectors? Typically in these tasks, we are to rewrite the CSS, and we should preserve all existing selectors but we may add new declarations/rules? The output says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." It doesn't explicitly forbid adding new selectors, but "HTML is fixed — only colors, shadows, and decorative properties may change." Adding a :hover rule for existing elements is a decorative change? It changes hover behavior, but it's a pseudo-class, and pseudo-classes are listed as "Pseudo-classes (:hover, :focus, ::before, ::after)" under NEVER CHANGE selectors. That means the existing pseudo-classes cannot be changed, but adding new pseudo-class selectors is probably not allowed because the selector list would differ. It says "Selectors may not be changed" meaning don't alter existing; adding new selectors would be altering the CSS structure? The safest is to not add new rules, only modify existing rules and add properties to them. But then how to implement hover glow? The variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)" and "Subtle pulsing animations". We could use `@keyframes` and animation property on existing elements, but adding keyframes is not a selector? Keyframes names can be added? The rule says "animation-name (values like duration/timing CAN change)" but adding new @keyframes? Typically yes, we can add @keyframes because it doesn't affect selectors. And we can add `animation: pulse 3s infinite;` to existing rules. But "animation-name" is in NEVER CHANGE? Actually under ANIMATION & MEDIA: "@keyframes names (values inside CAN change)", "animation-name (values like duration/timing CAN change)". Wait, it says animation-name is in the "NEVER CHANGE" list? Let's read: "🎬 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)"

Actually it says animation-name is a property whose value like duration/timing can change. It's under a header that seems to list things we shouldn't change? Wait the section heading: 🎬 ANIMATION & MEDIA: Then bullet points. It includes "@keyframes names (values inside CAN change)" — this is ambiguous. In the outer instructions, "NEVER CHANGE" list includes "animation-name" maybe? Let's parse: The top instructions say:

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

This is under "NEVER CHANGE" section, meaning these cannot be changed except values inside. Wait it says "animation-name (values like duration/timing CAN change)" meaning the property animation-name cannot change but its values? No, animation-name should stay the same? Actually the never change list includes "animation-name" but says values like duration/timing can change. Hmm, I'd interpret: don't change the @keyframes names, don't change media query breakpoints, etc. But within @keyframes, values can change. For animation-name property, you can change duration/timing etc. So we could add animation properties? But if we add a new @keyframes, that's a new name, and we'd be adding an animation-name, which might be considered changing animation-name? The instruction says "animation-name (values like duration/timing CAN change)" — it doesn't forbid adding new animation names? It says "animation-name" in never change list, but the parenthetical suggests values like duration/timing can change, not the name itself? It's confusing.

To be safe, adding new keyframes might be beyond "Only change colors, shadows, radius, transitions, gradients." The allowed change list includes "transition timing, easing, duration" and "filter, backdrop-filter", "opacity", but not animation. However "Subtle pulsing animations" is part of target effect. Yet maybe we can implement pulsing via `transition`? Not really. Could use `animation` if allowed. But the task says "Only change colors, shadows, radius, transitions, gradients." It doesn't mention animation. But the variant specifically requests "Subtle pulsing animations." So likely we are expected to add an animation. We can add a keyframe and apply it. Since we are not changing existing layout, it's okay.

Let's look at the original CSS: It's a media query for max-width 575.98px. We can still add keyframes inside the media query? Yes, @keyframes can be inside media queries. But maybe easier to add outside or inside. We need to preserve the media query. We can add @keyframes within the media query? It is allowed but then the animation only applies on mobile. That's fine. Alternatively, add @keyframes at root outside the media query. But the entire file is just this media query, so we can place @keyframes inside or outside. To preserve "ALL selectors and layout exactly", we should keep the media query and its contents. Adding @keyframes outside might alter the file but not layout. That's fine. But the output needs to be just CSS. I'll add @keyframes inside the media query? Hmm, @keyframes at nested in media query is valid, but if we add it inside the media query, it's only available within? Actually @keyframes are globally registered even if defined inside media query? In CSS, @keyframes can be nested inside @media? I think @keyframes inside @media is allowed and only applies when media matches? But keyframes are not conditional? Actually CSS Conditional Rules Level 3 says @keyframes can be nested within @media; they are only active if the condition matches. It works. But to be safe, put outside the media query? The original CSS has no @keyframes. Adding outside media is okay.

Let's design the visual refresh.

Color palette:
- Off-white: #faf8f3
- Soft black: #2d2d2d
- Accent: terracotta #c47b5a or sage #87a878. Let's choose terracotta for warm minimal? It says "one muted accent (sage #87a878 or terracotta #c47b5a)." We'll pick sage? The target style name "vertical-flow" maybe yes. Let's use sage as accent: #87a878. Or terracotta? We can use both? No, one muted accent. Let's use sage. But glow effects with sage could be nice. I'll use sage.

For the media query, we're styling mobile. Let's add decorative styles:

1. `.app-hero-section .row .col-lg-7`:
   - Add `background: rgba(255,255,255,0.6);` maybe? But off-white background? Could be too much. The original only text-align. Adding background might create a visual card. Since it's a column, perhaps add a subtle radial gradient or background-blend? But background property is allowed (color/gradient). We can add `background: radial-gradient(circle at 20% 20%, rgba(135,168,120,0.08), transparent 70%);` to add a subtle glow. We can also add `border-radius: 16px;`? But border-radius on a column might look okay. But if the column contains text, adding border-radius and background can create a card effect. But this might change visual identity significantly. Let's be careful. The task says refresh visual identity without changing layout. Adding background doesn't change layout. I'll add a subtle background and border-radius, and maybe box-shadow? On a full column, a shadow could be weird. Let's not add box-shadow to hero column. Add a soft background and padding? Padding is not allowed to change? Actually padding in original not specified for this rule, so adding padding would be a layout change? Yes, adding padding changes layout. Don't. Add `border-radius` and `backdrop-filter`? Not necessary. Maybe just text-shadow? Not relevant. Maybe we can add `color`? Not needed.

2. `.app-hero-section .badge.bg-warning`:
   - We can override Bootstrap warning badge. Set `background-color: var(--accent-sage); color: #fff; box-shadow: 0 0 24px rgba(135,168,120,0.4); border-radius: 10px; transition: box-shadow 0.3s ease;` Also maybe `border: 1px solid rgba(255,255,255,0.2)`? But border won't change layout. We can add.

   But the class `.bg-warning` is Bootstrap warning (yellow). We can change background color to accent. That's a visual change.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - Add `background: #ffffff;` or `background: rgba(250,248,243,0.8);` but original background might be different. Add `border-radius: 12px; box-shadow: 0 8px 24px rgba(45,45,45,0.06), 0 0 24px rgba(135,168,120,0.12);` Maybe also `border: 1px solid rgba(45,45,45,0.06);` Add `transition: box-shadow 0.3s ease, background-color 0.3s ease, transform 0.3s ease;` But transform is not allowed? I can omit transform. Or transition on box-shadow only. We need to implement hover halo. Without adding :hover, we can't. Unless we use `@media (hover: hover)`? No. We could add `:hover` rules but prohibited? Let's decide.

The instruction says "You MUST change (visual identity only): ... transition timing, easing, duration" and "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)". But it also says "Halo on hover: 0 0 32px rgba(accent, 0.6)" in the variant. This suggests we need to implement hover effects. Since original CSS has no hover, we need to add `:hover` selectors. But the selectors are "fixed" — "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" under NEVER CHANGE. This means we cannot change existing pseudo-classes, but we can add new pseudo-class selectors? It says "keep exactly" for existing selectors. Adding a new selector with `:hover` is not "changing" existing selectors, but it is adding a new rule. Is that allowed? The output requirements say "preserving ALL selectors and layout exactly" — that could mean all selector text in input must remain; adding new selectors is allowed as long as existing ones remain? But the section "Selectors may never be changed" likely means don't modify them, don't rename. Adding additional rules may be okay. But we must be cautious: The "NEVER CHANGE" list includes "Pseudo-classes (:hover, :focus, ::before