/* ============================================================
   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;
    }
}

The user wants me to rewrite CSS with a "gradient-rich" variant for a "masonry-flow" target style. However, the provided CSS snippet is quite small - it only contains a media query with some layout-ish rules (text-align, font-size, padding). There are no colors, shadows, or gradients in the original snippet to change!

Wait, let me re-read the instructions. The original CSS file is:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

This is a very small snippet. The instructions say to refresh the visual identity without changing layout structure or class names. But this snippet only has:
- `text-align: center;` (layout, cannot change)
- `font-size: 0.85rem;` (typography, cannot change)
- `padding: var(--space-md) !important;` (padding, can vary ±20%)

There are no colors, shadows, border-radius, gradients, transitions, etc. to change. 

But the task says "Refresh this CSS visually" and "Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

Hmm. The issue is that the CSS as given contains no visual properties. I need to be careful here. The instructions are strict: keep the selectors exactly, keep layout properties, don't change typography. But I'm asked to change visual properties. Since there are none, what do I do?

Option 1: I could add new visual declarations to the existing rules. For example, add background gradients, box-shadows, border-radius to the existing selectors. That would be "refreshing the visual identity" without breaking layout.

Option 2: I could just output the CSS as-is since there's nothing to change. But the task explicitly says to make it more distinct.

Let me think about "target style: masonry-flow" and "effect variant: gradient-rich". The colors palette suggested: Pinterest-like white cards, soft shadows on light gray bg. Each card may have its own accent strip. Gradient-rich: linear/radial gradients on most backgrounds, gradient borders via border-image, multiple stops, smooth long transitions.

Given the selectors:
- `.app-hero-section .row .col-lg-7` - hero section column, text-align center on mobile
- `.app-hero-section .badge.bg-warning` - a warning badge
- `.contact-channels-section article` and `.contact-quick-section .contact-card` - contact cards

I can add visual properties to these. Let me craft gradient-rich, Pinterest-like soft shadows, etc. But I must keep the existing declarations too.

Wait, but "padding: var(--space-md) !important;" - padding is layout, keep similar values (±20% max). So I should keep the padding value as `var(--space-md)` or maybe adjust slightly. The instruction says "width, height, padding, margin within ±20% of input". I can't know the value of `--space-md`, so I should keep the same var reference.

Also "font-size: 0.85rem" - typography, cannot change. Keep it.

"text-align: center" - layout, cannot change. Keep it.

So my changes would be adding new declarations, not modifying existing ones. But is that within the spirit? The instructions say "Only colors, shadows, and decorative properties may change." Adding decorative properties to rules that didn't have them is arguably a change. The output must preserve selectors exactly and the layout.

Let me think about what a reasonable "gradient-rich" refresh would look like:

1. For `.app-hero-section .badge.bg-warning`:
   - Since it's a warning badge, I could give it a gradient background (e.g., warm amber/orange gradient), a soft shadow, rounded corners, and a transition.

2. For `.contact-channels-section article` and `.contact-quick-section .contact-card`:
   - Add gradient background (white card with subtle gradient), soft Pinterest-like shadow (multi-layer box-shadow), border-radius, and maybe a gradient border via border-image or a pseudo-element... but I can't add pseudo-elements unless they exist. Actually, I could use `border-image-source` with a linear-gradient, but border-image requires border-width and is tricky. Also, using `border-image` on a card might not look good. Alternatively, use a background gradient overlay via `background: linear-gradient(...)`.

   - Pinterest-like: white cards, soft shadows on light gray bg. So maybe `background: linear-gradient(135deg, #ffffff, #f8f9fa)` and `box-shadow: 0 2px 8px rgba(...), 0 8px 24px rgba(...)`.

3. For `.app-hero-section .row .col-lg-7`:
   - Could add a subtle text-shadow? No, text-shadow would change text appearance but not typography per se. Actually text-shadow is a decorative property, allowed. But adding to a hero column might be odd. Maybe add a subtle background gradient or drop shadow. But adding a background to a grid column could affect layout visually. Hmm.

Actually, wait. Let me reconsider. The instruction says "NO LAYOUT CHANGES" - adding background colors or shadows doesn't change layout. That's fine.

But should I add declarations to `.app-hero-section .row .col-lg-7`? It's a hero section container. Maybe a subtle gradient text effect? No, that changes font properties. Better to keep it minimal but distinct.

Let me write the CSS with gradient-rich styling. I'll keep all original declarations and add new visual ones.

However, I'm concerned about overstepping. The self-check says: "Every selector character-for-character preserved?" Yes. "display, position, grid-template-*, flex-direction unchanged?" Yes (no such properties). "width, height, padding, margin within ±20% of input?" padding kept as `var(--space-md)`. "font-family, font-size, font-weight, line-height unchanged?" font-size kept. "Colors throughout the file replaced with fresh palette?" There were no colors originally, so I'm adding fresh ones. "Shadows redesigned?" Adding new ones. "Border-radius adjusted?" Adding. "No AI marker comments?" OK.

Hmm, but the file fingerprint and "块2/2" (Chinese for "block 2/2") suggests this is part of a larger file. The user seems to be asking me to rewrite just this block. But the block is only a media query. 

Let me also consider: maybe I shouldn't add a bunch of new properties; maybe the expected answer is to simply output the same CSS since there's nothing visual to change? But then it'd violate "Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

The instructions are clear that I must change visual properties. Since the input has none, I will add them. But I need to be careful not to change the existing declarations.

Let me compose:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 1px 12px rgba(67, 56, 202, 0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), 0 1px 3px rgba(0, 0, 0, 0.08);
        border-radius: 999px;
        transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 20px;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04), 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 24px 48px -16px rgba(15, 23, 42, 0.08);
        border: 1px solid rgba(226, 232, 240, 0.8);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 20px 48px -12px rgba(99, 102, 241, 0.18), 0 32px 64px -20px rgba(99, 102, 241, 0.14);
        border-color: rgba(165, 180, 252, 0.6);
        transform: translateY(-4px);
    }
}
```

Wait, but the original selectors in the media query are:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article, .contact-quick-section .contact-card`

There are no `:hover` rules. Adding a `:hover` rule would be adding a new selector, which the instructions say must be preserved exactly but doesn't forbid adding new ones... but it says "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY". Adding a new selector for hover might be considered okay since pseudo-classes are listed. But the instruction says "Every selector character-for-character preserved?" - adding new selectors doesn't violate that if they don't exist. However, the task says "Only rewrite the CSS, preserving ALL selectors exactly". It doesn't explicitly say I can't add selectors, but usually "preserving ALL selectors" means don't remove any, and don't change any. Adding new ones might be questionable.

To be safe, I should probably avoid adding new selectors/rules. Stick to the three existing rules and only modify properties within them. But I can add a hover state within... no, I can't add a nested rule.

Alternatively, I could use `filter: grayscale(0)` or something on hover, but that requires a hover rule.

Hmm, let me think. The output should be the rewritten CSS. I think adding a `:hover` rule for the cards is a natural enhancement for "smooth long transitions" and gradient-rich variants. But the instructions are conservative: "NEVER CHANGE (would break HTML layout)" - adding a hover rule wouldn't break HTML. And the selector list in the output would still contain the original selectors. But the instruction "Selectors: keep EXACTLY" could be interpreted as "the selectors used must match exactly."

Given the "conservative mode" and "HTML fixed", I think the safest interpretation is to only modify the existing rules, not add new ones. But then how do I make it "gradient-rich" and "distinct"? I can add properties to existing rules.

Let me avoid adding new selector rules. I'll just enhance the three existing rules. I'll keep `text-align`, `font-size`, `padding` as is, and add decorative properties.

Actually, transition on the badge won't have hover to trigger, but transitions can apply to focus/active states or just be there for any state change. A transition property in the base rule is harmless.

Let me reconsider the badge: `.badge.bg-warning` - `bg-warning` is a Bootstrap class that sets background color. In this media query, they're adjusting font-size. If I set `background: linear-gradient(...)` on the badge, it would override Bootstrap's `.bg-warning` background. That's a visual change, allowed.

But do I want a gradient border via border-image? The instruction says "Gradient borders via border-image" in the effect variant. Let me incorporate a gradient border somewhere. For the contact cards, I could use `border-image-source: linear-gradient(...)` but border-image doesn't work with border-radius (border-radius and border-image are incompatible). Since I want rounded corners, border-image would ruin the radius. Instead, I could use a background-clip technique or just a plain border with gradient overlay using box-shadow. Or use `border-image-source` without border-radius. But the Pinterest style calls for soft rounded cards, so I'd rather keep border-radius.

Alternatively, use `outline` with gradient? Outlines can't do gradients either.

Maybe the badge gets a gradient background (already), and the cards get a gradient background plus layered shadows. For "gradient borders", I could add a `border: 1px solid transparent` and `background: linear-gradient(white, white) padding-box, linear-gradient(...) border-box` technique. That works with border-radius! Let me use that for the cards:

```css
background: 
    linear-gradient(145deg, #ffffff, #f8fafc) padding-box,
    linear-gradient(135deg, rgba(99,102,241,0.4), rgba(236,72,153,0.3), rgba(99,102,241,0.4)) border-box;
border: 1px solid transparent;
border-radius: 20px;
```

That gives a gradient border that follows the rounded corners. That's a nice gradient-rich effect.

But note: the original rule has `padding: var(--space-md) !important;`. If I set `border: 1px solid transparent`, the total size would change by 2px, which is a layout change? The padding is inside, but border-width is 1px vs whatever the original border width is. Actually, the original might already have a border from Bootstrap's card class. The `.contact-card` probably has a border. Changing border from e.g. 1px solid #e0e0e0 to 1px solid transparent keeps the same border-width, so no layout change. Good.

Wait, but I don't know the original border width. If I set `border: 1px solid transparent`, and the original had no border or a different border-width, that would change layout. The instructions say "border-width" is in the NEVER CHANGE list (it says "border-color and border-style (NOT border-width)"). So I must NOT change border-width. If the original element had no border, adding a 1px border changes layout (adds 2px). That's risky.

Hmm. The instruction says: "border-color and border-style (NOT border-width)" - meaning I can change border-color and border-style, but not border-width. So I should avoid adding a border where there wasn't one.

But I don't know the original element's border from this snippet. Bootstrap's `.card` has `border: 1px solid rgba(0,0,0,.125)`. So `.contact-card` likely has a border of 1px. If I change color to transparent, that's allowed. And then the gradient border technique with `border-box` wouldn't require changing border-width.

Let me use the `background` gradient border technique with `border: 1px solid transparent` - wait, that changes the border-color, which is allowed, but if the original had a different style (e.g., solid), I'm keeping the style solid. Border-width would remain whatever it was if I explicitly set 1px... but if the original was, say, 2px, I'd be changing it to 1px. That's not allowed.

Safer approach: don't use border-image technique. Instead, use a pseudo-element? No, can't add selectors.

OK let me simplify: I'll use layered box-shadows that create a "gradient-like" border illusion using inset shadows. E.g.:

```css
box-shadow:
    0 0 0 1px rgba(226, 232, 240, 0.8),
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 12px 32px -8px rgba(15, 23, 42, 0.12);
```

The `0 0 0 1px` creates a border-like outline without affecting layout (box-shadow doesn't affect layout). That's a great technique. And I can use an inset shadow for a gradient feel... no, box-shadow colors are solid.

Alternatively, I can use `outline: 1px solid rgba(...)` - outline doesn't affect layout. And I can change outline color. The instructions allow outline styles (color, type). But adding an outline might overlap with existing border.

Let me be pragmatic. Since the snippet doesn't show existing border declarations, I'm probably safe to add decorative properties. The key constraint is not to change layout. Adding box-shadow, border-radius, background, filter, opacity won't change layout. Adding `outline` doesn't change layout. So I'll use these.

Let me also consider: `.app-hero-section .row .col-lg-7` - what can I add? It's a column. Adding a background gradient might look odd; adding text-shadow to the whole column might look odd too. Maybe add a subtle drop-shadow filter? `filter: drop-shadow(0 4px 12px rgba(...))` could give a nice glow to the hero content. Or a subtle background gradient. Hmm.

Actually, in "masonry-flow" Pinterest style, the hero section might benefit from a subtle gradient background and soft shadows. But the selector is just a column, not a card. Adding text-shadow in a hero could be nice if it's a heading, but text-shadow