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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The user wants me to rewrite the given CSS with a new visual identity while preserving all selectors, layout properties, and typography. The target style is "editorial-magazine" with a gradient-rich variant.

Let me analyze the original CSS:

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

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

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

This is a media query with three rules:
1. `.app-hero-section .row .col-lg-7` has `text-align: center;` — this is a layout property I cannot change.
2. `.app-hero-section .badge.bg-warning` has `font-size: 0.85rem;` — this is typography, cannot change.
3. `.contact-channels-section article, .contact-quick-section .contact-card` has `padding: var(--space-md) !important;` — padding can vary within ±20%, but since it's a CSS variable, I should probably keep it or adjust within the allowed range.

Hmm, the task says to change colors, shadows, radius, transitions, gradients. But the original CSS has no colors, shadows, radius, transitions, or gradients. It's just a media query with layout-ish properties.

The instructions say:
- ✅ MUST CHANGE: All color values, box-shadow, text-shadow, border-radius, gradient colors, transition timing, filter, opacity, outline styles, border-color/border-style, caret-color, accent-color, CSS custom properties values.
- 🔒 NEVER CHANGE: display, position, grid-template-*, flex-direction, width, height, padding/margin (±20%), gap, justify-content, align-items, etc., font-family, font-size, font-weight, line-height, text-transform, white-space, etc.

Given the original CSS has:
- `text-align: center` — layout, cannot change
- `font-size: 0.85rem` — typography, cannot change
- `padding: var(--space-md) !important` — padding can change within ±20%

But I need to add visual changes. Since the original CSS has no visual properties, I need to ADD color, shadow, radius, gradient, transition, etc. to these selectors while preserving the existing declarations.

Wait — the instructions say "Only change colors, shadows, radius, transitions, gradients." and "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." So I should add visual properties to the existing selectors to refresh the look.

However, I must be careful: the padding is `var(--space-md)` which is a CSS custom property. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change, but `--space-md` is a spacing variable — that would fall under layout/padding. The padding constraint says "keep similar values, ±20% maximum." Since `var(--space-md)` is an indirect value, changing `--space-md` itself would affect other parts of the CSS beyond this file potentially. But in this file I only have the media query. I could change the padding value to something within ±20%. However, I don't know what `--space-md` evaluates to. Safer to keep `var(--space-md)` as-is since it's an indirect reference and changing it could break the layout intent.

Actually, let me re-read: "Padding, margin (keep similar values, ±20% maximum)" — so I can change padding but not drastically. Since I don't know the value of `--space-md`, I'll keep it as-is to be safe. Actually, maybe I could change it to `calc(var(--space-md) * 0.9)` to tweak it slightly? That's within ±20% and preserves the variable approach. Hmm, but that adds complexity. Let me think about what's the best approach.

Given the constraints, the safest approach:
1. Keep all three selectors exactly.
2. Keep `text-align: center;` (layout)
3. Keep `font-size: 0.85rem;` (typography)
4. Keep or slightly adjust padding (keep it to preserve layout)
5. ADD visual properties: color, background, border, border-radius, box-shadow, transition, etc. to each selector.

Wait, but the instruction says "Only change colors, shadows, radius, transitions, gradients." Adding new declarations could be seen as "changing" — but the goal is to refresh the visual identity. Since the original has no colors, I need to add them to make a visual change. The example output from previous attempts in similar tasks typically adds color properties.

But there's risk: adding `background` to `.badge.bg-warning` might conflict with Bootstrap's `.bg-warning` class. The badge is a Bootstrap warning badge. In the editorial-magazine style with gradient-rich variant, I could style it with a deep red gradient, perhaps.

Let me craft a response:

For the media query block, I'll:

1. `.app-hero-section .row .col-lg-7` — add color? It's a text container. I could add `color: #1a1a1a;` (ink black). But it's already likely inherited. Adding it is safe. Also add a transition? Hmm, transitions on a container don't do much. Maybe add `text-shadow`? Not appropriate for a whole column. I could add a subtle gradient text? No, too risky.

Actually, let me reconsider. The task is to "refresh the visual identity WITHOUT changing layout structure or class names." Adding visual properties to these selectors is the way. But I should be careful not to add properties that would look bad or break functionality.

