/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite CSS visually. The provided CSS is a small media query block. We need to preserve selectors exactly, layout unchanged. Only visual properties. The original has:

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

But text-align is typography? Actually text-align is in the "never change" list under layout? It says text-align, vertical-align are never change. So we must keep text-align: center. font-size is typography fixed, keep. padding is layout, keep similar ±20%, but it says padding within ±20%, but the rule uses var(--space-md) !important. We can't change padding because it's layout, but perhaps we can adjust visual properties by adding new properties? But we need to keep CSS exactly same selectors. We can add visual-only declarations to existing rules. For example, add color, background, border-radius, box-shadow, etc. But the selectors are specific to mobile. We need to ensure we don't change layout. The target style is centered-stage, sharp-edges. But the media query already has text-align: center for hero. Could add color adjustments, shadows, etc. But we need to be careful: The original CSS has only those declarations. We can add new declarations to each rule, preserving original declarations. Since we cannot remove anything except colors/shadows etc. Actually the rule says "Only change colors, shadows, radius, transitions, gradients." So we can add those. We can also change existing color values if any. Here existing values are text-align, font-size, padding — none of those are visual colors. So we must retain them unchanged. We can add color, background, etc. But should we? The instruction says "Refresh this CSS visually" and "Output the rewritten CSS now". Since the original file snippet is small, we need to output a rewritten version with visual changes. We must preserve all selectors and layout exactly. So we can add declarations to each rule that modify visual identity. But be cautious: adding padding? No, padding is layout, cannot change beyond ±20%. We should not change existing padding value. But can we add padding? No, because that would change layout, not allowed. We can add border, border-radius, box-shadow, background, color, transform? Transform might be layout-ish? It's visual but can affect layout? Better avoid. The allowed changes list includes "box-shadow, text-shadow, border-radius, gradient colors, transition, filter, backdrop-filter, opacity, outline styles, border-color and border-style (NOT border-width), caret-color, accent-color, custom properties". So we can add border-radius, border-color, border-style but not border-width? Actually border-width is not in allowed list; it says border-color and border-style (NOT border-width). So we can add border: 3px solid color? That sets border-width which is not allowed. But can we set border-color and border-style without width? If we set border-style: solid; border-color: gold; but default border-width is medium (3px) unless existing. That changes layout? Actually border width affects box size, but if we set border-style and color, the width might default to medium. But we can set border-style and border-color; the width will be whatever default, but that's a visual change. However, the rules say NOT border-width, so we cannot specify width. But maybe we can use outline instead? Outline is allowed, and outline doesn't affect layout. Better to use outline for sharp edges. But target style says "Strong borders (2-3px solid)" and "Hard offset shadows: 4px 4px 0px solid color". We can use box-shadow for hard offset, which doesn't affect layout. We can use outline for sharp edges. Border-radius allowed but small 0-4px.

We need to apply to these selectors. But these selectors are for mobile. We can add colors to elements. For example, .app-hero-section .badge.bg-warning can have background-color, color, box-shadow, border-radius. But .bg-warning is a Bootstrap class with background-color: #ffc107!important. If we set background-color without !important, it may not override due to Bootstrap's important. But we can use !important? The original uses !important on padding. We can add !important to our visual properties if necessary. However, we are told to output rewritten CSS, not necessarily with Bootstrap in mind. But we must be realistic. Since .bg-warning likely has important background, we may need !important to override. But we can use box-shadow to create visual identity without changing background? But "Refresh this CSS visually" suggests we should change colors. The original file might be part of a larger CSS where variables are defined. We can change custom property values? But within this snippet, no custom properties. We could add a rule using the same selectors with visual changes. But the instruction: "Only colors, shadows, and decorative properties may change." So we can modify the existing declarations? No existing color declarations, so we add new ones.

But wait, the target style "centered-stage" is "Aggressive only" — that's a layout pattern, but the mode is conservative, so we shouldn't apply layout changes. It says "Layout pattern (Aggressive only)" but also "🛡️ CONSERVATIVE MODE" means we keep layout. So ignore aggressive layout pattern except maybe colors? Actually target style description gives color palette: dark stage #0f0f1a, bright content area, premium gold or deep purple accent. And effect variant "sharp-edges": hard offset shadows, small border radius, strong borders, snappy transitions. We can apply those visual properties.

Let's analyze each rule:

