/* Icon system */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; margin-right: 0.5em; color: currentColor; }
.icon-sm { width: 0.9em; height: 0.9em; }
.icon-cta { width: 1.1em; height: 1.1em; }
.icon-label { margin-right: 0.4em; }
.icon-product { width: 1.2em; height: 1.2em; margin-right: 0.4em; }
.icon-timeline, .icon-compass { width: 1.1em; height: 1.1em; margin-right: 0.4em; }

/* Improve contrast in dark backgrounds */
.dark .icon { color: #fff; }

/* Footer icons alignment */
.footer-contact p .icon { margin-right: 0.6em; }

/* Overlay CTA disabled state */
.overlay-cta.disabled { pointer-events: none; opacity: 0.6; }

:root {
    --color-background: #000000;
    --color-background-offset: #0a0a0a;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a0a0a5;
    --color-border: #2a2a2a;
    --color-accent: #ffffff;
    --font-family-main: 'Poppins', 'Helvetica Neue', 'Arial', sans-serif;
    --content-width: 1400px;
    --header-height: 80px;
    --section-padding: 20vh;
    --animation-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family-main);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}
body.no-scroll { overflow: hidden; }

/* --- Wave Background --- */
.wave-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.15;
    pointer-events: none;
}

.container { width: 100%; max-width: var(--content-width); margin: 0 auto; }

/* --- Section Layout --- */
section {
    padding: var(--section-padding) 5%;
}
/* Ensure no content touches screen edges */
.container { padding: 0 5%; }
@media (max-width: 600px){
  .container { padding: 0 6%; }
}

/* Guidance section full viewport height */
.guidance-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
}

.narrative-section, .hero-section {
    padding: var(--section-padding) 10%;
}

/* --- Typography --- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; color: var(--color-accent); }
h1 { font-size: 4rem; }
h2.section-title { font-size: 3rem; margin-bottom: 24px; text-align: center; }
p.section-subtitle { max-width: 800px; margin: 0 auto 10vh auto; text-align: center; font-size: 1.1rem; color: var(--color-text-secondary); }
h3.subsection-title { font-size: 1.4rem; font-weight: 500; margin-bottom: 24px; }
p { margin-bottom: 24px; color: var(--color-text-secondary); font-size: 1.1rem; }
.strong { font-weight: 500; color: var(--color-text-primary); }

/* --- Header and Navigation --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: background-color 0.3s ease;
}
.site-header.scrolled { background-color: rgba(0, 0, 0, 0.85); }
.site-header .container { display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 5%; }

.logo { text-decoration: none; }
.logo img {
    height: 36px;
    width: auto;
    max-width: 160px;
    aspect-ratio: 3 / 1;
    display: block;
    transition: opacity 0.3s ease;
    filter: invert(1);
    object-fit: contain;
}
.logo:hover img { opacity: 0.8; }
.nav-wrapper { display: flex; align-items: center; gap: 40px; }
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
    align-items: center; /* 确保所有导航项垂直居中对齐 */
}
.main-nav a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: all 0.35s ease-in-out;
    position: relative;
    display: inline-block;
    --glow-color: var(--color-accent);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--glow-color),
        rgba(255, 255, 255, 0.8),
        var(--glow-color),
        transparent);
    transition: width 0.35s ease-in-out;
    transform: translateX(-50%);
}

.main-nav a:hover {
    color: transparent;
    background: linear-gradient(90deg,
        var(--glow-color),
        rgba(255, 255, 255, 0.9),
        var(--glow-color));
    background-clip: text;
    -webkit-background-clip: text;
    transform: translateY(-1px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.main-nav a:hover::after {
    width: 100%;
}

/* Navigation CTA button */
.nav-cta {
    display: flex;
    align-items: center; /* 确保CTA按钮与其他导航项对齐 */
}

.nav-cta .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    margin-left: 8px;
    line-height: 1.2; /* 控制按钮内部文字的行高 */
    display: inline-flex;
    align-items: center;
}

.nav-cta .btn:hover {
    color: var(--color-background) !important;
    background: var(--color-accent);
}

/* --- Navigation Dropdown & Mega Menu --- */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    position: relative;
}

.nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--glow-color),
        rgba(255, 255, 255, 0.8),
        var(--glow-color),
        transparent);
    transition: width 0.35s ease-in-out;
    transform: translateX(-50%);
}

.nav-dropdown-trigger:hover::after,
.nav-dropdown.active .nav-dropdown-trigger::after {
    width: 100%;
}

.mega-menu {
    position: fixed;
    top: var(--header-height, 80px);
    left: 0;
    right: 0;
    width: auto; /* avoid 100vw scrollbar shift */
    box-sizing: border-box;
    max-width: none;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(12px);
    border: none;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s var(--animation-ease);
    z-index: 1000;
    margin: 0;
    padding: 0;
}

.mega-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.mega-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--color-background-offset);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: all 0.6s var(--animation-ease);
    position: relative;
    overflow: hidden;

    /* Initialize glow variables */
    --glow-intensity: 0;
    --border-glow-intensity: 0;
    --border-glow-base: 15px;
    --border-glow-mid: 30px;
    --border-glow-outer: 45px;
}

.mega-menu-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        circle 200px at 50% 50%,
        var(--item-glow-color, rgba(255,255,255,0.1)) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 80%
    );
    opacity: var(--glow-intensity, 0);
    transition: opacity 0.8s var(--animation-ease);
    z-index: 1;
    pointer-events: none;
}

.mega-menu-item:hover {
    --glow-intensity: 1;
    --border-glow-intensity: 1;
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 calc(var(--border-glow-base) * var(--border-glow-intensity)) var(--item-glow-color, rgba(255,255,255,0.3)),
        0 0 calc(var(--border-glow-mid) * var(--border-glow-intensity)) var(--item-glow-color, rgba(255,255,255,0.2)),
        0 0 calc(var(--border-glow-outer) * var(--border-glow-intensity)) var(--item-glow-color, rgba(255,255,255,0.1));
}

.mega-menu-item-logo {
    flex-shrink: 0;
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    filter: invert(1);
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 2;
}

.mega-menu-item-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.mega-menu-item-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.mega-menu-item-description {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    transition: color 0.3s ease;
}
.menu-toggle { display: none; }

/* --- Hero Section --- */
.hero-section {
    padding: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}
.manifesto-layer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--color-background);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: opacity 1s var(--animation-ease);
}
.manifesto-layer.hidden { opacity: 0; pointer-events: none; }
/* 品牌标语严格排版规则 */
.brand-slogan {
    font-size: 3.5rem;
    line-height: 0.9; /* 更紧密的行间距 */
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.1em; /* 减少间距 */
}

.slogan-line-1,
.slogan-line-2 {
    display: block;
    white-space: nowrap; /* 防止换行 */
    font-weight: 700; /* Poppins Bold */
}

.slogan-line-1 {
    /* "One Health." 单独成行 */
}

.slogan-line-2 {
    /* "One Life. One Planet." 作为完整短语单独成行 */
}
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    width: 24px;
    height: 40px;
    border: 2px solid var(--color-text-secondary);
    border-radius: 12px;
}
.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    background: var(--color-text-secondary);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scroll-anim 2s infinite;
}
@keyframes scroll-anim {
    0% { transform: translate(-50%, 0); opacity: 1; }
    50% { transform: translate(-50%, 10px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

.guidance-layer {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--color-background-offset);
    position: relative;
    z-index: 1;
}
.guidance-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 40px;
}
.guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.guidance-card {
    background-color: var(--color-background-offset);
    border: 1px solid var(--color-border);
    padding: 32px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.6s var(--animation-ease),
                border-color 0.6s var(--animation-ease),
                opacity 0.6s var(--animation-ease),
                background-color 0.6s var(--animation-ease);
    /* Initialize mouse position and glow variables */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --color-glow: transparent;
    --glow-intensity: 0;
    --card-tint-intensity: 0;
    --base-glow-opacity: 1;
    --comet-opacity: 0;
}

/* Guidance card border glow effect - gradual and synchronized with mouse hover */
.guidance-card {
    /* Initialize border glow variables */
    --border-glow-intensity: 0;
    --border-glow-base: 20px;
    --border-glow-mid: 40px;
    --border-glow-outer: 60px;

    /* Dynamic box-shadow based on intensity - starts at 0 */
    box-shadow:
        0 0 calc(var(--border-glow-base) * var(--border-glow-intensity)) var(--color-glow, rgba(255,255,255,0.3)),
        0 0 calc(var(--border-glow-mid) * var(--border-glow-intensity)) var(--color-glow, rgba(255,255,255,0.2)),
        0 0 calc(var(--border-glow-outer) * var(--border-glow-intensity)) var(--color-glow, rgba(255,255,255,0.1));

    /* Smooth transition for border glow - slower than other effects */
    transition: transform 0.6s var(--animation-ease),
                border-color 0.6s var(--animation-ease),
                opacity 0.6s var(--animation-ease),
                background-color 0.6s var(--animation-ease),
                box-shadow 1.2s var(--animation-ease); /* Much slower border glow transition */
}

/* Hover state with gradual border glow */
.guidance-card.card-hovered {
    --border-glow-intensity: 1; /* Gradually increases border glow */
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.card-content {
    /* Content is visually present and fully interactive */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 5; /* Above all background effects and interaction layer */
    pointer-events: auto; /* Enable all interactions */
}

.card-interaction-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Ensure it's above all other elements */
    cursor: pointer;
    background: transparent;
    z-index: 1; /* Below content to allow direct interaction with content */
    -webkit-tap-highlight-color: transparent; /* For mobile */
    pointer-events: auto; /* Ensure it can receive events */
}

/* Ensure CTA area doesn't interfere with card interaction */
.card-expanded-content {
    pointer-events: none; /* Disable pointer events on container */
}

.card-expanded-content.visible {
    pointer-events: auto; /* Re-enable when visible */
}

.card-expanded-content .cta-button {
    pointer-events: auto; /* Always enable for CTA buttons */
}

.guidance-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        circle 400px at var(--mouse-x) var(--mouse-y),
        var(--color-glow, transparent) 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 80%
    );
    opacity: var(--glow-intensity, 0);
    transition: background 0.8s var(--animation-ease), opacity 0.8s var(--animation-ease);
    z-index: 2; /* Sits above background, below interaction layer */
    pointer-events: none; /* Ensure it doesn't interfere with mouse events */
}

/* Card tinting effect - gradually colors the entire card */
.guidance-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        135deg,
        var(--color-glow, transparent) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        var(--color-glow, transparent) 100%
    );
    opacity: var(--card-tint-intensity, 0);
    transition: opacity 0.35s ease-in-out;
    z-index: 1; /* Below the glow effect but above the background */
    pointer-events: none;
    mix-blend-mode: soft-light; /* Creates a more subtle color blending effect */
}

