/* ============================================================
   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 with visual changes only. The original is very small:

@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 must preserve selectors exactly and layout properties. We can change colors, shadows, radius, transitions, gradients, etc. However, there are no colors here. We need to introduce visual changes without altering layout. text-align is layout? It's listed under "text-align, vertical-align" as never change. font-size is typography, never change. padding is layout, but we can keep similar ±20%. Actually padding is listed under layout, "keep similar values, ±20% maximum". So we can adjust padding slightly if needed, but not necessary.

We are required to change "All color values, box-shadow, text-shadow, border-radius, gradient colors, transition timing, filter, backdrop-filter, opacity, outline styles, caret-color, accent-color, CSS custom properties (--color-*, --shadow-*) values". But the original has none. We can add new properties? The instruction says "Only colors, shadows, and decorative properties may change." We can add decorative properties like background, border-radius, box-shadow, transition, etc. But we must preserve layout. Adding box-shadow, background, color etc. won't affect layout if no layout change.

But caution: adding background could be fine. However, the HTML is fixed, but we are only rewriting CSS. We can add declarations to the existing rules. We must keep selectors exactly and their existing declarations? Usually we can modify declarations, add new ones. The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can introduce color/background/shadow properties inside the rules.

Also need to respect target style: horizontal-strips and glow-effects, but that's mostly for full files; here just small fragment. We can add subtle glow/hover? But within media query, we can add box-shadow and background-color to these elements.

Let's think: The original has three rules. We can add visual properties:

1. .app-hero-section .row .col-lg-7 { text-align: center; } Could add color, text-shadow, background? But it's a column wrapper. Adding background might be okay but could be visually heavy. Maybe add subtle text-shadow? But that might be weird. We could add a color property to inherit accent? But changing text color would be visual. However, this affects all text inside. Probably not desirable. We can add a background gradient? Could be okay. But we need "fresh palette". Since it's a hero, maybe add a subtle radial gradient or backdrop-filter? But backdrop-filter with no background transparency might do nothing.

But we need to be careful: The instruction says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So we should actually include colors, shadows, radius.

Given the original has no colors, we need to add them. That is allowed. We can set background-color, border-radius, box-shadow, transition, etc.

Let's craft:

For .app-hero-section .row .col-lg-7, keep text-align: center. Add background? It's a column containing hero content. Perhaps adding a subtle backdrop blur and background gradient? We can add:

background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
backdrop-filter: blur(8px);
padding? No, padding would change layout. We can add padding only if similar? But original has no padding. Better not.

However, adding background/box-shadow to a column could conflict with its child content sizing. But box-shadow doesn't affect layout. background is fine. Backdrop-filter may be okay.

But maybe more relevant: the .badge.bg-warning. This is a badge with Bootstrap bg-warning. We can add color, background-color, border-radius, box-shadow, transition. Since bg-warning is a background utility, our CSS rule may override if specificity? .app-hero-section .badge.bg-warning has specificity 3 classes, so yes it can override Bootstrap's .bg-warning. We can change background to a fresh color, add glow. That's high-impact.

For .contact-channels-section article and .contact-quick-section .contact-card, padding is set. We can add border-radius, box-shadow, background, transition. The padding must remain var(--space-md) !important. We can keep that exact. We can add other properties. But adding background/box-shadow to these cards is good. Since original padding increased, these are cards on mobile. So we can give them rounded corners and glow shadows.

We need to preserve padding within ±20%, but we are not changing it, so fine.

The media query remains same.

Let's choose a fresh palette. "horizontal-strips" with alternating white/cream/dark; "glow-effects" with accent color. For this fragment, we can use an accent like #6c5ce7 (purple) or #ff6b6b. Let's pick a fresh palette: deep teal + coral accent? Or modern indigo. Maybe use CSS variables? Could define :root? But original fragment doesn't include :root. Adding :root outside media query would be new selector. Is that allowed? The instruction says preserve all selectors exactly. Adding new selectors is not preserving. Better not add :root. We can only modify existing rules. So we cannot define custom properties globally, but we can use literal colors.

Let's design:

- .app-hero-section .badge.bg-warning: change background to #7048e8 (violet), color to #ffffff, border-radius: 12px, box-shadow: 0 4px 20px rgba(112,72,232,0.45), text-shadow: 0 1px 2px rgba(0,0,0,0.2), transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease? transform is not layout? It could affect layout? Transform doesn't affect layout flow but it does move visually. It's allowed? The target style "glow-effects" has hover halo. But we can't add :hover selector because that would be a new selector? Actually pseudo-classes are allowed to be kept if present; we shouldn't add new selectors. The instruction says "Selectors: keep EXACTLY". That means we cannot add new selectors, only modify existing rule bodies. So we cannot add :hover rule. We can only set base states. We can include transition for potential hover, but not add hover. Hmm, but "✨ EFFECT VARIANT: glow-effects" suggests we should use glow shadows in accent color. We can apply glow to base state. Halo on hover would require new selector, which is disallowed. So we avoid adding new selectors. We can still use box-shadow: 0 0 24px rgba(accent,0.4) on base.

- For article and .contact-card: add background: #fff or cream, border-radius: 16px, box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(34,42,66,0.04), transition: box-shadow .3s ease, background-color .3s ease, border-radius .3s ease? That's good.

- For .col-lg-7: maybe add border-radius and box-shadow? Yes, add border-radius: 24px; box-shadow: 0 12px 40px rgba(34,42,66,0.18); background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,249,240,0.7)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); Also color? Maybe color: #2d2a32. But that might affect text color inside. That's acceptable but could be unwanted. We can add color: #2d2a32 as fresh palette. But original hero text may be dark already. It's okay.

Need to ensure no layout change. Adding background to col might change visual, but not layout. However, a background gradient that covers the column could be heavy. Let's use a subtle cream.

Also, for .badge.bg-warning, "bg-warning" implies yellow warning. But we can override. Use "primary" purple to create strong color zone. Or use coral #ff7e67. Let's choose "accent" #f06595 (pinkish) or #6c5ce7. I'll go with #6c5ce7 (fresh violet).

Fresh palette: 
- Primary dark: #1e1e2f (dark navy)
- Light cream: #fff8ed
- Accent violet: #6c5ce7
- Accent coral: #ff6b6b
- Subtle teal: #0fb9b1

Maybe use violet glow for badge, teal glow for cards.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.85), rgba(255,246,235,0.55));
        border-radius: 24px;
        box-shadow: 0 18px 40px rgba(30,30,47,0.18), 0 0 30px rgba(108,92,231,0.18);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-radius 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #6c5ce7, #a29bfe);
        color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(108,92,231,0.55), 0 6px 14px rgba(108,92,231,0.3);
        text-shadow: 0 1px 2px rgba(0,0,0,0.25);
        transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(15,185,177,0.15), 0 2px 6px rgba(30,30,47,0.06);
        transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
    }
}

But wait: The original has only three rules. We added many properties. Is that acceptable? The instruction says "Only colors, shadows, and decorative properties may change." Adding background, border-radius, box-shadow, backdrop-filter, transition are decorative. Good.

But we must ensure padding unchanged (var(--space-md) !important) — yes.

Also check: "transition timing, easing, duration" can change. We included transitions.

Could we add "opacity"? Maybe not needed.

Could we add outline? No.

Need to verify selectors exactly:
- .app-hero-section .row .col-lg-7
- .app-hero-section .badge.bg-warning
- .contact-channels-section article,
  .contact-quick-section .contact-card
Yes.

One concern: Adding background to .col-lg-7 could make the column a giant block with background, but since it's inside a row, it may create visible container. The target style horizontal-strips: "Alternating background colors per strip" and "strong color zones" — could be okay. But if the hero section already has background, adding a nested background might be too much. However, the instruction explicitly says "make colors, shadows, and radius MORE distinct". So let's make it distinct.

Another concern: "backdrop-filter" could affect performance, but fine.

Let's maybe use "cream" color for cards:
background: #fff9f0; border-radius: 20px; box-shadow: 0 12px 32px rgba(214, 164, 62, 0.18), 0 0 0 1px rgba(240, 165, 0, 0.06); etc.

But need fresh palette. I'll use a palette:

--accent: #4f46e5 (indigo) maybe. Or "coral" #ff6b6b. Let's decide.

Target "horizontal-strips" with alternating white/cream/dark/white. In this fragment, we can set:
- .col-lg-7: cream gradient background (light tan)
- .badge: dark navy background with neon glow? But badge.bg-warning is likely on hero image? Could be a "warning" badge. Changing to dark navy with gold text could still be "warning" and fancy. But we want strong color. Let's do "dark" strip: background #1e1e2f, color #ffd166, box-shadow 0 0 24px rgba(255,209,102,0.5). That's a strong color zone. However, overriding bg-warning to dark might be too much, but "horizontal-strips" includes dark. Let's use dark theme for badge. The .badge.bg-warning is a warning badge; dark background with yellow text is still warning-like. Fresh palette: dark blue/slate background, amber text.

- Cards: white background with coral glow? Or cream. Since hero is cream, badge is dark, cards can be white with teal shadow. That gives alternating: cream hero, dark badge, white cards. That fulfills horizontal-strips alternation.

Let's refine:

.col-lg-7:
  background: linear-gradient(145deg, #fff8e7 0%, #fde7d9 100%);
  box-shadow: 0 20px 45px rgba(255, 179, 71, 0.25), 0 0 35px rgba(255, 111, 97, 0.15);
  border-radius: 28px;
  backdrop-filter: blur(14px);

.badge.bg-warning:
  font-size: 0.85rem;
  background: linear-gradient(135deg, #1e1e2f 0%, #2d2a44 100%);
  color: #ffd166;
  border-radius: 999px; (pill) Actually border-radius can be changed. Badge often pill. Use 12px? Let's use 999px maybe. But it's a warning badge, pill shape is okay. Original Bootstrap badge has border-radius: .375rem (6px). Change to 999px is distinct.
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.45), 0 4px 12px rgba(30, 30, 47, 0.3);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);

.contact-channels-section article,
.contact-quick-section .contact-card:
  padding: var(--space-md) !important;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(78, 205, 196, 0.18), 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.35s ease, background-color 0.35s ease, border-radius 0.35s ease;

This gives glow-effects with varied accent colors: amber, teal, peach. Nice.

But we need to ensure not violating "font-size: 0.85rem" — keep unchanged.

Also "text-align: center" keep unchanged.

Now, check "transition timing, easing, duration" — we changed to cubic-bezier etc. Good.

We could add "filter: drop-shadow" but not needed.

Need to output only CSS, no markdown fences. Good.

Let's ensure no layout properties changed. The padding in the third rule remains exactly "var(--space-md) !important" — good. The font-size remains exactly. The text-align remains exactly.

Now, one subtle issue: Adding background and box-shadow to .col-lg-7 could affect inherited layout? No. But adding border-radius to an element without overflow hidden doesn't mask children, but that's fine. Backdrop-filter might blur background behind, but this element may not have transparent area. No issue.

Should we add "filter: drop-shadow" instead? box-shadow is fine.

Let's consider whether to add "outline" or "border" — border-width cannot change, but we can add border-style? Actually border-style and border-color can change, but border-width is not changed. Adding a border with default width? No, don't add border because it would change layout (border width is layout) and we can't add border-width. So avoid.

Adding "background" could affect border-radius? No.

One thing: The original .contact-channels-section article, .contact-quick-section .contact-card has padding !important. If we add background-color, it might change the card appearance, but fine.

Let's produce final CSS.

Make sure to preserve media query and selector list exactly.

Also, maybe we should add -webkit- prefix for backdrop-filter? Good.

Let's craft