1. .app-hero-section .row .col-lg-7 { text-align: center; } — We can add visual properties to the column? But adding background/box-shadow to a column might affect layout? No, visual properties don't affect layout except border/padding. We can add box-shadow, maybe color? But text-align center is a typography property (kept). We can add color: #f5f5f5 perhaps? But this is a column, maybe text color. However, the hero section likely already has colors. We can set color to ensure contrast. We can also add a text-shadow? But text-shadow on the entire column might affect heading text. That could be nice. But target palette: dark stage #0f0f1a, bright content, gold accent. If we set color to light gold? We need to be careful not to mess with typography size etc.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; } — Add background-color, color, border-radius, box-shadow. Since .bg-warning is a Bootstrap warning badge, we can make it gold accent with hard shadow. For example: background-color: #f5b841 !important; color: #0f0f1a; border-radius: 0; box-shadow: 4px 4px 0 rgba(15,15,26,0.8); transition: 0.15s. But keep font-size.

3. .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } — Add visual properties to these cards: background-color, border-left? But border-width not allowed. We can use outline: 2px solid? Outline is allowed. Or box-shadow. Since target sharp edges: hard offset shadow. We can add box-shadow: 4px 4px 0 0 rgba(245,184,65,0.4); background-color: #1a1a2e; color: #eaeaea; border-radius: 2px; transition: 0.15s; But padding is kept. Also maybe add border-style and border-color without width? Not safe. Use outline.

But note: The original snippet is a media query at max-width 575.98px. So these styles apply only on small screens. We can add visual flair specifically for mobile. Fine.

However, the instruction "Every selector character-for-character preserved?" We must keep the media query and all selectors exactly. We can add new declarations inside each block. We can also add new lines? Yes, as long as selectors and existing declarations remain. We cannot change the selector list or add new selectors? It says "Selector lists (commas)" preserved. We can add new rules? Probably not. We should not add new selectors. We can add new declarations to existing rules. That is safe.

But we should be mindful: The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we are allowed to change any colors (including adding color declarations) and shadows etc. We must preserve existing declarations that are not visual (text-align, font-size, padding). So output should include those plus new visual declarations.

Let's craft a refreshed CSS. We need to use the target style: centered-stage and sharp-edges.

Color palette: dark stage #0f0f1a, bright content area, premium gold accent. For text on dark background, use light color. But be careful: .app-hero-section .row .col-lg-7 probably contains text; setting color to #f5f5f5 would make text light, but what if hero section already has a light background? The target style says dark stage, bright content area. Since we cannot know, but the palette suggests dark background for the stage. We can set color: #0f0f1a? No. Actually in "spotlight feel: dark stage #0f0f1a, bright content area". Usually the stage (body/section) is dark, content area is bright. If we set the column color to a bright color, that assumes the column is on dark. That might be okay. But better to use a gold accent color for the badge, and for the cards use dark background with light text to match the stage. The hero column might already be styled by other CSS; adding color might conflict. But the instruction says refresh all colors in this file. This file only has these rules. We can add color: #ffffff; to hero text to make it readable on dark stage. That seems plausible.

Let's define a gold accent: #f2c94c or #ffd166. Use hard offset shadows: 4px 4px 0 0 rgba(0,0,0,0.8) or with gold.

For the badge .badge.bg-warning, Bootstrap's bg-warning is yellow. We can change it to a richer gold: background-color: #d4a017 !important; color: #0f0f1a !important; border-radius: 2px; box-shadow: 4px 4px 0 0 #0f0f1a; transition: all 0.15s ease; This gives a sharp, hard offset shadow. But using #0f0f1a as shadow on dark background? Maybe use black or darker. Or shadow gold. Actually hard offset shadow "4px 4px 0px solid color" — in CSS box-shadow can't be solid color without blur. It's just 4px 4px 0 0 color. We can use a contrasting color. For badge, shadow color could be #0f0f1a (dark) if the background is dark? If the badge is gold on a dark stage, a dark shadow may be invisible. Better use a deep purple or dark red? Or use a white shadow? Let's think: If badge is gold, a dark shadow (black) behind it would add depth. But if the badge sits on dark background, black shadow invisible. Maybe shadow color #f9f871? Hmm. Let's use a deep purple accent as shadow: #5a2d82. That gives contrast against dark stage and gold badge. Target palette says "Premium gold or deep purple accent" — we can combine gold badge with purple shadow. But "dark stage #0f0f1a" and gold accent. A dark purple shadow could look good. Let's choose #3c096c.