/* Duplicate .guidance-card.card-hovered definition removed - using the one above */

.card-title {
    font-size: 1.25rem;
    color: var(--color-text-primary);
    margin-bottom: 12px;
    font-weight: 600;
}
.card-subtitle {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s var(--animation-ease), transform 0.35s var(--animation-ease);
}
.guidance-card:hover .card-subtitle {
    opacity: 1;
    transform: translateY(0);
}
.card-expanded-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
    transform: translateY(-10px);
}
.card-expanded-content.visible {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
}
.card-summary {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 16px 0;
}
.card-cta {
    margin-top: 16px;
}
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 12px 32px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.35s ease-in-out;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: 44px;
    z-index: 10; /* Ensure it's above all other card elements */
    pointer-events: auto; /* Explicitly enable pointer events */
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    transition: left 0.35s ease-in-out;
    z-index: -1;
}

.cta-button:hover::before {
    left: 0;
}

.cta-button:hover {
    color: var(--color-background);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
    border-color: var(--color-accent);
}

/* --- General Section & Card Styling --- */
section {
    padding: 20vh 0;
    border-bottom: 1px solid var(--color-border);
}

/* --- Animations & Responsiveness --- */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--animation-ease), transform 1s var(--animation-ease);
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in[data-delay="1"] { transition-delay: 0.15s; }
.fade-in[data-delay="2"] { transition-delay: 0.3s; }
.fade-in[data-delay="3"] { transition-delay: 0.45s; }

/* --- 统一响应式断点系统 --- */
/*
断点设计原理：
- 1440px+: 大屏桌面 (最优体验)
- 1024px-1439px: 标准桌面 (完整功能)
- 768px-1023px: 平板 (简化布局)
- 480px-767px: 大手机 (垂直优先)
- <480px: 小手机 (最小可用)
*/

/* 大屏桌面优化 */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .mega-menu-static {
        padding: 24px 40px 60px;
        gap: 16px;
    }
}

/* 标准桌面 (1024px-1439px) */
@media (max-width: 1439px) and (min-width: 1024px) {
    .guidance-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* 平板横屏 (768px-1023px): 优化的平板体验 */
@media (max-width: 1023px) and (min-width: 768px) {
    section { padding: 10vh 0; }
    h1, .manifesto-content h1 { font-size: 2.6rem; }
    h2.section-title { font-size: 2.1rem; margin-bottom: 5vh; }
    .guidance-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* 平板导航优化 */
    .main-nav ul {

    /* Medium screens: reduce nav gap and font-size to avoid squeeze */
    .main-nav ul{ gap: 24px; }
    .main-nav a{ font-size: 0.92rem; }

        gap: 32px; /* 平板端适中的间距 */
    }

    .main-nav a {
        font-size: 0.95rem;
        padding: 8px 0;
    }

    .nav-cta .btn {
        font-size: 0.85rem;
        padding: 6px 14px;
    }

    /* 平板端Mega Menu触摸优化 */
    .mega-menu-item:hover {
        transform: none; /* 平板端不需要hover动画 */
    }
    /* ensure desktop hover works; mobile/tablet uses accordion */
    @media (min-width: 971px){
      .nav-dropdown:hover > .mega-menu{ display:block; opacity:1; visibility:visible; pointer-events:auto; }
    }
}

/* 移动端响应式 (≤767px) */
@media (max-width: 767px) {
    /* 平板端品牌标语响应式 */
    .brand-slogan {
        font-size: 3rem;
    }

    /* 覆盖层响应式 */
    .overlay-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 80px 40px;
        gap: 40px;
    }

    .overlay-visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.05;
        z-index: -1;
    }

    .overlay-text {
        padding-left: 0;
        z-index: 1;
    }

    .overlay-title {
        font-size: 2rem;
    }

    /* 产品覆盖层响应式 */
    .platform-overlay .overlay-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 80px 40px;
        gap: 40px;
    }

    .platform-overlay .overlay-visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.05;
        z-index: -1;
    }


    /* Removed pointer-events suppression on overlays to avoid breaking interactions */

    .platform-overlay .overlay-title {
        font-size: 2.2rem;
    }

    /* 移动端导航 - 全屏覆盖模式 */
    .nav-wrapper {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.98);
        backdrop-filter: blur(10px);
        z-index: 1000;
        padding: 120px 5% 40px;
    }
    .nav-wrapper.nav-active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 24px; /* 减少间距，更紧凑 */
        text-align: center;
        width: 100%;
        max-width: 400px; /* 限制最大宽度 */
    }

    .main-nav li {
        width: 100%;
    }

    .main-nav a {
        font-size: 1.5rem; /* 减小字体，避免过大 */
        font-weight: 500;
        padding: 16px 20px; /* 减少padding */
        display: block;
        width: 100%;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .main-nav a:hover {
        background: rgba(255,255,255,0.05);
        transform: none; /* 移动端不需要transform */
    }

    /* 移动端CTA按钮优化 */
    .nav-cta .btn {
        font-size: 1.2rem;
        padding: 14px 24px;
        margin: 8px 0;
        width: 100%;
        text-align: center;
    }

    /* 平板/移动端：隐藏桌面版Mega Menu */
    .mega-menu {
        display: none;
    }

    /* 移动端导航下拉菜单 */
    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
        padding: 16px 0; /* 增加触摸目标 */
    }

    .nav-dropdown-trigger::after {
        content: '▼';
        font-size: 1.2rem;
        transition: transform 0.3s ease;
        margin-left: auto;
        opacity: 0.7;
    }

    .nav-dropdown.active .nav-dropdown-trigger::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    .mobile-submenu {
        display: none;
        padding: 16px 0 16px 24px;
        margin-top: 12px;
        border-left: 3px solid var(--color-accent);
        background: rgba(255,255,255,0.03);
        border-radius: 0 8px 8px 0;
    }

    .mobile-submenu.open {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    .mobile-submenu a {
        font-size: 1.1rem !important;
        padding: 12px 16px !important;
        margin-bottom: 8px;
        color: var(--color-text-secondary);
        border-radius: 6px;
    }

    .mobile-submenu a:hover {
        color: var(--color-text-primary);
        background: rgba(255,255,255,0.05);
    }

    /* 移动端子菜单动画 */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

    .mobile-submenu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--color-border);
        text-decoration: none;
        color: inherit;
        transition: all 0.3s ease;
    }

    .mobile-submenu-item:last-child {
        border-bottom: none;
    }

    .mobile-submenu-item:hover {
        color: var(--color-accent);
        transform: translateX(8px);
    }

    .mobile-submenu-logo {
        width: 20px;
        height: 20px;
        filter: invert(1);
        flex-shrink: 0;
    }

    .mobile-submenu-content {
        flex: 1;
    }

    .mobile-submenu-title {
        font-size: 1.2rem;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .mobile-submenu-description {
        font-size: 0.9rem;
        color: var(--color-text-secondary);
        line-height: 1.3;
    }
}

/* --- Language Selector --- */
.nav-language {
    position: relative;
}

.language-selector {
    position: relative;
}

.language-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.language-toggle:hover {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.05);
}

.language-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.language-selector.open .language-arrow {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s ease;
    z-index: 1000;
    min-width: 120px;
    margin-top: 4px;
}

.language-selector.open .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-option {
    display: block;
    padding: 10px 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--color-border);
}

.language-option:last-child {
    border-bottom: none;
}

.language-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-accent);
}

.language-option.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-accent);
}

.language-separator {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

/* Scrollable dropdown for many languages */
.language-dropdown {
    max-height: 300px;
    overflow-y: auto;
}

.language-dropdown::-webkit-scrollbar {
    width: 4px;
}

.language-dropdown::-webkit-scrollbar-track {
    background: var(--color-background);
}

.language-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

.language-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* RTL Language Support */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .container {
    direction: rtl;
}

[dir="rtl"] .main-nav ul {
    flex-direction: row-reverse;
}

[dir="rtl"] .language-dropdown {
    left: 0;
    right: auto;
}

[dir="rtl"] .mega-menu-item {
    text-align: right;
}

[dir="rtl"] .mega-menu-item-logo {
    order: 2;
    margin-left: 16px;
    margin-right: 0;
}

[dir="rtl"] .mega-menu-item-content {
    order: 1;
}

[dir="rtl"] .hero-content {
    text-align: right;
}

[dir="rtl"] .guidance-cards {
    direction: rtl;
}

[dir="rtl"] .contact-form {
    text-align: right;
}

[dir="rtl"] .form-row {
    flex-direction: row-reverse;
}

/* Mobile Language Selector */
@media (max-width: 970px) {
    .nav-language {
        width: 100%;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--color-border);
    }

    .language-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 16px 20px;
        font-size: 1.2rem;
    }

    .language-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        margin-top: 0;
    }

    .language-selector:not(.open) .language-dropdown {
        display: none;
    }

    .language-option {
        padding: 16px 20px;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--color-border);
    }

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
        padding: 10px;
    }
    .hamburger {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--color-text-primary);
        position: relative;
        transition: background 0.2s ease-out;
    }
    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--color-text-primary);
        left: 0;
        transition: transform 0.2s ease-out;
    }
    .hamburger::before { top: -8px; }
    .hamburger::after { bottom: -8px; }
    .menu-toggle.is-active .hamburger { background: transparent; }
    .menu-toggle.is-active .hamburger::before { transform: rotate(45deg) translate(5px, 6px); }
    .menu-toggle.is-active .hamburger::after { transform: rotate(-45deg) translate(5px, -6px); }
}

/* Keyboard focus visible */
.guidance-card:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}
.cta-button:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}

/* Touch devices: show subtitle by default to replace hover confirmation */
@media (hover:none){
  .card-subtitle{opacity:1; transform:none;}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important;}
}

/* Performance optimizations */
/* Removed content-visibility to fix visibility issues */

/* GPU acceleration for animations */
.guidance-card, .living-card, .path-card, .bit-world-card {
    will-change: transform;
}

.guidance-card:not(:hover), .living-card:not(:hover), .path-card:not(:hover), .bit-world-card:not(:hover) {
    will-change: auto;
}

/* Optimize heavy animations */
.wave-background {
    will-change: transform;
}

/* Optimize overlay animations */
.focus-overlay, .platform-overlay {
    will-change: opacity, visibility, transform;
}

.focus-overlay:not(.active), .platform-overlay:not(.active) {
    will-change: auto;
}


/* 大手机 (480px-767px): 垂直优先设计 */
@media (max-width: 767px) and (min-width: 480px) {
    body { font-size: 16px; }
    section { padding: 8vh 0; }
    h1, .manifesto-content h1 { font-size: 2.4rem; }
    h2.section-title { font-size: 1.9rem; margin-bottom: 4vh; }
    .guidance-grid { grid-template-columns: 1fr; gap: 16px; }

    /* 大手机导航 */
    .container { padding: 0 4%; }

    .site-header {
        padding: 16px 0;
    }

    .nav-wrapper {
        padding: 100px 4% 40px;
    }
}

