/* ============================================================
   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 this CSS with visual changes only, keeping selectors and layout. The original is a media query with three rules. We must preserve selectors exactly, and only change color/visual properties. However, the original has almost no color properties, just padding, text-align, font-size. The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But the original doesn't contain colors, shadows, etc. The padding, text-align, font-size are layout/typography which are forbidden to change. So what can we change? We could add new visual properties not present? "Only change colors, shadows, radius, transitions, gradients." It says "change" but we can add? The original has no such properties. The target style is card-mosaic with gradient-rich. However, the selectors are for hero section, badge, contact cards. We can add background gradients, border-radius, box-shadow, transitions to these elements. But we must not change layout. Adding box-shadow, background, border-radius, transitions is allowed. Also we can adjust padding within ±20%? Actually padding is in the original for contact channels article and contact card. It says keep similar, ±20% maximum. But we must not change layout significantly. The original padding: var(--space-md) !important. We don't know value of --space-md. We should keep as is. The instruction says "Only change colors, shadows, radius, transitions, gradients." So we should not change padding. We can add decorative properties.

We must output CSS only, preserving media query and selector structure. We can add new declarations inside each rule. Let's craft a fresh palette.

Target style: "card-mosaic" with vibrant card colors on neutral background, each card type different accent. But the selectors are not card-mosaic; they are hero, badge, contact cards. We can apply gradient-rich effects to these.

Let's design:

- For .app-hero-section .row .col-lg-7: maybe add a subtle gradient background? But it's a text container, maybe text-align center. We can add text-shadow? Typography? text-shadow is allowed. But careful not to change layout. We can add background gradient and border-radius? The col itself spans full width? We can add a decorative radial gradient behind text. But if we add background to a column, it might create a visible box. That's okay as long as no layout change? Background doesn't affect layout. Border-radius doesn't. Box-shadow doesn't.

- For .app-hero-section .badge.bg-warning: badge has background color from Bootstrap bg-warning. We can override background with gradient, color, border, box-shadow, border-radius. Font-size is typography, keep as is.

- For .contact-channels-section article, .contact-quick-section .contact-card: apply gradient backgrounds, different accents, border-radius, box-shadow, transition.

But we must be careful: The original has a media query max-width 575.98px. So these changes apply only on small screens. We can add visual upgrades.

We need to preserve !important? Original has padding !important. We can keep that. For added properties we can use normal or !important to override Bootstrap? Probably need to ensure they apply. We can use background, border, box-shadow, transition. Use !important on colors to override existing Bootstrap styles? For badge.bg-warning, Bootstrap sets background-color: #ffc107. To override, we might need !important or more specificity. The selector .app-hero-section .badge.bg-warning has good specificity, but Bootstrap .bg-warning might be similar. Since in media query, later? The original CSS likely comes after Bootstrap? To be safe, add !important to visual overrides? The instruction says keep selectors exactly, but doesn't prohibit !important. However, "Only change colors, shadows, radius, transitions, gradients" — adding !important is fine. But be careful to not alter layout.

We need to align with "card-mosaic" target: grid with mixed spans, but that's layout, cannot change. We'll just implement color palette: neutral background, vibrant cards.

Let's define new visual identity:

- Neutral background: maybe for .app-hero-section .col-lg-7, add a subtle radial gradient from rgba(255,255,255,0.15) to transparent? But background of section may already be dark? We don't know. We can assign a soft gradient background to the column, making it stand out. Use background: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.15), transparent 60%). That's decorative.

- Badge: gradient from #f59e0b to #ef4444? Actually bg-warning is yellow. Let's set background: linear-gradient(135deg, #fbbf24, #f97316); color: #1f2937; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 4px 12px rgba(245,158,11,0.35); border-radius: 999px; backdrop-filter: blur(4px); transition: all 0.5s cubic-bezier(0.22,1,0.36,1). But font-size unchanged.

- Contact cards: For .contact-channels-section article and .contact-quick-section .contact-card: these are cards. We can give each a vibrant gradient background. But since both selectors apply to different elements, we can style them similarly or differently. To vary per card type, we could use nth-child selectors? But we must preserve selectors. We can add new selectors? The instruction says "Keep ALL selectors and layout exactly as-is." It doesn't say we cannot add new selectors. But the original CSS only has three rules. We are to rewrite the CSS, preserving selectors exactly. It would be safer to only use existing selectors, not add new ones. But we can add new declarations to existing selectors. To vary card types, we could use :nth-child etc., but that would be a new selector, which is arguably a break because "Selector lists (commas), combinators, pseudo-classes" should be kept exactly? Actually the instruction says "Selectors (CRITICAL - HTML is fixed): Keep class names exactly... pseudo-classes keep... combinators keep... selector lists keep." So we should not add new selectors. We can only modify existing declarations. So for the combined selector (.contact-channels-section article, .contact-quick-section .contact-card), we can set a common style. But "each card type a different accent" would require distinct selectors. Since original doesn't have distinct selectors, we cannot add. So we'll give both the same vibrant gradient? Or use CSS variables? We can set a gradient that works for both. But maybe we can use :where? No, adding pseudo-class is a new selector. Not allowed.

Alternatively, we could apply a general gradient-rich style to both. Since it's a media query, maybe enough.

Let's craft:

For .app-hero-section .row .col-lg-7:
- background: radial-gradient(circle at 30% 50%, rgba(99,102,241,0.12), transparent 70%);
- border-radius: 2rem; (visual)
- padding? Original may have padding from Bootstrap. We can add padding? But that changes layout? Padding is layout property, but the instruction says "padding, margin (keep similar values, ±20% maximum)" for properties present in original. If we add new padding to an element that didn't have it, that would change layout. So avoid adding padding/margin. Only add background, box-shadow, border-radius, backdrop-filter, transition. Border-radius doesn't affect layout? It does not. Box-shadow no.

- box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 32px rgba(0,0,0,0.08); But if the column is text-only, adding box-shadow may create a box around the entire column. That's a visual card effect. Might be okay.

But we need to be careful: .col-lg-7 is a flex item; adding background and shadow might create a block background. That's fine.

For badge:
- background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
- color: #431407;
- border: 1px solid rgba(255,255,255,0.3);
- box-shadow: 0 4px 15px rgba(249,115,22,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
- border-radius: 999px;
- backdrop-filter: blur(8px);
- transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s ease; But transform is not allowed? We can add transition on transform but not transform itself. Transition property allowed. But if no transform changes on hover, it's useless. But we can set box-shadow transition.

- Maybe add text-shadow: 0 1px 2px rgba(0,0,0,0.1).

For contact cards:
- background: linear-gradient(145deg, #6366f1, #8b5cf6); But both same. Maybe we can use a border-image gradient? Use border-image: linear-gradient(...) 1; but border-image might not work with border-radius. We can add background: linear-gradient(...), border: 1px solid transparent; border-image: linear-gradient(...) 1; But border-image + border-radius doesn't work well. Better to use background-clip: padding-box and a background layer for border? That's more complex and might be overkill.

We can use background: linear-gradient(135deg, rgba(99,102,241,0.9), rgba(139,92,246,0.9)); color: white? But we don't know existing text color. We shouldn't change text color? color is allowed to change. We can set color: #ffffff maybe. But if the card already has text, white might be okay on vibrant gradient. But for .contact-channels-section article, it might contain headings and links. Changing color to white could affect readability but visual. Allowed.

However, the instruction says "Only change colors, shadows, radius, transitions, gradients." So color changes are allowed. We'll set color on contact cards to white, with text-shadow for pop.

- border-radius: 1.5rem;
- box-shadow: 0 16px 40px -12px rgba(79,70,229,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
- transition: background 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.34,1.56,0.64,1); transform transition allowed but no transform.

Maybe add a pseudo-element? Cannot add new selectors. But we can use existing ::before/::after? The original doesn't have, so adding would be a new selector. Not allowed.

We should output exactly the media query with three rules, each containing original declarations plus new visual declarations. We must preserve all original properties: text-align, font-size, padding. We can keep them. We can reorder? Keep original declarations intact, maybe add new ones before or after.

Let's craft final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(circle at 30% 40%, rgba(244, 114, 182, 0.12), transparent 70%);
        border-radius: 2rem;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 32px -8px rgba(236, 72, 153, 0.15);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f97316 55%, #ef4444 100%);
        color: #431407;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        box-shadow: 0 4px 16px -2px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #6366f1, #8b5cf6 60%, #d946ef);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 1.75rem;
        box-shadow: 0 20px 40px -18px rgba(99, 102, 241, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

But we need to check if any layout properties changed: text-align, font-size, padding unchanged. Good. Width, height etc not touched.

But we added `border: 1px solid` to elements that might already have border? Border width is not to be changed? The instruction says "border-color and border-style (NOT border-width)" can change. It does not say we cannot add border-width if not present? Actually "border-color and border-style (NOT border-width)" means when changing existing borders, don't change width. But adding a border to an element that previously had no border changes layout (affects box sizing). That is a layout change. We should avoid adding border or changing border-width. However, we can add `border: 1px solid`? That would add 1px width, potentially layout shift. To avoid layout shift, we could use `outline` or `box-shadow` inset to emulate border. But the instruction explicitly says "border-color and border-style (NOT border-width)" — implies we may change style and color but not width. If no border existed, adding one changes width. So better not add `border: 1px solid`. Use `box-shadow: inset 0 0 0 1px rgba(...)` to simulate border without layout change. Similarly, for badge, don't add border width. Use outline? Outline doesn't affect layout. But outline is not border. We can use `outline: 1px solid rgba(...)` or `box-shadow inset`. Actually outline doesn't affect layout, so it's safe. But outline might be clipped by border-radius? It follows border radius. We can use `box-shadow: inset 0 0 0 1px ...` which is also safe.

So instead of border, use `box-shadow: inset 0 0 0 1px rgba(...)`.

Also, `backdrop-filter` can affect appearance but not layout. Fine.

`text-shadow` allowed.

Need to keep `transition` property. Fine.

Now, the target style says "Gradient borders via border-image" in variant. But we cannot use border-image because it requires border-width. Could use background double layer with background-clip to simulate gradient border without border property. That's possible with background: linear-gradient(white, white) padding-box, linear-gradient(...) border-box; but requires border: 1px solid transparent, which adds border-width. Not allowed. So skip.

Maybe we can use `outline: 1px solid transparent;` and `outline-offset: -1px;`? Outline doesn't support gradients, only solid.

We'll stick with box-shadow inset.

But also, for .app-hero-section .row .col-lg-7, adding box-shadow to a text column might create a box around the text. That's okay.

Need to ensure we don't add `transform` property, only transition on transform. The instruction allows transition values, but adding a transition on transform when no transform is applied is harmless. But if there's an existing CSS rule with hover transform, our transition might affect it. That's fine.

Let's check original properties: In the original, there are no colors. We are adding background, color, box-shadow, border-radius, text-shadow, backdrop-filter, transition. All are allowed categories.

But `color: #ffffff` for contact cards may be a color change. Good.

However, contact cards might already have a background color from other CSS. Our gradient overrides. Fine.

But we need to ensure specificity: .contact-channels-section article, .contact-quick-section .contact-card are in media query, but other CSS elsewhere might set background. We'll use !important on background? Not necessary if this CSS comes later. But to be safe, we can use !important