/* ============================================================
   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 answer CSS only. Need follow instructions. Need rewrite visual properties only. Original CSS is only media query with text-align, font-size, padding. No colors/shadows etc. Need maybe leave as is? But task says refresh visual identity. We can alter padding within ±20? Actually padding is layout property allowed ±20% max. Original padding var(--space-md) !important. Need not change? Could change? CSS variable values maybe custom prop? It says CSS custom properties (--color-*, --shadow-*) values may change. --space-md? Not listed but layout. But "padding, margin (keep similar values, ±20% maximum)" So could change from var(--space-md) to calc(var(--space-md) * ?). Need maintain selector. We can adjust border-radius? No elements. Could maybe add visual properties to existing selectors? Need preserve selectors. Could perhaps change font-size? Not allowed. But can change color, background? Within media query, original CSS has no colors. To refresh visual identity, we might add color properties? But instruction says keep all selectors and layout exactly, only change colors, shadows, radius, transitions, gradients. Since no existing visual properties, maybe add color/background etc. But "HTML is fixed" and "only colors..." can add. However selectors are tied to components; adding background may be risky but visual only. Need target centered-stage and tight-rhythm. Need likely small radius, subtle shadows. Need preserve paddings? We can adjust padding within ±20. But original snippet only. How to rewrite? We need output CSS with same selectors and media query, and maybe add visual only declarations. Need avoid adding layout-affecting declarations? Border-radius, background, color, box-shadow, transition. We can set text-align center (original) unchanged. font-size unchanged. padding maybe var(--space-md) keep. For .app-hero-section .badge.bg-warning font-size 0.85rem keep. Add maybe background and color? But these classes are existing elsewhere, media query can override. Need be careful not to alter layout. We can add border-radius, box-shadow, background, color, transition. But maybe that violates class names? no. Need maybe target visual identity freshness. We can also add backdrop-filter? visual only. "Only colors, shadows, radius, transitions, gradients" can add.

Need need produce CSS without markdown. Maybe simplest: exactly original? But that doesn't meet "refresh visual identity". Need make meaningful changes within allowed. Need perhaps add visual enhancements to selectors. Let's understand original classes:
- .app-hero-section .row .col-lg-7 in media query 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.
Need target centered-stage palette and tight-rhythm. Could change color palette for badge, cards. But original declarations not color. We can add:
  .app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(...)? 
  }
But bootstrap .bg-warning uses background-color: #ffc107; We can override background? That may change "badge.bg-warning" semantics but visual only. We can choose warm amber/gold. Need keep font-size. Add color, box-shadow. Add border-radius. Add transition. But the rule only applies max-width 575.98px; okay.

For contact cards in mobile: padding var(--space-md) keep. Add border-radius small, background, box-shadow. But cannot add padding? Keep same. Maybe padding stays var(--space-md). Could use padding: calc(var(--space-md) - 4px) !important; within 20% unknown but maybe. But to be safe keep exact.

Need maybe add color to hero? "centered content highlight" but no. Could set color: var(--text-on-stage) maybe custom property? But custom property name new? "CSS custom properties values" can change but adding new maybe okay? We can use direct colors or var. Need no unknown variables. Use hex.

Need perhaps create multi-layer shadows using color palette. Need ensure all selectors preserved. Need maybe add to .app-hero-section .row .col-lg-7? That's layout/current text-align; can add color? If set color it affects text in hero content. That is visual. Use #f5f5fa? But background dark stage? Component likely has dark background already? We don't know. Better avoid messing with unknown context. However task says fresh palette. For "spotlight feel: dark stage #0f0f1a, bright content area; premium gold or deep purple accent". Since this media query only mobile tweaks, we can apply accent colors and subtle effects.

Need maybe modify background-color? Could be too broad. But perhaps safe.

Maybe output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5f5fa;
        text-shadow: 0 1px 12px rgba(15, 15, 26, 0.45);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f5b85c, #c88719);
        color: #0f0f1a;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(200, 135, 25, 0.35), 0 0 0 1px rgba(255, 215, 130, 0.25) inset;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 15, 26, 0.4), 0 4px 12px rgba(15, 15, 26, 0.08);
        backdrop-filter: blur(6px);
    }
}

But this uses border property? Original had no border; adding border can change layout by 1px unless box-sizing border-box. Many likely border-box. But "border-color and border-style can change, NOT border-width" means adding border is changing border-width from 0 to 1px, not allowed? It says only border-color and border-style (NOT border-width) may change. Adding border would set border-width from 0 default to 1px, not allowed. So avoid adding border. But "border-color" can change implies border-width already exists. If adding border-width no. So no border. Also "transition timing/duration" can change, but adding transition property allowed? It says transition timing, easing, duration. It includes transition-property? Could add, but not listed? "transition timing, easing, duration" likely transition property. But we can add `transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease`. It doesn't affect layout. Fine.

Adding `backdrop-filter` allowed. But if element background transparent, backdrop blur maybe okay. However on mobile Safari maybe. Keep.

Need perhaps no `border`.

Need maybe adjust border-radius (visual rounding only) allowed. Add small radius.

Need maybe change `background` gradient. Good.

Need maybe add `color` to col-lg-7? Potential layout? color only text. Fine. But if col already set color elsewhere, this media query overrides due same specificity? It is later in stylesheet? Original file may be order? But output entire snippet, position in file maybe after base? Since only snippet, output replaces snippet in original location. Fine.

Need consider selectors preserved exactly? Need no `!important` removed? Keep. Need maintain original order.

Need maybe "tight-rhythm" small radius 2-6px. For badge maybe 6px. Cards 4px. Good. "compact spacing, gap 8-12" but no gaps.

Need need possibly set `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` but maybe can change padding to a tighter calc to reflect tight-rhythm? But allowed ±20. Without knowing value of --space-md impossible. Could use `padding: calc(var(--space-md) * 0.9) !important;` within 10% reduction. But that changes layout property mildly and allowed. But original says keep similar values ±20. It would be okay. But to be safe keep exact. Yet tight-rhythm says compact spacing. Could reduce padding by maybe 12% using calc. But if --space-md defined as e.g. 1rem, *0.92 = 0.92rem. Could do. Need preserve `!important`. But this is layout property change allowed within 20%. Visual identity includes spacing? Actually "padding, margin (keep similar values, ±20% maximum)" allows changes. But target is visual. Should we change? It says "layout pattern (Aggressive only)" but conservative mode: layout structure cannot change. Keep similar values ±20% allowed. The snippet's original padding is already compact. No need.

Need maybe include `gap`? No.

Potential issue: Adding `color` to `.app-hero-section .row .col-lg-7` could change text color from inherited; visual only. Need maybe use `#f7f7fd` (bright content area) or `#0f0f1a`? If hero has light background, setting white text makes invisible. We need infer "centered-stage" dark stage maybe but hero background? Not specified. Since palette says dark stage #0f0f1a, bright content area, premium gold accent. If hero section perhaps dark background? We can set text to `#e8e8f0` assuming dark stage. But maybe original hero has light? Original CSS has `.badge.bg-warning` and contact cards. Need not change hero text to avoid invisible. But then visual refresh less.

Maybe "only colors, shadows, radius, transitions, gradients" but "Colors throughout file replaced with fresh palette" We cannot know existing colors, so maybe add. Since original CSS has no colors, adding colors is the only possible "refresh". Need ensure not break readability. Could use CSS variables with fallback? Example:
  color: var(--stage-text, #f5f5fa);
But if `--stage-text` already defined? Unknown. Direct values safer.

Need maybe think about Bootstrap classes. `.app-hero-section .badge.bg-warning` bootstrap badge in warning color. In mobile, font-size reduced; visual identity could be gold gradient badge on dark background. Good.

Contact cards maybe on dark background? We can apply `background: rgba(255,255,255,0.04)` but if cards originally on light background, white transparent over light is almost invisible; text remains dark, background light, okay. Black text on light background with white overlay still okay. Box shadows work. Border-radius okay. backdrop-filter with rgba background creates subtle glass effect; on light background blur may alter but okay. But fresh palette wants dark stage; perhaps applying dark backgrounds might be wrong.

Need maybe use deep purple accent instead? Palette: "Premium gold or deep purple accent". Could choose gold for badge and purple for cards. But only visual.

Potential issue "backdrop-filter: blur(6px)" on article/card in contact sections could affect layout? It creates stacking context but no layout. Fine.

Need maybe avoid `transform` transition since adding transform property if not existing? Transition transform without transform no effect. Could transition `background-color, box-shadow, color, border-radius` only. But "transition timing, easing, duration" allow. Use 0.3s ease. Fine.

Need maybe use `outline`? Not necessary.

Need maybe add `accent-color`? Not relevant.

Need maybe include original exact selector list with line break. Yes.

Need maybe final output with no markdown. Need maybe not comment. Good.

Let's craft final. Need ensure not change font-size. We'll keep font-size. `text-align: center` same. `padding: var(--space-md) !important;` same. Add properties.

Potential concern: `.app-hero-section .row .col-lg-7` is overall container but applying `text-shadow` might interfere with text? If element contains children, text-shadow inherited? text-shadow is inherited? Yes text-shadow inherited. This could apply to all text in hero col, maybe undesirable. Maybe better not add text-shadow on entire col. Could only color. But to make visual effect, add `text-shadow`? Text-shadow is allowed. But inherited could be heavy. Instead maybe use `.badge` for shadow. Could omit text-shadow. But need refresh. We can add `background` gradient to hero? No.

Maybe set `.app-hero-section .row .col-lg-7 { text-align: center; color: #f5f5fa; }` If hero content originally dark text on light background, invisible. Hmm. Maybe setting only `color` to `inherit` no change. No point.

Could change `.app-hero-section .badge.bg-warning` background gradient to premium gold, changing from Bootstrap warning yellow to gold. That is sufficient visual identity for hero. For contact cards, change card background and shadow. No need hero text color. To satisfy centered-stage, we could add `background-color` to `article`? But not necessary.

Maybe need "dark stage #0f0f1a, bright content area". We can set contact cards background: `rgba(255,255,255,0.04)` and color? Need maybe set `background-color: rgba(255,255,255,0.04)` not `background`. But if original has light background, dark text remains, okay. If original dark background, white overlay and dark text? Actually dark text on dark background? If original card text dark, likely card background light. Adding white transparent on light card makes near white, still readable. If original card text white on dark background, white overlay and white text okay. Good.

Need perhaps `color: #0f0f1a` on badge to gold background. Badge text likely white/dark? Since bg-warning was yellow; Bootstrap uses dark text? Badge text color inherited? Bootstrap `.badge` uses color: #fff? Actually `.badge` has color: #fff? Wait bg-warning sets `--bs-badge-color`? Bootstrap 5 `.badge` default `color: var(--bs-badge-color, #fff)` and `background-color` var. With `.bg-warning`, text may be white? Actually Bootstrap `.badge` background-color: #ffc107; color: #000? Let's recall: `.badge { color: #fff; background-color: #6c757d; }` so on warning yellow background white text is low contrast; Bootstrap 5.3 badge uses `color: var(--bs-badge-color, #fff)` maybe. `.text-bg-warning` maybe dark text. To ensure contrast, set `color: #0f0f1a` (dark on gold). Good.

Need maybe use `background: linear-gradient(135deg, #f5b85c, #d99a2b)` rather than only background-color. Good.

Need maybe `box-shadow: 0 2px 8px rgba(217, 154, 43, 0.3), 0 0 0 1px rgba(255,255,255,0.2) inset`; border-width none. Inset shadow with 1px might visually add border but is box-shadow, allowed. It doesn't affect layout. But "border-width" not change. Good.

Need maybe use `border-radius: 6px` on badge; in mobile maybe 6px. Good.

Need maybe for cards use `box-shadow: 0 1px 2px rgba(15, 15, 26, 0.2), 0 8px 24px rgba(15, 15, 26, 0.06);` Multi-layer shadows, subtle. Also `background: rgba(255,255,255,0.06);` If original had background-color, background shorthand sets background-image none? `background` resets background-color and image to transparent if not specified? Actually `background: rgba(...)` sets background-color only and resets image to none. This might override existing background image from elsewhere? Better use `background-color: rgba(255,255,255,0.06);` to preserve background-image. Good. Use background-color not background. But in badge, background shorthand replaces any gradient? We want gradient. Use `background: linear-gradient(...)`, okay. Could also `background-image`? To avoid resetting color, use `background-image` and `background-color` separately. Let's do:
  background-color: #d99a2b;
  background-image: linear-gradient(135deg, #f5b85c, #c88719);
This robust.

Need maybe visual identity with CSS custom property? Not necessary.

Need maybe "outline-color" no.

Need maybe "transition" on `.badge` but no hover styles. We can add `transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;` But transform property not in rule. Could include `transform` if we add `@media (hover:hover)`? Too much. No.

Maybe add `transition` on cards. Again no hover. But transition harmless. Could use `transition: background-color 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;` Fine.

Need maybe "opacity" allowed. Could add `opacity: 0.98`? Not needed.

Need maybe "filter" allowed. Could add `filter: saturate(1.05)`? Not necessary.

Need maybe "accent-color" no.

Need maybe ensure no change to `font-size`? Keep exact.

Need maybe if we use `background-color` in `.app-hero-section .row .col-lg-7` not.

Let's draft final:

@media (max-width