/* ============================================================
   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 respond with rewritten CSS only. We have original CSS fragment. Need refresh visual identity without changing selectors/layout. But original CSS has only media query with three rules: text-align, font-size, padding. There are no colors/shadows/radius to change. Need preserve selectors and property names? Task says can change visual properties but in original these are layout/typography properties: text-align is layout-ish? protected: text-align can't change. font-size protected. padding protected within ±20%. If we cannot change these properties, then output same CSS? But they expect fresh palette. Maybe we can add additional visual properties? But HTML fixed, CSS can add decorations? However "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." We can add color, background, etc. but need keep text-align and font-size unchanged. Need not change padding maybe within 20%. But original padding var(--space-md) cannot adjust? We can leave. Need maybe add visual properties to existing selectors, but careful: media query max-width. We can add box-shadow, border-radius, background, color? But the selectors target .app-hero-section .badge.bg-warning, etc. Could add, but "preserving ALL selectors and layout exactly" implies same rules. We should output CSS with same media query and same selectors, maybe additional declarations not changing layout. Yet "Only colors, shadows, and decorative properties may change" but original doesn't have any. We can either rewrite same exact CSS (no visual change) which fails, or add new declarations. Need avoid changing layout properties. Add background/border/shadow to the selectors maybe. But padding on contact cards is layout; keep as is? Could modify within 20%? We don't know var --space-md. Better keep same.

We need satisfy "fresh palette" with no colors originally. Maybe we can add:
@media (max-width: 575.98px) {
  .app-hero-section .row .col-lg-7 {
      text-align: center;
      color: #2d3748; maybe?
      text-shadow: 0 2px 4px rgba(...);
  }
  .app-hero-section .badge.bg-warning {
      font-size: 0.85rem;
      background: linear-gradient(135deg, #f6ad55, #ed8936); // But class bg-warning likely Bootstrap; overriding background on badge maybe.
      box-shadow: 0 4px 8px rgba(...);
      border-radius: 999px; // pill
  }
  .contact-channels-section article,
  .contact-quick-section .contact-card {
      padding: var(--space-md) !important;
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(8px);
      border-radius: 16px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
      transition: box-shadow 0.3s ease, transform 0.3s ease; // transform maybe layout? but decorative, could be okay but maybe avoid transform due protect. Use transition on box-shadow, background-color.
  }
}

But original has no color. Need maybe not add colors to text because might affect design. But mission says "All color values" must change. It's a visual refresh. We can add palette. Target style: asymmetric-blocks, bold contrasting blocks, high contrast borders? But layout constraints prohibit grid changes. We can add background colors to sections? But only media query sections.

Need decide output. The original CSS seems only media query, no root variables. There are no colors to refresh. If we strictly "preserving all selectors and exactly" but also must change colors, impossible. Could interpret as add new visual declarations while preserving original property values. That is likely desired.

Need be careful: .badge.bg-warning may be a Bootstrap element with bg-warning. Adding background gradient with class bg-warning maybe okay; high contrast. But if bg-warning is in CSS? Actually original CSS didn't include .bg-warning definition. Could override.

Need consider "layout structure" shouldn't change. Adding background, border-radius, box-shadow, transition is okay. Adding color to text is okay. Not changing text-align, font-size, padding. Maybe adding padding? no.

Need preserve `!important` on contact cards padding. Could add other properties after padding with `!important`? not necessary. Need not add transform because transform can affect layout? Transform is visual but not layout, but conservative mode might allow? It says layout properties can't change. Transform isn't listed in protected? Protected list includes display, position, flex, grid, sizing, padding, margin, gap, justify, align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, text-align, vertical-align. transform isn't protected but may be considered decorative. But "soft-shadow" variant doesn't require transform. Avoid.

Need perhaps add a high-contrast border to contact cards:
border: 1px solid rgba(0,0,0,0.06); But border-width must not change? Protected says "border-color and border-style can change, NOT border-width." Adding a border of 1px could change layout because original no border. Better avoid adding border width if not already present. But could add outline perhaps; outline doesn't affect layout? outline can be decorative. We can use box-shadow for border-like effect. Maybe use inset box-shadow? Multi-layer soft shadows. For high contrast borders, use outline maybe. But "outline styles" can change. But adding outline may create visual border but no layout. We can use `outline: 2px solid rgba(...); outline-offset: -2px;` but original no outline; adding outline is a "change" allowed? It is visual only.

Need maybe output:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b3674;
        text-shadow: 0 2px 8px rgba(43, 54, 116, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #f76c1b);
        box-shadow: 0 4px 8px rgba(247, 108, 27, 0.2), 0 12px 24px -6px rgba(247, 108, 27, 0.25);
        border-radius: 999px;
        color: #fff;
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.1);
        border-radius: 18px;
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}

Should we add color to `.contact-channels-section article`? Maybe not.

Target style: asymmetric-blocks, "bold contrasting blocks: each section different background". In mobile maybe contact sections can have alternating backgrounds? We can set background different? The selector covers two separate elements: article and contact-card. Could give first article background A, second contact-card background B? But the selector is grouped; we can add separate selector, but original selectors must be preserved exactly, but adding new selectors? The instructions say "Selectors: keep EXACTLY". It doesn't say don't add? It says "Do NOT change" selectors. We should preserve existing, but adding new selectors not in original might violate "HTML is FIXED — only colors, shadows..."? Also "ALL selectors and layout exactly" means likely no new selectors. Avoid adding separate.

Could set same background for both. But "asymmetric-blocks" could be reflected in colors? We can use strong contrast: article/card dark background with light text? But changing text color would be visual; but might affect legibility? It says only colors can change; adding color/background okay. But since original had no background, dark blocks would be a radical change. Could be desired. However `contact-channels-section` maybe content includes text and perhaps icons; dark background might be okay but we don't know. Need maybe not.

Given "Previous attempt didn't change enough" we need more distinct. Add more robust changes.

Need perhaps use CSS custom properties? None original; can add `:root`? But that would be adding selector not in original. Better avoid.

We can add `accent-color`, `caret-color`? Not relevant.

Need include only CSS, no markdown. Could just produce same code plus declarations. Need ensure first character is CSS.

Let's reason about each rule:

1. `.app-hero-section .row .col-lg-7` text-align center. We can add `color: #1a202c;` maybe text-shadow. However the text-align property is protected. Keep it as original.

2. `.app-hero-section .badge.bg-warning` font-size. Add background gradient, box-shadow, border-radius, color, transition.

Need maybe "warm gold" palette:
- Primary CTA color: #f59e0b to #d97706? Actually "bg-warning" means yellow/orange. We can use gradient from #ffd166 to #f4845f maybe. Need high contrast text: #78350f. But bootstrap maybe `color: #fff`; better use dark text for warning. Let's choose `color: #4a1d00`. Border-radius: 999px. box-shadow multi-layer.

3. Contact cards:
- background: linear-gradient(145deg, #ffffff, #f8fafc) maybe each card same. Since two elements, if background is same, okay.
- box-shadow: `0 4px 8px rgba(2, 12, 27, 0.05), 0 20px 40px -12px rgba(2, 12, 27, 0.15)`
- border-radius: 20px
- transition: box-shadow 0.4s ease, background 0.4s ease
- outline maybe `outline: 1px solid rgba(226, 232, 240, 0.8); outline-offset: -1px;` But outline-width would be "visual" not layout? It is allowed? Outline can impact visual, not layout. Good.

Need maybe use `backdrop-filter: blur(10px);` because soft shadows and glassy. But backdrop-filter may be overkill. It is allowed.

Could add `background: rgba(255,255,255,0.85)` maybe not too bold. Target "bold contrasting blocks": perhaps use deep indigo gradient for contact cards and light text? But original no colors; in mobile only. Hmm.

Let's examine context: These classes sound from a website page "saishi" maybe sports event. Contact channels etc. Mobile media query. Could be landing page. We need visual identity refresh. A soft-shadows variant with fresh palette. Maybe no section backgrounds in mobile. But to demonstrate bold changes, add a fresh palette.

Need maybe add CSS custom properties? Not needed.

Need ensure output not include markdown fences.

Let's think if there is an alternative: The original CSS has no visual properties; the only possible "rewrite" is to output same CSS. But user explicitly requests "Fresh palette" and "Previous attempt didn't change enough." We should add visual properties.

Would adding `background` to `.app-hero-section .badge.bg-warning` violate "background" can change? Original rule might have no background; we are adding, not "changing"? It's a change. Okay.

Need maybe preserve `font-size` value exactly. Yes.

Need maybe preserve `padding: var(--space-md) !important` exactly? Yes.

Need maybe preserve `text-align: center` exact. Yes.

Need if "contact-channels-section article" and "contact-quick-section .contact-card" in original have padding property. We should not modify padding, but add after. Good.

Need maybe if we add `color` to col-lg-7, might alter hero section text color. It could be desired. But target palette: perhaps main text color `#1e293b`. Add `text-shadow` maybe. Since "text-shadow" allowed. Use soft shadow.

Need perhaps use `border-radius` on badge. If badge from Bootstrap has `border-radius: 0.25rem` but overriding with 999px is allowed. Good.

Need think about `background: linear-gradient(135deg, #ffd166, #f4845f)` on badge: If class "bg-warning" originally yellow, gradient would be distinct. Good.

Need perhaps add `box-shadow` and `outline` on card:
```
background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(241,245,249,0.8));
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 16px rgba(15,23,42,0.06), 0 24px 48px -16px rgba(15,23,42,0.14);
border-radius: 20px;
outline: 1px solid rgba(99,102,241,0.12);
outline-offset: -1px;
backdrop-filter: blur(10px);
transition: box-shadow 0.4s ease, background-color 0.4s ease, outline-color 0.4s ease;
```
Since the selector already has `padding`, adding background might not apply to `.contact-card` due specificity? It will apply.

Maybe need `-webkit-backdrop-filter` for Safari? Could include but that's additional declaration; not protected. Good.

Could add `accent-color`? no.

Need perhaps add `box-shadow` to badge only if hover? No pseudo classes? The original has no pseudo but we could add `@media (hover:hover)`? That would add @media not original; avoid.

Need maybe output only original media query block with declarations.

Need not include "" comments. Good.

Let's craft final with fresh palette:
- Hero col text: `color: #1e1b4b;` (indigo-950) and `text-shadow: 0 2px 12px rgba(30, 27, 75, 0.12);`
- Badge: `background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%); color: #431407; box-shadow: 0 4px 8px rgba(249,115,22,0.25), 0 16px 30px -8px rgba(249,115,22,0.3); border-radius: 999px; transition: box-shadow 0.35s ease, transform 0.35s ease;` But transform could be visual; okay. Maybe don't include transform due "previous attempt didn't change enough" but "layout cannot change". `transform` not layout but can affect visual. To be safe, no transform. Use `background-color`? no.
- Contact cards: maybe bold contrasting blocks. Need every section different background. Could use `background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);` same for both, but we can make contact card have a colored accent line using box-shadow inset? For example:
`box-shadow: inset 0 4px 0 #6366f1, 0 4px 8px rgba(2, 6, 23, 0.05), 0 20px 40px -12px rgba(2, 6, 23, 0.14);`
This adds color block accent. It's a shadow, not border, no layout. Good. `border-radius: 20px;`.

Maybe choose "asymmetric-blocks" high contrast borders; use `outline: 2px solid #e2e8f0;` but adding outline can be in addition to shadow. Use `outline: 2px solid rgba(99,102,241,0.15); outline-offset: -2px;` This creates a soft border. It doesn't affect layout. Need maybe `border` cannot be changed if not existing? But outline okay. The instructions say "border-color and border-style (NOT border-width)" can change. It doesn't mention outline width but "outline styles" can change; likely okay.

Need perhaps for contact cards use different background? Since selector grouped, can't. Could use CSS variables with nth-child? Can't add selectors. Could use `background: linear-gradient(135deg, #ffffff, #eef2ff)` for both. Fine.

Need maybe "Mixed gaps, unequal columns" not on mobile due media query. Can't do. But no layout constraints.

Need maybe add `border-radius` in `contact-channels-section article, .contact-quick-section .contact-card` = 18px. Good.

Need maybe `box-shadow`:
`0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 16px rgba(15, 23, 42, 0.06), 0 32px 64px -16px rgba(79, 70, 229, 0.18)`. This includes indigo glow.

Need maybe `background` for contact cards with transparency:
`background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(238,242,255,0.88));`
`backdrop-filter: blur(16px);`
`-webkit-backdrop-filter: blur(16px);`

Need maybe `color` on article? Not necessary.

Need maybe `outline` on article:
`outline: 1px solid rgba(99,102,241,0.14);`
`outline-offset