/* ============================================================
   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 rewrite CSS. Need inspect original: only media query with layout-ish padding. Need change visual identity? Need preserve selectors and layout; padding can keep similar ±20%. Need maybe add declarations? User says output rewritten CSS, preserve selectors, only visual properties. Original only three blocks in media query. We need apply fresh palette, shadows/radius/transitions. But no properties exist; we can add visual properties? Task says only colors, shadows, decorative properties may change. Since original has text-align and padding; must keep those. We can add box-shadow? But selectors fixed. Need be careful: "keep all selectors exactly". We can add visual declarations to each existing rule. Also perhaps no default styling except within media query. Could add background colors, border-radius, box-shadow, transition to those elements. Need maintain layout: padding value must be within ±20% original? Original padding: var(--space-md) !important; variable unknown, likely around 1rem? If we don't define variable, can't change. Existing CSS fragment maybe from a larger file? Need only output this file? We can output same selectors with added properties. But perhaps need ensure at max-width 575.98. Since viewport narrow.

Need create "airy rhythm", masonry flow, Pinterest-like: white cards, soft shadows on light gray bg, accent strips. But selectors are: .app-hero-section .row .col-lg-7; .app-hero-section .badge.bg-warning; .contact-channels-section article, .contact-quick-section .contact-card.

We can change colors: text-align center keep; font-size unchanged? Original sets font-size; must keep same? It's typography but font-size fixed. We keep. Could add color, background etc. No layout for col-lg-7 maybe only text align. Add color? Need no.

Need maybe change var(--space-md)? Can't change variable? We can replace with calc? But padding constraints: keep similar ±20%. If --space-md unknown. Better keep as var(--space-md) to preserve. But visual changed? Could add padding specifically? Can't because would override. Could change to a different variable? Not safe. Keep.

Need use new palette. But if no colors originally, adding properties okay. Need maybe redesign with background etc. We need ensure selector list preserved. Add border-radius? On articles and cards.

Let's craft CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a32;
        background: rgba(255, 255, 255, 0.55);
        padding: 1.25rem 1.5rem;
        border-radius: 24px;
        box-shadow: 0 12px 32px rgba(94, 84, 142, 0.12), 0 4px 12px rgba(94, 84, 142, 0.06);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #4a3b1f;
        background: linear-gradient(135deg, #f9e79f, #f5c542);
        border: 1px solid rgba(245, 197, 66, 0.4);
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(245, 197, 66, 0.28);
        padding: 0.45em 0.9em;
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border: 1px solid #ede9f2;
        border-radius: 20px;
        box-shadow: 0 18px 40px -12px rgba(72, 61, 99, 0.14), 0 4px 14px rgba(72, 61, 99, 0.06);
        transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    }
}

Need check constraints: font-size unchanged. Padding in badge added? Original no padding; adding decorative? padding is layout? It could affect layout but element likely inline-flex? However original no padding property; adding padding might shift badge. Is that allowed? "Only colors, shadows, and decorative properties may change" adding padding is layout. But maybe visual property? Better avoid adding padding to badge if not originally. But can add border? Border adds to box size. In border-box? Unknown. To be safe, only add visual declarations that don't alter size? box-shadow and background don't alter layout. border does alter layout if box-sizing content-box, but likely bootstrap uses border-box? Still could affect. Better use outline instead of border to not affect layout. For badge, use background gradient, color, box-shadow, border-radius, outline maybe. But border-radius with no layout issue. Can add border-radius. Outline could be considered decoration, but can affect via outline-offset? no layout. Use outline: 1px solid rgba; perhaps safe. But "border-color and border-style may change" not "add border". It's okay? To be safe no border. Add box-shadow.

For col-lg-7, adding padding background? Original has no background, no padding. We should avoid changing layout. We can set color and text-shadow. Could add border-radius and box-shadow? Box-shadow no layout, background no layout. But padding no. We can add transition? Need not.

For contact cards, original already padding var(--space-md) !important. We can add layout-neutral properties: background, border-radius, box-shadow, maybe outline, transition. Border-radius no layout. Background no layout. box-shadow no layout. Good.

Need maybe "accent strip" can be via ::before but no selector? Could add ::before? But original selectors don't include pseudo; adding a pseudo-element would change HTML? Actually pseudo-element visual only, but "selector every character preserved" — adding selectors for existing elements maybe okay? But user says preserve all selectors. Better not add.

Need maybe use css custom properties? Could add :root? Not allowed? Could, but we need preserve all selectors? Original doesn't include :root. Better avoid.

Need "Masonry flow" target style? At mobile, no masonry likely. But theme requirements are "visual identity". Could add background etc.

Need maybe add body? Not allowed.

Need maybe not alter padding except original. Need keep padding var(--space-md). Good.

Need maybe modify original var? Cannot.

Need include all original declarations:
- media query max-width 575.98px same
- .app-hero-section .row .col-lg-7 text-align: center
- .app-hero-section .badge.bg-warning font-size: 0.85rem
- contact... padding var(--space-md) !important
Need preserve exact spacing? Yes.

Need output only CSS. We can add within each existing rule. Need maybe maintain selector list with comma line exactly? Yes.

Potential issue: .app-hero-section .badge.bg-warning: Bootstrap uses .bg-warning with background color and color; we override. Fine.

Need maybe "colors throughout file replaced" but no colors originally. We can add palette.

Need maybe add custom property values? There are none. Fine.

Need maybe use `background` or `background-color`? For col-lg-7, if use background rgba, could alter appearance. Good.

Need perhaps use `box-shadow` with 0 offset? "soft pillowy shadows" multi-layer. Use large border-radius.

Need maybe "mode conservative" means no aggressive spacing. We preserve layout.

Need decide if adding padding to col is okay? Not necessary. Avoid.

Need maybe add `border-radius` to col and badge. For badge, border-radius would round existing background? fine. For col, border-radius has no effect if no background? We add background, then radius is visible. Adding background color may change visual but no layout.

Need maybe add `backdrop-filter` to col: this can be decorative. Could alter readability. Good.

Need maybe add `transition` to col and badge; includes transform? Should avoid transform with layout? transform doesn't layout but may move on transition only on hover? We aren't adding hover. If transition property includes transform, no effect without transform. Fine but unnecessary.

Need perhaps use `filter`? Could add drop-shadow? no.

Need think about current `@media` only. If we add colors to `.app-hero-section .row .col-lg-7` all inside mobile, okay.

Need perhaps "same layout fresh color palette". Since there is no `@media` from rest? This file only has this block.

Need output with no markdown fences.

Need maybe maintain `!important` on padding. Keep.

Need maybe choose colors:
Palette: 
- background gray: #f7f5fa 
- white cards: #ffffff
- accent purple/plum: #6d5c8a, soft lavender shadows.
- warm amber accent for badge: gradient from #fceabb to #f8b500? Given .bg-warning, yellow.
- Text color: #3b3540.
- hero: maybe transparent white with purple tint.

Need perhaps add `outline` instead of border to avoid layout changes. For contact cards, adding outline doesn't affect layout? Outline doesn't occupy space. Great. Could use `outline: 1px solid rgba(109, 92, 138, 0.18); outline-offset: -1px;` This is decorative.

Need maybe define shadow:
- soft pillowy: `0 20px 45px -18px rgba(61, 51, 84, 0.18), 0 8px 20px -8px rgba(61, 51, 84, 0.08)`
- For badge: `0 8px 18px -6px rgba(232, 176, 24, 0.45)`

Need maybe use `border-radius: 18px` and `border-radius: 24px` for large.

Need maybe transition: `box-shadow .4s cubic-bezier(.25,.8,.4,1), background .4s ease, transform .4s ease`; but transform no hover. okay.

Need maybe "background" for contact cards: `linear-gradient(180deg, #ffffff, #fcfbff)` or solid to keep card white. For "airy" could use `background: #fff` plus `box-shadow`. But since no shift, okay.

Need maybe "accent strip" for cards via background-image? e.g. `background-image: linear-gradient(...)`? Can't add pseudo. Could use `border-left: 4px solid #c9b8e8` but border affects layout. Could use `outline` but not accent strip. Better use `box-shadow: inset 4px 0 0 rgba(109,92,138,0.2), ...` Inset shadow doesn't affect layout. This creates accent strip. Nice. For contact cards:
`box-shadow: inset 4px 0 0 #b7a6d6, 0 20px 40px -16px rgba(77,63,105,0.16), 0 6px 16px -6px rgba(77,63,105,0.06);`
This has visual accent strip on left. For rounded corners, inset shadow follows border-radius? Yes, if border-radius, inset shadow will clip? It may follow border radius? In CSS, box-shadow with inset is drawn within padding edge, and border-radius clips. It will show only if background? Yes. With border-radius 20px, inset shadow might follow? It may be clipped to border box. Should work. Good.

For badge: `box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08), 0 10px 20px -8px rgba(232,176,24,0.5);` No layout.

For col-lg-7: `box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 24px 50px -24px rgba(70,55,100,0.18);` But if background semi-transparent, subtle.

Need maybe "caret-color" not applicable. "accent-color" not applicable. "outline" on articles can be used.

Need maybe not add `background` to `.app-hero-section .row .col-lg-7` if it is a column with Bootstrap `col-lg-7`; at mobile maybe width:100%; padding is inherited via bootstrap? Adding background to entire column might look like block. Good.

Need maybe "font-size: 0.85rem" plus color and background. Note: `.badge.bg-warning` likely also has padding from bootstrap? Bootstrap badge may have `padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.375rem;`. We can override `border-radius: 999px` and background. Good.

Need perhaps use `color` in badge. Good.

Need perhaps maybe use original colors no, but no original colors. Need choose "fresh palette": not previous. Use a "fresh" palette maybe "masonry-flow" Pinterest. Good.

Need maybe "border-color and border-style may change" not having border. Could add `outline` not `border`. Good.

Need maybe include `opacity`? We can set `opacity: 1` no.

Need maybe "filter, backdrop-filter" add backdrop-filter to hero. Good.
Need maybe "text-shadow" for hero text: `text-shadow: 0 1px 2px rgba(255,255,255,0.8)` maybe.

Need maybe preserve `.app-hero-section .row .col-lg-7 { text-align: center; }` exactly (including semicolon). Then add declarations.

Need maybe preserve `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` then add.

Need maybe preserve `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` then add. Note selector list has comma and newline. We can keep.

Need maybe if adding `background` to `contact` with `!important`? no need.

Need maybe if adding `transition` includes `background` but if user hovers no effect; okay.

Need maybe final CSS no comments at all? User says no AI comments. Fine.

Need maybe output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #353042;
        background: rgba(255, 255, 255, 0.42);
        border-radius: 24px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 24px 50px -24px rgba(67, 55, 99, 0.2);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #4d3a13;
        background: linear-gradient(135deg, #fde68a 0%, #f6c344 50%, #f0a828 100%);
        border-radius: 999px;
        box-shadow: inset 0 -1px 0 rgba(143, 94, 18, 0.18), 0 10px 24px -10px rgba(224, 162, 32, 0.6);
        transition: filter 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f9f7fd 100%);
        border-radius: 22px;
        outline: 1px solid rgba(109, 92, 138, 0.14);
        outline-offset: -1px;
        box-shadow: inset 4px 0 0 rgba(139, 116, 196, 0.25), 0 18px 40px -16px rgba(58, 46, 88, 0.18), 0 6px 18px -8px rgba(58, 46, 88, 0.08);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
    }
}

Need check: "outline-color" okay. "outline style" okay. "border-radius adjusted". Good.

Potential issue: `background` on `.app-hero-section .row .col-lg-7` could make the column itself a visible rounded box; maybe if it contains multiple rows? Could be okay. But if it's a `.col-lg-7` within `.row`, background on mobile could cover the entire text area. Fine.

Potential issue: `border-radius` on col with no `overflow:hidden` maybe doesn't clip children, but with background only border-radius visible. Fine.

Need maybe "backdrop-filter" on col without background transparent? Good.

Need maybe "Pinterest-like: white cards, soft shadows on light gray bg" We set card background and inset accent.

Need maybe maybe use "masonry-flow" target style no layout