For cards on small screens, set background-color: #1a1a2e (dark stage slightly lighter), color: #f2e9e4, border-radius: 0, box-shadow: 4px 4px 0 0 #f2c94c, outline: 2px solid #f2c94c? But outline and box-shadow both could be too much. Target "sharp edges" with hard offset shadows. Use box-shadow: 4px 4px 0 0 rgba(242,201,76,0.7); and maybe border-style: solid; border-color: #f2c94c; but border-width? We can set border: 2px solid #f2c94c? That sets border-width, which is not allowed. Actually the list says "border-color and border-style (NOT border-width)" so we cannot set border-width property. However, we can set border: 2px solid ... which includes width, not allowed. So avoid border. Use outline: 2px solid #f2c94c; because outline-width is not border-width, and outline is an outline property. The allowed list includes "outline styles (color, type)" — but "styles" might mean style like solid/dashed, but not width? It says "outline styles (color, type)" — implies we can change outline-color and outline-style, but perhaps outline-width not mentioned. But outline is generally not layout-affecting. We can use outline: 2px solid #f2c94c; This sets outline-width, outline-style, outline-color. Is it allowed? It says "outline styles (color, type)" — maybe not width. But to be safe, we can omit outline and use box-shadow only. But target says "Strong borders (2-3px solid)". Box-shadow can simulate a border: inset 0 0 0 3px #f2c94c? That's a box-shadow, allowed. And it doesn't affect layout. So we can add box-shadow: 0 0 0 3px #f2c94c, 4px 4px 0 0 #0f0f1a; But multiple box-shadows are allowed. That gives a hard border look plus offset. However, "Hard offset shadows: 4px 4px 0px solid color" means an offset shadow without blur. So a box-shadow like 4px 4px 0 0 #0f0f1a. We can combine with an inset ring to simulate border. For example: box-shadow: inset 0 0 0 2px #f2c94c, 4px 4px 0 0 #0f0f1a; That gives both border and offset. This is a nice sharp edges style. But note: box-shadow doesn't affect layout, safe.

For hero column, maybe add text-shadow: 2px 2px 0 #0f0f1a? That would make text look sharp with hard shadow. But if the background is bright, text-shadow dark might be odd. But target "centered-stage" with spotlight feel, dark stage. We can set color: #ffffff; text-shadow: 2px 2px 0 #0f0f1a; This is a visual change. But the hero column might already have a subheading etc. Might be okay. However, text-shadow on the entire column could affect all text, including small text. Maybe not ideal. But since the media query centers text on mobile, adding a text-shadow there could be accent. Let's see.

Also we need to consider transitions. Add transition: all 0.15s ease; to interactive elements? But the hero column isn't interactive. Maybe for badge/cards. "Snappy transitions (0.15s)" — add to cards and badge for hover/focus? But no hover rules in this snippet. Still, adding transition is allowed and won't affect layout.

Let's craft the final CSS. We must preserve all selectors exactly, including the media query, and all existing declarations. We'll add new declarations after the original ones. Use the same indentation? The original uses 4 spaces. We'll maintain.

Potential issue: The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding a color property is allowed. We can also change the existing padding? No. We keep padding exactly. We keep text-align. We keep font-size.

Let's decide on the exact new declarations:

For .app-hero-section .row .col-lg-7:
- color: #f5f5f0; (bright content color)
- text-shadow: 2px 2px 0 rgba(15,15,26,0.85); (hard offset shadow for text)
- transition: all 0.15s ease; maybe not needed.

For .app-hero-section .badge.bg-warning:
- background-color: #f2c94c !important; (override Bootstrap)
- color: #0f0f1a !important;
- border-radius: 2px; (sharp edges small radius)
- box-shadow: 4px 4px 0 0 #3c096c; (hard offset purple shadow)
- transition: all 0.15s ease;

Actually if we set box-shadow on a badge, it might be clipped if overflow hidden? Usually badges are inline-block. Should be fine.

For .contact-channels-section article, .contact-quick-section .contact-card:
- background-color: #16162a; (dark content card)
- color: #eaeaea;
- border-radius: 2px;
- box-shadow: inset 0 0 0 2px #f2c94c, 4px 4px 0 0 rgba(15,15,26,0.9); (strong border and offset shadow)
- transition: all 0.15s ease;

But note: the selector list applies to both article and contact-card. We add same styles to both. The padding remains var(--space-md) !important. We should keep `!important` on padding. We must not remove it.

We can also add `accent-color: #f2c94c;` maybe to cards? But not