/* 小手机 (<480px): 最小可用设计 */
@media (max-width: 479px) {
    body { font-size: 15px; }
    section { padding: 6vh 0; }
    h1, .manifesto-content h1 { font-size: 2rem; }
    h2.section-title { font-size: 1.7rem; margin-bottom: 3vh; }
    .guidance-grid { grid-template-columns: 1fr; gap: 12px; }

    /* 小手机导航优化 */
    .container { padding: 0 3%; }

    .site-header {
        padding: 12px 0;
    }

    .logo img {
        height: 28px; /* 稍小的logo */
    }

    .nav-wrapper {
        padding: 80px 3% 30px;
    }

    .main-nav a {
        font-size: 1.3rem !important;
        padding: 14px 16px !important;
    }

    .nav-cta .btn {
        font-size: 1.1rem !important;
        padding: 12px 20px !important;
    }
}
    .guidance-card { padding: 24px; }
    .card-title { font-size: 1.1rem; }
    .card-subtitle { font-size: 0.9rem; }

    /* 移动端品牌标语响应式 */
    .brand-slogan {
        font-size: 2.2rem;
    }

    /* 移动端Logo边距修复 */
    .site-header .container {
        padding: 0 20px; /* 添加适当的水平边距 */
    }

    .logo {
        margin-left: 0; /* 确保Logo不贴边 */
    }

    /* 移动端Footer布局优化 */
    .footer-logo-mission {
        flex-direction: column; /* 移动端也保持垂直堆叠 */
        align-items: flex-start;
        gap: 12px;
        padding: 0 0px;
    }

    .footer-logo-link {
        flex-shrink: 0;
    }

    .footer-slogan {
        text-align: left; /* 移动端左对齐 */
        margin-top: 0;
        font-size: 0.9rem; /* 稍小的字体 */
    }

    /* 只有在一行只剩Logo时才水平排列 */
    .footer-minimal .footer-logo-mission {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    /* 确保在小屏幕上标语不换行 */
    .slogan-line-1,
    .slogan-line-2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* --- Footer --- */
.main-footer {
    padding: 48px 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-offset);
}
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 5%;
    justify-content: space-between;
}

/* 右侧导航模块右对齐 */
.footer-nav,
.footer-partnerships,
.footer-contact,
.footer-legal {
    text-align: right;
}

.footer-nav h4,
.footer-partnerships h4,
.footer-contact h4 {
    text-align: right;
}

.footer-nav ul,
.footer-partnerships ul {
    text-align: right;
}
/* Footer Logo和Slogan布局 - 非移动端垂直堆叠 */
.footer-logo-mission {
    display: flex;
    flex-direction: column; /* 默认垂直堆叠 */
    align-items: flex-start;
    gap: 16px;
    justify-content: flex-start;
}

.footer-logo-link {
    align-self: flex-start; /* 确保logo链接左对齐 */
}

.footer-logo-img {
    height: 32px;
    width: auto;
    filter: invert(1);
    transition: opacity 0.3s ease;
    display: block;
}

.footer-logo-link:hover .footer-logo-img {
    opacity: 0.8;
}

/* 产品 Logo 反转 - 用于生态系统页面 */
.brand-logo {
    filter: invert(1);
    transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
    height: 32px;
    width: auto;
    max-width: 160px;
    aspect-ratio: 3 / 1;
    object-fit: contain;
    margin: 0 auto 12px auto;
    display: block;
}

/* Special styling for Bit World logos */
.bit-world-logo {
    height: 48px;
    max-width: 200px;
    margin: 0 auto 20px auto;
}

/* Living Cards - 生态系统页面的交互卡片 */
.living-card {
    background-color: var(--color-background-offset);
    border: 1px solid var(--color-border);
    padding: 32px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s ease-in-out,
                border-color 0.35s ease-in-out,
                background-color 0.35s ease-in-out;
    text-align: center;
    /* Initialize mouse position and glow variables */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --color-glow: rgba(255,255,255,0.5);
    --glow-intensity: 0;
}

/* Product card glow effect */
.living-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        circle 300px at var(--mouse-x) var(--mouse-y),
        var(--color-glow, transparent) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 80%
    );
    opacity: var(--glow-intensity, 0);
    transition: background 0.35s ease-in-out, opacity 0.35s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.living-card .card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.living-card .brand-logo {
    margin: 0 auto 12px auto !important;
    display: block !important;
}

.living-card:hover .brand-logo {
    transform: scale(1.05);
    opacity: 0.9;
}

.living-card p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
    max-width: 90%; /* 确保在卡片内有适当边距 */
    transition: color 0.35s ease-in-out;
}

.living-card:hover p {
    color: var(--color-text-primary);
}

/* Path Cards - 加入我们页面的路径卡片 */
.path-card {
    background-color: var(--color-background-offset);
    border: 1px solid var(--color-border);
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease-in-out,
                border-color 0.35s ease-in-out,
                background-color 0.35s ease-in-out;
    text-align: center;
}

.path-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.path-card h3 {
    color: var(--color-accent);
    margin-bottom: 16px;
    font-size: 1.3rem;
    transition: color 0.35s ease-in-out;
}

.path-card p {
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    transition: color 0.35s ease-in-out;
}

.path-card:hover p {
    color: var(--color-text-primary);
}

.join-paths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

/* 确保所有页面的主 Logo 都有反转效果 */
.main-header .logo img {
    filter: invert(1); /* 将黑色 Logo 反转为白色 */
    transition: opacity 0.3s ease;
}
.main-header .logo:hover img {
    opacity: 0.8;
}
.footer-slogan {
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    line-height: 1.1;
    font-weight: 700; /* Poppins Bold */
    margin-top: 0; /* 移除额外margin，使用gap控制间距 */
    align-self: flex-start; /* 确保左下角对齐 */
}

.footer-slogan .slogan-line-1,
.footer-slogan .slogan-line-2 {
    display: block;
    white-space: nowrap; /* 防止换行 */
}
/* Footer Typography - 统一字体样式 */
.footer-nav h4,
.footer-contact h4,
.footer-partnerships h4 {
    color: var(--color-text-primary);
    margin-bottom: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-family-main);
}

.footer-nav ul,
.footer-partnerships ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav li,
.footer-partnerships li {
    margin-bottom: 8px;
}

.footer-nav a,
.footer-partnerships a,
.footer-legal a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.35s ease-in-out, transform 0.35s ease-in-out;
    display: inline-block;
    font-size: 0.95rem;
    font-family: var(--font-family-main);
}

.footer-nav a:hover,
.footer-partnerships a:hover,
.footer-legal a:hover {
    color: var(--color-text-primary);
    transform: translateX(4px);
}

.footer-contact p {
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-family: var(--font-family-main);
}

/* --- Button Styles --- */
.btn {
    display: inline-block;
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 16px 32px;

/* Button variants */
.btn.primary{ background: var(--color-accent); color: var(--color-background); border-color: var(--color-accent); }
.btn.primary:hover{ background: transparent; color: var(--color-accent); }
.btn.secondary{ background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn.secondary:hover{ background: var(--color-accent); color: var(--color-background); }
.btn.btn--ghost{ background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn.btn--ghost:hover{ background: var(--color-background-offset); color: var(--color-text-primary); border-color: var(--color-background-offset); }

    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.35s ease-in-out;
    border-radius: 4px;
    position: relative;

/* Ensure hover text/background contrast for CTA groups */
.cta-buttons .btn:hover, .cta-buttons-final .btn:hover{ border-color: var(--color-accent); }

    overflow: hidden;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Diagnostics CTA specific: ensure hover contrast is correct */
.final-cta .btn.primary:hover{ background: transparent; color: var(--color-accent); }
.final-cta .btn.secondary:hover{ background: var(--color-accent); color: var(--color-background); }


.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    transition: left 0.35s ease-in-out;
    z-index: -1;
}

.btn:hover::before {
    left: 0;
}

.btn:hover {
    color: var(--color-background);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
    border-color: var(--color-accent);
}

/* --- Dynamic Focus Overlay System --- */
.focus-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transition: opacity 0.4s var(--animation-ease),
                visibility 0s 0.4s,
                transform 0.4s var(--animation-ease);
    background: linear-gradient(135deg,
                var(--color-background) 0%,
                var(--color-background-offset) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.focus-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition-delay: 0s, 0s, 0s;
}

.close-overlay {
    position: absolute;
    top: 40px;
    right: 40px;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 3rem;
    cursor: pointer;
    transition: color 0.35s ease-in-out, transform 0.35s ease-in-out;
    z-index: 10;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-overlay:hover {
    color: var(--color-accent);
    transform: rotate(90deg);
    background-color: rgba(255, 255, 255, 0.1);
}

.overlay-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    width: 100%;
    max-width: 1400px;
    height: 80%;
    align-items: center;
    padding: 0 80px;
    gap: 60px;
}

.overlay-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0.9;
}

.overlay-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--color-glow, rgba(255,255,255,0.1)) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

.overlay-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5%;
}

.overlay-header {
    margin-bottom: 32px;
}

.overlay-title {
    font-size: 2.5rem;
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--color-accent);
}

.overlay-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.overlay-details {
    overflow-y: auto;
    max-height: 45vh;
    padding-right: 20px;
    margin-bottom: 32px;
}

.overlay-details p {
    font-size: 1.1rem;
    max-width: 550px;
    margin-bottom: 16px;
}

.overlay-details h4 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.overlay-actions {
    margin-top: auto;
}

.overlay-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--color-accent) 0%, rgba(255,255,255,0.8) 100%);
    color: var(--color-background);
    padding: 16px 32px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: all 0.35s ease-in-out;
    position: relative;
    overflow: hidden;
}

.overlay-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
    transition: left 0.35s ease-in-out;
}

.overlay-cta:hover::before {
    left: 0;
}

.overlay-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* --- Product Platform Overlay System --- */
.platform-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transition: opacity 0.4s var(--animation-ease),
                visibility 0s 0.4s,
                transform 0.4s var(--animation-ease);
    background: var(--color-background);
    background-image: var(--color-bg, none); /* Dynamic gradient applied here */
}

.platform-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition-delay: 0s, 0s, 0s;
}

.platform-overlay .overlay-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    width: 100%;
    max-width: 1400px;
    height: 80%;
    align-items: center;
    padding: 0 80px;
    gap: 60px;
}

.platform-overlay .overlay-visual {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0.9;
}

.overlay-logo-container {
    margin-bottom: 40px;
    z-index: 2;
}

.overlay-logo-container img {
    height: 60px;
    width: auto;
    filter: invert(1);
}

