/* =========================================
   CSS Theme Variables
   ========================================= */
:root {
    /* BRAND COLORS */
    /* [BACKUP] Default Orange/Fire */
    /* --brand-primary: #FF3D00; */
    /* --brand-secondary: #FFB800; */

    /* [ACTIVE] Deep Flame Blue */
    --brand-primary: #2962FF;
    /* Absolute Zero Blue / BMW Blue */
    --brand-secondary: #0039CB;
    /* Deep Sea Blue */

    --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);

    /* DARK MODE */
    --bg-primary: #0B0C10;
    --bg-secondary: #13151A;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;

    --nav-bg: rgba(11, 12, 16, 0.85);
    --nav-border: rgba(255, 255, 255, 0.06);

    --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-hover-border: rgba(41, 98, 255, 0.5);
    /* Blue Hover */

    --footer-bg: #13151A;
    --footer-text: #A1A1AA;
    --footer-heading: #F1F5F9;

    /* 特效颜色 */
    --core-dot: var(--brand-secondary);
    --core-line: rgba(41, 98, 255, 0.4);
    --core-glow: rgba(41, 98, 255, 0.2);

    /* About 背景渐变色 (Dark Mode) */
    --about-glow-bottom: radial-gradient(circle at 50% 100%, rgba(41, 98, 255, 0.25) 0%, rgba(0, 57, 203, 0.05) 50%, transparent 70%);
    --about-glow-top: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%);

    --btn-border: rgba(255, 255, 255, 0.15);
}

body.light-mode {
    /* LIGHT MODE */
    --bg-primary: #F5F7FA;
    --bg-secondary: #FFFFFF;
    --text-primary: #1E293B;
    --text-secondary: #64748B;

    --nav-bg: rgba(245, 247, 250, 0.85);
    --nav-border: rgba(0, 0, 0, 0.04);

    --card-bg: #FFFFFF;
    --card-border: rgba(0, 0, 0, 0.04);
    --card-hover-border: rgba(41, 98, 255, 0.5);

    --footer-bg: #F1F5F9;
    --footer-text: #64748B;
    --footer-heading: #1E293B;

    /* 特效颜色 */
    --core-dot: #334155;
    --core-line: rgba(41, 98, 255, 0.25);
    --core-glow: rgba(0, 0, 0, 0);

    /* About 背景渐变色 (Light Mode) */
    --about-glow-bottom: radial-gradient(circle at 50% 100%, rgba(41, 98, 255, 0.15) 0%, transparent 60%);
    --about-glow-top: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.03) 0%, transparent 60%);

    --btn-border: rgba(30, 41, 59, 0.15);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.accent-gradient {
    background: var(--brand-gradient);
}

.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Navigation & UI */
.nav-blur {
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nav-border);
    transition: background 0.3s ease, border 0.3s ease;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.nav-link:hover {
    color: var(--text-primary);
}

.btn-outline {
    border: 1px solid var(--btn-border);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: rgba(125, 125, 125, 0.1);
}

/* Cards */
.card-hover {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover:hover {
    border-color: var(--card-hover-border);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -15px rgba(41, 98, 255, 0.15);
    /* Blue Shadow */
}

/* Hero Canvas Positioning */
#hero-section {
    position: relative;
    overflow: hidden;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* === "Horizon Dawn" Background Strategy === */
#about {
    position: relative;
    background-color: var(--bg-secondary);
    overflow: hidden;
}

#about::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: var(--about-glow-bottom);
    pointer-events: none;
    z-index: 0;
}

#about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80%;
    background: var(--about-glow-top);
    pointer-events: none;
    z-index: 0;
}

/* Language Toggle */
body.lang-en [lang="cn"] {
    display: none !important;
}

body.lang-cn [lang="en"] {
    display: none !important;
}

/* Logo Switching Logic */
.logo-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-container .logo-img {
    display: none;
    height: 128px;
    width: auto;
    max-width: 560px;
    object-fit: contain;
    transition: all 0.3s ease;
    margin-top: -24px;

    /* BLUE THEME: Apply Hue Rotate by default */
    filter: hue-rotate(210deg) saturate(1.1) brightness(1.1);
}

.footer-logo {
    height: auto;
    margin-bottom: 0;
}

.footer-logo .logo-img {
    height: 64px;
    margin-top: 0;
}

/* English Logos */
body.lang-en:not(.light-mode) .logo-container .logo-en-dark,
body.lang-en.light-mode .logo-container .logo-en-light {
    display: block;
}

/* Chinese Logos */
body.lang-cn:not(.light-mode) .logo-container .logo-cn-dark,
body.lang-cn.light-mode .logo-container .logo-cn-light {
    display: block;
}

/* Handle Hidden based on mode */
body.light-mode .logo-container .logo-en-dark,
body.light-mode .logo-container .logo-cn-dark {
    display: none !important;
}

body:not(.light-mode) .logo-container .logo-en-light,
body:not(.light-mode) .logo-container .logo-cn-light {
    display: none !important;
}

/* Footer Styles */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    }
}

.footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--footer-heading);
    margin-bottom: 1.5rem;
}

.footer-link {
    display: block;
    color: var(--footer-text);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--brand-primary);
}

.social-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 125, 125, 0.1);
    border-radius: 50%;
    margin-right: 0.5rem;
    transition: all 0.3s;
    color: var(--footer-text);
    border: 1px solid var(--card-border);
}

.social-icon:hover {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

.social-icon svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* =========================================
   Chinese Localization Tweaks
   ========================================= */
body.lang-cn nav a span[lang="cn"] {
    font-size: 0.95rem;
    /* Slightly larger than text-xs (0.75rem) */
    font-weight: 800;
    /* Ensure legibility */
}

/* Enhancing Badge Text for Chinese */
body.lang-cn .inline-flex.text-xs span[lang="cn"] {
    font-size: 0.85rem;
    /* Slightly larger than base text-xs */
    font-weight: 800;
}

/* Fix: Reset CloudHarb button size in Chinese (Keep it small/sharp) */
body.lang-cn nav a.accent-gradient span[lang="cn"] {
    font-size: 0.75rem;
}