/* ============================================================
   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 given CSS while keeping all selectors, layout, typography, etc. The original is a small @media block. We need to apply visual changes only. The original contains only a few rules: text-align, font-size, and padding. But padding is kind of layout, but allowed within ±20%. However, the rule is "padding, margin (keep similar values, ±20% maximum)". Original padding: var(--space-md) !important. We don't know the value of --space-md, but we can adjust within 20%. But the variant "airy-rhythm" suggests generous spacing, but conservative mode says only padding/margin ±20%. So we might change padding to calc(var(--space-md) * 1.2) or a slightly larger value. But we must be careful: the selector is .contact-channels-section article, .contact-quick-section .contact-card. The padding is set to var(--space-md) !important. We can change to a slightly larger padding, perhaps calc(var(--space-md) * 1.15). But also "We may change CSS custom properties values" — since original uses var(--space-md), we could add a new custom property? But the output should replace colors, shadows etc. However, there are no colors, shadows, radius, transitions, gradients here. The instruction says "Refresh this CSS visually" but the original has no visual properties beyond text-align, font-size, padding. We must still output the CSS with the same selectors and properties, but we can adjust values within allowed limits. We can also add visual properties that don't change layout? But the rule says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". We should not add new selectors, but can we add new declarations to existing rules? The task says "Only change colors, shadows, radius, transitions, gradients." If there are none, we could leave as-is? But then it's not refreshed. Maybe we can add border-radius to the cards in the media query? But that would be a new declaration, but it's visual only, doesn't affect layout. It's allowed because it's in the "MUST CHANGE" list? Actually it says "You MUST CHANGE (visual identity only): All color values... box-shadow... border-radius (visual rounding only)..." It doesn't say we must add new properties. But "Refresh this CSS visually" implies we should alter something. Since there are no colors/shadows/radius, we can adjust padding, font-size, text-align? But those are typography/layout. Font-size can't change (font-size fixed). text-align can't change? It's under typography? Actually text-align is listed under "Layout" as "text-align, vertical-align" — wait, it's under "NEVER CHANGE": "text-align, vertical-align" are listed under "Layout" section. So text-align must remain exactly. Font-size is also never changed. So the only thing we can change in the original is padding, within ±20%. We can also potentially change the font-size? No, fixed. So the only way to visually change is padding and maybe add new visual declarations like border-radius, box-shadow, background-color, etc. to the existing selectors. Since the selectors are in a media query, we can add visual properties to them. But the original rule `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size can't change. We could add color? That would be a new visual property. Is that allowed? The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. If there are none, we can introduce some. But we need to be careful not to break the design. The target style is "card-mosaic" with "airy-rhythm" — vibrant card colors on neutral background, large border-radius, soft pillowy shadows. In a media query for small screens, we might add some responsive visual refinements. But the original selectors are generic: `.contact-channels-section article` and `.contact-quick-section .contact-card` — these are card-like elements. We can add border-radius, box-shadow, background, etc. But we must ensure we don't change layout. Adding box-shadow doesn't change layout (unless it spreads, but shadow doesn't affect layout). Adding border-radius doesn't change layout. Adding background doesn't change layout. So we can add visual treatments to these cards.

However, we need to consider that the output should be the rewritten CSS, preserving all selectors and layout exactly. The original has three rules. We can modify the padding values and add visual properties. For the first rule, `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is fixed, cannot change. So this rule remains exactly as-is. But "Refresh this CSS visually" — maybe we can't change this rule at all. That's fine, we can leave it unchanged. The second rule `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size cannot change, so it remains. The third rule is the only one we can adjust padding and add visual properties.

But the instructions say "You MUST CHANGE (visual identity only): All color values, box-shadow, text-shadow, border-radius, gradient colors, transition timing, filter, opacity, outline styles, caret-color, accent-color, CSS custom properties values." If there are no such properties, then there is nothing to change. But "Refresh this CSS visually" might mean we should add such properties. The most conservative interpretation: we are allowed to add new declarations to existing rules as long as they are visual-only and do not change layout. But the instruction "ONLY the rewritten CSS" and "preserving ALL selectors and layout exactly" doesn't forbid adding declarations. It says "You MUST CHANGE" not "You MUST ADD". However, the goal is a fresh visual identity, so adding some visual properties to these elements would align.

Let's think: The original CSS is a media query for small screens. It sets text-align center, font-size for badge, and padding for contact cards. To give a fresh visual identity while maintaining layout, we could:
- For the contact cards, adjust padding to a slightly larger value (within 20%) and add border-radius, box-shadow, maybe a subtle background color or gradient.
- For the badge, we can't change font-size, but we can add color, background, border-radius, box-shadow? It already has classes .badge.bg-warning — background is set by bg-warning (Bootstrap). But we can add custom color/background to override? That would be a visual change. In a media query, we might want to adjust the badge's appearance on mobile. But careful: the selector `.app-hero-section .badge.bg-warning` has high specificity. We could add a new background, color, border-radius, box-shadow. However, the original CSS didn't have any visual properties for it. Adding a color might be a visual refresh. But we must ensure it doesn't conflict with layout. It's fine.

But the instruction "Only change colors, shadows, radius, transitions, gradients" implies we should not add properties that are not in those categories? Actually "Only change" could mean "The only changes you are allowed to make are to these categories." So adding a color is allowed. Adding a box-shadow is allowed. Adding a border-radius is allowed. Adding a transition is allowed. Adding a gradient is allowed. So we can add such properties.

But also "transition timing, easing, duration" — we can add transitions. But to add transitions to elements, we need to specify property names. That's fine.

We should also consider the "target style" card-mosaic and "airy-rhythm" variant. For small screens, we want cards with generous border-radius and soft shadows. The contact cards already have padding. We can add border-radius: 20px (since airy rhythm has large border-radius 16-28px). We can add box-shadow: a soft pillowy shadow like `0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04)`. We can add a subtle background gradient or keep background neutral? But the original cards likely have a background from other CSS. To avoid breaking, we might not add a background. But we can add a border? Border-color is allowed but border-width is not supposed to change? Actually "border-color and border-style (NOT border-width)" — we can change border-color, but adding a border with a width? That would change layout because border-width affects box size unless box-sizing border-box. Most Bootstrap uses border-width 1px for cards. But adding a border where there was none could change layout. Better to avoid adding border or only use border-color if border already exists. Without knowing the existing CSS, safer to avoid adding border.

We can add `border-radius` and `box-shadow` without affecting layout. We can add `transition` for hover effects. We can add `background` maybe as a gradient overlay? But background doesn't affect layout. However, if the cards already have a background from other CSS, overriding it could change the look but not layout. It's allowed.

But the snippet is from a mobile media query. If we add background colors to `.contact-channels-section article` and `.contact-quick-section .contact-card`, that might clash with existing styles. But the task is to "refresh visual identity" — we can choose a fresh color palette. The target style says "Vibrant card colors on neutral background" and "Each card type a different accent". But we only have two selectors: article (contact channels) and .contact-card (quick section). We could give them different accent backgrounds. But the original CSS only sets padding; maybe the cards already have backgrounds from other CSS. But since this is a partial file, we can't see the other CSS. We need to be conservative in the context of the media query: we can add subtle visual enhancements that won't break if there are existing styles. For example, add a soft shadow and rounded corners. That is safe.

Given the target style "card-mosaic" is aggressive, but our mode is conservative. So we should be restrained: adjust padding slightly upward (within 20%), add border-radius (20px), add a soft multi-layer box-shadow, maybe add a transition on transform? But transform is a property that might be used elsewhere; adding transition is fine. But we shouldn't add transform because that would be a layout change? Actually transform is visual but can create stacking context. But adding transform itself would change layout? No, transform doesn't affect layout. But it could interfere with other transforms. Better not.

We can add `transition: box-shadow 0.3s ease, border-radius 0.3s ease;` — but border-radius doesn't need transition. We can add `transition: box-shadow 0.3s ease;` to the cards for hover effects. But there's no hover rule in this media query. Adding transition is allowed, but it doesn't visibly change anything unless there's a hover state elsewhere. That's fine.

Since the original file is small, we need to output the same selectors and their existing properties, with adjusted values where allowed, and add new visual declarations. But we must not add new selectors or change the structure.

Let's parse the 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 need to keep the media query, keep each selector/list, keep the declarations that are non-changeable. For the first rule, text-align: center is fixed. We cannot change it. We could add additional declarations to the same rule, like maybe color? But text-align rule is about alignment. If we add color to the col-lg-7, that might affect the hero section text. It could be a visual refresh. But the target style is card-mosaic, not hero text. To be safe, we can leave the first rule untouched. Similarly, the second rule sets font-size only. We can leave font-size as is, and add color, background, border-radius, box-shadow to the badge. But we need to be careful: `.bg-warning` is a Bootstrap class that sets background-color and color. If we override, we need to ensure it's intentional. The target style says "Each card type a different accent" — a badge could be an accent. We can set a fresh background gradient or color. But in a media query, we might want to adjust badge appearance on mobile. We can add `border-radius: 999px;` (pill shape) — that's a big visual change, but allowed. We can add `box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);` to match warning color. However, the original badge might already be pill-shaped from Bootstrap (badge-pill?). But `.badge.bg-warning` uses Bootstrap badge default which has border-radius: 0.375rem. We can change to a larger radius, say 1rem. But that's a visual change. We can also add a subtle background gradient. But we must not change font-size.

But the instruction says "All color values ... must change" — if there are no colors in the original, we might not need to change any. But the spirit is to refresh the visual identity. So we can introduce colors.

Let's decide on a concrete approach:

1. For the media query, keep the first rule unchanged because it's only text-align (layout property, cannot change). We could add `color` but that would be a new visual property. But the original rule is about a column in the hero section. Giving it a color might be weird. We'll leave it exactly as is.

2. For the badge, keep font-size: 0.85rem. Add `color: #1f2933;` (dark slate) and `background: linear-gradient(135deg, #fbbf24, #f59e0b);` — but that would override Bootstrap's `bg-warning` background which is a flat color. Is that allowed? Yes, gradient colors can change. But we need to be careful with specificity: `.app-hero-section .badge.bg-warning` specificity is 3 classes, so it overrides Bootstrap's `.bg-warning` if that has one class. It will also override any background-color. But `linear-gradient` is a background-image, not background-color. Bootstrap sets background-color. The element will have both background-image and background-color; the image overrides if present. So the gradient will show. Good. Add `border-radius: 999px;` for pill shape. Add `box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4), 0 2px 4px rgba(0,0,0,0.1);`. Add `padding`? The badge already has padding from Bootstrap. We can add `padding: 0.35em 0.75em;` but that could be similar to Bootstrap's default. But padding is layout, and we can change within ±20%. However, to be safe, we don't need to add padding. Font-size is already set. We can add `display: inline-block;`? That would be layout change? `display` is forbidden to change. So don't. Add `transition: box-shadow 0.3s ease, transform 0.3s ease;` but transform is not used; adding transition on transform is fine, but we won't add transform. Actually transition property includes transform, but that means if a transform is applied elsewhere, it will animate. That's fine. But the instruction says "transition timing, easing, duration" can change. So we can add transition.

3. For the contact cards, keep `padding: calc(var(--space-md) * 1.2) !important;` — this is within 20%? 1.2 is 20% increase, exactly the max. Or we could use `var(--space-md)` as is and add other visual properties. The variant "airy-rhythm" says generous spacing, but our mode is conservative, so 1.15 or 1.2. Let's use `calc(var(--space-md) * 1.15)` to be safe. But `calc` with multiplication by number is okay? CSS calc supports multiplication only with numbers? Actually CSS calc does NOT support multiplication by a number until CSS Values Level 4? Wait, `calc(var(--space-md) * 1.2)` is invalid in many browsers because calc only supports +, -, *, / with number? Actually CSS calc from Level 3 supports `*` and `/`? Let's check: In CSS calc, you can use `+ - * /`, but multiplication and division were added in CSS Values and Units Level 4, and support is not universal. Better to avoid multiplication. We can use `padding: calc(var(--space-md) + 4px) !important;` — this adds 4px, which is likely within 20% if --space-md is around 16-24px. But we don't know the value. A safer alternative: leave padding as `var(--space-md)` because it's already a custom property and the instruction says we can change CSS custom property values. We could define a custom property? But if we define a new variable in a media query, it's local to the media query. But we don't know if --space-md is defined globally. We could change the value of `--space-md` within the media query? That would affect other elements, maybe too broad. Better not.

We can instead use a slightly larger padding value using `calc(var(--space-md) + 2px)` — that's a minimal increase. But is it worth it? The variant asks for generous spacing, but conservative mode says keep similar values. Let's keep the padding exactly `var(--space-md)` to avoid layout issues. Then add border-radius, box-shadow, and maybe a subtle background gradient to the cards. Since we don't know the existing card background, we can add a transparent gradient overlay? But a gradient background with alpha can add vibrancy. For example:

`background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255