.platform-overlay .overlay-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--color-glow, rgba(255,255,255,0.1)) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 4s ease-in-out infinite;
}

.platform-overlay .overlay-title {
    font-size: 2.8rem;
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--color-accent);
}

.platform-overlay .overlay-subtitle {
    font-size: 1.3rem;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.platform-overlay .overlay-details {
    overflow-y: auto;
    max-height: 50vh;
    padding-right: 20px;
    margin-bottom: 32px;
}

.platform-overlay .overlay-details h4 {
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--color-accent);
}

.platform-overlay .overlay-details p {
    font-size: 1.1rem;
    max-width: 550px;
    margin-bottom: 16px;
    color: var(--color-text-secondary);
}

.platform-overlay .overlay-cta {
    background: linear-gradient(135deg, var(--color-glow, var(--color-accent)) 0%, rgba(255,255,255,0.8) 100%);
    color: var(--color-background);
    padding: 18px 36px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px;
}

/* --- The Bit World Layout --- */
.bit-world-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% - 50% split */
    gap: 32px;
    margin: 60px 0;
}

.bit-world-right-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bit-world-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Split the right column top row */
    gap: 20px;
}

.bit-world-card {
    background-color: var(--color-background-offset);
    border: 1px solid var(--color-border);
    padding: 32px;
    border-radius: 8px;
    transition: transform 0.35s ease-in-out, border-color 0.35s ease-in-out;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    /* Initialize mouse position and glow variables */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --color-glow: transparent;
    --glow-intensity: 0;
    --card-tint-intensity: 0;
    --base-glow-opacity: 1;
    --comet-opacity: 0;
}

/* Bit world card glow effect */
.bit-world-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        circle 300px at var(--mouse-x) var(--mouse-y),
        var(--color-glow, transparent) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 80%
    );
    opacity: var(--glow-intensity, 0);
    transition: background 0.35s ease-in-out, opacity 0.35s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.bit-world-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Ensure content is above glow effects */
.bit-world-card .card-content {
    position: relative;
    z-index: 3;
}

/* Interaction layer for bit-world cards */
.bit-world-card .card-interaction-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.bit-world-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.bit-world-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* Specific sizing for different card types */
.bit-world-main {
    /* MedHubs.ai - largest card, takes full left column */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bit-world-main h3 {
    font-size: 2rem;
}

.bit-world-small {
    /* CellRx.ai and BioInf.ai - smaller cards */
    min-height: 120px;
}

.bit-world-medium {
    /* teamzy.ai - medium card, full width of right column */
    min-height: 120px;
}

/* Responsive design for Bit World */
@media (max-width: 970px) {
    .bit-world-grid {
        grid-template-columns: 1fr; /* Stack vertically on tablet */
        gap: 24px;
    }

    .bit-world-top-row {
        grid-template-columns: 1fr; /* Stack small cards vertically */
    }
}

@media (max-width: 600px) {
    .bit-world-card {
        padding: 24px;
    }

    .bit-world-main h3 {

/* Ecosystem Overlay logo sizing */
.overlay-brand-logo{
  max-width: 160px; max-height: 56px; width:auto; height:auto; display:block;
}
@media (max-width: 480px){ .overlay-brand-logo{ max-width: 140px; max-height: 48px; } }

        font-size: 1.5rem;
    }
}

/* --- Contact Page Styles --- */
.contact-hero {
    padding: 120px 0 60px;
    text-align: center;
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-offset) 100%);
}

.contact-hero h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-accent);
}

.contact-hero .hero-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.contact-main {
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Contact Form Styles */
.contact-form-section h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 32px;
    color: var(--color-accent);
}

.contact-form {
    max-width: 500px;
}

.form-group {
    margin-bottom: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-background-offset);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-background);
    border: none;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.btn-primary:disabled {
    background-color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Form Message Styles */
.form-message {
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.5;
    border-left: 4px solid;
    animation: slideInDown 0.3s ease-out;
}

.form-message-success {
    background-color: rgba(46, 204, 113, 0.1);
    border-left-color: #2ecc71;
    color: #27ae60;
}

.form-message-error {
    background-color: rgba(231, 76, 60, 0.1);
    border-left-color: #e74c3c;
    color: #c0392b;
}

.form-message-info {
    background-color: rgba(52, 152, 219, 0.1);
    border-left-color: #3498db;
    color: #2980b9;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contact Info Styles */
.contact-info-section {
    position: sticky;
    top: 120px;
}

.contact-info-card {
    background-color: var(--color-background-offset);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 40px;
}

.contact-info-card h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-accent);
}

.company-tagline {
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
    font-size: 1.1rem;
}

.contact-info-group {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.contact-info-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.contact-info-group h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}

.contact-detail {
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.contact-detail strong {
    color: var(--color-text-primary);
}

/* Responsive Design */
@media (max-width: 970px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-info-section {
        position: static;
    }

    .contact-hero h1 {
        font-size: 2.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .contact-hero {
        padding: 100px 0 40px;
    }

    .contact-hero h1 {
        font-size: 2rem;
    }

    .contact-main {
        padding: 60px 0;
    }

    .contact-info-card {
        padding: 24px;
    }
}

/* --- Legal Pages Styles --- */
.legal-hero {
    padding: 120px 0 60px;
    text-align: center;
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-offset) 100%);
}

.legal-hero h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-accent);
}

.legal-hero .hero-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto 20px;
}

.last-updated {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.legal-content {
    padding: 80px 0;
}

.legal-document {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.legal-document h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 40px 0 20px;
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
}

.legal-document h2:first-of-type {
    margin-top: 0;
}

.legal-document p {
    margin-bottom: 20px;
    color: var(--color-text-secondary);
    max-width: none;
}

.legal-document ul {
    margin: 20px 0;
    padding-left: 30px;
}

.legal-document li {
    margin-bottom: 10px;
    color: var(--color-text-secondary);
}

.contact-info {
    background-color: var(--color-background-offset);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px;
    margin-top: 20px;
}

.contact-info p {
    margin-bottom: 12px;
}

.contact-info strong {
    color: var(--color-text-primary);
}

/* Responsive Design for Legal Pages */
@media (max-width: 970px) {
    .legal-hero h1 {
        font-size: 2.5rem;
    }

    .legal-document {
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .legal-hero {
        padding: 100px 0 40px;
    }

    .legal-hero h1 {
        font-size: 2rem;
    }

    .legal-content {
        padding: 60px 0;
    }

    .legal-document h2 {
        font-size: 1.5rem;
    }
}

/* Keep existing narrative sections styles */

/* --- New Components: Evidence & Badges & Static Mega Menu & Journal Filters --- */
.badges-grid, .evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 24px;
  max-width: var(--content-width);
  margin: 40px auto 0;
  padding: 0 5%;
}
.badge, .evidence-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: var(--color-background-offset);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.badge svg, .evidence-block svg { flex-shrink: 0; filter: invert(1); opacity: 0.9; }
.badge-title, .evidence-title { font-weight: 600; color: var(--color-accent); margin-bottom: 4px; }
.badge-desc, .evidence-desc { color: var(--color-text-secondary); font-size: 0.95rem; }

/* Static mega menu - 1/5 Logo + 4/5 田字形布局 */
.mega-menu .container {
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mega-menu-static {
    display: grid;
    grid-template-columns: 2fr 2fr; /* 右侧4/5区域的2×2网格 */
    gap: 16px;
    padding: 24px 5%; /* 基础左右留白，避免视觉右偏 */
    position: relative;
    min-height: 200px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: stretch; /* 确保所有项目等高 */
}

/* Tarinn Logo - 绝对定位在左侧1/5区域 */
.mega-menu-logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 20%; /* 占据1/5宽度 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

.mega-menu-logo img {
    width: 100%;
    max-width: 120px;
    height: auto;
    max-height: 50px;
    opacity: 0.8;
    filter: invert(1);
    transition: opacity 0.3s ease;
}

.mega-menu-logo img:hover {
    opacity: 1;
}
.mega-menu-item {
    display: block;
    padding: 16px 12px; /* 适应5列布局的padding */
    background: var(--color-background-offset);
    border: 1px solid var(--color-border);

/* Ensure logo sits left-bottom inside its 1/5 column on desktop */
@media (min-width: 1024px){
  .mega-menu .mega-menu-static{ position: relative; padding-left: 22%; }
  .mega-menu-logo{ position:absolute; left:0; bottom:0; width:20%; height:auto; display:flex; align-items:flex-end; justify-content:flex-start; padding: 0 16px 16px; }
  .mega-menu-logo img{ max-width: 140px; max-height: 56px; width:auto; height:auto; }
}

    border-radius: 8px; /* 稍大的圆角，更现代 */
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    height: 100%; /* 确保所有项目等高 */
    box-sizing: border-box;
}

.mega-menu-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mega-menu-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--color-text-primary);
}

.mega-menu-item small{
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.85rem; /* 适中的字体大小 */
    margin-top: 8px;
    opacity: 0.8;
    line-height: 1.4; /* 舒适的行高 */
}

/* 移除分隔符，因为5列布局不需要 */
.mega-menu-separator {
    display: none;
}
/* === Mega Menu 1/5 Logo + 4/5 田字形响应式系统 === */

/* 大屏桌面 (1440px+): 完整1/5 + 4/5布局 */
@media (min-width: 1440px) {
    .mega-menu-static {
        grid-template-columns: 2fr 2fr; /* 田字形2×2 */
        padding: 32px 40px 32px 25%;
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
        min-height: 220px;
    }
    .mega-menu-logo {
        width: 20%;
        padding: 32px 20px;
    }
    .mega-menu-logo img {
        max-width: 140px;
        max-height: 55px;
    }
}

/* 标准桌面 (1024px-1439px): 保持1/5 + 4/5布局 */
@media (max-width: 1439px) and (min-width: 1024px) {
    .mega-menu-static {
        grid-template-columns: 2fr 2fr; /* 田字形2×2 */
        padding: 28px 32px 28px 25%;
        gap: 20px;
        min-height: 200px;
    }
    .mega-menu-logo {
        width: 20%;
        padding: 28px 18px;
    }
    .mega-menu-logo img {
        max-width: 120px;
        max-height: 50px;
    }
}

/* 平板横屏 (768px-1023px): 改为传统布局 */
@media (max-width: 1023px) and (min-width: 768px) {
    .mega-menu-static {
        grid-template-columns: 1fr 1fr; /* 2列布局 */
        padding: 24px 24px 60px; /* 底部留空给Logo */
        gap: 16px;
        position: relative;
    }
    .mega-menu-logo {
        position: absolute;
        left: 24px;
        bottom: 24px;
        width: auto;
        height: auto;
        padding: 0;
    }
    .mega-menu-logo img {
        max-width: 100px;
        max-height: 32px;
    }
    .mega-menu-item {
        padding: 14px 12px;
    }
    .mega-menu-item small {
        font-size: 0.8rem;
        margin-top: 6px;
    }
}

