/* ============================================================
   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 respond to the user request. The user provided a "File: assets/css/saishi.css#块2/2", mode conservative, request ID, fingerprint. They want a CSS refresh with target style "symmetric-grid" and effect variant "glow-effects". They provided an original CSS snippet that only contains a media query with a few rules. We need to rewrite this CSS visually while keeping all selectors and layout exactly as-is. The original CSS is very small:

@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;
    }
}

The instructions say to refresh the visual identity WITHOUT changing layout structure or class names. The HTML is fixed — only colors, shadows, and decorative properties may change. But here the original CSS doesn't contain any colors or shadows. It only contains text-align and font-size and padding. We are allowed to change "padding, margin (keep similar values, ±20% maximum)" but here padding is var(--space-md) !important. We can't change the var name? Actually, we can change CSS custom properties values maybe? But the original CSS uses var(--space-md). We could introduce a new custom property? But the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. It doesn't mention --space-* but that's a spacing variable, which is layout-ish. We are not allowed to change padding significantly. But we could add color, shadows, etc. to these existing rules? However, the original rules don't have any color. We are to rewrite the CSS with a fresh palette, glow shadows, etc. We need to add decorative properties to these selectors while keeping the existing properties. Since the original rules are only within a media query, we can add additional declarations to those selectors. But we must preserve all selectors exactly. We can add new properties. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

The original file is a partial snippet from a larger file, but the user says "File: assets/css/saishi.css#块2/2". Probably they want the entire file? But they gave a snippet. We need to work with the given CSS. We should output the rewritten CSS for this snippet. But maybe we need to expand? Actually the original CSS is just that media query. There is no other content. The instruction says "Only the rewritten CSS, preserving ALL selectors and layout exactly". We should output the same media query with the same selectors, same declarations, plus potentially new visual declarations. But adding declarations to `.app-hero-section .row .col-lg-7` would affect the layout? text-align: center is not a visual color change. We are allowed to change colors etc., but we cannot change text-align because that's layout-ish (text-align is listed under layout? Actually in the "NEVER CHANGE" list, "text-align, vertical-align" are listed. So we must keep text-align: center. font-size is typography, so keep. padding is layout, keep as var(--space-md) !important. So we cannot change those values. We can add color, background, box-shadow, border-radius, text-shadow, etc. to those selectors. But is that appropriate? The user wants a visual refresh. However, if we add colors to a centered col, that might be weird. But the target style is symmetric-grid and glow-effects. We could add a subtle text-shadow to the centered column, a glow to the badge, and for contact cards we could add a glow shadow and rounded corners. But we must ensure we don't change layout. Adding box-shadow doesn't affect layout because it doesn't take up space? Actually box-shadow doesn't affect layout. border-radius doesn't affect layout. background-clip etc. Good.

But wait: The original CSS only has a media query. If we output only those rules with added visual properties, that might be insufficient to meet "fresh palette" across the file. But the user specifically provided this snippet. Perhaps this is a "block 2/2" of a file, and they expect us to process that block. We should stay grounded: Given the original CSS is only that, we rewrite it visually. We can add properties like color, background, border, box-shadow, text-shadow, transition, border-radius, backdrop-filter, filter, opacity, accent-color, caret-color, outline, etc. But must be careful not to change layout.

Let's parse the instructions:

🎯 TARGET STYLE: symmetric-grid
  • Strict equal grids: "repeat(3, 1fr)" or "repeat(4, 1fr)"
  • Uniform gap (24px throughout)
  • Items aligned to baseline

But the original CSS doesn't have grid definitions. We are not allowed to change grid-template-columns if present. It's not present. So we can't add grid properties? Actually we could add display: grid? No, that would change layout. We must not change display. The target style is a design direction, but since we are in conservative mode, we can't apply aggressive layout changes. So perhaps we ignore the grid pattern because it's not applicable to the given selectors.

✨ EFFECT VARIANT: glow-effects
  • Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)
  • Halo on hover: 0 0 32px rgba(accent, 0.6)
  • Medium radius (8-16px)
  • Subtle pulsing animations

We can apply glow shadows to appropriate selectors. But the selectors are inside a media query for small screens. Adding hover effects on mobile is okay (though hover doesn't apply well, but still).

We need to pick a fresh palette. The target "symmetric-grid" color palette: "Balanced harmonious palette". Let's choose a teal/blue accent with soft neutral backgrounds. Since no colors exist in the original, we can define some custom properties maybe at the top? But we can't change selector structure. We can add a `:root` block? The instructions say preserve all selectors exactly, but we can add new selectors? Actually the output should be a rewrite of the original CSS. Adding a `:root` rule would introduce a new selector, which might be acceptable? The instruction "preserving ALL selectors exactly" suggests that existing selectors should be preserved, but it doesn't necessarily forbid adding new selectors. However, the output should be the rewritten CSS of the given snippet. Since the snippet starts with @media, adding a :root before it could be okay if it's part of the file. But the request says "File: assets/css/saishi.css#块2/2" — maybe block 2 of 2, and block 1 might contain root variables. But we've only been given block 2. We should probably not add new :root because it might duplicate existing ones. We can use CSS variables that already exist? Since the original uses var(--space-md), there might be a :root elsewhere defining --space-md. We can add color variables inline, or use literal colors.

Given the output should be a drop-in replacement for the snippet, we should keep all existing declarations and add visual ones. But we must be careful with the `!important` on padding. We shouldn't remove that.

Let's analyze each rule:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
We can add:
- color: maybe a deep slate for text? But this is a column container, not necessarily text. Setting color would inherit to text content. Could be okay.
- text-shadow: maybe a subtle glow? But text-shadow on a container might apply to all text.
- background: maybe transparent? Not needed.
- box-shadow? Not appropriate for a column.
- border-radius? Not appropriate.
- animation? We can add a subtle pulsing glow on the section? But the selector is a column. Adding animation to a column might be weird.

Maybe the original CSS is just a responsive adjustment, and the visual refresh should be applied to the whole file, but we only have this snippet. Perhaps the intended task is to take the original CSS and produce a new version that includes visual properties. But with such a small snippet, it's hard. We need to make the best of it.

We could add a `transition` and `animation` to the columns? But that might be overkill.

Alternatively, perhaps the user expects us to infer that this is a media query block inside a larger file, and we should rewrite the entire file's colors? But we don't have the rest. The instruction says "Original CSS" and gives a block. We should output the block.

Let's think about the meaning of "File: assets/css/saishi.css#块2/2" - maybe the file was split into two chunks, and this is chunk 2. We are asked to rewrite that chunk. So output that chunk with visual refresh. We can add visual declarations as long as we don't change layout. We can also introduce new rules that are specifically for styling; but it's safer to only alter the existing rules.

We need to create a "glow-effects" variant. In a mobile media query, contact cards could have a subtle glow and rounded corners. The `.app-hero-section .badge.bg-warning` is a badge, we can give it a glow shadow with warning color. The `.contact-channels-section article` and `.contact-quick-section .contact-card` are cards, we can give them background, border, box-shadow, border-radius, backdrop-filter, etc. But wait: The original rule already sets padding. Adding a background color and box-shadow will make them look like cards. However, these selectors might already be styled elsewhere (outside the media query). If we add a background here, it might override or complement. Since this is a media query with `!important` on padding, adding declarations without `!important` may have lower precedence than existing base styles. But we're rewriting the file, so we should assume this is the only source? Actually the user gave an "Original CSS" snippet. We should preserve it and add visual changes. Since we don't know the rest of the file, we need to be careful. But in these kinds of tasks, we are expected to rewrite the given CSS visually while keeping all selectors and layout. We can add new declarations directly to the existing rules.

Let's decide on a palette. For "symmetric-grid", we can use a balanced palette with a primary accent of teal/cyan (#0d9488 or #14b8a6) and secondary of indigo (#6366f1), with neutral backgrounds (#f8fafc, #e2e8f0). But since we're only styling within a small media query, we can use CSS variables? Could define local variables inside the media query? Not possible to define custom properties in a media query? Actually you can define custom properties anywhere, but they would be scoped to the rules? Better to use literal colors.

We'll use an accent color of #06b6d4 (cyan-500) or #0ea5e9 (sky-500). Let's choose a warm accent to be distinct: maybe coral (#f43f5e) or amber (#f59e0b). Since the badge is bg-warning (Bootstrap warning yellow), we can keep that yellow but enhance with an orange glow. But we need a "fresh palette" overall. Let's pick a deep teal + soft lavender + peach accents. But the effect variant wants accent glow. Let's define an accent color of #06b6d4 with a warm complement.

The badge uses Bootstrap's `.bg-warning`, which typically has a yellow background. We can add a box-shadow with rgba(245, 158, 11, 0.4) to create a glow. Also a slightly larger border-radius and maybe a subtle outline.

The contact cards: add a soft white background with a slight transparency and backdrop-filter blur, a border with subtle color, a box-shadow with a glow, and a border-radius of 12px or 16px. Also a transition on hover to increase glow.

The hero column: maybe add a text-shadow? Or a subtle drop shadow on the section? We can add a `text-shadow: 0 0 24px rgba(6, 182, 212, 0.3)` to the centered text, but that may affect all text in the column. Could be okay for a hero section. Also could add `color`? But text-align is already set.

Since the media query targets small screens, hover effects may not be relevant, but we can still define them. However, the instruction says preserve pseudo-classes if present. There are no pseudo-classes in the original. We could add `:hover` rules for the contact cards, but that would be adding new selectors. Is that allowed? It's a new selector but with a pseudo-class. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE" — meaning if present, preserve them. It doesn't forbid adding new ones? But "preserving ALL selectors exactly" suggests we shouldn't add new selectors. So better not add new hover rules. We can add `transition` to the existing selectors so that hover (if handled elsewhere) transitions smoothly. That doesn't require new selectors.

Let's craft the output:

Original:
@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;
    }
}

We need to rewrite this. We can add:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #0f172a;
        text-shadow: 0 0 24px rgba(6, 182, 212, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #451a03;
        border: 1px solid rgba(245, 158, 11, 0.4);
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
        backdrop-filter: blur(4px);
        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.75);
        border: 1px solid rgba(203, 213, 225, 0.8);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 0 24px rgba(6, 182, 212, 0.15);
        backdrop-filter: blur(12px);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But wait: We added a `color` to the hero column, which may override a text color from base. That's okay. We changed the badge's background from Bootstrap's warning to a gradient. That's a visual change. We added border, radius, shadow. For contact cards, we added background, border, radius, shadow, backdrop-filter. We added transitions. The padding remains unchanged.

However, this might be too aggressive? But the user asked for a visual refresh and "previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." So we should make bold changes.

But we must ensure we don't violate the "NEVER CHANGE" list. Let's check:
- display: none changed? We didn't add display.
- background: yes, changed/added.
- border-radius: yes, added.
- box-shadow: yes, added.
- transition: yes, added.
- font-size: kept as 0.85rem.
- color: added.
- padding: kept as var(--space-md) !important.
- text-align: kept center.
- @media condition: kept.

We added `transform: 0.3s ease` in transition but didn't actually set a transform. That's not changing layout, just transition property. It's fine. But "transform" is not in the allowed list? Actually the allowed list says "transition timing, easing, duration" can change. It doesn't mention transform. But adding `transform` as a transition property is not a transform itself. Still, to be safe, we could change the transition to only `box-shadow, background-color, border-color` etc. But the instruction says "transition timing, easing, duration" are allowed. It doesn't say we can add new transition properties. However, transition is a decorative property. I think adding `transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;` is fine.

But we need to be careful: We should not change `backdrop-filter`? It's allowed ("filter, backdrop-filter" under "MUST CHANGE" — actually it's listed as something we should change? It says "filter, backdrop-filter" in the list of things we must change? It says "✅ YOU MUST CHANGE (visual identity only): ... • filter, backdrop-filter". That means we are allowed to change them, but we don't have to. Adding them is fine.

Also "opacity" can change. We didn't add opacity.

We should maybe include a subtle pulsing animation? The effect variant says "Subtle pulsing animations". We could define `@keyframes` and add it to the cards or badge. But adding @keyframes would be a new rule. Is that allowed? The "NEVER CHANGE" section says "@keyframes names (values inside CAN change)" — meaning if there are existing keyframes, preserve names and you can change values. But