/* ============================================================
   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 answer only CSS rewritten. Need follow mode. Need examine original CSS: it's a media query with rules. Need visual refresh only. But original has almost no colors/shadows; mostly layout (text-align, font-size, padding!). Need be careful: layout constraints say padding can change ±20%, font-size cannot change? It says typography font-size unchanged. But target style maybe need visual identity. However original includes font-size 0.85rem; must preserve font-size. Padding --space-md !important maybe could adjust? Padding allowed ±20%; but it's fixed var maybe not change. Need preserve selector and property names? We can add new visual properties? Wait output should preserve selectors and layout. Could add colors, shadows, radius, transitions, etc. Need "Refresh visual identity WITHOUT changing layout structure or class names." Since original CSS scoped in media query. We can append properties to existing rules? Need maintain same selectors. We can rewrite the CSS with same at-rule and same selectors, maybe add visual properties where applicable. Need not modify layout properties? We can keep text-align, font-size, padding. Could adjust padding within ±20% but using variable unchanged. Better keep exact properties to avoid layout change. Add new visual declarations: for .app-hero-section .row .col-lg-7 maybe maybe background, border-radius? But it's a column, maybe visual. Need ensure no layout change. We can add color, background, box-shadow? But adding backgrounds could affect layout? It doesn't affect layout if no dimensions? Could add color, text-shadow, etc. Need be meaningful.

Need maybe interpret target style: masonry-flow + glow-effects. But original only few rules, no card. Need add visual identity to existing elements: perhaps warm/light background on hero column, badge styling, contact cards glow. Need use palette: white cards, soft shadows light gray bg, accent strips. But cannot change layout, but can add styles.

Need understand context? File saishi.css. Classes: app-hero-section .row .col-lg-7; app-hero-section .badge.bg-warning; contact-channels-section article, contact-quick-section .contact-card. Media max 575.98. Need output CSS preserving media query and selectors.

Need decide whether to add new rules? It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." Likely only rewrite provided CSS blocks, can add visual declarations within same rules. Could also add new selectors? No, keep all selectors; don't need add new selectors perhaps. But to apply palette, need maybe use variables? We can introduce custom properties? But layout says CSS custom properties values may change; perhaps can define :root? But then adding new selector? However output should maybe not add new selectors? It says keep all selectors exactly; adding :root would be a new selector, potentially violates? Better not. Could add custom properties within existing rules? Not necessary.

Need ensure "no markdown fences, no explanations." Output only CSS.

Need think of constraints: "font-size, font-weight, line-height unchanged" So keep font-size:0.85rem; no change. Padding can vary ±20%, but using var unchanged. We can leave padding. But "colors throughout file replaced"—there were no colors, but can add. Need "shadows redesigned" maybe no existing shadows; add shadows. Need "Border-radius adjusted"—add radius.

Need perhaps modify `text-align: center;` is layout, keep. Add perhaps `color`, `text-shadow`.

Need maybe add `transition` to contact card, `box-shadow` on hover? But no hover selector present. We cannot add hover selectors? Because selectors "pseudo-classes keep exactly" means could if original had no hover, adding hover selectors would be new selector list; likely not allowed. Better avoid. But we can add transitions. Use existing selectors with properties.

Need perhaps create visual effects for `.badge.bg-warning` with glow shadow, background gradient? But cannot change font size. We can add `background`? But `.bg-warning` likely Bootstrap utility background; modifying via more specific selector maybe okay. Need ensure not conflict. Could use `background: linear-gradient(...);` (color change). It may not change layout. `border-radius`, `box-shadow`, `color`, `text-shadow`. For `.badge`, adding background overrides utility but okay.

Need maybe for `.contact-channels-section article, .contact-quick-section .contact-card` add background: #ffffff; border-radius: 16px; box-shadow: multi-layer; border-left maybe accent strip? But border-left width? Border-width not to change? It says "border-color and border-style (NOT border-width)" so can add border-left but width would be border-width; changing? We can set `border-left: 4px solid`? That's border-width = 4px, not allowed? It says NEVER change border-width; but says visual changes may include border-color and border-style (NOT border-width). We can use `box-shadow` inset to create accent strip instead, no border width. Good.

Need be careful with `padding` property. Original has `padding: var(--space-md) !important;` for contact items. Keep same. We could add `background`, `box-shadow`, `border-radius`, `transition`. But adding background may make card white, etc. Since original doesn't set background, okay.

Need maybe apply background to hero col: Could be a light translucent gradient with rounded corners? But if container? It's a column. Text-align center. We can add `border-radius: 24px; background: rgba(255,255,255,0.6); backdrop-filter: blur(6px); box-shadow: ...; padding?` But cannot add padding maybe because original no padding; adding padding would change layout. But maybe could add padding? "padding, margin keep similar values" no baseline; but layout could break. Better not add padding to hero col. We can add `text-shadow`, maybe `color`. But no layout. Could add `background` and `border-radius` without padding; but background would extend full column height/width; might look fine? It might affect visual but not layout. Yet if no padding, text may touch rounded background edge; but okay. Need maybe avoid background on hero col? Could apply a subtle text gradient? But color only.

Need maybe use custom properties? Not needed.

Need think about "target style: masonry-flow" but media query max width small. The target style mentions cards with varied aspect ratios, but original is not a card structure. However AGGRESSIVE mode? Actually user says mode conservative, target style for layout. But we cannot change layout. So only can apply card-like visual effects to existing article/card.

Need maybe write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a32;
        text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb86b, #ff7ac6);
        color: #1e1b2e;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 122, 198, 0.4), 0 4px 12px rgba(30, 27, 46, 0.12);
        text-shadow: 0 1px 0 rgba(255,255,255,0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(8px);
        border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 12px 28px rgba(31, 38, 60, 0.08), 0 0 24px rgba(122, 92, 255, 0.08);
        transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }
}

Need no hover; transitions transform though transform property not used? If no state change, transition does nothing unless transform on same element from another rule? But could conflict. We can include transition property for box-shadow etc. But no hover. It's okay.

Need ensure "transition timing, easing, duration" can change; adding transition okay? It is a visual property. But transition property isn't listed as allowed? It says change transitions. Good.

Could use `box-shadow` with accent glow. Need "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" etc. We can add. Need "halo on hover" but no hover selector. Could maybe use existing `:hover`? There is none. Can't add new selectors? But perhaps adding `:hover` would violate? The instruction "pseudo-classes (:hover, :focus, ::before, ::after)" under "selectors" and "Keep exactly" means if original didn't have, adding would be a new selector not preserving. Avoid.

Need maybe modify `!important`? Keep `!important` on padding exactly. Could add `!important`? No.

Need "File: assets/css/saishi.css#块2/2" suggests perhaps only block 2/2. Original has no colors, maybe because only media query block. Need perhaps output exactly the CSS block, no extra. Good.

Need maybe use a more distinctive palette. Let's pick fresh palette: deep plum background? Light gray bg? Since no background on body, but cards white. Use accent: coral or violet. Target palette "Pinterest-like: white cards, soft shadows on light gray bg". So cards white with soft shadow, accent strip via `box-shadow: inset 4px 0 0 ...`? Wait inset shadow can create strip. Could use `box-shadow: inset 4px 0 0 0 #f472b6, 0 8px 24px rgba(...)`. Inset shadow does not affect layout. That's great. Need "Each card may have its own accent strip"—we can use different accent for each selector? For contact-channels article and contact-quick contact-card, same rule cannot differentiate. We could perhaps use `box-shadow` with same accent. But to vary, need separate selectors would be new selectors? Could not. We can use a color gradient? Hmm.

Could create "accent strip" using `background` linear-gradient with transparent? e.g., `background: linear-gradient(90deg, #f472b6 0px, #f472b6 4px, #ffffff 4px, #ffffff 100%);` This uses background, no layout. But if card already has no background, this would make white with left strip. Nice. It relies on border-radius? If radius, left strip may not adhere to rounded corner? Could be okay. Use `background-clip`? Not necessary. Could combine with `border-radius`. But original no background; we can set a gradient. But then if article has existing background? maybe not.

Need maybe use `background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);` and inset shadow strip. Good.

Need perhaps use "glow effects" with accent color. Need choose accent. We can set different accent colors: for badge coral/pink, cards violet.

Need maybe check "layout pattern (Aggressive only)" — not relevant.

Need maybe not modify `padding` because "padding, margin keep similar values, ±20% max." It's `var(--space-md)`. If we don't change, okay.

Need perhaps preserve `text-align: center;` and `font-size: 0.85rem;`. Yes.

Need maybe include "!important" on padding. Keep as-is.

Need maybe ensure no markdown fences. Fine.

Need perhaps produce more than original? We can add declarations only within existing rules. But could also include CSS variables? Not needed.

Need think about "All color values: background, color, border-color, fill, stroke, outline-color" and "CSS custom properties (--color-*, --shadow-*) values" but original has no color values, so adding new colors. Fine.

Need perhaps ensure no use of `transform` because layout? Transform is visual but could affect overlay; but adding transform to transition property only not actual transform. If no transform applied, no issue. Could include `will-change`? Not necessary.

Need maybe add `transition: box-shadow 0.3s ease, background-color 0.3s ease;` But if no hover, no effect. Could include `transition`. It's okay.

Need maybe add `cursor`? Not visual identity? Not necessary.

Need maybe add `outline`? Could add outline to cards on focus? No.

Need maybe add `filter: drop-shadow`? Could add `filter` to badge? But `filter` can affect layout? no. Could use `filter: saturate(1.1)`. But no.

Need maybe consider `@media (max-width: 575.98px)` is exact; keep.

Need maybe include no extra blank lines? Fine.

Need maybe choose colors. Let's create a coherent palette:
- Background: soft light gray #f4f1fa for contact cards? But cards cannot change page background; cards themselves.
- Cards: white #fffdfe with gradient.
- Accent A: coral/rose #ff6b9d
- Accent B: violet #7c5cff
- Text: deep plum #2d1b36? Could use `color: #3a2e45` for hero. But if original text color from Bootstrap remains maybe adding color okay.
- Badge bg: warm gradient from #ffd166 to #ff6b9d; text dark #3a2e45.
- Shadows: `0 8px 24px rgba(70, 35, 90, 0.12), 0 0 24px rgba(124, 92, 255, 0.18)` etc.
Need "soft shadows on light gray bg" maybe no body. Set `background: #f7f5fb` on contact cards? yes.

Need perhaps handle border-radius: badge pill; cards 16px; hero col 24px. Great.

Need maybe include `backdrop-filter: blur(10px)` on cards? But if background opaque, no need. Could use `background: rgba(255, 255, 255, 0.86);` and `backdrop-filter: blur(12px);` for glass. But "Pinterest-like: white cards" not necessarily glass. Use solid white. But if cards over images, glass nice. However backdrop-filter might be visual, allowed. Need include `-webkit-backdrop-filter`? Could, but not necessary? Could include for Safari. But no need.

Need maybe no `transform` values; transitions maybe no effect. Fine.

Need maybe update text-shadow for hero; not necessary but okay.

Need maybe include `-webkit-text-stroke`? Not allowed? Could but no.

Need maybe use `background-clip: text; color: transparent;`? That changes color and maybe text? But if color transparent, background clip; would be visual but could reduce accessibility and maybe if background not supported. Avoid.

Need perhaps preserve `font-size: 0.85rem` exactly. Good.

Need perhaps use `letter-spacing`? Typography "letter-spacing" not change; avoid.

Need perhaps add `opacity`? Could use but no.

Need perhaps decide if `text-align: center` is layout property and should remain first; yes.

Need maybe if adding `background` to `.col-lg-7` could produce weird full-bleed background within column. But within media query, on small screens col-lg-7 probably full width. It might be okay. Yet it changes visual significantly. Should we add background to hero col? Original had no background; adding full column background could affect view but not layout. However if column is inside row container with padding, background may stretch edge-to-edge, maybe not desired. But target wants visual refresh, okay.

Need maybe use `box-shadow` and `border-radius` on hero col. But if text-align center and no padding, text may be flush to background edge; because column has no padding, but parent likely has padding. Could add `padding` but layout constraints? Original no padding there. We shouldn't. Maybe avoid background on hero col and just set text color/text-shadow. Good. But need "colors, shadows" elsewhere.

Need maybe add color to `.badge.bg-warning` and background. Since badge is small; shadow glow okay. Contact cards are main card elements; use card visual.

Need maybe add shadows and radius to contact cards, no layout changes. Perfect.

Need maybe perhaps add accent strip via `box-shadow: inset 4px 0 0 0 #ff6b9d`—wait box-shadow with `inset` and spread 0, offset-x 4px: a 4px vertical strip on left. But if border-radius 16px, inset shadow may not follow curve nicely? It will follow border-radius. Good. But `box-shadow: inset 6px 0 0 0 #ff6b9d, 0 12px 28px rgba(45, 27, 54, 0.08), 0 0 24px rgba(124, 92, 255, 0.15);` Need note box-shadow with multiple shadows, first on top. Good. This creates an accent line.

Need maybe for `contact-channels-section article` and `contact-quick-section .contact-card`, if some cards already have border-radius? We override. Fine.

Need maybe add `background: #fff9fc`? If using inset accent strip, need background color to show. `background: #ffffff;` perhaps. But if article has maybe background transparent, white card. Good.

Need maybe add `transition: box-shadow 0.3s ease, transform 0.3s ease;` But if no transform property, maybe not. Add `transition: box-shadow 0.35s ease, background-color 0.35s ease;` Good.

Need maybe add `will-change: box