/* 平板竖屏/大手机 (480px-767px): 2列布局 */
@media (max-width: 767px) and (min-width: 480px) {
    .mega-menu-static {
        grid-template-columns: 1fr 1fr; /* 2列布局 */
        padding: 20px 20px 50px;
        gap: 14px;
    }
    .mega-menu-logo {
        position: absolute;
        left: 20px;
        bottom: 20px;
        width: auto;
        height: auto;
        padding: 0;
    }
    .mega-menu-logo img {
        max-width: 80px;
        max-height: 28px;
    }
    .mega-menu-item {
        padding: 14px 16px;
    }
}

/* 小手机 (<480px): 单列布局 */
@media (max-width: 479px) {
    .mega-menu-static {
        grid-template-columns: 1fr; /* 单列布局 */
        padding: 16px 16px 45px;
        gap: 12px;
    }
    .mega-menu-logo {
        position: absolute;
        left: 16px;
        bottom: 16px;
        width: auto;
        height: auto;
        padding: 0;
    }
    .mega-menu-logo img {
        max-width: 70px;
        max-height: 24px;
    }
    .mega-menu-item {
        padding: 12px 16px;
        border-radius: 6px;
    }
    .mega-menu-item small {
        font-size: 0.75rem;
        line-height: 1.2;
    }
}

/* Journal Filters */
.journal-filters { padding: 20px 5% 0; }
.journal-filters .container { max-width: var(--content-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 200px 200px; gap: 12px; }
#journalSearch, #journalCategory, #journalAuthor {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-background-offset); color: var(--color-text-primary);
  font: inherit; transition: border-color .3s ease, box-shadow .3s ease;
}
#journalSearch:focus, #journalCategory:focus, #journalAuthor:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }

/* --- Page Hero (unified) --- */
.page-hero{
    padding: 120px 0 60px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    position: relative;
}
.page-hero .container{
    max-width: var(--content-width);
    text-align: center;
}
.page-hero h1{
    font-size: 3.5rem;
    margin-bottom: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-accent), rgba(255,255,255,0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.page-hero p{
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-text-secondary);
    font-weight: 400;
}
.page-hero .hero-subtitle{
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 16px;
}

/* Thesis页面特殊Hero样式 */
.thesis-hero {
    background: linear-gradient(135deg,
        var(--color-background) 0%,
        var(--color-background-offset) 50%,
        var(--color-background) 100%);
    border-bottom: 1px solid var(--color-border);
}

@media (max-width: 970px){
    .page-hero{ padding: 100px 0 40px; }
    .page-hero h1{ font-size: 2.8rem; }
    .page-hero p{ font-size: 1.1rem; }
}
@media (max-width: 600px){
    .page-hero{ padding: 80px 0 30px; }
    .page-hero h1{ font-size: 2.2rem; }
    .page-hero p{ font-size: 1rem; }
}

/* --- Diagnostics Page Specific Styles --- */

/* --- Diagnostics & Futures Page Specific Styles --- */
.certifications-wall { padding: 60px 5% 40px; background: var(--color-background-offset); }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; max-width: 800px; margin: 30px auto 0; }
.cert-badge { padding: 12px 16px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 6px; text-align: center; font-weight: 500; color: var(--color-accent); }

.three-pillars { padding: 80px 5% 60px; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: var(--content-width); margin: 40px auto 0; }
.pillar-card { background: var(--color-background-offset); border: 1px solid var(--color-border); border-radius: 12px; padding: 32px 24px; text-align: center; transition: transform .3s ease, border-color .3s ease; }
.pillar-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.25); }
.pillar-logo { width: 120px; height: auto; margin-bottom: 20px; filter: invert(1); opacity: 0.9; }
.pillar-subtitle { display: none; /* Hide text titles when logo is present */ }

.evidence-cabinet { padding: 80px 5% 60px; background: var(--color-background-offset); }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: var(--content-width); margin: 0 auto; }
.advantages-list { margin-top: 30px; }
.advantage-item { margin-bottom: 24px; }
.advantage-item h4 { margin: 0 0 8px; color: var(--color-accent); font-size: 1.1rem; }
.advantage-item p { margin: 0; color: var(--color-text-secondary); line-height: 1.5; }
.customer-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 30px; }
.customer-logo { padding: 12px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 6px; text-align: center; font-size: 0.9rem; }
.testimonial-attribution { margin-top: 16px; font-style: italic; color: var(--color-text-secondary); }

.specifications-library { padding: 80px 5% 60px; }
.spec-tabs { display: flex; gap: 8px; margin: 30px 0 20px; justify-content: center; }
.spec-tab { padding: 12px 24px; background: transparent; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text-secondary); cursor: pointer; transition: all .3s ease; }
.spec-tab.active, .spec-tab:hover { background: var(--color-accent); color: var(--color-background); border-color: var(--color-accent); }

.brand-header { margin-bottom: 24px; padding: 20px; background: var(--color-background-offset); border-radius: 8px; border-left: 4px solid var(--color-accent); }
.brand-header h3 { margin: 0 0 8px; color: var(--color-accent); font-size: 1.4rem; }
.brand-header p { margin: 0 0 12px; color: var(--color-text-secondary); }
.brand-link { color: var(--color-accent); text-decoration: none; font-weight: 500; }
.brand-link:hover { text-decoration: underline; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.spec-table th, .spec-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); }
.spec-table th { background: var(--color-background-offset); font-weight: 600; color: var(--color-accent); }

.final-cta { padding: 80px 5% 60px; background: var(--color-background-offset); text-align: center; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; margin-top: 30px; }

/* Footer contact icons */
.footer-contact .wa-icon { display:inline-flex; align-items:center; margin-left:8px; color: var(--color-accent); }
.footer-contact .wa-icon svg { display:block; }

/* Responsive for Diagnostics/Futures */
@media (max-width: 1000px){
  .evidence-grid{ grid-template-columns: 1fr; gap: 40px; }
  .pillars-grid{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px){
  .cta-buttons{ flex-direction: column; align-items: center; }
  .cert-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Futures Page Specific Styles */
/* Hide duplicate title when a logo is present next to it */
.forge-left .forge-logo + h3, .forge-right .forge-logo + h3 { display: none; }
/* Ensure button consistency in Architects' Corner */
.architect-card a { display:inline-block; }
.architect-card a.btn { /* inherit .btn styles */ }

.futures-hero { background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-offset) 100%); }
/* === The Tarinn Thesis - 电影级蓝图设计 === */

/* 全局Thesis页面容器 */
.thesis-page {
    font-family: 'Poppins', sans-serif;
    background: var(--color-background);
    position: relative;
}

/* 侧边导航 - Sticky Side Navigation */
.thesis-nav {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px 0;
    border: 1px solid var(--color-border);
}

.thesis-nav-item {
    display: block;
    padding: 12px 20px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.thesis-nav-item:hover,
.thesis-nav-item.active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    background: rgba(255,255,255,0.05);
}

/* 章节容器 - Living Ink 动画 */
.thesis-chapter {
    min-height: 100vh;
    padding: 120px 5% 80px;
    display: flex;
    align-items: center;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.thesis-chapter.visible {
    opacity: 1;
    transform: translateY(0);
}

.thesis-chapter .container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* General chapter content - base styles */
.chapter-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Thesis-specific chapter content - more specific, overrides general */
.thesis-chapter .chapter-content {
    max-width: clamp(720px, 60vw, 1200px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Flywheel chapter specific styles */
.chapter-flywheel .chapter-content {
    max-width: clamp(800px, 65vw, 1300px);
    text-align: center;
}

.chapter-flywheel .chapter-text {
    max-width: 860px;
    margin: 24px auto 0;
    text-align: left;
}

/* 章节标题样式 */
.chapter-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 60px;
    background: linear-gradient(135deg, var(--color-accent), rgba(255,255,255,0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    text-align: center;
}

.chapter-subtitle {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    margin: 0 auto 40px auto;
    font-weight: 400;
    text-align: center;
    max-width: clamp(720px, 60vw, 992px);
}

.chapter-text {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 auto 40px auto;
    text-align: center;
    max-width: clamp(720px, 60vw, 992px);
}

.chapter-text strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* Chapter I: The Multi-Trillion Dollar Question */
.chapter-entropy {
    background: linear-gradient(135deg,
        var(--color-background) 0%,
        var(--color-background-offset) 100%);
    text-align: center;
}

.entropy-highlight {
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: 700;
    margin: 40px 0;
    padding: 20px;
    border: 2px solid var(--color-accent);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    text-align: center;
}

/* Chapter II: Our Thesis */
.chapter-thesis {
    background: var(--color-background);
    text-align: center;
}

.thesis-statement {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 40px;
    background: var(--color-background-offset);
    border-radius: 16px;
    border-left: 6px solid var(--color-accent);
    margin: 40px 0;
    text-align: center;
}

.foundry-forge {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 60px 0;
}

.foundry-forge-item {
    text-align: center;
    padding: 30px;
    background: var(--color-background-offset);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.foundry-forge-item h3 {
    font-size: 1.8rem;
    color: var(--color-accent);
    margin-bottom: 20px;
    font-weight: 700;
}

.foundry-forge-item p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* Chapter III: The Foundry */
.chapter-foundry {
    background: var(--color-background-offset);
}

.foundry-advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 60px 0;
}

.advantage-item {
    text-align: center;
    padding: 40px 30px;
    background: var(--color-background);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.advantage-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--color-accent);
}

.advantage-icon {
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    color: var(--color-background);
}

.advantage-item h3 {
    font-size: 1.3rem;
    color: var(--color-accent);
    margin-bottom: 15px;
    font-weight: 600;
}

.advantage-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* Chapter IV: The Forge */
.chapter-forge {
    background: var(--color-background);
}

.forge-platforms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 60px 0;
}

.platform-item {
    padding: 30px;
    background: var(--color-background-offset);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    text-align: center;
}

.platform-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.platform-item h3 {
    font-size: 1.4rem;
    color: var(--color-accent);
    margin-bottom: 15px;
    font-weight: 600;
}

.platform-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* Chapter V: The Flywheel - 核心交互图表 */
.chapter-flywheel {
    background: var(--color-background-offset);
    text-align: center;
}

.flywheel-container {
    position: relative;
    max-width: 800px;
    margin: 80px auto;
    padding: 60px;
}

.flywheel-diagram {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flywheel-center {
    width: 200px;
    height: 200px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-background);
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
    z-index: 2;
}

.flywheel-step {
    position: absolute;
    width: 120px;
    height: 120px;
    background: var(--color-background);
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-primary);
    transition: all 0.3s ease;
}

.flywheel-step:hover {
    transform: scale(1.1);
    background: var(--color-accent);
    color: var(--color-background);
}

.flywheel-step:nth-child(2) { top: -60px; left: 50%; transform: translateX(-50%); }
.flywheel-step:nth-child(3) { top: 50px; right: -60px; transform: translateY(-50%); }
.flywheel-step:nth-child(4) { bottom: -60px; left: 50%; transform: translateX(-50%); }
.flywheel-step:nth-child(5) { top: 50px; left: -60px; transform: translateY(-50%); }

/* Chapter VI: The Architects */
.chapter-architects {
    background: var(--color-background);
}

.architects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 60px 0;
}

