/* Hongqiu Trade — theme tokens and shared effects (developer comments in English) */

:root {
    --color-primary: #0054d3;
    --color-primary-hover: #0044b0;
    --color-primary-alt: #2d54b3;
    --color-primary-alt-hover: #244491;
    --color-text: #171a1f;
    --color-text-muted: #565d6d;
    --color-text-muted-about: #585e65;
    --color-border: #dee1e6;
    --color-border-about: #dee0e3;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-blur: 8px;
    --hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    --mask-overlay-about: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    --neon-cyan: #22d3ee;
    --section-bg-soft: #fafafb;
    --cta-tint: #f0f6ff;
}

html {
    scroll-behavior: smooth;
    /* Offset in-page anchors for fixed header (73px) */
    scroll-padding-top: 73px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
}

/* Bootstrap Reboot underlines all links; reset so nav/footer stay clean. Tailwind `hover:underline` still wins (higher specificity). */
a,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none;
}

/* Mobile nav: clicks on the icon should hit the button (custom element can steal events on some browsers) */
[data-mobile-nav-toggle] iconify-icon {
    pointer-events: none;
}

/* Scroll reveal baseline (enhanced by scroll-reveal.js) */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Primary CTA — energy core glow */
@keyframes pulse-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35), 0 4px 14px rgba(0, 84, 211, 0.35);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(34, 211, 238, 0), 0 8px 28px rgba(0, 84, 211, 0.45);
    }
}

.btn-cta-primary.btn-cta-glow {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.btn-cta-primary.btn-cta-glow:hover {
    animation: pulse-glow 1.6s ease-in-out infinite;
    transform: translateY(-1px);
}

/* Image wrappers: layout lives on parent; img stays src/alt/loading only */
.hq-img-fill img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hq-img-natural img {
    display: block;
    width: 100%;
    height: auto;
}

.hq-img-partner {
    height: 100px;
}

.hq-img-partner img {
    display: block;
    height: 100px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Contact hero: full-bleed background image + readable foreground */
.contact-hero {
    isolation: isolate;
}

.contact-hero h1.contact-hero-title {
    color: #f8fafc;
}

.contact-hero p.contact-hero-lead {
    color: rgba(248, 250, 252, 0.9);
}


header nav > a {
    white-space: nowrap;
}

#about-overview {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 768px) {
    #about-overview {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}