/* ============================================================
   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 provided CSS, preserving all selectors and layout. The original is a small media query block. The target style is "asymmetric-blocks" with "airy-rhythm" variant. However, the original CSS is very limited: media query with three rules. We can only modify visual properties: colors, shadows, border-radius, transitions, gradients, etc. We cannot change layout, padding, font-size? Wait, the original includes font-size: 0.85rem; That's typography, and typography is forbidden to change? The instructions say typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break are NEVER CHANGE. So we must keep font-size unchanged. Padding: padding is layout, but can change by ±20% maximum. However, the target style says "Generous spacing (Aggressive: padding 32-56px, gap 32-48px)" but that's for aggressive mode. In conservative mode, we can change padding within ±20%. But original padding uses var(--space-md) !important. We could change the custom property value? The instruction allows CSS custom properties values (--color-*, --shadow-*) values, but not necessarily --space-*. Actually "CSS custom properties (--color-*, --shadow-*) values" specifically only color and shadow custom properties. So --space-md is not listed as allowed to change. But we cannot change the variable name, and the value is in a custom property definition that is not in this file. Since the file doesn't define --space-md, we can't change its value. We could add a local override? But that would change the effective padding, which is allowed within ±20%. However, the rule is padding with !important sets the padding to var(--space-md). If we change the value of --space-md within this media query? We could set --space-md: 40px; within the media query. But that would affect other elements, but maybe okay. Yet the instruction says "keep similar values, ±20% maximum." Without knowing --space-md value, we can't ensure. Safest: don't change padding at all, since it's already using var. But the task says "visual identity refresh", we can add decorative properties like border-radius, box-shadow, background, etc.

The original rules:
1. .app-hero-section .row .col-lg-7 { text-align: center; } — text-align is layout? Actually text-align is listed under typography? Wait, in the "Typography" NEVER CHANGE list, they include text-transform, white-space, word-break, but NOT text-align. In layout, they include text-align under layout? Let's check: "📐 LAYOUT (HTML cannot adapt to changes): ... text-align, vertical-align" is listed under LAYOUT. Yes, text-align is under layout, so cannot change. But we aren't changing it. So first rule remains exactly as is.
2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; } — font-size cannot change, so keep.
3. .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } — padding cannot change, keep.

So basically the original CSS has no visual properties we can change except maybe we can add new declarations within these selectors. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since the original has no colors, shadows, radius, transitions, gradients, we can add them to the existing selectors. But we must preserve the existing declarations? The output should be the rewritten CSS, presumably we can augment. We are allowed to change "transition timing, easing, duration" but there are none. We can add transitions. We can add box-shadow, border-radius, background, color, border, etc. But we must be careful not to break layout. Adding background colors won't break layout. Adding border-radius might affect background clipping but not layout dimensions? Border-radius affects visual, not layout. Box-shadow doesn't affect layout. So we can add these.

But the instruction "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" means we should output the same selectors with same declarations, and we can add new visual declarations. But should we remove existing declarations? No, keep them. We can add declarations.

We need to interpret "asymmetric-blocks" and "airy-rhythm". Since this is within a media query, we can apply to these elements:
- For .app-hero-section .row .col-lg-7: maybe add a subtle background, border-radius, box-shadow to create a block? But it's a column, adding background could be okay. But need to be careful: it might be a layout container. But visual only.
- For .app-hero-section .badge.bg-warning: add background color? It's a badge with bg-warning, likely bootstrap class. We can override the background-color, color, border-radius, box-shadow.
- For .contact-channels-section article, .contact-quick-section .contact-card: add border-radius, box-shadow, transition, background, border.

Also we could set custom properties at the top? The media query itself is a rule, we can add a root? But the output should be within the media query. We can add a new selector? No, "Preserving ALL selectors" means we cannot add new selectors? Usually we can add new rules? But the instruction says "Keep ALL selectors and layout exactly as-is." It doesn't explicitly forbid adding new selectors, but it says "the HTML is FIXED — only colors, shadows, and decorative properties may change." Adding new selectors would be extra CSS, not necessarily changing selectors. But to be safe, we should not add new selectors; only modify existing rules. We can add declarations to existing rules.

We should also consider changing the media query's contents: we can add new declarations. For example, in the first rule, add color, background, border-radius, box-shadow, etc. But text-align stays.

Let's create a fresh palette. Asymmetric blocks: bold contrasting blocks, each section different background. Airy rhythm: large border-radius 16-28px, soft pillowy shadows, generous spacing. But we can't change spacing much, but we can add padding? Actually we could add additional padding? But padding is layout, and we can change within ±20%. But original has padding var(--space-md) !important. We could add a different padding? No, because duplicate declaration with !important and later one wins if also !important. But that would change layout. Better not.

We can add "border-radius: 24px;" to cards. We can add "box-shadow: 0 20px 40px -12px rgba(0,0,0,0.25), 0 8px 24px -8px rgba(0,0,0,0.15);" soft pillowy. Add "transition: box-shadow .3s ease, transform .3s ease" but transform would affect layout? Actually transform doesn't affect layout, but adding transform on hover would require additional rule. We can't add hover rules? We can add transitions but no transform unless we add a transform property. But we can add transition properties without transform. We can transition background-color, box-shadow, border-radius, etc.

We need to be careful with the badge: .badge.bg-warning is a Bootstrap warning badge. We can override background-color to a new color, color, border-radius: 999px, box-shadow.

Also, maybe add a background to the .col-lg-7? But it's a column; adding background might make a block. We can add "background: linear-gradient(135deg, ...);" and "border-radius: 24px; padding: 32px"? But padding changes layout, not allowed. Avoid.

Let's craft:

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

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

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

Rewritten: We keep the media query, the selectors, and existing declarations. Add visual declarations.

For .app-hero-section .row .col-lg-7:
- color: #2d2a32; (text color)
- background: rgba(255,255,255,0.08)? Or a bold contrasting background? Since asymmetric blocks, maybe a deep indigo background with light text. But it's a column in a hero section, likely text content. If we set a background, it may affect appearance. We can set background: transparent? No visual. Better to add a subtle border-radius and box-shadow? We can add "border-radius: 24px; box-shadow: 0 24px 48px -16px rgba(86, 67, 194, 0.25);" That creates an airy block shadow. But without background, box-shadow around text may look odd. Better to add a background. But the column might be inside a container, adding background to a col might create a block. Could be okay. Let's choose a bold but tasteful palette.

Palette: Use deep teal, coral, cream, etc. For hero section on mobile, maybe a warm cream background with a bold accent border? Let's pick:
- .col-lg-7: background: linear-gradient(145deg, #f7f3e9, #f2e8d5); border-radius: 28px; box-shadow: 0 32px 64px -24px rgba(120, 90, 40, 0.25); But this might conflict with existing background. Since it's a column, maybe it's okay.

But we need to ensure "asymmetric-blocks" style: "each section different background" — within this media query we have three elements. We can give each a different background color.

- .badge.bg-warning: background: #ff6b35 (coral), color: #fff, border-radius: 999px, box-shadow: 0 10px 20px -8px rgba(255,107,53,0.5). This overrides the warning yellow.
- .contact-channels-section article, .contact-quick-section .contact-card: background: #ffffff; border-radius: 24px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 8px 16px -8px rgba(0,0,0,0.08); transition: box-shadow 0.35s ease, background-color 0.35s ease; border: 1px solid rgba(0,0,0,0.04); Maybe also add a subtle gradient.

But we should check: the contact cards already have padding via var(--space-md). Adding background and border-radius good.

Also, we might want to add a custom property override? No.

We need to output only CSS. Since the original uses "!important" in the padding rule, we can add new declarations with or without !important. For the padding, keep it exactly.

Now, the instruction about "border-style (NOT border-width)" means we can change border-style but not border-width. If we add a border, we must not specify border-width? Actually we can add border: 1px? That is border-width, which is not allowed. The rule says "border-color and border-style (NOT border-width)" can change. So we cannot change border-width, but can we add a border where none exists? That would be adding border-width, which might be considered changing layout? It doesn't change layout if box-sizing border-box? Still, safer to avoid setting border-width. We can use outline? Outline is allowed. But outline also has width. The instruction says "outline styles (color, type)" — so outline-width? It says "outline styles (color, type)", not width. So we should not change outline-width. We can add outline? No.

So avoid adding border or outline widths. Use box-shadow for borders.

We can use "border-color" and "border-style" declarations if existing? None exist. We can add "border-style: solid; border-color: rgba(...)" but that would require border-width to be visible; but if border-width is 0 by default, nothing. Avoid.

We can add background, color, box-shadow, text-shadow, border-radius, transition, filter, backdrop-filter, opacity, letter-spacing? No, letter-spacing is typography, can't change. But we don't want to.

Let's produce a clean rewrite.

We need to ensure all selectors exactly preserved:
- .app-hero-section .row .col-lg-7
- .app-hero-section .badge.bg-warning
- .contact-channels-section article,
- .contact-quick-section .contact-card

Add declarations.

One thing: The output should be the rewritten CSS, preserving all selectors and layout exactly. If we add declarations, the selectors are the same. Good.

Let's craft with target style.

Full CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(145deg, #f8f1e4 0%, #efe6d4 100%);
        border-radius: 28px;
        box-shadow: 0 32px 64px -28px rgba(74, 58, 25, 0.25), 0 12px 24px -12px rgba(74, 58, 25, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff8c42, #f4511e);
        color: #fff;
        border-radius: 999px;
        box-shadow: 0 12px 24px -8px rgba(244, 81, 30, 0.45), 0 4px 8px -4px rgba(244, 81, 30, 0.3);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 24px 48px -20px rgba(27, 32, 48, 0.15), 0 12px 24px -16px rgba(27, 32, 48, 0.1);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}

But wait: adding `transition: transform` on badge includes transform but no transform property. That's fine. However, the instruction says "transition timing, easing, duration" can change, so adding transition is allowed. But if we don't have a hover rule, transition is pointless but harmless. We could omit transition to be safe? Visual changes allowed. But better to keep.

Also, `background` on `.app-hero-section .row .col-lg-7` may be too much. But it's a column; on mobile it might be full-width. Adding background could be okay. However, the original hero section may have its own background; adding a gradient could create a block. The target style "asymmetric-blocks" wants bold contrasting blocks, so yes.

We should also consider that `.app-hero-section .row .col-lg-7` might be a text column, and setting a background could be an issue if there is already a background. But it's our visual refresh.

Maybe we should add `padding`? No, can't.

Another option: use `backdrop-filter` for a frosted effect. But that might not be needed.

Let's refine palette to be cohesive: Use a "warm cream + deep teal + coral" palette.

- col-lg-7: background: linear-gradient(145deg, #f9f4e8, #efe4d0); border-radius: 28px; box-shadow: 0 32px 64px -28px rgba(74, 58, 25, 0.25), 0 12px 24px -12px rgba(74, 58, 25, 0.12);

- badge: background: linear-gradient(135deg, #ff8c42, #f4511e); color: #fff; border-radius: 999px; box-shadow: 0 12px 24px -8px rgba(244, 81, 30, 0.45);

- contact cards: background: #fff; border-radius: 24px; box-shadow: 0 24px 48px -20px rgba(27, 32, 48, 0.15); transition.

Could also set `border: 1px solid rgba(0,0,0,0.05)`? Border-width is 1px, which is not allowed to change? The instruction says "border-color and border-style (NOT border-width)" can change. That implies we cannot change border-width. If we add a new border, we are introducing a border-width, which is a layout-affecting property? In CSS box model, border-width is part of layout. So avoid. Use box-shadow with 0 0 0 1px? That's a box-shadow with spread, not border. Good. For contact cards, add `box-shadow: 0 0 0 1px rgba(27,32,48,0.06), 0 24px 48px -20px rgba(27,32,48,0.15);` That simulates a border without affecting layout.

Also for col-lg-7, we can add `box-shadow: 0 0 0 1px rgba(74,58,25,0.08), 0 32px 64px -28px rgba(74,58,25,0.25);`

Make sure no layout properties changed. `background` doesn't affect layout, `border-radius` doesn't affect layout, `box-shadow` doesn't affect