.architect-card {
    text-align: center;
    padding: 30px;
    background: var(--color-background-offset);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.architect-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.architect-avatar {
    width: 80px;
    height: 80px;
    background: var(--color-accent);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-background);
    font-weight: 700;
}

.architect-card h3 {
    font-size: 1.2rem;
    color: var(--color-text-primary);
    margin-bottom: 10px;
    font-weight: 600;
}

.architect-card .title {
    font-size: 1rem;
    color: var(--color-accent);
    margin-bottom: 15px;
    font-weight: 500;
}

.architect-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* Traction & CTA Section */
.traction-section {
    margin: 80px 0 60px;
    text-align: center;
}

.traction-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 40px 0;
}

.traction-stat {
    padding: 20px;
    background: var(--color-background-offset);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.traction-stat .number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.traction-stat .label {
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.thesis-cta-final {
    margin: 60px 0;
    text-align: center;
}

.thesis-cta-final h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--color-accent);
    font-weight: 700;
}

.thesis-cta-final p {
    font-size: 1.3rem;
    margin-bottom: 50px;
    color: var(--color-text-primary);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons-final {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons-final .btn {
    padding: 18px 36px;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 250px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.cta-buttons-final .btn.primary {
    background: var(--color-accent);
    color: var(--color-background);
    border: 2px solid var(--color-accent);
}

.cta-buttons-final .btn.primary:hover {
    background: transparent;
    color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255,255,255,0.1);
}

.cta-buttons-final .btn.secondary {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.cta-buttons-final .btn.secondary:hover {
    background: var(--color-accent);
    color: var(--color-background);
    transform: translateY(-3px);
}

/* === Thesis页面响应式设计 === */

/* 平板端 (768px-1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .thesis-nav {
        right: 20px;
        padding: 15px 0;
    }

    .thesis-nav-item {
        padding: 10px 15px;
        font-size: 0.8rem;
    }

    .chapter-title {
        font-size: 3rem;
        margin-bottom: 40px;
        text-align: center;
    }

    .chapter-subtitle {
        font-size: 1.3rem;
        margin-bottom: 30px;
        text-align: center;
    }

    .chapter-text {
        font-size: 1.1rem;
        margin-bottom: 30px;
        text-align: center;
    }

    .foundry-forge {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .foundry-advantages {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 600px;
        margin: 40px auto;
    }

    .forge-platforms {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .flywheel-diagram {
        width: 500px;
        height: 500px;
    }

    .flywheel-step {
        width: 100px;
        height: 100px;
        font-size: 0.8rem;
    }

    .architects-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 500px;
        margin: 40px auto;
    }

    .traction-stats {
        grid-template-columns: 1fr;
        gap: 25px;
        max-width: 400px;
        margin: 30px auto;
    }
}

/* 移动端 (≤767px) */
@media (max-width: 767px) {
    .thesis-nav {
        display: none; /* 移动端隐藏侧边导航 */
    }

    .thesis-chapter {
        padding: 80px 5% 60px;
        min-height: auto;
    }

    .chapter-title {
        font-size: 2.5rem;
        margin-bottom: 30px;
        line-height: 1.2;
        text-align: center;
    }

    .chapter-subtitle {
        font-size: 1.1rem;
        margin-bottom: 25px;
        text-align: center;
    }

    .chapter-text {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 25px;
        text-align: center;
    }

    .entropy-highlight {
        font-size: 1.2rem;
        padding: 15px;
        margin: 30px 0;
        text-align: center;
    }

    .thesis-statement {
        font-size: 1.2rem;
        padding: 25px;
        margin: 30px 0;
        text-align: center;
    }

    .foundry-forge {
        grid-template-columns: 1fr;
        gap: 25px;
        margin: 40px 0;
    }

    .foundry-forge-item {
        padding: 25px 20px;
    }

    .foundry-forge-item h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .foundry-advantages {
        grid-template-columns: 1fr;
        gap: 25px;
        margin: 40px 0;
    }

    .advantage-item {
        padding: 25px 20px;

/* Flywheel specific centering and spacing harmony */
.chapter-flywheel .flywheel-container{ margin: clamp(40px, 8vh, 80px) auto; }
.chapter-flywheel .chapter-text{ max-width: 860px; margin: 24px auto 0; text-align: left; }

    }

    .advantage-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

/* Thesis: enforce monochrome icons */
.advantage-icon svg{ fill: var(--color-background); }
.advantage-icon{ background: var(--color-accent); color: var(--color-background); }


    .advantage-item h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .forge-platforms {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 40px 0;
    }

    .platform-item {
        padding: 25px 20px;
    }

    .platform-item h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;

/* Flywheel module refinements: layout and motion */
.flywheel-container{ margin: clamp(40px,8vh,80px) auto; padding: clamp(24px,6vw,60px); }
.flywheel-diagram{ width: clamp(300px, 60vw, 600px); height: clamp(300px, 60vw, 600px); }
.flywheel-center{ width: clamp(120px, 20vw, 200px); height: clamp(120px, 20vw, 200px); }
.flywheel-step{ transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease; }
.flywheel-step:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.2); }
/* Mild auto-rotation feeling via step highlight only (handled in JS), reduce jumpiness */
.flywheel-step.active{ background: var(--color-accent); color: var(--color-background); transform: scale(1.06); }

    }

    .flywheel-container {
        padding: 40px 20px;
        margin: 60px auto;
    }

    .flywheel-diagram {
        width: 300px;
        height: 300px;
    }

    .flywheel-center {
        width: 120px;
        height: 120px;
        font-size: 0.9rem;
    }

    .flywheel-step {
        width: 70px;
        height: 70px;
        font-size: 0.7rem;
    }

    .flywheel-step:nth-child(2) { top: -35px; }
    .flywheel-step:nth-child(3) { right: -35px; }
    .flywheel-step:nth-child(4) { bottom: -35px; }
    .flywheel-step:nth-child(5) { left: -35px; }

    .architects-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin: 40px 0;
    }

    .architect-card {
        padding: 25px 20px;
    }

    .architect-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .traction-stats {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }

    .traction-stat .number {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .thesis-cta-final h2 {
        font-size: 2rem;
        margin-bottom: 25px;
    }

    .thesis-cta-final p {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }

    .cta-buttons-final {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .cta-buttons-final .btn {
        width: 100%;
        max-width: 300px;
        padding: 16px 24px;
        font-size: 1rem;
        min-width: auto;
    }
}

/* Thesis Evidence - 三大支柱展示 */
.thesis-evidence {
    padding: 120px 5% 100px;
    background: var(--color-background);
}

.thesis-evidence .container {
    max-width: var(--content-width);
    margin: 0 auto;
}

.thesis-evidence h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 80px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-bottom: 80px;
}

.evidence-pillar {
    text-align: center;
    padding: 40px 30px;
    background: var(--color-background-offset);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.evidence-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.evidence-pillar:hover::before {
    transform: scaleX(1);
}

.evidence-pillar:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--color-accent);
}

.evidence-pillar h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--color-accent);
    font-weight: 700;
}

.evidence-pillar p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* Thesis Outline - 详细大纲 */
.thesis-outline {
    padding: 100px 5% 80px;
    background: var(--color-background-offset);
}

.thesis-outline .container {
    max-width: var(--content-width);
    margin: 0 auto;
}

.thesis-outline h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 60px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.outline-list {
    display: grid;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.outline-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 30px;
    background: var(--color-background);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.outline-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.outline-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-accent);
    color: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.outline-content h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: var(--color-text-primary);
    font-weight: 600;
}

.outline-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Thesis CTA - 投资者行动召唤 */
.thesis-cta {
    padding: 120px 5% 100px;
    background: linear-gradient(135deg,
        var(--color-background) 0%,
        var(--color-background-offset) 50%,
        var(--color-background) 100%);
    text-align: center;
    position: relative;
}

.thesis-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.thesis-cta .container {
    max-width: 800px;
    margin: 0 auto;
}

.thesis-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--color-accent);
    font-weight: 700;
}

.thesis-cta p {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 50px;
    color: var(--color-text-primary);
}

.cta-buttons {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 200px;
    transition: all 0.3s ease;
}

.cta-buttons .btn.primary {
    background: var(--color-accent);
    color: var(--color-background);
    border: 2px solid var(--color-accent);
}

.cta-buttons .btn.primary:hover {
    background: transparent;
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,255,255,0.1);
}

