/* ============================================================
   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 are given a CSS file with a small media query block. The instruction is to refresh visually while keeping all selectors and layout. Since the file only contains a media query with a few rules, we must apply visual changes that fit the target style: editorial-magazine with glow-effects variant.

We must not change any selectors or layout properties. We can change colors, box-shadow, text-shadow, border-radius, gradients, transitions, filter, opacity, outline, caret-color, accent-color, etc. Also custom properties values can be changed. However, the given CSS uses `var(--space-md)` and `var(--space-md)` etc. We can't change the custom property values unless they are defined in this file; they are not. The file only contains a media query. So we can only change the values that appear: for example, `padding: var(--space-md) !important;` we cannot change padding because it's in the protected list. But we can add color, background, etc. However, the rules only set padding and text-align, font-size. We need to refresh the visual identity. Since the HTML is fixed, but this media query only applies adjustments. We can add new declarations inside the same rules, as long as they are visual properties. The selectors remain exact.

We need to output rewritten CSS with the same selectors, but with added visual properties that align with editorial-magazine + glow effects. Since we cannot change layout, we can add background, box-shadow, border-radius, etc. However, note the original CSS has no colors. To "refresh" this CSS, we can inject color/glow properties into the rules. But careful: the original CSS has only three rules inside a media query. Our output should contain the same structure, but perhaps with added visual declarations. We must ensure that the selectors are exactly preserved.

The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can add declarations to these rules that set colors, shadows, etc. We must not change existing declarations unless they are color etc. There are no colors originally. We can add them.

But we need to be careful: The media query is for max-width 575.98px. We can add visual flair for mobile. The target style is editorial magazine with cream/beige backgrounds, ink text, deep red accent, glow effects. We can apply to these elements.

Let's analyze the selectors:

1. `.app-hero-section .row .col-lg-7` - a column in hero section, on mobile text-align center. We can add color, background, text-shadow? But it's a column, maybe not ideal. We can add a subtle glow or text color? We should avoid changing layout. Adding background to a column might be okay but might affect appearance. Since this is mobile, maybe not. But we need visual refresh. Perhaps add a color to text? But there is no text color set. The element probably inherits. We can set `color: #1a1a1a;` (ink black) but that's not necessarily a change. Better to add a subtle text-shadow? But the column contains text; a glow on text might be nice.

2. `.app-hero-section .badge.bg-warning` - a badge with bootstrap bg-warning. We can change its background? But the class is `bg-warning`, which Bootstrap styles with `background-color: #ffc107`. We can override with our own background and border, box-shadow. The rule already sets `font-size: 0.85rem;`. We can add `background-color`, `color`, `border-radius`, `box-shadow`. But note that `.bg-warning` is a Bootstrap class; overriding it in this media query might be fine. We need to create an editorial badge: maybe deep red background, cream text, slight glow.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - both have `padding: var(--space-md) !important;`. We can add background, border-radius, box-shadow to create cards. These are likely contact cards. We can add a cream background, border, and glow on hover? But we can't add pseudo-classes? Actually we can add `transition` inside the rule, but for hover we'd need a separate selector like `.contact-quick-section .contact-card:hover`. The instruction says keep all selectors exactly as-is. It doesn't say we can't add new selectors? Wait: "Keep ALL selectors and layout exactly as-is" means we must preserve the existing selectors. But can we add new selectors? The output must be the rewritten CSS. If we add new selectors, that might change the HTML? Actually adding selectors is not changing layout, but it is adding new rules. The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly say "do not add selectors." But it says "Keep ALL selectors" — implying the existing selectors remain. Adding selectors is not keeping all selectors? It adds more. However, the spirit is to refresh visual identity without changing layout structure or class names. We should avoid adding new selectors because that could be seen as changing the CSS structure. But we can add declarations within existing rules, including transition and box-shadow. For hover effects, we would normally need a hover selector. But we can use `transition` and maybe rely on existing hover states from elsewhere. Alternatively, we can add a `@media (hover: hover)`? That would be adding a media query. That's probably not allowed. Better to stick only to the existing selectors.

But maybe we can add a `box-shadow` directly to the element, which creates a glowing card. That is a visual change. For hover glow, we would need a separate rule; but we can add `transition` so that any hover state defined elsewhere transitions smoothly. That's acceptable.

We should also consider the target style: editorial-magazine uses cream/beige backgrounds, ink black, deep red accent. Glow effects: glow shadows in accent color, halo on hover, medium radius, subtle pulsing animations. We can't add keyframes because the file doesn't contain any, and adding @keyframes would be adding to the file. But the instruction says "@keyframes names (values inside CAN change)" — but there were none. Could we add new @keyframes? It says "animation-name (values like duration/timing CAN change)" but no existing animation. The "effects variant" mentions "Subtle pulsing animations". To implement, we'd need to add @keyframes and animation properties. Is that allowed? The instruction says "Only change colors, shadows, radius, transitions, gradients." It specifically lists "transitions" but not "animations". However, in the "EFFECT VARIANT: glow-effects" it says "Subtle pulsing animations". But the output must be only the rewritten CSS. If we add @keyframes and animation, we are adding new selectors (@keyframes is a type). This might be considered beyond "rewritten". The safer path: do not add new keyframes, just add glow shadows and transitions.

Let's read the instruction carefully:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • text-shadow
  • border-radius ...
  • gradient colors and stops ...
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

So we can add these properties to elements. It doesn't explicitly forbid adding new rules, but it says "Keep ALL selectors and layout exactly as-is" in the never change list. It says "Class names: keep EXACTLY". So we must not change class names. It doesn't say we can't add new selectors, but the overall instruction at the end: "Output only the rewritten CSS, preserving ALL selectors and layout exactly". "Preserving ALL selectors" likely means don't remove/alter existing selectors. Adding new selectors would not preserve "ALL selectors" as a set? The set includes existing plus maybe new. But the phrase could be interpreted as "preserve all the original selectors" not "do not add any". However, the user's HTML is fixed; adding selectors could inadvertently apply to elements and change layout? Since we only add visual properties, it's unlikely to break layout. But to be conservative, we should avoid adding any new selectors that are not in the original CSS. This is "CONSERVATIVE MODE". So I will not add new selectors or @keyframes. I'll just add visual declarations to the existing rules.

What can we do within each rule?

Rule 1: `.app-hero-section .row .col-lg-7`. We can add `color: #1a1a1a; text-shadow: 0 2px 8px rgba(196, 69, 54, 0.25);` to give the text an editorial ink with a subtle red glow. But be careful: this element likely contains a heading and text. Setting text-shadow on the column will affect all text inside. Maybe that's okay for a glow. Or we could add a background? Hmm.

Rule 2: `.app-hero-section .badge.bg-warning`. We can set `background-color: #c44536; color: #f5f1e8; border-radius: 999px; box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);` This changes the badge to deep red with cream text and a glow. That's definitely a visual identity refresh.

Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card`. We can set:
`background-color: #f5f1e8; color: #1a1a1a; border-radius: 12px; box-shadow: 0 4px 24px rgba(196, 69, 54, 0.15), 0 0 24px rgba(196, 69, 54, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease;`

But transform is a layout property? Actually transform is not in the never-change list. It could affect layout? No, transform doesn't change layout, but it is a visual property. However, the list of things we can change does not include transform. It says "Only change colors, shadows, radius, transitions, gradients." `transform` is not listed. So we should not add transform. We can add `transition: box-shadow 0.3s ease;` because transition is allowed.

But note: `transition` is allowed. We can add a transition property.

We also need to consider `!important` on padding. We keep that. We can add `border: 1px solid rgba(196, 69, 54, 0.15);` but border-style and border-color are allowed, not width. However, if the element already has a border, adding a border might change layout because border-width is part of box model. The instruction says "border-color and border-style (NOT border-width)" — it says don't change border-width. Adding a border where none existed changes layout. We should not do that because it might increase width/height. So avoid adding borders. We can add `outline`? It says "outline styles (color, type)" allowed. Adding an outline doesn't affect layout. But outline is not border. We could add an outline in accent color. But not necessary.

We can add `border-radius` because it doesn't affect layout. `box-shadow` doesn't affect layout. `background-color` doesn't affect layout if it's just background. `color` doesn't affect layout. `text-shadow` doesn't affect layout. `transition` doesn't affect layout. `opacity` doesn't affect layout. `filter` could affect layout? `backdrop-filter` could. But we can avoid filter. So safe.

Let's craft a version that refreshes the visual identity with editorial-magazine + glow.

Also, note that the original media query includes `text-align: center;` which is a layout property, but we preserve it. It also includes `font-size: 0.85rem;` which is typography, preserve. `padding: var(--space-md) !important;` preserve.

We can add additional declarations within the blocks.

One issue: The rule `.app-hero-section .badge.bg-warning` already has a `font-size` declaration. We add color, background, border-radius, box-shadow. We should be careful that Bootstrap's `.bg-warning` sets background-color. Our rule will override it because it appears later? The order in the file might matter, but within our CSS we can set `background-color`. Since this is the only rule for this element in the media query, presumably it will load after Bootstrap or as specified. That's fine.

Let's write the output:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 2px 12px rgba(196, 69, 54, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f1e8;
        color: #1a1a1a;
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(196, 69, 54, 0.12), 0 0 24px rgba(196, 69, 54, 0.08);
        transition: box-shadow 0.3s ease;
    }
}
```

But do we need to keep the original selector group formatting? The original uses:

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

We keep that exactly, with the comma and newline.

We should also consider if we can add `backdrop-filter` or `filter`? Not necessary.

Now, is adding `text-shadow` to the col-lg-7 going to be too much? Maybe it's fine. But maybe we should not add text-shadow to a column because it might affect all text; but that's a subtle glow. We can choose to add `text-shadow: 0 0 24px rgba(196, 69, 54, 0.2);` to satisfy glow.

Target style says "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" and "halo on hover: 0 0 32px rgba(accent, 0.6)". We can't do hover, but we can use 24px glow.

For badge, use 0 0 24px rgba(196, 69, 54, 0.4).

For cards, maybe use a softer glow.

Also "medium radius (8-16px)" — we used 12px and 999px for badge. Badge should be pill, but 999px is okay. But maybe for editorial style, a rectangular badge with 8px radius would be better? The badge has class bg-warning, likely a pill. But we can change radius to 8px. The target says medium radius 8-16px. So use 8px for badge? But pills are traditionally 999px. However, editorial magazine style might use sharp corners. But the effect variant says medium radius. Let's use 12px for cards and 8px for badge? Actually a badge can be 999px, but "medium radius" is the guideline. Let's set border-radius: 8px for badge, and 12px for cards. But the badge is a small element; 8px is fine. However, if it says "glow-effects" with medium radius, the badge's pill shape might be too rounded. But it's a badge, so it's okay. We can make it 6px or 8px. Let's pick 8px.

Also "editional neutrals: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a)" — we used those.

Now, check "transition timing, easing, duration" — we added a transition for box-shadow.

Should we add `transition` to the badge too? Could be nice, but if there's no hover no effect. But we can add `transition: box-shadow 0.3s ease, transform 0.3s ease;` but transform is not allowed? The allowed list includes transition timing; we can specify transition for any property? Actually if we list `transform` inside transition, that's just a property name, but it may transition a property that might be changed elsewhere. But to be safe, only transition box-shadow. For badge, we can add `transition: box-shadow 0.3s ease;` too. But since there is no hover, it's fine.

However, adding transition to the card could cause it to transition if hover elsewhere changes box-shadow. That's good.

Should we add `opacity`? Not necessary.

Let's ensure we didn't change `font-size` or `text-align` or `padding`. We kept them.

One concern: In the `.col-lg-7` rule, the original only has `text-align: center;`. If we add `color` and `text-shadow`, that's fine. But maybe the column already has color inherited; it's okay.

Let's also consider using `backdrop-filter` with a subtle blur? Not needed.

Let's think if there is a need to add `background-color` to `.col-lg-7` to create a "cream background" for hero section? Could be okay but might affect layout? A background on a column doesn't affect layout. But it might change the appearance. But it's a hero section, maybe