Let me think about what properties make sense:

**Selector 1: `.app-hero-section .row .col-lg-7`**
In the hero section, this is a column. On mobile, text-align center. I could add:
- `color: #1a1a1a;` (ink black)
- Maybe a subtle `text-shadow`? No.
- Could add a gradient background? That would look odd on a column.
- Better to keep it minimal: add `color` and maybe `caret-color`/`accent-color`? Not relevant.

Hmm. Maybe I shouldn't force properties onto selectors where they don't make sense. But the task requires visual changes. Let me look at the original again — it's a tiny CSS snippet. The selectors are:
1. Hero column on mobile
2. Badge warning on mobile
3. Contact cards on mobile

For the badge (`badge.bg-warning`), I can definitely style it with gradient, border, shadow, etc. This is a Bootstrap warning badge. I can make it an editorial deep red badge with a gradient.

For the contact cards, I can add gradient backgrounds, border-radius, box-shadow, transitions.

For the hero column, I can add color, maybe a subtle gradient text for headings? But `text-align` is applied to the column, which contains possibly multiple elements. Adding `color` is safe. I could also add `background` but that might overflow the layout. Actually a transparent gradient won't change layout: `background: linear-gradient(...)` with a color. But a background on a column in a hero section could change the look significantly — which is the point. But it could also look bad. Since it's inside `.row` and `.col-lg-7`, adding a background might create a block. Hmm.

Let me be conservative but still make changes. I'll add:
- To the hero column: `color: #1a1a1a;` and maybe `background: linear-gradient(135deg, rgba(196, 69, 54, 0.06), rgba(107, 112, 92, 0.06));` — a very subtle gradient that doesn't affect layout. Also `border-radius: 12px;`? A radius with no border/background does nothing. Could add `transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1);` but color transitions on a container are meaningless.

Hmm, this is tricky. Maybe I'm overthinking. The instructions say the output should be "fresh color palette + shadow/radius identity." For a media query that only has layout-ish things, perhaps the expectation is to add visual properties that will apply.

Let me reconsider: maybe I should change the padding from `var(--space-md)` to a slightly adjusted value and add gradient/shadow/etc. to the contact cards. For the badge, add a gradient background, border, shadow. For the hero column, add color and maybe a subtle background.

Actually, wait. Let me re-read the task constraints once more:

"⚠️ Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