.cta-buttons .btn.secondary {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.cta-buttons .btn.secondary:hover {
    background: var(--color-accent);
    color: var(--color-background);
    transform: translateY(-2px);
}

/* === Thesis页面响应式设计 === */

/* 平板端 (768px-1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .thesis-bridge h2 {
        font-size: 2.2rem;
    }

    .evidence-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 600px;
        margin: 0 auto 60px;
    }

    .evidence-pillar {
        padding: 30px 25px;
    }

    .outline-item {
        padding: 25px;
        gap: 20px;
    }

    .outline-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .thesis-cta h2 {
        font-size: 2.2rem;
    }

    .cta-buttons {
        gap: 20px;
    }
}

/* 移动端 (≤767px) */
@media (max-width: 767px) {
    .thesis-bridge {
        padding: 60px 5% 50px;
    }

    .thesis-bridge h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .thesis-bridge p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .thesis-evidence {
        padding: 80px 5% 60px;
    }

    .thesis-evidence h2 {
        font-size: 1.8rem;
        margin-bottom: 50px;
    }

    .evidence-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .evidence-pillar {
        padding: 25px 20px;
    }

    .evidence-pillar h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .thesis-outline {
        padding: 60px 5% 50px;
    }

    .thesis-outline h2 {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .outline-item {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }

    .outline-number {
        align-self: center;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .outline-content h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .thesis-cta {
        padding: 80px 5% 60px;
    }

    .thesis-cta h2 {
        font-size: 2rem;
        margin-bottom: 25px;
    }

    .thesis-cta p {
        font-size: 1rem;
        margin-bottom: 40px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
        padding: 14px 24px;
        font-size: 1rem;
    }
}

.four-forges { padding: 100px 5% 80px; }
.forge-chapter { margin-bottom: 100px; padding: 60px 0; border-bottom: 1px solid var(--color-border); }
.forge-chapter:last-child { border-bottom: none; }
.forge-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: var(--content-width); margin: 0 auto; }
.forge-chapter:nth-child(even) .forge-content { grid-template-columns: 1fr 1fr; }
.forge-chapter:nth-child(even) .forge-left { order: 2; }
.forge-chapter:nth-child(even) .forge-right { order: 1; }

.forge-logo { width: 160px; height: auto; margin-bottom: 20px; filter: invert(1); opacity: 0.9; }
.forge-slogan { color: var(--color-accent); font-weight: 600; font-size: 1.2rem; margin-bottom: 30px; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.before, .after { padding: 20px; background: var(--color-background-offset); border: 1px solid var(--color-border); border-radius: 8px; }
.before h4, .after h4 { margin: 0 0 12px; color: var(--color-accent); }
.before p, .after p { margin: 0; font-size: 0.95rem; }

.tech-highlight, .worlds-first { margin-bottom: 30px; padding: 24px; background: var(--color-background-offset); border: 1px solid var(--color-border); border-radius: 8px; }
.tech-highlight h4, .worlds-first h4 { margin: 0 0 12px; color: var(--color-accent); }
.tech-highlight p, .worlds-first p { margin: 0; }

.architects-corner { padding: 80px 5% 60px; background: var(--color-background-offset); text-align: center; }
.architects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 800px; margin: 40px auto 0; }
.architect-card { padding: 32px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 12px; }
.architect-card h4 { margin: 0 0 16px; color: var(--color-accent); }
.architect-card p { margin: 0 0 20px; }

.futures-cta { padding: 80px 5% 60px; text-align: center; }
.cta-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 900px; margin: 40px auto 0; }
.cta-path { padding: 40px; background: var(--color-background-offset); border: 1px solid var(--color-border); border-radius: 12px; }
.cta-path h3 { margin: 0 0 16px; color: var(--color-accent); }
.cta-path p { margin: 0 0 24px; }

/* Responsive for Futures */
@media (max-width: 1000px){
  .forge-content{ grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .forge-chapter:nth-child(even) .forge-left{ order: 1; }
  .forge-chapter:nth-child(even) .forge-right{ order: 2; }
  .cta-paths{ grid-template-columns: 1fr; gap: 30px; }
  .architects-grid{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px){
  .before-after{ grid-template-columns: 1fr; gap: 16px; }
  .forge-chapter{ margin-bottom: 60px; padding: 40px 0; }
}

/* Responsive Breakpoints - Unified */
@media (max-width: 1200px){
  .badges-grid, .evidence-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 970px){
  .badges-grid, .evidence-grid{ grid-template-columns: 1fr; }
  .mega-menu-static{ padding: 10px 0 20px; }
  .journal-filters .container{ grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 600px){
  .journal-filters .container{ gap: 6px; }
  #journalSearch, #journalCategory, #journalAuthor{ font-size: 0.9rem; padding: 10px 12px; }
}


/* Narrative sections styles */
.narrative-section {
    padding: 20vh 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Act II: Entropy */
.entropy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 强制三列布局 */
    gap: 2rem;
    width: 100%;
    margin-top: 3rem;
}

.entropy-card {
    border: 1px solid rgba(245, 245, 247, 0.2);
    padding: 2rem;
    border-radius: 10px;
    transition: transform 0.35s ease-in-out, border-color 0.35s ease-in-out;
}

.entropy-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.4);
}

.entropy-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-accent);
}

.entropy-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* 响应式：移动端垂直堆叠 */
@media (max-width: 970px) {
    .entropy-grid {
        grid-template-columns: 1fr; /* 平板和移动端垂直堆叠 */
        gap: 1.5rem;
    }
}

/* Act III: Fusion */
.fusion-container {
    display: flex;
    flex-direction: column; /* Mobile-first: stack vertically */
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    width: 100%;
}

.fusion-card {
    border: 1px solid rgba(245, 245, 247, 0.2);
    padding: 2rem;
    border-radius: 10px;
    max-width: 400px;
}

.fusion-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.fusion-plus {
    font-size: 3rem;
    font-weight: 200;
}

/* Act IV: Ecosystem Preview */
.ecosystem-preview {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.ecosystem-card-placeholder {
    width: 200px;
    height: 120px;
    border: 1px solid rgba(245, 245, 247, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 1.2rem;
}

.link-to-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 2rem;
    padding: 16px 32px;
    background-color: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--animation-ease);
}

.link-to-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.link-to-more:hover::before {
    left: 100%;
}

.link-to-more::after {
    content: '→';
    transition: transform 0.3s var(--animation-ease);
}

.link-to-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

.link-to-more:hover::after {
    transform: translateX(4px);
}

/* Act V: Invitation */
.cta-button-large .btn {
    padding: 1rem 3rem;
    font-size: 1.2rem;
}

/* Footer */
.main-footer {
    padding: 4rem 5%;
    background-color: #050505;
    border-top: 1px solid rgba(245, 245, 247, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

/* Duplicate footer definitions removed - using the ones above */

/* Duplicate .footer-slogan definition removed - using the one above */

.footer-nav h4, .footer-contact h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footer-legal {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #a0a0a0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.footer-legal p {
    margin: 0;
    white-space: nowrap;
}

.footer-legal a {
    white-space: nowrap;
    margin: 0 4px;
}
}

/* === RESPONSIVE OPTIMIZATION FIXES === */

/* P0: Footer Legal Section - Prevent Overflow on Small Screens */
.footer-legal {
    font-size: clamp(12px, 2.6vw, 14px);
}

@media (max-width: 480px) {
    .footer-legal {
        flex-wrap: wrap;
        row-gap: 6px;
        text-align: center;
    }

    .footer-legal p {
        flex-basis: 100%;
        text-align: center;
        white-space: normal;
        margin: 0;
    }

    .footer-legal a {
        white-space: normal;
        margin: 0 4px;
    }
}

/* Ensure overlays appear above header/mega menu */
.focus-overlay, .platform-overlay{ z-index: 2000; }

/* P1: Fluid Typography - Smooth Scaling Across Breakpoints */
h1, .manifesto-content h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

h2.section-title {
    font-size: clamp(1.7rem, 4vw, 3rem);
    margin-bottom: clamp(16px, 4vh, 24px);
}

.brand-slogan {
    font-size: clamp(1.8rem, 6vw, 3.5rem);
    line-height: 1.05;
}

/* P1: Fluid Section Spacing - Replace Fixed vh Values */
section {
    padding-block: clamp(48px, 12vh, 160px);
}

.narrative-section, .hero-section {
    padding: clamp(48px, 12vh, 160px) 10%;
}

/* P1: Footer Grid Consistency - Single Source of Truth */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: clamp(20px, 4vw, 40px);
    align-items: start;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 5%;
}

@media (max-width: 970px) {
    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: clamp(16px, 3vw, 32px);
        text-align: left;
    }

    .footer-nav,
    .footer-partnerships,
    .footer-contact,
    .footer-legal {
        text-align: left;
    }

    .footer-nav h4,
    .footer-partnerships h4,
    .footer-contact h4 {
        text-align: left;
    }

    .footer-nav ul,
    .footer-partnerships ul {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: clamp(12px, 2vw, 24px);
    }

    .footer-legal {
        grid-column: 1;
        margin-top: clamp(16px, 3vw, 32px);
        order: 5;
    }
}

/* P2: Enhanced Mobile Navigation Touch Targets */
@media (max-width: 767px) {
    .main-nav a {
        font-size: clamp(1.2rem, 4vw, 1.5rem);
        padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 20px);
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-cta .btn {
        font-size: clamp(1.1rem, 3.5vw, 1.2rem);
        padding: clamp(12px, 3vw, 14px) clamp(20px, 5vw, 24px);
        min-height: 44px;
    }
}

/* P2: Improved Container Padding for Very Small Screens */
@media (max-width: 360px) {
    .container {
        padding: 0 4%;
    }

    .site-header .container {
        padding: 0 16px;
    }

    .footer-content {
        padding: 0 4%;
    }
}

/* Animation States */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Story Page Specifics */
.story-part.alt-bg {
    background-color: #050505;
}

.founder-quote {
    font-size: 1.5rem;
    font-style: italic;
    max-width: 800px;
    line-height: 1.8;
    margin-top: 2rem;
    color: #c0c0c0;
}

/* Timeline */
.timeline {
    width: 100%;
    max-width: 800px;
    margin-top: 3rem;
    position: relative;
    padding: 2rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px; /* Mobile-first: line on the left */
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(245, 245, 247, 0.2);
}

.timeline-item {
    padding: 2rem 0 2rem 3rem; /* Mobile-first: all items on the right of the line */
    width: 100%;
    position: relative;
    text-align: left;
}

.timeline-year {
    font-size: 1.2rem;
    font-weight: 600;
    color: #a0a0a0;
    margin-bottom: 0.5rem;
}

.timeline-content h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

/* Architects */
.architects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    width: 100%;
    max-width: 900px;
    margin-top: 3rem;
}

.architect-card {
    text-align: center;
}

.architect-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.architect-card h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.architect-quote {
    font-style: italic;
    color: #c0c0c0;
}

/* Compass */
.compass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1000px;
    margin-top: 3rem;
}

.compass-item {
    border-top: 2px solid rgba(245, 245, 247, 0.3);
    padding-top: 1.5rem;
    text-align: left;
}

