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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The user wants me to rewrite a small CSS snippet. Let me analyze what's here.

The original CSS is:
```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;
    }
}
```

Now, the constraints are:
- Only change visual identity: colors, shadows, radius, transitions, gradients, etc.
- Never change: selectors, display, position, grid, width/height, padding/margin (keep within ±20%), font-family/size/weight/line-height, etc.

But this CSS is a media query that only applies on max-width: 575.98px. It contains:
1. `.app-hero-section .row .col-lg-7` - text-align: center (layout property - can't change)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography - can't change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important (padding - can't change, but could I adjust within ±20%?)

Hmm. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But this CSS has no colors, shadows, radius, transitions, or gradients to change. It only has text-align, font-size, and padding.

Wait — the instructions say "padding, margin (keep similar values, ±20% maximum)". So padding can change slightly. But `var(--space-md)` is a custom property reference. I could change the padding value, keeping it within ±20%. But that's risky.

Actually, let me think about what I can do here. The target style is "asymmetric-blocks" and "glow-effects". But this snippet only overrides layout in a media query for mobile.

The key issue: The selectors must be preserved character-for-character. So I need to keep:
- `@media (max-width: 575.98px)`
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article, .contact-quick-section .contact-card`

The declarations:
- `text-align: center;` — this is layout/typography (text-align is in the "never change" list: text-align, vertical-align). So I cannot change it.
- `font-size: 0.85rem;` — font-size is in the never change list. Cannot change.
- `padding: var(--space-md) !important;` — padding can change within ±20%. But `var(--space-md)` is a custom property. I could change it to a different padding value within ±20%.

Hmm, but this feels wrong. The instructions emphasize changing colors, shadows, radius, transitions, gradients. There are none here. Maybe I should... well, I can only work with what's here.

Wait, let me reconsider. The constraint says I can't change text-align, font-size. But actually, could I add declarations to these selectors? Like adding a color, box-shadow, border-radius, transition to the existing selectors? The original has no such properties, but adding new visual properties could "refresh" the visual identity without breaking layout.

But wait — adding properties to `.app-hero-section .row .col-lg-7` inside a mobile media query could change the visual. The rules say "Only change colors, shadows, radius, transitions, gradients." It doesn't say I can't add them. It says "Only change" — meaning the types of changes I make are limited to those. Adding a color or transition to an existing selector... hmm, that's a change in visual identity.

However, the instruction also says "Keep ALL selectors and layout exactly as-is." Adding a box-shadow won't change layout. Adding color won't change layout. Adding transition won't change layout.

But is it in the spirit of the task? The task is to "refresh visual identity WITHOUT changing layout structure or class names." So adding decorative properties is fine.

Let me think about what makes sense:
- `.app-hero-section .badge.bg-warning` — a warning badge. I could add a color, background, box-shadow, border-radius, transition. But the badge likely uses Bootstrap's bg-warning class. Adding a box-shadow glow would be nice.
- `.app-hero-section .row .col-lg-7` — a column. Adding text-shadow? No, text-align is there. Maybe not.
- `.contact-channels-section article, .contact-quick-section .contact-card` — cards. I could add a border-radius, box-shadow, transition, background... but padding is there with `!important`. Adding box-shadow to these cards within mobile would add visual identity.

Actually, hold on. Let me re-read the task carefully:

"Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients. Output the rewritten CSS now."

And the mode: CONSERVATIVE (HTML fixed, visual changes only).

The self-check:
- Every selector character-for-character preserved?
- display, position, grid-template-*, flex-direction unchanged?
- width, height, padding, margin within ±20% of input?
- font-family, font-size, font-weight, line-height unchanged?
- Colors throughout the file replaced with fresh palette?
- Shadows redesigned (different offsets, colors)?
- Border-radius adjusted for new visual style?
- No AI marker comments?

Hmm. "Colors throughout the file replaced with fresh palette" — there are no colors in the file. "Shadows redesigned" — no shadows. So maybe the expectation is that I add them.

Let me think about what the most reasonable interpretation is. The original file (assets/css/saishi.css) is likely a large CSS file. This is "块2/2" (block 2 of 2), so they're splitting it. This particular block only has a media query with layout tweaks. The instruction is generic and applies to the whole file, but here I only have this block.

Given that, I should:
1. Keep selectors exactly.
2. Keep layout properties as-is (text-align, font-size, padding — though padding can vary ±20%).
3. Add/refresh visual properties (colors, shadows, radius, transitions) where possible without breaking layout.

Let me design:

For `.app-hero-section .row .col-lg-7`:
- It's a hero column. In the target style "asymmetric-blocks" with "glow-effects". I could add a subtle text-shadow or a color? But adding color to a column might override text color and break readability. Hmm.
- Maybe just add a transition? That's a stretch.

Actually, let me be careful. Adding decorative properties to `col-lg-7` might be weird. Let me think about what's minimal and safe:

1. `.app-hero-section .badge.bg-warning`:
   - Add `background: linear-gradient(135deg, #ffb347, #ff8c00)`? Wait, but `.bg-warning` sets background-color via Bootstrap. Inline specificity: `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning` alone (0,3,0 vs 0,1,0). So I can override background-color.
   - Add `box-shadow: 0 0 24px rgba(255, 159, 28, 0.4)` (glow).
   - Add `border-radius: 10px` (medium radius 8-16px per variant).
   - Add `transition: box-shadow 0.3s ease, transform 0.3s ease` — but transform might count as visual, not layout. Transform is not in the never-change list. Adding a transform on hover would require a :hover selector which I can't add (selector lists must be preserved; adding new selectors? The rule says "Selectors: keep EXACTLY" — I think adding new selectors is not allowed). So no :hover. Just transition on the base state — but without a hover state, transition does nothing. Still, it satisfies "transition timing, easing, duration" change requirement.
   - Actually, a transition declaration in the base state is harmless and satisfies the instruction to include transitions.

2. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - Keep padding: I can adjust within ±20%. `var(--space-md)` — I don't know its value. If I replace it with a literal, I might break consistency. Better to keep `var(--space-md)` to be safe? But then I'm not changing padding at all. The rule says padding within ±20% of input — keeping the exact value is within ±0%, so it's fine. I'll keep it to be safe.
   - Add `border-radius: 14px` / `12px`.
   - Add `box-shadow: 0 8px 24px rgba(...)`, maybe an inset highlight.
   - Add `background: linear-gradient(...)` — but wait, adding a background to a card could override the section background and affect readability. Hmm, but "each section different background" is in the target style. But in a mobile media query, changing card backgrounds might be unexpected. Still, the task explicitly asks for a fresh visual identity.
   - Add `border: 1px solid rgba(...)`? Border-color and border-style can change; but adding a border changes border-width? The rule says "border-color and border-style (NOT border-width)". Adding `border: 1px solid` would set border-width to 1px, which might change layout slightly (box-sizing: border-box likely, so it might not change layout). But to be safe, I could use `outline` instead? No, outline is also in the list. Actually, adding a border with width could be considered a layout change. Hmm.

Let me be conservative. I'll add:
- `border-radius` (allowed, affects visual only)
- `box-shadow` (allowed)
- `transition` (allowed)
- `background` with gradient (allowed — gradients allowed)
- `border-color` (allowed) but I need to be careful not to change border-width.

Actually, since the original has no border, adding `border: 1px solid color` would add a border where there was none. The rule "border-color and border-style (NOT border-width)" means I shouldn't change border-width values. Adding a new border with a width... is that "changing border-width"? I think adding a border is risky for layout. I'll avoid adding borders; instead use box-shadow for the border-like effect (e.g., `box-shadow: 0 0 0 1px rgba(...)` creates a visual border without affecting layout). That's clever and safe.

Let me now think about the palette. "asymmetric-blocks" wants bold contrasting blocks, high contrast borders. "glow-effects" wants glow shadows, halo on hover, medium radius 8-16px, subtle pulsing animations.

But "subtle pulsing animations" — animations require @keyframes, and the rule says "@keyframes names (values inside CAN change)" — but I can't add new @keyframes? Actually, it says "animation-name (values like duration/timing CAN change)". Adding a new @keyframes with a new name would require adding a new selector (the @keyframes rule). The rules say "Selectors: keep EXACTLY" — @keyframes names are technically not selectors, but adding new ones might be against the spirit. Also, this is a media query block; adding @keyframes inside a media query is allowed in CSS, but it's risky. I'll skip animations to be safe.

Wait, but the variant explicitly says "Subtle pulsing animations". Hmm. Let me reconsider. The "output" section says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". If I add a `@keyframes` block, I'm adding a new rule, not preserving only existing ones. But the instruction list for what I can change includes "animation-name (values like duration/timing CAN change)". It doesn't say I can add new keyframes. To be safe, I won't add @keyframes.

Let me design the concrete changes:

For `.app-hero-section .row .col-lg-7`:
- Original: `text-align: center;`
- This must stay (text-align in never-change list).
- Could I add something? Maybe `color: #1a1a2e;`? That would set text color — but that might override a dark theme hero section. Too risky without knowing context. Actually, I could add `text-shadow: 0 2px 16px rgba(...)`? Text-shadow is allowed and could give a glow effect. But on a hero heading, text-shadow could be nice. However, col-lg-7 contains more than just headings. Adding text-shadow could affect all text in the column. Hmm, risky.

Let me be more careful. This media query is for mobile. The `.app-hero-section .row .col-lg-7` just centers text. I'll add a `transition` (allowed) — but transition on what? Without a property change, it does nothing. Adding `transition: transform 0.35s ease, box-shadow 0.35s ease;` does nothing unless those properties change. Harmless but also useless. 

Alternatively, I can just leave this rule as-is except maybe add a `text-shadow` — but that changes look of all text. Hmm.

Actually, maybe the cleanest approach: For each existing declaration block, I keep the original declarations (since text-align, font-size are protected; padding is safe as var), and I ADD new visual declarations. That way I satisfy "only change colors, shadows, radius, transitions, gradients" by adding them, while preserving the protected properties.

Let me decide:

1. `.app-hero-section .row .col-lg-7`:
   - Keep `text-align: center;`
   - Add `text-shadow: 0 2px 20px rgba(255, 111, 97, 0.25);` — a warm glow. But this affects all text in column. In a hero, that's probably fine. Actually, hmm. If the hero has white text on dark bg, a colored glow could be pretty. If it has dark text on light bg, a glow might look muddy. Without knowing, the safest text-shadow is a neutral soft one: `0 2px 24px rgba(0, 0, 0, 0.08)`. But the variant wants glow in accent color. Let me use a subtle accent glow. Actually, I'll go with a dark soft shadow for readability: `text-shadow: 0 4px 20px rgba(31, 41, 55, 0.12);` That's safe.
   - Maybe add `transition: color 0.3s ease;`? That's fine.

Hmm, actually, thinking about it more — is adding text-decoration to a column weird? It might be. Let me reconsider whether to add anything to this rule at all.

The instruction says "Colors throughout the file replaced with fresh palette" — but there are no colors in this block. So maybe the expectation is just to add them where natural. The badge and cards are the natural places.

Let me design:

2. `.app-hero-section .badge.bg-warning`:
   - Original: `font-size: 0.85rem;` (protected, keep)
   - Add `background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 100%);` — replacing the flat warning color with a gradient. Since `.bg-warning` sets `background-color: #ffc107` in Bootstrap, my specificity (0,3,0) overrides it. Adding `background` shorthand with a gradient works.
   - Add `box-shadow: 0 4px 24px rgba(255, 159, 28, 0.45), 0 0 12px rgba(255, 209, 102, 0.3);` — glow effect.
   - Add `border-radius: 999px;`? The variant says medium radius 8-16px. A badge is usually pill-shaped (border-radius: 50rem in Bootstrap). If I change to 10px, it becomes a squarish badge. The target style says medium radius 8-16px. Let me use `border-radius: 10px;` to match the variant. But wait, Bootstrap badges use `border-radius: 0.375rem` by default (.badge has `border-radius: 0.375rem`). Overriding to 10px (0.625rem) is a visual change within 8-16px range. Good.
   - Add `transition: box-shadow 0.3s ease, transform 0.2s ease;`
   - Maybe `color: #1a1a2e;` — but the badge text color... `.badge.bg-warning` typically has dark text via Bootstrap's `.text-dark`? Not guaranteed. To be safe, I'll set `color: #3d2c00;` or keep? Actually, the rule says I can change color. Let me set a dark brown for contrast on the amber gradient: `color: #4a3000;`. That's a color change but affects readability — should be fine because amber backgrounds need dark text.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - Original: `padding: var(--space-md) !important;` — keep exactly (within ±20%).
   - Add `border-radius: 16px;` (medium radius, allowed).
   - Add `box-shadow: 0 12px 32px rgba(42, 27, 94, 0.18), 0 2px 8px rgba(42, 27, 94, 0.08);` — asymmetric-blocks style, glow-ish. Or use a purple/indigo accent.
   - Add `background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(244,