So they want significant visual changes. The target style is editorial-magazine with gradient-rich. Colors: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a), accent deep red (#c44536) or olive (#6b705c).

Given the selectors, here's my plan:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        background: linear-gradient(160deg, rgba(245, 241, 232, 0.5), rgba(107, 112, 92, 0.08));
        border-radius: 18px;
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #f5f1e8;
        background: linear-gradient(135deg, #c44536, #a03426);
        border: 1px solid rgba(196, 69, 54, 0.35);
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(196, 69, 54, 0.28), 0 2px 6px rgba(26, 26, 26, 0.12);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #f5f1e8, #eae4d3);
        border: 1px solid rgba(107, 112, 92, 0.18);
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(26, 26, 26, 0.08), 0 2px 8px rgba(26, 26, 26, 0.04);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, but I changed the badge background. Bootstrap's `.badge.bg-warning` uses `background-color: #ffc107` (warning yellow). By overriding with `background: linear-gradient(...)` I'm changing the visual identity — that's the point. But note Bootstrap might apply `background-color` via `.bg-warning`; using `background` shorthand will override it.

However, there's a risk: the badge text color. Bootstrap `.badge` text is usually dark on warning. I'm changing it to cream `#f5f1e8` which has better contrast on deep red. Good.

But hold on — "border-width" cannot change per the rules: "border-color and border-style (NOT border-width)". I set `border: 1px solid ...` which includes a border-width of 1px. The original had no border at all. Adding a border changes the border-width from 0 to 1px, which could affect layout (adds 2px total size). That might break the "±20% padding/margin" constraint, but it's a border, not padding/margin. The rule says border-color and border-style can change, not border-width. If original had no border, adding one technically changes width. But the rule is about not changing border-width of existing borders, I think. Adding a border might be risky for layout.

Similarly, adding a background to the hero column could add visual block but not layout shift.

Also, `transition` on the hero column with a background — fine.

But wait — the constraint says "transition timing, easing, duration" can change. Adding transitions is allowed.

Let me reconsider border-radius: "border-radius (visual rounding only)" — can change, presumably can add.

Box-shadow: can add.

For `.badge.bg-warning`, adding a border might be okay but to be safe, I could use `box-shadow` for the border effect instead of an actual border. Like `box-shadow: 0 0 0 1px rgba(196, 69, 54, 0.35), ...` — but that's a ring, not a border. It doesn't affect layout. That's safer.

Actually, the instruction says "border-color and border-style (NOT border-width)" — meaning if there's an existing border, I can change its color and style but not width. Since there's no border originally, I shouldn't add one (that would add width). Better to avoid adding borders entirely. Use outline or box-shadow for border-like effects. But outline also has width... outline-style can change per the rules but outline-width? Not specified. Hmm, the rule says "outline styles (color, type)" can change. Again, adding an outline adds width. Safer to avoid adding borders/outlines and use box-shadow rings.

Let me revise: no `border` declarations on any of these. Use box-shadow for definition.

Also, adding `background` to the hero column might surprise. But it's a "visual refresh" so okay. Actually, let me be more cautious: the hero column's background could interfere with existing hero backgrounds. Since this is under `max-width: 575.98px` (mobile), the hero section might have its own background. Adding a translucent gradient could change the look. I think a very subtle gradient is fine.

Hmm, but the instruction says "Make colors, shadows, and radius MORE distinct this round." They want bold changes. Let me lean into it.

Let me also consider CSS custom properties. The original uses `var(--space-md)`. I could redefine `--space-md` in the media query? No — that would affect all elements using it, which is beyond this file's scope. Not safe.

Could I change the padding to `calc(var(--space-md) * 0.9)`? That's within ±20% and shows a change. But it's risky because I don't know the base value. `calc(var(--space-md) * 0.9)` reduces padding by 10%, which is within the ±20% margin. Actually, that might be a nice touch but could be seen as fiddling with layout. The instruction says padding can change within ±20%. Let me keep it as `var(--space-md)` to be absolutely safe, since the target is visual not layout.

Actually, wait — maybe I should change it to a slightly different value to demonstrate compliance? The rule says "keep similar values, ±20% maximum" — it doesn't require changing. Keeping it as-is is compliant. I'll keep it.

Now, for gradients on "most backgrounds" per the gradient-rich variant. My plan has gradients on the badge and contact cards. The hero column gets a subtle gradient. Good.

Let me also consider adding `backdrop-filter`? The original doesn't have it. Adding it could affect performance and might not be supported. The rules say filter/backdrop-filter can change (meaning values can change), but adding them is risky. Skip.

Opacity: can change. Not needed.

Let me now think about the exact colors:

Editorial palette:
- Cream: #f5f1e8
- Ink: #1a1a1a
- Deep red accent: #c44536
- Olive: #6b705c
- Maybe a darker red: #a03426
- A cream darker shade: #eae4d3 or #e8e0d0
- Olive light: rgba(107, 112, 92, 0.15)

Shadows:
- Large soft shadow: `0 12px 32px rgba(26, 26, 26, 0.08)`
- Accent shadow: `0 8px 24px rgba(196, 69, 54, 0.25)`
- Multi-layer: `0 1px 2px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.08)`

Radius:
- Badge: 999px (pill)
- Cards: 20px or 24px
- Hero column: 16px

Transitions:
- `0.5s cubic-bezier(0.22, 1, 0.36, 1)` — an "ease-out quint" style curve, smooth and long.

Now, the media query is for small screens. Adding hover effects inside a mobile media query is usually pointless since hover doesn't exist on touch, but transitions for tap feedback can still apply. I'll keep transitions simple.

Let me be careful: `.app-hero-section .badge.bg-warning` — the badge is inside the hero section. On mobile it's centered (inherited from the column). Styling it as a red pill is fine.

But wait: `.bg-warning` in Bootstrap sets `background-color: #ffc107 !important`? No, Bootstrap's `.bg-warning` is not `!important` by default