.compass-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Ecosystem Page Specifics */
.ecosystem-division {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.ecosystem-division.alt-bg {
    background-color: #050505;
}

.division-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.division-subtitle {
    font-size: 1.1rem;
    color: #a0a0a0;
    max-width: 600px;
    margin-bottom: 4rem;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
}

/* Duplicate .living-card definition removed - using the one above */

/* Duplicate .brand-logo definition removed - using the one above */

.platform-name {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Journal Page Specifics */
.journal-grid-section {
    padding: var(--section-padding) 10%;
    width: 100%;
}

.journal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.journal-card {
    border: 1px solid rgba(245, 245, 247, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.journal-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 245, 247, 0.3);
}

.journal-card-content {
    padding: 2rem;
}

.journal-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.journal-excerpt {
    color: #a0a0a0;
    margin-bottom: 1.5rem;
}

.journal-meta {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Join Page Specifics */
.join-paths-section {
    padding: var(--section-padding) 10%;
    width: 100%;
}

.join-paths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.path-card {
    background-color: #050505;
    border: 1px solid rgba(245, 245, 247, 0.1);
    border-radius: 15px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.path-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.path-card p {
    color: #a0a0a0;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.path-card .btn {
    align-self: flex-start;
}

/* MEDIA QUERIES for larger screens */

@media (min-width: 768px) {
    .narrative-section, .hero-section {
        padding: var(--section-padding) 10%;
    }

    .mobile-nav-toggle {
        display: none;
    }

    .main-nav {
        position: static;
        height: auto;
        width: auto;
        background: none;
        transform: translateX(0);
        flex-direction: row;
    }

    .nav-links {
        flex-direction: row;
        gap: 2rem;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .header-cta {
        display: block;
    }

    .section-title {
        font-size: 4rem;
    }

    .fusion-container {
        flex-direction: row; /* Restore side-by-side layout */
    }

    .timeline::before {
        left: 50%; /* Center line on larger screens */
        transform: translateX(-50%);
    }

    .timeline-item {
        width: 50%;
        padding: 2rem;
    }

    .timeline-item:nth-child(odd) {
        left: 0;
        padding-right: 4rem;
        text-align: right;
    }

    .timeline-item:nth-child(even) {
        left: 50%;
        padding-left: 4rem;
        text-align: left;
    }
}

/* === 统一移动端响应式系统 === */

/* 大手机 (480px-767px): 垂直优先设计 */
@media (max-width: 767px) and (min-width: 480px) {
    /* 基础布局 */
    body { font-size: 16px; }
    section { padding: 8vh 0; }
    h1, .manifesto-content h1 { font-size: 2.4rem; }
    h2.section-title { font-size: 1.9rem; margin-bottom: 4vh; }

    /* 容器和间距 */
    .container { padding: 0 4%; }
    .site-header { padding: 16px 0; }
    .nav-wrapper { padding: 100px 4% 40px; }

    /* 导航优化 */
    .main-nav a {
        font-size: 1.4rem !important;
        padding: 15px 18px !important;
    }

    .nav-cta .btn {
        font-size: 1.15rem !important;
        padding: 13px 22px !important;
    }
}

/* 小手机 (<480px): 最小可用设计 */
@media (max-width: 479px) {
    /* 基础布局 */
    body { font-size: 15px; }
    section { padding: 6vh 0; }
    h1, .manifesto-content h1 { font-size: 2rem; }
    h2.section-title { font-size: 1.7rem; margin-bottom: 3vh; }

    /* 容器和间距 */
    .container { padding: 0 3%; }
    .site-header { padding: 12px 0; }
    .logo img { height: 28px; }
    .nav-wrapper { padding: 80px 3% 30px; }

    /* 导航优化 */
    .main-nav a {
        font-size: 1.3rem !important;
        padding: 14px 16px !important;
    }

    .nav-cta .btn {
        font-size: 1.1rem !important;
        padding: 12px 20px !important;
    }

    /* 移动端子菜单优化 */
    .mobile-submenu a {
        font-size: 1rem !important;
        padding: 10px 14px !important;
    }
}

/* === PC Mega Menu Ultra-wide Tuning === */
@media (min-width: 1440px) {
  /* Expand inner container/grid slightly for large displays */
  .mega-menu .container { max-width: 1600px; }
  .mega-menu-grid { max-width: 1500px; }
  .mega-menu {
    box-shadow: 0 10px 36px rgba(0,0,0,0.40);
  }
}

@media (min-width: 1920px) {
  .mega-menu .container { max-width: 1800px; }
  .mega-menu-grid { max-width: 1680px; }
  .mega-menu {
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
}



/* === Diagnostics: IVD Product Portfolio table responsive columns === */
/* Base improvements: enable wrapping to avoid overflow */
.spec-table td, .spec-table th { word-break: break-word; }

/* Hide less-critical columns on narrow screens to preserve readability */
@media (max-width: 767px) {
  /* Hide Sample Type (3) and Detection Time (4) */
  .spec-table th:nth-child(3), .spec-table td:nth-child(3),
  .spec-table th:nth-child(4), .spec-table td:nth-child(4) { display: none; }
  .spec-table th, .spec-table td { padding: 10px 12px; }
}

@media (max-width: 480px) {
  /* Additionally hide Target/Biomarker (2) on very small screens */
  .spec-table th:nth-child(2), .spec-table td:nth-child(2) { display: none; }
  .spec-table th, .spec-table td { padding: 8px 10px; }
}


/* === Footer: squared logo+Slogan block and legal links line separation === */
.footer-logo-mission--squared {
  position: relative;
  width: 100%;
  max-width: 260px; /* desktop default size of square */
  aspect-ratio: 1 / 1; /* ensure perfect square */
  display: grid;
  grid-template-rows: 1fr 1fr; /* top-left logo, bottom-left slogan */
  align-items: start;
}
.footer-logo-mission--squared .footer-logo-link { align-self: start; justify-self: start; }
.footer-logo-mission--squared .footer-slogan { align-self: end; justify-self: start; margin: 0; }

/* Keep two lines stacked without <br>, left aligned; no forced nowrap */
.footer-slogan .slogan-line-1, .footer-slogan .slogan-line-2 { display: block; white-space: normal; }

/* Responsive sizing of the square */
@media (max-width: 970px){ .footer-logo-mission--squared { max-width: 220px; } }
@media (max-width: 600px){ .footer-logo-mission--squared { max-width: 200px; } }
@media (max-width: 400px){ .footer-logo-mission--squared { max-width: 160px; } }

/* Footer legal links: own line on narrow screens */
.legal-links { display: inline-flex; align-items: center; gap: 10px; }
.legal-links a { white-space: nowrap; }
.legal-links a + a::before { content: "·"; margin: 0 4px 0 2px; color: var(--color-text-secondary); }

@media (max-width: 600px){
  .footer-legal { flex-wrap: wrap; row-gap: 6px; }
  .footer-legal p { flex-basis: 100%; text-align: center; }
  .footer-legal .legal-links { flex-basis: 100%; justify-content: center; }
}


/* Diagnostics table: hint & expand button styles */
.mobile-columns-hint { color: var(--color-text-secondary); font-size: 0.95rem; margin: 10px 0; text-align: center; }
.show-all-columns { margin: 8px auto 12px; display: none; }

@media (max-width: 767px){ .show-all-columns { display: inline-flex; } }

/* When expanded, re-show hidden columns on mobile */
@media (max-width: 767px){
  .spec-content.show-all .spec-table th:nth-child(3), .spec-content.show-all .spec-table td:nth-child(3),
  .spec-content.show-all .spec-table th:nth-child(4), .spec-content.show-all .spec-table td:nth-child(4){ display: table-cell; }
}
@media (max-width: 480px){
  .spec-content.show-all .spec-table th:nth-child(2), .spec-content.show-all .spec-table td:nth-child(2){ display: table-cell; }
}


/* === Mobile/Tablet: Expertise (nav dropdown) accordion + unified alignment === */
@media (max-width: 970px) {
  /* Default: hide desktop mega on mobile/tablet */
  .nav-dropdown .mega-menu { display: none; }
  /* When active via JS, show static list as accordion under the trigger */
  .nav-dropdown.active .mega-menu {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    opacity: 1; visibility: visible; transform: none;
    background: transparent; border: none; box-shadow: none; margin-top: 0;
  }
  /* On mobile, render mega menu inline under the trigger */
  .nav-dropdown .mega-menu { position: static; left: auto; right: auto; top: auto; width: 100%; max-width: none; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; box-shadow: none; margin: 0; padding: 0; }
  .nav-dropdown .mega-menu-grid { display: none !important; }
  .nav-dropdown .mega-menu-static { display: none; color: var(--color-text-primary); }
  /* Glassy, readable mobile dropdown panel */
  .nav-dropdown.active .mega-menu-static { display: block; padding: 12px; background: rgba(255,255,255,0.04); backdrop-filter: blur(6px); border-radius: 10px; }
  .nav-dropdown .mega-menu-static .mega-menu-item { display: block; padding: 12px 0; background: transparent; border: none; border-radius: 0; }
  .nav-dropdown .mega-menu-static .mega-menu-item h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--color-text-primary); }
  .nav-dropdown .mega-menu-static .mega-menu-item small { color: var(--color-text-secondary); }

  /* Unified alignment for all menu items */
  .main-nav a, .nav-dropdown-trigger { text-align: left; padding: 16px 20px; }
  .main-nav a::after { display: none; } /* remove desktop underline hover effect on mobile */
}


/* Unify mobile menu alignment to left and ensure accordion open area is full width */
@media (max-width: 970px) {
  .nav-wrapper.nav-active { justify-content: flex-start; }
  .main-nav ul { text-align: left; max-width: none; width: 100%; align-items: stretch; }
  .main-nav li { width: 100%; }
  .main-nav a { width: 100%; justify-content: flex-start; }
  .nav-cta .btn { width: 100%; text-align: left; justify-content: flex-start; }
}


/* Move mobile columns hint+button smaller and below table */
.mobile-columns-inline{ display:flex; align-items:center; gap:8px; justify-content:center; }
.mobile-columns-hint{ font-size: 0.85rem; opacity:.8; margin: 0; }
.show-all-columns{ font-size: 0.9rem; padding: 6px 10px; border-radius: 4px; }
@media (max-width:767px){ .mobile-columns-inline{ margin: 8px 0 0; } }


/* Footer mobile left alignment between logo/slogan and other columns */
@media (max-width: 767px){
  .footer-content{ padding: 0 4%; }
  .footer-logo-mission--squared{ margin-left: 0; }
  .footer-content > div{ text-align: left; }
  .footer-nav h4, .footer-contact h4, .footer-partnerships h4{ text-align:left; }
}


/* Journal filters: first-principles compact layout */
.journal-filters .container{ display:grid; grid-template-columns: 1fr 180px 180px; gap: 8px; align-items:center; }
#journalSearch, #journalCategory, #journalAuthor{ padding: 10px 12px; border:1px solid var(--color-border); background: var(--color-background-offset); color: var(--color-text-primary); border-radius:6px; }
#journalSearch{ min-width: 0; }
@media (max-width: 1024px){ .journal-filters .container{ grid-template-columns: 1fr 1fr; } #journalAuthor{ grid-column: 1 / -1; } }
@media (max-width: 600px){ .journal-filters .container{ grid-template-columns: 1fr; } #journalSearch, #journalCategory, #journalAuthor{ padding: 9px 10px; } }


/* Ecosystem mobile overlay fit for various viewport sizes */
@media (max-width: 970px){
  .platform-overlay .overlay-content{ grid-template-columns: 1fr; height: auto; padding: 40px 24px; gap: 24px; }
  .platform-overlay .overlay-visual{ min-height: 180px; }
  .platform-overlay .overlay-logo-container img{ height: 48px; }
  .platform-overlay .overlay-details{ max-height: 50vh; }
  .overlay-cta{ width: 100%; justify-content:center; }
}
@media (max-width: 480px){
  .platform-overlay .overlay-content{ padding: 32px 16px; }
  .platform-overlay .overlay-details{ max-height: 44vh; }
  .platform-overlay .overlay-title{ font-size: 1.6rem; }
  .platform-overlay .overlay-subtitle{ font-size: 1rem; }
}