/* ==========================================================================
    CSS VARIABLES & RESET
    ========================================================================== */
:root {
    /* 模拟 Tailwind slate 色板 */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    
    /* 品牌色 & 背景色 */
    --primary: #0076d4;
    --primary-hover: #005bb5;
    --bg-body: #020612;
    --bg-footer: #032da1;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--slate-300);
    background-color: var(--bg-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    zoom: 90%;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 滚动条样式 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #dfecfb; }
::-webkit-scrollbar-thumb { background: rgba(0, 118, 212, 0.75); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 118, 212, 0.6); }

/* 通用隐藏类 (供 JS 使用) */
.hidden { display: none !important; }

/* 正文页面内主标题 */
.title-text-oswald {
  font-family: 'Oswald', sans-serif;
  color: #0076d4;
  font-weight: 600; 
}

/* ==========================================================================
    HEADER & NAVIGATION
    ========================================================================== */
.site-header {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 80rem; /* max-w-7xl */
    z-index: 100;
    transition: all 0.3s duration;
}

.header-inner {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(226, 232, 240, 0.5); /* slate-200/50 */
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
    border-radius: 3rem; /* rounded-2xl */
    padding: 0 2rem; /* px-6 */
    height: 3.25rem; /* h-16 */
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .header-inner { height: 4.75rem; }
}

/* Logo */
.logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.25rem 0;
    margin-left: 0.75rem;
}
@media (min-width: 1024px) {
    .logo-link { margin-left: 1.25rem; }
}
.logo-img {
    height: 2.25rem;
    width: auto;
    max-width: 320px;
    object-fit: contain;
    transition: transform 0.3s;
}
@media (min-width: 768px) {
    .logo-img { height: 4rem; }
}
.logo-link:hover .logo-img { transform: scale(1.05); }

/* 桌面端导航 */
.desktop-nav {
    display: none;
    align-items: stretch;
    gap: 0;
}
@media (min-width: 1024px) {
    .desktop-nav { display: flex; }
}

.nav-item {
    padding: 0 1rem;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-600);
    transition: all 0.2s;
    gap: 0.25rem;
    height: 100%;
}
@media (min-width: 1280px) {
    .nav-item { padding: 0 1.25rem; font-size: 15px; }
}
.nav-item:hover, .nav-dropdown-group:hover > .nav-item {
    background-color: var(--primary);
    color: #fff;
}

.nav-dropdown-group {
    position: relative;
    display: flex;
    align-items: stretch;
}
.nav-icon-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s;
}
.nav-dropdown-group:hover .nav-icon-arrow {
    transform: rotate(-180deg);
}

/* 下拉菜单 */
.dropdown-hover-bridge {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.nav-dropdown-group:hover .dropdown-hover-bridge {
    opacity: 1;
    pointer-events: auto;
}
.dropdown-panel {
    background-color: #fff;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}
.dropdown-large { width: 460px; }
.dropdown-small { width: 14rem; flex-direction: column; padding: 0.5rem 0; }

/* 下拉菜单列与内部元素 */
.dropdown-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}
.dropdown-col-alt {
    background-color: var(--slate-50);
    border-left: 1px solid var(--slate-100);
}
.dropdown-section { margin-bottom: 1.25rem; }
.dropdown-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    margin-bottom: 0.375rem;
}
.dropdown-title-icon { width: 18px; height: 18px; color: rgba(0, 118, 212, 0.7); }
.dropdown-title-text {
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: rgba(0, 118, 212, 0.7);
}
.dropdown-link {
    display: block;
    padding: 0.375rem 1.5rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-600);
    transition: all 0.2s;
}
.dropdown-link:hover {
    background-color: var(--primary);
    color: #fff;
}

/* ==========================================================================
   DROPDOWN RICH LINKS (用于结构更复杂的下拉菜单项)
   ========================================================================== */
.dropdown-rich-links {
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem 0.5rem 0.5rem;
    gap: 0.25rem;
}

.dropdown-rich-link {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

/* 悬停效果：背景变浅灰，标题变品牌蓝 */
.dropdown-rich-link:hover {
    background-color: var(--slate-100);
}
.dropdown-col-alt .dropdown-rich-link:hover {
    background-color: #ffffff; /* 右侧灰底栏中的悬停用白底对比 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* 左侧图标容器 */
.rich-link-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 118, 212, 0.08); /* 极淡的主题蓝 */
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.dropdown-rich-link:hover .rich-link-icon {
    background-color: var(--primary);
    color: #ffffff;
    transform: scale(1.05);
}

.rich-link-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* 右侧文本区 */
.rich-link-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rich-link-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-800);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.dropdown-rich-link:hover .rich-link-title {
    color: var(--primary);
}

.rich-link-desc {
    font-size: 0.75rem;
    color: var(--slate-500);
    line-height: 1.4;
}



/* 右侧操作区 */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.social-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-right: 0.5rem;
    border-right: 1px solid var(--slate-200);
    padding-right: 1rem;
    height: 100%;
}
.action-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--slate-400);
    transition: all 0.3s;
}
.action-btn:hover { background-color: var(--primary); color: #fff; }

/* 移动端菜单按钮 */
.mobile-menu-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--slate-600);
    transition: all 0.3s;
    flex-shrink: 0;
}
.mobile-menu-btn:hover { background-color: var(--primary); color: #fff; }
@media (min-width: 1024px) {
    .mobile-menu-btn { display: none; }
}
.mobile-icon { width: 24px; height: 24px; transition: transform 0.3s; }

/* ==========================================================================
    MOBILE MENU
    ========================================================================== */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 0.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(40px);
    border-left: 1px solid rgba(226, 232, 240, 0.6);
    border-right: 1px solid rgba(226, 232, 240, 0.6);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 75vh;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    transform-origin: top;
}
@media (min-width: 1024px) {
    .mobile-menu { display: none; }
}
.mobile-menu-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* --- 原生折叠面板样式 (<details> & <summary>) --- */
.mob-menu-group { 
    border-bottom: 1px solid var(--slate-100); 
}

.mob-menu-group summary {
    list-style: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem; /* 将原本标题的边距转移到了这里，方便点击 */
}

/* 隐藏 Safari 等 WebKit 浏览器的默认折叠三角 */
.mob-menu-group summary::-webkit-details-marker {
    display: none;
}

.mob-group-title {
    display: block;
    padding: 0; /* 清除原有边距，交给 summary 控制 */
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--slate-700);
}

.mob-toggle-icon {
    font-size: 0.75rem;
    color: var(--slate-400);
    transition: transform 0.3s ease;
}

/* 面板打开时，箭头旋转向上 */
.mob-menu-group[open] .mob-toggle-icon {
    transform: rotate(180deg);
}

/* --- 子菜单区域 --- */
.mob-sub-area {
    background-color: rgba(226, 232, 240, 0.7);
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5rem;
}

/* 消除原有多余的顶部 padding 避免排版冲突 */
.mob-menu-group[open] .mob-sub-area {
    padding-top: 0;
}

.mob-sub-section { margin-top: 0.5rem; }

.mob-sub-title {
    padding: 0.5rem 1.5rem 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mob-sub-icon { width: 18px; height: 18px; color: rgba(148, 163, 184, 0.8); }

.mob-sub-text {
    font-size: 13px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.9);
}

.mob-link {
    display: block;
    padding: 0.375rem 1.5rem 0.375rem 3rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--slate-600);
    transition: all 0.2s;
}
.mob-link:hover { background-color: var(--primary); color: #fff; }

/* --- 独立链接区 --- */
.mob-main-link {
    display: block;
    padding: 0.875rem 1.5rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-700);
    border-bottom: 1px solid var(--slate-100);
    transition: all 0.2s;
}
.mob-main-link:hover { background-color: var(--primary); color: #fff; }

/* --- 社交按钮栏 --- */
.mob-social-bar {
    padding: 1.5rem;
    background-color: var(--slate-50);
    border-top: 1px solid var(--slate-100);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.mob-social-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #fff;
    border: 1px solid var(--slate-200);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    color: var(--slate-500);
    transition: all 0.2s;
}
.mob-social-btn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* --- 移动端 富图文链接 (Mobile Rich Links) --- */
.mob-rich-links-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0 0.75rem 0;
}

.mob-rich-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* 左侧 padding 加大到 2.5rem，与上级标题的图标产生视觉缩进层级 */
    padding: 0.5rem 1.5rem 0.5rem 2.5rem; 
    text-decoration: none;
    transition: background-color 0.2s;
}

/* 移动端保留 hover 和 active 状态的浅色触摸反馈 */
.mob-rich-link:active, .mob-rich-link:hover {
    background-color: rgba(0, 118, 212, 0.05);
}

.mob-rich-icon {
    flex-shrink: 0;
    width: 2rem; /* 比桌面端略小，适合手机屏幕 */
    height: 2rem;
    border-radius: 0.4rem;
    background-color: rgba(0, 118, 212, 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mob-rich-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.mob-rich-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.125rem;
}

.mob-rich-title {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: var(--slate-700);
    line-height: 1.2;
}

.mob-rich-desc {
    font-size: 0.7rem; /* 11.2px，作为辅助说明 */
    color: var(--slate-500);
    line-height: 1.3;
}
/* ==========================================================================
    HERO SECTION
    ========================================================================== */
#heroSection { 
    height: 100vh; 
    height: 100svh; 
    min-height: 750px; 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    background: linear-gradient(180deg, #020510 0%, #001a5a 50%, #000814 100%);
}
canvas#bgCanvas, canvas#globeCanvas { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
canvas#bgCanvas { z-index: 0; } 
canvas#globeCanvas { z-index: 1; }

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 120px 1.5rem 2.5rem;
    pointer-events: none;
}
@media (min-width: 640px) { .hero-content { padding-left: 3rem; padding-right: 3rem; } }
@media (min-width: 768px) { .hero-content { padding-top: 140px; } }
@media (min-width: 1024px) {
    .hero-content {
    flex-direction: row;
    padding-left: 6rem;
    padding-right: 6rem;
    }
}

.hero-text-col {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: auto;
}
@media (min-width: 1024px) {
    .hero-text-col {
    width: 50%;
    align-items: flex-start;
    text-align: left;
    padding-left: 1rem;
    }
}

.hero-empty-col {
    width: 100%;
    flex: 1;
}
@media (min-width: 1024px) { .hero-empty-col { width: 50%; } }

.hero-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 20px rgba(0, 47, 167, 0.5);
    font-size: 2.75rem; 
    margin: 0;
}
@media (min-width: 768px) { .hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 4rem; } }

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: rgba(210, 230, 255, 0.9);
    margin-top: 1.5rem;
    margin-bottom: 0;
    max-width: 36rem;
    line-height: 1.6;
    font-size: 1.125rem;
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.25rem; } }

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-top: 2.5rem;
    padding: 0.875rem 2.25rem;
    border-radius: 9999px;
    color: #ffffff;
    background: rgba(0, 118, 212, 0.9);
    border: 1px solid rgba(100, 180, 255, 0.4);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hero-cta:hover {
    background: rgba(0, 118, 212, 1);
    box-shadow: 0 0 20px rgba(0, 118, 212, 0.4);
    transform: translateY(-2px);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.anim-2 { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.anim-3 { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.anim-4 { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both; }

/* ==========================================================================
    FOOTER SECTION
    ========================================================================== */
.site-footer {
    background-color: var(--primary-hover);
    border-top: 1px solid rgba(30, 41, 59, 0.6);
    padding: 4rem 1.5rem;
    color: var(--slate-400);
    position: relative;
    z-index: 10;
    margin-top: auto;
}
@media (min-width: 640px) { .site-footer { padding-left: 3rem; padding-right: 3rem; } }
@media (min-width: 1024px) { .site-footer { padding-left: 6rem; padding-right: 6rem; } }

.footer-grid {
    max-width: 85rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
}

.footer-col-brand { grid-column: span 1; }
@media (min-width: 768px) { .footer-col-brand { grid-column: span 5; } }
@media (min-width: 1024px) { .footer-col-brand { grid-column: span 4; } }

.footer-col-links { grid-column: span 1; }
@media (min-width: 768px) { .footer-col-links { grid-column: span 3; } }
@media (min-width: 1024px) { 
    .footer-col-links { grid-column-start: 7; grid-column-end: span 2; } 
}

.footer-col-contact { grid-column: span 1; }
@media (min-width: 768px) { .footer-col-contact { grid-column: span 4; } }
@media (min-width: 1024px) { .footer-col-contact { grid-column: span 3; } }

.footer-brand-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    display: block;
}
.footer-desc {
    font-size: 0.875rem;
    line-height: 1.625;
    max-width: 24rem;
    margin-bottom: 1.5rem;
    color: var(--slate-400);
    margin-top: 0;
}
.footer-socials {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.footer-social-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(30, 41, 59, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400);
    border: 1px solid rgba(51, 65, 85, 0.5);
    transition: all 0.3s;
}
.footer-social-btn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.footer-heading {
    color: #fff;
    font-weight: 600;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0;
}
.footer-link-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
}
.footer-link-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--slate-400);
    transition: color 0.3s;
}
.footer-link-item:hover { color: #fff; }

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.footer-contact-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--slate-500);
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.footer-contact-text:hover { color: #fff; transition: color 0.3s; }

.footer-bottom {
    max-width: 85rem;
    margin: 4rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(30, 41, 59, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--slate-500);
}
.footer-bottom p { margin: 0; }
@media (min-width: 768px) {
    .footer-bottom { flex-direction: row; }
}
.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}
@media (min-width: 768px) {
    .footer-bottom-links { margin-top: 0; }
}
.footer-bottom-links a { transition: color 0.3s; }
.footer-bottom-links a:hover { color: #fff; }

/* 字体引入 */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

#matrixRippleSection {
  position: relative;
  width: 100%;
  background-color: #f8f9fa;
  overflow: hidden;
  /* 桌面端：三栏卡片，min-height 保证 canvas 至少一屏多一点，内容短时不出现大片空白 */
  min-height: 120vh;
}

/* Canvas 基础样式：充满容器且不响应鼠标事件 */
#matrixBaseCanvas, 
#matrixLitCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#matrixBaseCanvas { z-index: 0; }
#matrixLitCanvas { z-index: 10; }

/* 隐藏用于计算的中间层 */
.hidden { display: none; }

/* ==========================================================================
   CAROUSEL SECTION (New White/Square Style)
   ========================================================================== */
.carousel-section-new {
    background-color: #ffffff; /* 确保是白底 */
    padding: 6rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-container-new {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 4rem; /* 增加间距使布局更“大气” */
    align-items: center;
}

/* 1. 左侧文案区域 */
.carousel-text-content {
    flex: 1.2; /* 文案区域稍微宽一点点 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--slate-500);
    margin-bottom: 2rem;
}

.author-avatar-new {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--slate-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-700);
    font-weight: 600;
}

.carousel-author-name-new {
    color: var(--slate-700);
    font-weight: 500;
}

.meta-separator {
    color: var(--slate-300);
}

.carousel-title-new {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.3;
    color: #000000;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.title-link {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.title-link:hover .carousel-title-new {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.carousel-paragraph-new {
    font-size: 1.15rem; 
    color: var(--slate-600);
    line-height: 1.7;
    margin-bottom: 3.5rem;
}

/* 虚线进度指示器容器 */

/* 2. 右侧矩形图片轮播区域 */
.carousel-image-area {
    flex: 1; /* 图片区域占一半以上空间 */
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* 矩形比例 */
    border-radius: 1.5rem;
}

.image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
}

.image-link:hover {
    opacity: 0.95;
}

.image-track-new {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    height: 100%;
}

.image-slide-new {
    min-width: 100%;
    height: 100%;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================= 3. 核心：粗虚线进度指示器 ================= */
.carousel-progress-dashed {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 3rem;
    position: relative;
    z-index: 3;
}

.dash-item {
    width: 48px;  /* 虚线段的长度 (粗长风格) */
    height: 8px;  /* 虚线段的厚度 */
    background: var(--slate-200); /* 未激活状态的浅灰色 */
    border-radius: 10px; /* 两端圆角 */
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}

.dash-item:hover {
    background: var(--slate-300);
}

/* 激活状态：使用主题蓝 */
.dash-item.active {
    background: var(--primary); 
    box-shadow: 0 0 10px rgba(0, 118, 212, 0.3); /* 增加微光效果 */
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .carousel-container-new {
        flex-direction: column-reverse;
        gap: 2.5rem;
    }
    .carousel-text-content {
        align-items: center;
        text-align: center;
    }
    .carousel-title-new {
        font-size: 1.25rem;
    }
    .carousel-image-area {
        width: 100%;
        max-width: 500px;
    }
}

/* ==========================================================================
   AADE ABOUT SECTION (Glassmorphism & Pillars)
   ========================================================================== */
.aade-glass-box {
    position: relative; /* 必须保留，为了锁定底层伪元素 */
    z-index: 1;         /* 创建层叠上下文 */

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1.5rem; /* 24px */
    padding: 3rem 2rem;
    max-width: 72rem; /* 1152px */
    width: 100%;
    
    /* ========================================= */
    /* 1. 核心大招：内外蓝色主题发光 (Neon Glow)   */
    /* ========================================= */
    
    box-shadow: 
        

        /* --- 内发光 (Inside Glow) --- */
        /* 第四层：内部边缘的柔软蓝光，让盒子内部充满氛围 */
        inset 0 0 60px rgba(0, 123, 255, 0.08),
        /* 第五层：内部角落的微弱提亮 */
        inset 0 0 5px rgba(43, 158, 251, 0.3)
        !important;

    /* ========================================= */
    /* 2. 背景轻微磨砂 (A little blur)           */
    /* ========================================= */
    
    /* 调整背景颜色：给玻璃本身带上一极淡的蓝色调，增加通透感，而不是死白的 rgba(255,255,255,0.095) */
    background: rgba(255, 255, 255, 0.01) !important; 
    
    /* “有一点blur效果”：选用 6px。太高会糊没后面的高亮动画，太低看不出磨砂感。 */
    backdrop-filter: blur(2.5px) !important;
    -webkit-backdrop-filter: blur(2.5px) !important; /* 兼容 Safari */

    /* 边框也换成亮蓝色，配合发光 */
    border: 0px  !important;

    animation: floatContainer 6s ease-in-out infinite;
}


/* 注：原 @media (max-width: 768px) 的 #matrixRippleInner / .aade-glass-box 规则已并入下方
   @media (max-width: 1023px) 的统一断点中（见文件末尾 MATRIX RIPPLE SECTION 小节），
   避免 display:block !important vs display:flex 的冲突。 */

.aade-intro {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--slate-700);
    text-align: left;
    margin-bottom: 3.5rem;
    font-weight: 500;
    max-width: 56rem;
    margin-left: 2rem;
    margin-right: auto;
}

.aade-intro strong {
    color: var(--primary);
    font-weight: 700;
}

.aade-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .aade-pillars { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.aade-pillar-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.aade-pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -5px rgba(0, 118, 212, 0.15);
    border-color: rgba(0, 118, 212, 0.2);
}

/* ==========================================================================
   PILLAR CARDS: 阶梯色与入场动效
   ========================================================================== */

/* 1. 定义简单的自下而上入场动画 */
@keyframes cardFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. 为卡片基础类应用动画，并保持悬浮过渡效果 */
.aade-pillars .aade-pillar-card {
  opacity: 0; /* 初始状态透明，等待动画执行 */
  animation: cardFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 3. 第1张卡片：极浅蓝，最早出场 */
.aade-pillars .aade-pillar-card:nth-child(1) {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  border: 1px solid #e0f0fe;
  animation-delay: 0.1s;
}

/* 4. 第2张卡片：浅蓝，稍晚出场 */
.aade-pillars .aade-pillar-card:nth-child(2) {
  background: linear-gradient(135deg, #fcfeff 0%, #e6f0fc 100%);
  border: 1px solid #bfdbfe;
  animation-delay: 0.25s;
}

/* 5. 第3张卡片：更深一点的浅蓝，最后出场 */
.aade-pillars .aade-pillar-card:nth-child(3) {
  background: linear-gradient(135deg, #ffffff 0%, #f0f5ff 100%);
  border: 1px solid #bfdbfe;
  animation-delay: 0.4s;
}

/* 6. 附加：鼠标悬浮时的一点轻微反馈（让卡片更灵动） */
.aade-pillars .aade-pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px -5px rgba(0, 118, 212, 0.15);
}

/* 巨型背景数字特效 */
.pillar-bg-num {
    position: absolute;
    top: -0.5rem;
    right: 0.5rem;
    font-family: 'Share Tech Mono', monospace; /* 复用你已引入的字体 */
    font-size: 6rem;
    font-weight: 800;
    color: rgba(0, 118, 212, 0.05);
    line-height: 1;
    z-index: 0;
    transition: color 0.4s;
}

.aade-pillar-card:hover .pillar-bg-num {
    color: rgba(0, 118, 212, 0.12); /* hover时数字微亮 */
}

.pillar-icon {
    width: 3rem;
    height: 3rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.aade-pillar-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--slate-900);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.aade-pillar-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate-600);
    position: relative;
    z-index: 1;
    margin: 0;
}



/* ==========================================================================
   AADE STATS ANIMATION
   ========================================================================== */
.stat-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   AADE VISION & ACTION MATRIX CSS
   ========================================================================== */
/* ==========================================================================
   AADE VISION & ACTION MATRIX CSS (行底色阶梯 + 纯白悬浮卡片)
   ========================================================================== */

/* 1. 修改表格设置 */
.matrix-table {
    border-collapse: separate;
    /* 关键：左右设为 0，上下保留 1.5rem */
    border-spacing: 0 1.5rem; 
    background-color: transparent;
    width: 100%;
}

/* 2. 背景色必须作用于 td，否则在某些浏览器下 tr 背景无法撑满 */
.matrix-table tbody tr:nth-child(1) td { background-color: #89CFF0; }
.matrix-table tbody tr:nth-child(2) td { background-color: #6CB4EE; }
.matrix-table tbody tr:nth-child(3) td { background-color: #007FFF; }

/* 3. 通过 padding 模拟之前的 0.5rem 间隙感 */
.matrix-table td {
    padding: 1rem 0.5rem; /* 上下 1rem，左右 0.5rem */
}

/* 如果需要整行两端有圆角，可以加上这个 */
.matrix-table td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.matrix-table td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* 3. 独立卡片式单元格（保持纯白，悬浮在彩色行背景之上） */
.matrix-cell {
    background-color: #ffffffd7 !important; /* 强制卡片为白底 */
    border-top: 4px solid  #a7d0f1 !important; 
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    /* 默认给一个比之前大一点的阴影，让它看起来是“飘”在背景带上的 */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.04); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 统一所有图标的颜色为标准的主题蓝 */
.matrix-cell .icon-wrap {
    color: var(--primary, #0076d4) !important;
    background-color: transparent !important; 
}

/* Hover 状态：卡片进一步上浮，阴影加深带有蓝光 */
.matrix-cell:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -10px rgba(0, 118, 212, 0.18);
    border-right-color: #bae6fd;
    border-bottom-color: #bae6fd;
    border-left-color: #bae6fd;
    z-index: 10;
}

/* 内容折叠与展开动画 - 使用 CSS Grid 过渡高度 */
.content-full {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.content-full-inner {
    overflow: hidden;
    color: #475569; 
    font-size: 0.875rem;
    line-height: 1.5;
}

.matrix-cell:hover .content-full {
    grid-template-rows: 1fr;
}

.matrix-cell:hover .content-full-inner {
    padding-top: 0.75rem;
}

/* N/A 单元格设计 - 斜纹弱化存在感 */
.na-cell {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 8px,
        #f1f5f9 8px,
        #f1f5f9 16px
    ) !important;
    color: #cbd5e1;
    border: 1px solid #f1f5f9 !important;
    border-top: 4px solid #cbd5e1 !important; /* N/A 的上缘用灰色，区别于有内容的卡片 */
    border-radius: 0.75rem;
    cursor: default;
    box-shadow: none;
}
.na-cell:hover {
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   MATRIX RIPPLE SECTION — 小屏幕自适应
   原先 section 被锁死 100vh + 内部嵌套滚动（display:flex 居中 + overflow-y:auto），
   三张卡片纵向堆叠后内容高度远超 100vh，导致卡 02/03 被 overflow:hidden 裁切，
   且嵌套滚动在移动端难以发现。
   现改为：section 高度随内容自然展开，#matrixRippleInner 脱离 absolute 定位参与正常流。
   ========================================================================== */
@media (max-width: 1023px) {
    #matrixRippleSection {
        /* 不再锁死高度；min-height 保证 canvas 至少铺满一屏，内容增长则 section 跟着变高 */
        height: auto !important;
        min-height: 100vh;
    }

    #matrixRippleInner {
        /* 关键：脱离 absolute inset-0（Tailwind 设置的），参与文档流，由内容撑高 */
        position: relative !important;
        inset: auto !important;

        /* 放弃 flex 居中 + 嵌套滚动方案，改为块级自然流 */
        display: block !important;
        overflow: visible !important;

        padding: 5rem 1.5rem 3rem;

        /* 原先为 glass-box 透底的透明底色，保留 */
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* glass-box 在小屏撑满宽度并水平居中（原 flex 居中已失效，改用 margin auto） */
    .aade-glass-box {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* N/A 单元格设计 - 斜纹弱化存在感 */
.na-cell {
    background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 8px,
        #f1f5f9 8px,
        #f1f5f9 16px
    );
    color: #cbd5e1;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
}

/* =========================================
   FROSTED GLOWING BUTTERFLY STYLES
   ========================================= */



/* 2. 蝴蝶核心容器：设为绝对定位，且不阻挡用户鼠标交互 */
.butterfly_container {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100px; 
    height: 100px;
    pointer-events: none; /* 关键：确保不遮挡表格点击 */
    z-index: 50; /* 悬浮在表格之上 */
    
    transform: translate(10%, 10%) scale(0.9); /* 默认缩小至 0.5 倍，更显精致 */

}

.butterfly_container .rotate3d {
    position: absolute;
    left: 0%; top: 50%;
    width: 100px; height: 100px;
    margin-left: -50px; margin-top: -50px;
    transform-style: preserve-3d;
    transform: rotate3d(0, 0, -3, 50deg);
    transition: transform 3s ease; /* 转向时的平滑过渡 */
}

/* 发光效果 */
.butterfly_container figure.butterfly {
    position: absolute;
    left: 50%; top: 50%;
    width: 100px; height: 100px;
    margin-left: -50px; margin-top: -50px;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    filter: drop-shadow(0px 0px 20px rgba(0, 149, 255, 0.895)) 
            drop-shadow(0px 0px 35px rgba(0, 149, 255, 0.574));
    transform-origin: 50px 50px !important;
    animation: pulse-glow 4s infinite alternate;
}

/* 翅膀基础属性 */
.butterfly_container figure.butterfly .wing {
    position: absolute;
    width: 50px; height: 100px;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
}

/* 飞行时：缓慢扇动翅膀 (从 1s 降低到 3s) */
.butterfly_container figure.butterfly .wing.right {
    transform-origin: 50px 50px;
    transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
    animation: right-wing-flap 3s ease-in-out infinite;
}
.butterfly_container figure.butterfly .wing.left {
    transform-origin: 50px 50px;
    animation: left-wing-flap 3s ease-in-out infinite;
}
.butterfly_container figure.butterfly .wing use {
    display: block;
    transform-style: preserve-3d;
}

/* 停留休息时：更慢的扇动 (6秒) */
.butterfly_container.is-resting figure.butterfly .wing.right {
    animation: right-wing-flap 6s ease-in-out infinite;
}
.butterfly_container.is-resting figure.butterfly .wing.left {
    animation: left-wing-flap 6s ease-in-out infinite;
}

/* 动画关键帧定义 */
@keyframes pulse-glow {
    0% { filter: 
        drop-shadow(0px 0px 10px rgba(255, 191, 0, 0.5)) 
        drop-shadow(0px 0px 30px rgba(255, 234, 0, 0.802)); }
    100% { filter: 
        drop-shadow(0px 0px 18px rgba(0, 190, 255, 1)) 
        drop-shadow(0px 0px 40px rgba(0, 150, 255, 0.8)); }
}
/* 左翅膀：幅度大，反应快 */
@keyframes left-wing-flap {
    0%   { transform: translate3d(0, 0, 0) scaleX(1) rotateY(5deg) rotateZ(0deg); }
    40%  { transform: translate3d(0, 0, 0) scaleX(1) rotateY(130deg) rotateZ(-5deg); } /* 提前到达巅峰，带点倾斜 */
    100% { transform: translate3d(0, 0, 0) scaleX(1) rotateY(5deg) rotateZ(0deg); }
}

/* 右翅膀：幅度小，节奏慢，像是有伤或更有重量感 */
@keyframes right-wing-flap {
    0%   { transform: translate3d(0, 0, 0) scaleX(-1) rotateY(0deg) rotateZ(0deg); }
    60%  { transform: translate3d(0, 0, 0) scaleX(-1) rotateY(40deg) rotateZ(3deg); } /* 延迟到达巅峰，角度较小 */
    100% { transform: translate3d(0, 0, 0) scaleX(-1) rotateY(0deg) rotateZ(0deg); }
}


/* ==============================================
   蝴蝶自然飞行轨迹 (波浪颠簸叠加)
   ============================================== */

/* 给新加的包裹层设置大小，并挂载波浪动画 */
.flutter-path {
    width: 100%;
    height: 100%;
    will-change: transform;
    /* 4.5秒一个周期，模拟蝴蝶忽上忽下的漂浮感 */
    animation: erratic-flight 4.5s ease-in-out infinite;
}

/* 当蝴蝶抵达终点，处于休息状态时，关闭剧烈波动，改为微弱的呼吸起伏 */
.butterfly_container.is-resting .flutter-path {
    animation: rest-breathe 6s ease-in-out infinite;
}

/* 👇 关键帧：定义飞行时的空间随机位移和轻微倾斜 */
@keyframes erratic-flight {
    0%   { transform: translate3d(0px, 0px, 0); }
    25%  { transform: translate3d(15px, -35px, 0); } 
    50%  { transform: translate3d(0px, -10px, 0); } 
    75%  { transform: translate3d(-15px, -45px, 0); }
    100% { transform: translate3d(0px, 0px, 0); }
}

/* 👇 关键帧：定义休息停留在表格上时的微小呼吸感 */
@keyframes rest-breathe {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); } /* 仅仅上下浮动 6px */
}

/* ----------------------------------------------
   蝴蝶飞行状态控制辅助
   ---------------------------------------------- */

/* 1. 停歇状态 (is-resting)：取消上下位移颠簸，并让翅膀扇动变慢 */
.is-resting .flutter-path {
    animation: none !important; /* 停留时取消波浪特效 */
}
.is-resting .wing {
    animation-duration: 2.5s !important; /* 停靠时翅膀缓慢扇动 */
}

/* 2. 优雅稳定飞行状态 (flying-stable)：延长波浪颠簸的时间周期，让它飞向首个目标时平缓柔和 */
.flying-stable .flutter-path {
    animation-duration: 7s !important; 
    animation-timing-function: ease-in-out;
}


/* ==========================================================================
   CONTENT SECTION (靠左对齐，Oswald 细体，三种专业边框选择)
   ========================================================================== */
.content-section-light {
    padding: 4rem 1.5rem;
    background-color: #ffffff;
}

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

/* 全局靠左对齐 */
.section-header-light {
    text-align: left;
    margin-bottom: 4rem;
    max-width: 800px;
}

/* 全局细字体 Oswald */
.section-title-light-oswald {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 300; 
    color: #0c1a30;
    margin: 0;
    letter-spacing: -0.01em;
}

.section-subtitle-light-inter {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    line-height: 1.5;
    
    /* 1. 背景颜色：淡淡的蓝灰色 */
    background-color: #ebf3fbc6; 
    
    /* 2. 文字颜色：深蓝灰色，确保在浅色背景上的可读性 */
    color: #47576c92; 
    
    /* 3. 内边距：控制文字与背景边缘的距离 (上下 0.5rem, 左右 1rem) */
    padding: 0.5rem 1rem;
    
    /* 4. 布局调整：
       默认的 <span> 或文本标签是 inline，背景和边距会显示不全。
       使用 inline-block 可以让边距生效，同时不占据整行宽度。
       如果你想让它占据整行，请改为 block。*/
    display: inline-block;
    
    /* 5. 圆角：让背景看起来更现代、柔和 */
    border-radius: 6px;
    
    /* 6. 外边距：保持你原有的顶部边距 */
    margin: 0.25rem 0 0 0;
}

/* --- 强化标题方案 A：style-edge-border (现代侧边栏边框) --- */
.style-edge-border {
    position: relative;
    padding-left: 1.75rem; 
    border-left: 4px solid #0076d4; /* 纯蓝边线 */
}

.style-edge-border .header-main-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-icon-light-small {
    width: 2.5rem; height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 118, 212, 0.08);
    border-radius: 0.5rem;
    color: #0076d4;
}
.section-icon-light-small svg { width: 1.5rem; height: 1.5rem; }


/* --- 强化标题方案 B：style-minimal-line (精致极简装饰线) --- */
.style-minimal-line {
    border-bottom: 1px solid rgba(57, 58, 58, 0.35);
    padding-bottom: 2rem;
    position: relative;
}

.style-minimal-line::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 80px; height: 3px;
    background-color: #0076d4;
}

.style-minimal-line .header-main-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 占位框样式 */
.placeholder-box-light {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 1.5rem;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .content-section-light { padding: 4rem 1.5rem; }
    .section-title-light-oswald { font-size: 2.25rem; }
    .section-header-light { margin-bottom: 3rem; }
    .style-edge-border { padding-left: 1.25rem; }
}





/* ==========================================================================
   GRAPHIC PURE BLUE HERO (纯蓝大色块图形内页，强化平滑动效)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Inter:wght@400;500;600&family=Oswald:wght@300;400;600&display=swap');


.inner-hero-graphic-blue {
    position: relative;
    /* 增加 padding-bottom，建议从 8rem 增加到 18rem 或更高 */
    padding: 12rem 1.5rem 18rem; 
    background-color: #f8fbfd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 科技感网格背景 (非常克制的透明度) */
.hero-bg-grid-blue {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(to right, rgba(192, 192, 192, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(192, 192, 192, 0.2) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    mask-image: radial-gradient(circle at center, black 50%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 90%);
}

.inner-hero-container {
    position: relative;
    z-index: 10;
    max-width: 860px;
    margin: 0 auto;
}

/* --- 大色块 Graphic 动效 (生命周期版) --- */

/* 容器不再需要淡入，因为色块本身会自己淡入淡出 */
#hero-shapes-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
}

.graphic-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); /* 大范围柔和边缘 */
    mix-blend-mode: multiply; /* 色彩交融更自然 */
    z-index: 1;
    opacity: 0.5; 
    
    /* 核心动效：一次性播放，完成后由 JS 负责销毁 */
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

/* 定义色块的一生：从小变大，从透明到半透明再消散 */
@keyframes shapeLifecycle {
    0% { 
        transform: scale(0.5) translate(0, 0); 
        opacity: 0; 
    }
    40% { 
        /* 达到峰值状态：保持半透明，不要太亮 */
        opacity: 0.3; 
    }
    100% { 
        /* 继续放大，同时伴随轻微漂浮位移，最后彻底透明消失 */
        transform: scale(0.8) translate(50px, -30px); 
        opacity: 0; 
    }
}

/* --- 文字与 Badge 样式 (极细 Oswald) --- */
.inner-hero-title-fine {
    font-family: 'Oswald', sans-serif;
    font-size: 4rem;
    font-weight: 300; /* 细字体 */
    color: #0c1a30; 
    line-height: 1.15;
    margin: 0 0 1.5rem 0;
    letter-spacing: 0em;
   
}

.text-blue-light {
    color: #0076d4;
    font-weight: 400; 
}
.text-blue-dark {
    color: #003cd4cb;
    font-weight: 400; 
}
.inner-hero-subtitle-fine {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .inner-hero-graphic-blue { padding: 9rem 1.5rem 5rem; }
    .inner-hero-title-fine { font-size: 2.75rem; }
    .inner-hero-subtitle-fine { font-size: 1.125rem; }
}

/* ==========================================================================
   CONCENTRIC FROSTED GLASS DOME (向上隆起的同心毛玻璃穹顶)
   ========================================================================== */
/* ==========================================================================
   修正后的：绝对底对齐穹顶
   ========================================================================== */
.concentric-dome-wrapper {
    position: absolute; 
     
    bottom: -100px;     
    left: 50%;          
    transform: translateX(-50%); 
    
    /* 缩小宽度到 800px（高度即变为 400px），既大气又不会上探太深 */
    width: 100%;
    max-width: 800px;   
    aspect-ratio: 2 / 1;
    
    margin: 0; 
    /* 关键：z-index 设为 1，确保文字（默认或手动设为 10）在它上面 */
    z-index: 1; 
    overflow: visible;
    /* 增加一个极其微弱的透明度，让底部的网格隐约可见，减轻视觉压迫感 */
    opacity: 0.95; 
}

@media (max-width: 768px) {
    .concentric-dome-wrapper {
        /* 在小屏幕上显著缩小圆的最大宽度 */
        /* 圆变小了，高度（半径）也就变短了，自然就不会撞到文字 */
        max-width: 480px; 
        /* 稍微埋深一点，只露个头 */
        bottom: -30px; 
    }
    
    .inner-hero-graphic-blue {
        /* 移动端文字通常会换行变长，稍微撑开一点底部空间 */
        padding-bottom: 14rem; 
    }
}

/* 内部圆层逻辑不变，只需要确保 transform 不被动画冲突 */
.dome-layer {
    position: absolute;
    left: 50%;
    bottom: 0;
    /* 这里的 translate(-50%, 50%) 是为了让圆心卡在 wrapper 的底边上 */
    transform: translate(-50%, 50%); 
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* 这里的动画如果不指定，可能会覆盖上面的 transform */
    animation: domeRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 动画终点必须包含 translate(-50%, 50%)，否则圆会飞走 */
@keyframes domeRise {
    0% { transform: translate(-50%, 70%) scale(0.9); opacity: 0; }
    100% { transform: translate(-50%, 50%) scale(1); opacity: 1; }
}

/* 策略：
   - dome-layer-1 是最外层（最大），z-index 最小，透明度最高
   - dome-layer-5 是最内层（最小），z-index 最大，完全不透明
*/

/* 第1层：最外圈（最淡） */
.dome-layer-1 { 
    width: 90%; 
    background: rgba(5, 127, 240, 0.10); /* 极低透明度 */
    z-index: 1; 
    animation-delay: 0.1s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 第2层 */
.dome-layer-2 { 
    width: 85%;  
    background: rgba(5, 127, 240, 0.15); 
    z-index: 2; 
    animation-delay: 0.15s; 
}

/* 第3层：中间过渡 */
.dome-layer-3 { 
    width: 80%;  
    background: rgba(5, 127, 240, 0.20); 
    z-index: 3; 
    animation-delay: 0.2s; 
    box-shadow: 0 -5px 10px rgba(5, 127, 240, 0.4); /* 给中心加一点发光感 */
}

/* 第4层：接近实色 */
.dome-layer-4 { 
    width: 75%;
    background: rgba(5, 127, 240, 0.225);
    z-index: 4; 
    animation-delay: 0.25s; 
    box-shadow: 0 -5px 10px rgba(5, 127, 240, 0.4); /* 给中心加一点发光感 */
}



/* 第5层：中心最深（实色） */
.dome-layer-5 { 
    width: 69%;  
    background: rgba(5, 127, 240, 0.65); 
    z-index: 5; 
    animation-delay: 0.35s;
    box-shadow: 0 -5px 40px rgba(209, 230, 250, 0.2); /* 给中心加一点发光感 */
    
}



/* ==============================================
   VISION POP-OUT ANIMATION
   ============================================== */
/* ==============================================
   ACTION MATRIX: 滚动触发 & 宽度限制
   ============================================== */

.vision-pop-sentence {
    /* 1. 限制宽度为屏幕或容器的 2/3 */
    max-width: 78%; 
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.35rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 1.5;
    color:var(--slate-700);
    margin-top: 1.5rem;
}

/* 默认状态：静止且透明 */
.pop-word {
    opacity: 0;
    transform: translateY(12px);
    transition: none; /* 确保由 animation 控制 */
}

/* 2. 关键：只有当父元素有了 .is-visible 类，动画才生效 */
.vision-pop-sentence.is-visible .pop-word {
    animation: popWordUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 延迟逻辑保持不变，但只有在 .is-visible 激活后才计时 */
.vision-pop-sentence.is-visible .pop-word:nth-child(1)  { animation-delay: 0.06s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(2)  { animation-delay: 0.12s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(3)  { animation-delay: 0.18s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(4)  { animation-delay: 0.24s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(5)  { animation-delay: 0.30s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(6)  { animation-delay: 0.36s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(7)  { animation-delay: 0.42s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(8)  { animation-delay: 0.48s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(9)  { animation-delay: 0.54s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(10) { animation-delay: 0.60s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(11) { animation-delay: 0.66s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(12) { animation-delay: 0.72s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(13) { animation-delay: 0.78s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(14) { animation-delay: 0.84s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(15) { animation-delay: 0.90s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(16) { animation-delay: 0.96s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(17) { animation-delay: 1.02s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(18) { animation-delay: 1.08s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(19) { animation-delay: 1.14s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(20) { animation-delay: 1.20s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(21) { animation-delay: 1.26s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(22) { animation-delay: 1.32s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(23) { animation-delay: 1.38s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(24) { animation-delay: 1.44s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(25) { animation-delay: 1.50s; }
.vision-pop-sentence.is-visible .pop-word:nth-child(26) { animation-delay: 1.56s; }

/* 移动端宽度还原至 100% 以防排版太窄 */
@media (max-width: 1024px) {
    .vision-pop-sentence { max-width: 100%; }
}
@keyframes popWordUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   INNER SHORT HERO SECTION (Global Lab)
   ========================================================================== */
.hero-inner-short {
    position: relative;
    width: 100%;
    /* 控制高度：比全屏短，显得更紧凑专业 */
    height: 40vh !important; 
    min-height: 300px;
    max-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--bg-body, #020612);
    /* 顶部留出空间避免被悬浮的 header 挡住 */
    padding-top: 4rem; 
}
.hero-inner-semi-short {
    position: relative;
    width: 100%;
    /* 控制高度：比全屏短，显得更紧凑专业 */
    height: 60vh; 
    min-height: 450px;
    max-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--bg-body, #020612);
    /* 顶部留出空间避免被悬浮的 header 挡住 */
    padding-top: 4rem; 
}

.hero-inner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-inner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 图片视觉重心偏左（玻璃条纹），居中偏右对齐能展示更多波浪纹理 */
    object-position: center right; 
}

/* 渐变遮罩：左侧深色保证白字清晰，右侧透明展示图片 */
.hero-inner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(2, 6, 18, 0.85) 0%, rgba(2, 6, 18, 0.6) 45%, rgba(2, 6, 18, 0) 100%);
    z-index: 1;
}
.hero-inner-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(196, 210, 251, 0.35) 0%, rgba(196, 210, 251, 0.2) 45%, rgba(196, 210, 251, 0.1) 100%);
    z-index: 1;
}
.hero-inner-overlay-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(2, 6, 18, 0.25) 0%, rgba(2, 6, 18, 0.1) 45%, rgba(2, 6, 18, 0) 100%);
    z-index: 1;
}

.hero-inner-content {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 80rem; /* 同 header max-w-7xl */
    margin: 0 auto;
    padding: 0 1.5rem 0 3rem;
}

.hero-inner-text {
    max-width: 600px;
    /* 进场轻微上浮淡入动画 */
    animation: fadeUpInner 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-inner-text-event {
    max-width: 650px; /* 稍微加宽一点，因为增加了内边距 */
    animation: fadeUpInner 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    
    /* =========================================
       新增：白色磨砂玻璃效果 (Glassmorphism)
       ========================================= */
    background: rgba(255, 255, 255, 0.06); /* 半透明泛白底色，保证白字依然清晰 */
    backdrop-filter: blur(2px);           /* 核心：磨砂模糊效果 */
    -webkit-backdrop-filter: blur(2px);   /* 兼容 Safari */
    
    border-radius: 1.5rem;                 /* 柔和的大圆角 */
    padding: 2.5rem 3rem;                  /* 内部四周留白，让文字不贴边 */
    
    
}

/* 移动端适配：小屏幕下稍微缩小一点内边距 */
@media (max-width: 768px) {
    .hero-inner-text-event {
        padding: 2rem 1.5rem;
        border-radius: 1.25rem;
    }
}
/* 科技感小标签 */
.hero-badge-white {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
    color: #60a5fa; 
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(96, 165, 250, 0.3);
    padding: 0.35rem 0.875rem;
    border-radius: 9999px;
    background: rgba(96, 165, 250, 0.1);
    backdrop-filter: blur(4px);
}
/* 科技感小标签 */
.hero-badge-white-event {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
    color: rgba(209, 225, 249, 0.6); 
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(209, 225, 249, 0.401);
    padding: 0.35rem 0.875rem;
    border-radius: 9999px;
    background: rgba(25, 125, 255, 0.052);
    backdrop-filter: blur(4px);
}

/* 白色主标题 */
.hero-title-white {
    font-family: 'Oswald', sans-serif;
    font-size: 3.2rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 1.25rem 0;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 白色主标题 */
.hero-title-dark {
    font-family: 'Oswald', sans-serif;
    font-size: 3.2rem;
    font-weight: 600;
    color: var(--bg-footer);
    line-height: 1.1;
    margin: 0 0 1.25rem 0;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 20px rgba(38, 121, 203, 0.425);
}
/* 描述文字 */
.hero-desc-white {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: var(--slate-300, #cbd5e1dd);
    line-height: 1.6;
    margin: 0;
}
/* 描述文字 */
.hero-desc-dark {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: var(--slate-700);
    line-height: 1.6;
    margin: 0;
}
@keyframes fadeUpInner {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero-inner-short { 
        height: auto; 
        min-height: 400px; 
        padding: 8rem 0 4rem; 
    }
    .hero-inner-semi-short { 
        height: auto; 
        min-height: 500px; 
        padding: 8rem 0 4rem; 
    }
    .hero-inner-overlay {
        /* 移动端改为上下渐变，因为文字会覆盖全宽 */
        background: linear-gradient(0deg, rgba(2, 6, 18, 0.95) 0%, rgba(2, 6, 18, 0.6) 70%, rgba(2, 6, 18, 0.2) 100%);
    }
    .hero-title-white { 
        font-size: 2.5rem; 
    }
    .hero-desc-white { 
        font-size: 1rem; 
    }
}

/* ==========================================================================
   GLOBAL MAP & NODES SECTION
   ========================================================================== */

/* Map Section */
.map-section-light {
    padding: 4rem 1.5rem 2rem;
    background-color: #ffffff;
}

.map-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease-out forwards;
}

.world-map-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0.85; /* Soften the map slightly */
}

/* Nodes Section */
.nodes-section-light {
    padding: 2rem 1.5rem 6rem;
    background-color: #ffffff;
}

.nodes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .nodes-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .nodes-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
    
    /* 针对横跨两列的 HQ 卡片进行完美的左右分割 */
    .hq-card { 
        grid-column: span 2; 
        flex-direction: row !important; /* 强制水平排列：左图右文 */
    }
    
    .hq-card .node-img-wrapper { 
        width: 50%; 
        height: auto; /* 解除默认的 200px 高度限制 */
        min-height: 100%; /* 让图片区域与右侧文字等高 */
    }
    
    .hq-card .node-content { 
        width: 50%; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; /* 让文字在垂直方向居中 */
        padding: 3rem 2.5rem; /* 增加内边距，让文字排版更有呼吸感 */
    }
}

/* Node Cards */
.node-card {
    background: #ffffff;
    border: 1px solid var(--slate-200);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.node-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(0, 118, 212, 0.15);
    border-color: rgba(0, 118, 212, 0.3);
}

.node-img-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--slate-100);
}

.node-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.node-card:hover .node-img {
    transform: scale(1.05);
}

.node-content {
    padding: 1.5rem;
    flex-grow: 1;
}

.node-city {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--slate-800);
    margin: 0 0 1rem 0;
}

.node-detail {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate-600);
    margin-bottom: 0.75rem;
}

.node-detail strong {
    color: var(--slate-800);
}

.node-detail:last-child {
    margin-bottom: 0;
}

/* Icons for Correspondences */
.contact-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-info svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--primary);
    flex-shrink: 0;
}

.contact-info a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Badges */
.node-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.badge-hq { background: rgba(0, 118, 212, 0.9); color: #fff; }
.badge-office { background: rgba(15, 23, 42, 0.8); color: #fff; }
.badge-lab { background: rgba(2, 92, 47, 0.9); color: #fff; } /* Emerald */
.badge-contact { background: var(--primary); color: #fff; } /* Amber */



/* ==========================================================================
   PARTNERSHIPS GRAPHIC LAYOUT (Editorial Overlapping Style)
   ========================================================================== */

.partnerships-master-section {
    background-color: #f8fafc;
    padding: 6rem 1.5rem 8rem;
    position: relative;
    overflow: hidden;
}

.partners-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8rem; /* 分类之间的巨大间距，增强留白设计感 */
}

/* --- Category Header (带巨型镂空数字) --- */
.partner-category-block {
    position: relative;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

.category-header-graphic {
    position: relative;
    margin-bottom: 5rem;
    padding-left: 1rem;
}

.category-bg-num {
    position: absolute;
    top: -3.5rem;
    left: -1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(91, 131, 170, 0.3); /* 镂空数字描边 */
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

.category-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--slate-900);
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 700px;
    line-height: 1.2;
}

/* --- Graphic Editorial Layout (图文交错重叠) --- */
.partner-row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 2rem;
}

/* 翻转排版：右图左文 */
.partner-row.reverse {
    flex-direction: row-reverse;
}

/* 1. Logo 图形舱 (占45%宽度) */
.partner-visual {
    width: 45%;
    height: 380px;
    background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
    border-radius: 2rem 0 2rem 0; /* 不对称切割图形感 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 118, 212, 0.15);
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.8);
    z-index: 1;
    overflow: hidden;
}

.partner-visual.visual-alt {
    border-radius: 0 2rem 0 2rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);
    border-color: rgba(148, 163, 184, 0.2);
}

/* 几何底纹装饰 */
.graphic-pattern-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(to right, rgba(0, 118, 212, 0.15) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 118, 212, 0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
}
.pattern-dots {
    background-image: radial-gradient(rgba(0, 118, 212, 0.15) 2px, transparent 2px);
    background-size: 20px 20px;
}
.pattern-grid {
    background-image: repeating-linear-gradient(45deg, rgba(0, 118, 212, 0.13) 0, rgba(0, 118, 212, 0.13) 2px, transparent 2px, transparent 10px);
}

/* Logo 容器 */
.logo-placeholder {
    position: relative;
    z-index: 2;
    width: 60%;
    height: 60%;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    transition: transform 0.4s ease;
}

.partner-visual:hover .logo-placeholder {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 25px 50px -10px rgba(0, 118, 212, 0.2);
}

.logo-placeholder img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-fallback-text {
    display: none;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--slate-400);
    text-align: center;
}

/* 2. 文字内容框 (占60%宽度，产生负边距重叠) */
.partner-content {
    width: 60%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 1.5rem;
    padding: 3.5rem 3rem;
    margin-left: -5%; /* 强行向左重叠 */
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.05);
    z-index: 2;
    position: relative;
}

.partner-row.reverse .partner-content {
    margin-left: 0;
    margin-right: -5%; /* 反向排版时强行向右重叠 */
}

/* 文字细节 */
.partner-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.partner-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--slate-800);
    margin: 0 0 1.5rem 0;
}

.partner-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--slate-600);
    margin: 0;
}

/* 数据高亮块 (Milestone / Impact) */
.partner-highlight-box {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--slate-50);
    border-left: 4px solid var(--primary);
    border-radius: 0 0.75rem 0.75rem 0;
}

.highlight-label {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    background: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.partner-highlight-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--slate-700);
    margin: 0;
}
.partner-highlight-box p strong {
    color: var(--primary);
}

/* --- 响应式调整 (Mobile & Tablet) --- */
@media (max-width: 1024px) {
    .category-title { font-size: 2rem; }
    .category-bg-num { font-size: 6rem; top: -2.5rem; }
    
    .partner-row, .partner-row.reverse {
        flex-direction: column;
        margin-bottom: 4rem;
    }
    
    .partner-visual {
        width: 100%;
        height: 300px;
        border-radius: 1.5rem; /* 移动端恢复常规圆角 */
    }
    
    .partner-content {
        width: 95%;
        margin-left: 0;
        margin-right: 0;
        margin-top: -3rem; /* 垂直方向产生重叠 */
        padding: 2rem 1.5rem;
    }
    
    .partner-row.reverse .partner-content {
        margin-right: 0;
    }
}


/* ================= NEWS CONTENT SECTION ================= */
/* ================= NEWS CONTENT SECTION ================= */
/* 新增：负责铺满全屏宽度的白底 */
.news-main-section {
    width: 100%;
    background-color: #ffffff; /* 白底铺满全屏 */
}

/* 负责限制宽度和居中 */
.news-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 15px; 
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.news-content-grid {
    display: grid;
    grid-template-columns: 7fr 3fr; 
    gap: 30px; 
}
.news-hero-date {
    display: block;         /* 确保日期独占一行 */
    font-family: 'Inter', sans-serif;
    font-size: 1rem;        /* 适中的小字号 */
    color: #969696;         /* 深灰色，比纯黑更柔和，不刺眼 */
    font-weight: 500;       /* 标准字重 */
    margin-top: 0;       /* 与上方标题的间隙 */
    margin-bottom: 20px !important; 

}

.news-article-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000; 
    margin: 60px 0 10px 0;
    line-height: 1.3;
}

.news-article-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #181818b9; 
    margin: 0 0 20px 0;
}

.news-article-image-wrapper {
    margin: 30px 0;
    
}

.news-article-image {
    width: 75%;
    height: auto;
    border-radius: 12px; 
    display: block;     /* 必须是 block 或 table */
    margin: 0 auto;    /* 核心代码：上下为0，左右自动平分剩余空间 */
}

.news-article-caption {
    font-size: 0.875rem;
    color: #000000; 
    text-align: center;
    
    margin-top: 10px;
    max-width: 500px;
    /* --- 核心修复代码 --- */
    margin-left: auto;  /* 自动平分左侧剩余空间 */
    margin-right: auto; /* 自动平分右侧剩余空间 */
    margin-bottom: 20px; /* 与下方正文的间距 */
}


@media (max-width: 768px) {
    .news-content-grid {
        grid-template-columns: 1fr; 
    }
    .news-article-title {
        font-size: 1.5rem;
    }
    .news-article-text {
        font-size: 1rem;
    }
}


/* 容器基础设置 */
.news-hero {
    position: relative;
    width: 100%;
    height: 400px; /* 可根据需要调整高度 */
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* 将标题置于底部 */
    z-index: 1;
}

/* 背景图容器 */
.news-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.news-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 核心：白色渐变遮罩 */
.news-hero-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 底部纯白，向上到50%处完全透明，上半部分保持透明 */
    background: linear-gradient(
        to top, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 0.9) 20%, 
        rgba(255, 255, 255, 0) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    z-index: 2;
}

.news-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    /* 关键：设置最大宽度，使其与你的网页主内容区域（或导航栏）对齐 */
    max-width: 1250px; 
    margin: 0 auto;    /* 容器居中 */
    
    /* 修改这里：第一个参数改为上方间距，例如 50px */
    padding: 50px 15px 50px;
    box-sizing: border-box;
    text-align: left;  /* 文字依然靠左 */
}

/* 主标题样式：黑字、细体、Oswald */
.news-hero-title {
    font-family: 'Oswald', sans-serif;
    color: #000000;
    font-size: 2.75rem;
    font-weight: 200;
    margin: 20px 100px 0 0;
    
    line-height: 1.2;
    
    /* 👇 新增：半透明白底相关的设置 */
    display: inline-block; /* 关键：让背景只包裹文字本身的宽度 */
    background-color: rgba(255, 255, 255, 0.4); /* 几乎透明的白底，0.6是透明度，可自行修改 0.1~0.9 */
    padding: 10px 20px; /* 给文字周围留出呼吸空间（上下10px，左右20px） */
    border-radius: 14px; /* 可选：加上微微的圆角，看起来更柔和现代 */
    
    /* 💡 进阶推荐：毛玻璃效果（可选） */
    /* 如果你想让白底更透明，但又想看清文字，可以加上下面这行，它会模糊背景图 */
    backdrop-filter: blur(2.5px); 
    -webkit-backdrop-filter: blur(2.5px); /* 兼容 Safari */
}
.news-hero-subtitle {
    font-family: 'Oswald', sans-serif;
    color: #0032a8;
    font-size: 1.35rem;
    font-weight: 200;
    margin: 0 0 5px 0;
    line-height: 1.5;
    /* 👇 新增：半透明白底相关的设置 */
    display: inline-block; /* 关键：让背景只包裹文字本身的宽度 */
    background-color: rgba(220, 235, 251, 0.399); /* 几乎透明的白底，0.6是透明度，可自行修改 0.1~0.9 */
    padding: 10px 20px; /* 给文字周围留出呼吸空间（上下10px，左右20px） */
    border-radius: 30px; /* 可选：加上微微的圆角，看起来更柔和现代 */
    
    /* 💡 进阶推荐：毛玻璃效果（可选） */
    /* 如果你想让白底更透明，但又想看清文字，可以加上下面这行，它会模糊背景图 */
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); /* 兼容 Safari */
}

/* ================= RELATED LINKS SECTION ================= */
.related-links-container {
  margin-top: 3rem;              /* 与正文内容保持一定距离 */
  padding: 1.5rem 1.5rem;        /* 内部留白 */
  background-color: #f8fafc;     /* 非常柔和的淡灰蓝色底色 */
  border-top: 1px solid #cbd5e1; /* 顶部的灰色细横线 */
  border-radius: 0 0 8px 8px;    /* 底部可选微小圆角，让边缘更柔和 */
}

.related-links-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;           /* 较小的字号 */
  font-weight: 600;
  text-transform: uppercase;     /* 全大写增加风格感 */
  letter-spacing: 0.08em;        /* 增加字间距 */
  color: #64748b;                /* 低调的板岩灰色 */
  margin-bottom: 1rem;
  margin-top: 0;
}

.related-links-list {
  list-style: none;              /* 移除默认小圆点 */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;                 /* 链接之间的间距 */
}

.related-links-list li a {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #334155;                /* 默认深灰色文本，不刺眼 */
  text-decoration: none;
  word-break: break-word;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  border-bottom: 1px dashed #cbd5e1; /* 使用浅色虚线代替生硬的实线下划线 */
  padding-bottom: 2px;
}

.related-links-list li a:hover {
  color: #2563eb;                /* 鼠标悬停时变回主题蓝 */
  border-bottom-color: #2563eb;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .news-hero-title {
        font-size: 2.25rem;
    }
    .news-hero {
        height: 400px;
    }
}

/* ==========================================================================
   TRANSITION FEATURE BAR (Universal for 2 & 3 Columns)
   ========================================================================== */
.matrix-transition-section {
    background-color: #ffffff;
    padding: 2rem 1rem; 
    display: flex;
    justify-content: center;
}

/* 默认 3 格的容器宽度和网格 */
.matrix-transition-container {
    width: 100%;
    max-width: 1300px; 
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
}

/* 👇 新增：专门给 2 格使用的附加控制类 */
.matrix-transition-container.grid-2-cols {
    max-width: 1250px; /* 两格时收窄容器，防止离得太远 */
    grid-template-columns: repeat(2, 1fr); /* 强制均分两列 */
}

/* 内部块的通用样式 */
.transition-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 2rem; 
    position: relative;
}

/* 智能分割线：只要不是最后一个，右侧就有线。2格和3格完美通用！ */
.transition-block:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: rgba(226, 232, 240, 0.6);
}

.transition-icon {
    color: #64748b;
    opacity: 0.3; 
    margin-bottom: 0.8rem;
}

.transition-icon svg {
    width: 1.8rem; 
    height: 1.8rem;
}

.transition-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem; 
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.01em;
    max-width: 280px; 
}

.transition-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem; 
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
    max-width: 350px;
}

/* ================= 动效核心代码 ================= */
.transition-pop-block {
    opacity: 0; 
    transform: translateY(20px) scale(0.95);
}

.transition-pop-block.is-visible {
    animation: pop-up-matrix 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pop-up-matrix {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================= 移动端响应式 ================= */
@media (max-width: 768px) {
    .matrix-transition-section { padding: 3rem 1.5rem; }
    
    /* 无论是2格还是3格，移动端都统一变成单列堆叠 */
    .matrix-transition-container,
    .matrix-transition-container.grid-2-cols { 
        grid-template-columns: 1fr; 
        gap: 2.5rem; 
    }
    
    .transition-block::after { display: none; }
    .transition-title { font-size: 1.15rem; }
}
/* ==========================================================================
   PLE DEAI CARD STYLES (高级背景图卡片设计)
   ========================================================================== */
.ple-deai-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem; 
  padding: 2.5rem; 
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px -5px rgba(0, 118, 212, 0.2);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 100%;
}

.ple-deai-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0, 118, 212, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 底层：背景图片及其悬浮放大动效 */
.ple-deai-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('aade-deai-card.jpg'); /* 引入你的图片 */
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ple-deai-card:hover::before {
  transform: scale(1.08); /* 悬浮时图片微动，非常高级 */
}

/* 中层：暗色渐变遮罩，确保文字绝对清晰 */
.ple-deai-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 从深邃深蓝渐变到主题蓝，保留约20-35%的图片透视感 */
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(0, 118, 212, 0.6) 100%);
  z-index: 1;
}

/* 顶层水印 Icon */
.ple-deai-watermark {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  color: #ffffff;
  opacity: 0.04;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.ple-deai-card:hover .ple-deai-watermark {
  opacity: 0.08;
  transform: scale(1.05) rotate(5deg);
}

/* 顶层文字与内容布局 */
.ple-deai-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 图标容器：采用现代毛玻璃设计 */
.ple-deai-icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}

.ple-deai-card:hover .ple-deai-icon-wrap {
  transform: scale(1.15) rotate(-5deg);
  background: rgba(255, 255, 255, 0.2);
}

/* 文字排版优化 */
.ple-deai-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.875rem; 
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em; 
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ple-deai-subtitle {
  font-size: 0.75rem; 
  color: #93c5fd; /* 浅蓝色点缀 */
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.9;
}

.ple-deai-desc {
  color: rgba(255, 255, 255, 0.85); /* 提升可读性 */
  line-height: 1.625;
  margin-bottom: 2rem;
  flex-grow: 1;
  font-size: 1.05rem;
}

/* 行动按钮 */
.ple-deai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  color: #0076d4;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: max-content;
  text-decoration: none;
}

.ple-deai-btn svg {
  transition: transform 0.3s ease;
}

.ple-deai-btn:hover {
  background: #f0f9ff;
  color: #005bb5;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.ple-deai-btn:hover svg {
  transform: translateX(4px);
}


  /* 基础标签样式 */
  .ple-label-card {
    display: inline-block;
    padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
    font-size: 0.625rem; /* text-[10px] */
    font-weight: 700;
    border-radius: 9999px; /* rounded-full */
    border-width: 1px;
    border-style: solid;
  }
  
  /* Digital Inclusion: 绿色系 */
  .ple-label-inclusion {
    background-color: #ecfdf5; 
    border-color: #a7e5f3;
    color: #057296;
  }
  
  /* Digital Connectivity: 蓝色系 */
  .ple-label-connectivity {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
  }
  
  /* Pioneer RegTech: 紫色系 */
  .ple-label-regtech {
    background-color: #f5f7ff;
    border-color: #d5d8ff;
    color: #333cea;
  }
/* ════════════════════════════════════════════════════════════
   ACADEMIC RESEARCH CARDS (2-col, Square, Serif, Editorial)
════════════════════════════════════════════════════════════ */

/* 网格：两列布局，大间距留白 */
.acad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 3.5rem; /* 行距和列距 */
  align-items: start;
}

@media (max-width: 768px) {
  .acad-grid {
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 3.5rem 0;
  }
}

/* 基础卡片容器 */
.acad-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 正方形卡片封面 */
.acad-fig {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #e2e8f0;
  position: relative;
  /* 移除明显的圆角，使用微小的 2px 圆角让边缘不至于太锐利，保留学术感 */
  border-radius: 4px; 
}

.acad-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
  filter: contrast(1.05) brightness(0.95); /* 稍微增加对比度，略微压暗，显得更庄重 */
}

/* 悬停效果：缓慢放大，恢复正常亮度 */
.acad-card:hover .acad-img {
  transform: scale(1.04);
  filter: contrast(1) brightness(1);
}

/* 内容区 */
.acad-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 标签：去底色，用纯文字和宽字距展现克制感 */
.acad-tag {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0076d4;
  text-decoration: none;
  margin-bottom: 0.75rem;
}

/* 衬线字体标题 */
.acad-title {
  font-family: 'Lora', 'Merriweather', Georgia, serif;
  font-size: 1.4rem; /* 字体放大 */
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45;
  margin: 0 0 1.25rem 0;
}

.acad-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.acad-card:hover .acad-title a {
  color: #0076d4;
}

/* 作者与日期：一条细线分隔，文字极简排版 */
.acad-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #64748b;
  margin-top: auto; /* 将 meta 自动推至底部 */
  border-top: 1px solid rgba(203, 213, 225, 0.6); /* 淡淡的顶部分隔线 */
  padding-top: 1rem;
}

.acad-author {
  font-weight: 500;
  color: #334155;
}

.acad-sep {
  color: #cbd5e1;
  font-size: 0.7rem;
}

.acad-date {
  color: #94a3b8;
}

/* 移动端字体微调 */
@media (max-width: 640px) {
  .acad-title {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   RESEARCH ARTICLE (research-XXXX.html) 专属样式
   ========================================================================== */

/* 布局系统 (原生 Flexbox 替代 Bootstrap) 
   将原本的 :root 变量直接注入到顶级容器，实现绝对的局部作用域 */
.reas-container {
  --reas-font-palatino: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --reas-color-text: #222;
  --reas-color-muted: #979dac;
  --reas-color-primary: #0A97D9;

  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.reas-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.reas-col-toc {
  display: none; /* 移动端默认隐藏目录 */
}

.reas-col-content {
  width: 100%;
}

@media (min-width: 992px) {
  .reas-row {
    flex-direction: row;
    align-items: flex-start;
  }
  .reas-col-toc {
    display: block;
    width: 25%;
    position: sticky;
    top: 6rem;
    padding-right: 1rem;
  }
  .reas-col-content {
    width: 75%;
    padding: 0 3rem;
  }
}

@media (min-width: 1200px) {
  .reas-col-content { padding: 0 4.5rem; }
}
/* ==========================================================================
   REAS HERO SECTION (Short Banner with "Deep Dive" Animation)
   ========================================================================== */

/* 1. 修复横幅被导航栏遮挡：增加 padding-top 为导航留出空间 */
.reas-hero-section {
  position: relative;
  width: 100%;
  
  /* 【修改1：增高 Hero】适当增加高度和最大/最小限制 */
  height: 40vh; 
  min-height: 300px;
  max-height: 450px;
  
  display: flex;
  align-items: center;
  justify-content: center; /* 保持居中是为了让内部的 content 容器居中 */
  overflow: hidden;
  background-color: #020612; 
  
  /* 新增：为顶部悬浮导航栏留出安全距离 */
  padding-top: 4.5rem; 
}

.reas-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.reas-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* 配合进场动画，初始状态略微放大 */
  transform: scale(1.08); 
  /* 背景图片的景深清晰化动画 */
  animation: reas-image-settle 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.reas-hero-overlay {
  position: absolute;
  inset: 0;
  /* 从底部向上渐变的深海蓝遮罩，增强文字的对比度 */
  background: linear-gradient(to top, rgba(1, 23, 61, 0.75) 0%, rgba(1, 23, 61, 0.1) 100%);
  z-index: 1;
}

.reas-hero-content {
  position: relative;
  z-index: 2;
  
  /* 【修改2：靠左对齐】让容器撑满 100%，最大宽度和你的正文保持一致 */
  width: 100%;
  max-width: 1320px; /* 这个宽度跟你之前设置的 .reas-container 一致 */
  padding: 0 1.5rem; /* 两侧留出安全边距，手机上也不会贴死屏幕边缘 */
  text-align: left;  /* 确保文字靠左 */
}

/* 2. 修复文字顶部被平整切掉的问题：增加行高和顶部内边距 */
.reas-hero-title {
  font-family: Georgia, serif;
  font-size: 3.5rem;
  font-weight: 600;
  color: #ffffff95;
  margin: 0;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  
  /* 关键修复区 */
  overflow: hidden; 
  line-height: 1;       /* 撑开文字的上下空间 */
  padding-top: 0.3em;     /* 给字母的顶部留出呼吸空间，防止被切 */
  padding-bottom: 0.2em;  /* 防止底部阴影被切 */
}

.reas-hero-title-text {
  display: inline-block;
  /* 初始状态：沉在底部且全透明 */
  transform: translateY(100%);
  opacity: 0;
  /* 0.4秒的延迟让背景先动，文字后出，层次更丰富 */
  animation: reas-text-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}

/* --- 核心动画定义 --- */

/* 背景图回缩与清晰动画 */
@keyframes reas-image-settle {
  0% { transform: scale(1.08); filter: blur(6px); }
  100% { transform: scale(1); filter: blur(0); }
}

/* 文字升起动画 */
@keyframes reas-text-rise {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* --- 移动端适配 --- */
@media (max-width: 768px) {
  .reas-hero-section { 
    /* 【修改3：移动端增高】移动端也稍微加高一点 */
    height: 35vh; 
    min-height: 250px; 
  }
  .reas-hero-title { 
    font-size: 2rem; 
  }
}
/* ==========================================================================
   REAS HERO ICON ANIMATION
   ========================================================================== */

/* 外层容器：负责“破水而出”的进场动画 */
.reas-hero-icon-rise {
  display: inline-flex;
  /* 相对字体大小，0.65em 刚刚好，精致而不喧宾夺主 */
  width: 0.65em; 
  height: 0.65em;
  color: #fcfcfc; /* 冰蓝色，契合海浪主题并提亮 */
  
  /* 初始状态：在水下、全透明 */
  transform: translateY(100%);
  opacity: 0;
  
  /* 进场：复用文字的升起动画，但延迟 0.7s (比文字晚 0.3s出场) */
  animation: reas-text-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* 内部 SVG：负责高级的持续“悬浮、发光与自转” */
.reas-hero-icon-float {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(247, 247, 248, 0.4));
  
  /* 持续浮动动画：在出场完成后无缝衔接 */
  animation: reas-icon-pulse 1s ease-in-out 1.9s infinite alternate;
}

/* 定义持续的高级动态呼吸效果 */
@keyframes reas-icon-pulse {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: drop-shadow(0 0 8px rgba(253, 253, 254, 0.4)) brightness(1);
  }
  100% {
    /* 轻微上浮、略微放大、轻柔旋转 15 度，并大幅提亮发光 */
    transform: translateY(-8px) scale(1.15) rotate(15deg);
    filter: drop-shadow(0 0 20px rgba(220, 236, 255, 0.9)) brightness(1.3);
  }
}
/* 目录 (TOC) 样式 */
.reas-toc-wrapper {
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding-left: 0.5rem;
}

.reas-toc-header-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #a6a6a6;
  margin: 0.75rem 0 0 0;
}

.reas-toc-divider {
  width: 3rem;
  height: 6px;
  background-color: #a6a6a6;
  border-radius: 1px;
  margin-top: 0.25rem;
  margin-bottom: 1.2rem;
}

.reas-toc-list { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

.reas-toc-list ul { 
  margin: 0; 
  padding-left: 1rem; 
  list-style: none;
}

.reas-toc-item {
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0.2rem 0.1rem;
  font-family: "Oswald", sans-serif;
  position: relative;
}

.reas-toc-item + .reas-toc-item { 
  margin-top: 0.1rem; 
  border-top: 1px solid #dededb; 
}

.reas-toc-link {
  color: var(--reas-color-muted);
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  padding: 0.3rem 0;
  transition: color 0.2s;
}

.reas-toc-link:hover { color: #0077b5; }
.reas-toc-link.active { color: var(--reas-color-primary); font-weight: 500; }

/* 平滑滚动与锚点偏移 */
.reas-h2[id], .reas-h3[id] { scroll-margin-top: 7rem; }

/* 标题与元数据 */
.reas-main-title {
  font-family: 'Oswald', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #000000;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .reas-main-title { font-size: 2rem; }
}

.reas-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  color: #444;
  font-style: italic;
  font-family: 'Merriweather', serif;
  font-size: 0.85rem;
}

.reas-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* 图像样式 */
.reas-img {
  width: 100%;
  height: auto;
  border-radius: 0.375rem;
  object-fit: cover;
  margin-bottom: 1.5rem;
}

.reas-img-margin { margin: 2.5rem 0; }

/* 摘要段落 */
.reas-intro-p {
  font-family: 'Merriweather', serif;
  font-style: italic;
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

/* Key Insights 核心洞察框 */
.reas-key-insights {
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  padding: 1.5rem 1rem;
  margin-bottom: 4rem;
}

.reas-key-insights-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #8e8e8e;
  margin: 0 0 1rem 0;
}

.reas-key-insights ul {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem;
  color: #a2a2a2;
  margin: 0 0 0 1.2rem;
  padding: 0;
}

.reas-key-insights ul li { 
  margin-bottom: 0.75rem; 
  line-height: 1.5;
}

/* 正文排版 */
.reas-h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-top: 5rem;
  margin-bottom: 1.5rem;
  color: #000;
}

.reas-h3 {
  font-family: 'Merriweather', serif;
  font-size: 1.25em;
  font-weight: 900;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: #000;
}

.reas-p {
  font-family: var(--reas-font-palatino);
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--reas-color-text);
  margin-bottom: 1.5rem;
  text-align: justify;
}

.reas-list {
  font-family: var(--reas-font-palatino);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--reas-color-text);
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.reas-list li { margin-bottom: 0.75rem; }

/* 返回按钮 */
.reas-return-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #0076d4, #0A97D9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 118, 212, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
  text-decoration: none;
}

.reas-return-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 118, 212, 0.4);
}

.reas-return-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* ================= BLUE THEME SECTIONS & TYPOGRAPHY ================= */

/* 卡片基础样式：通透感与呼吸感 */
.aade-blue-section-card {
    padding: 2rem 0 2rem 2.5rem;
    transition: all 0.5s ease;
}

.aade-blue-section-card h2 {
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* 玻璃质感装饰块 */
.glass-card-dark {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* 字体强制定义 (确保在引用了 Google Fonts 的前提下生效) */
.font-oswald {
    font-family: 'Oswald', sans-serif;
}
.font-inter {
    font-family: 'Inter', sans-serif;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .aade-blue-section-card {
        padding: 1.5rem 0 1.5rem 1.5rem;
        border-left-width: 3px;
    }
}

/* 增加背景渐变动画，增加高级感 */
/* section::after 全局遮罩已移除，避免影响所有白底区域 */

/* 1. 增加 z-index: 3，并微调底部边距，让文字不要死贴在最底下 */
.aade-hero-v6-strategic-wrapper {
  position: relative;
  z-index: 3; /* 关键：确保在白色渐变遮罩(z-index:2)之上 */
  display: flex;
  justify-content: flex-start; /* 强制靠左 */
  align-items: center;
  width: 100%;
  max-width: 1200px; /* 和你的导航栏内容对齐 */
  margin: 0 auto;
  padding: 0 1.5rem 3rem 1.5rem; /* 增加 bottom padding，向上抬起一点 */
}

.aade-hero-v6-bracket-container {
  position: relative;
  display: inline-block;
  padding: 1.5rem 2.5rem;
}

/* 2. 将字体颜色改为深色，以适应白底 */
.aade-hero-v6-strategic-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 200; /* ExtraLight */
  font-size: clamp(2.5rem, 6vw, 4.5rem); /* 响应式字号 */
  line-height: 1.1;
  color: #0f172a; /* 关键：从白色改为品牌深灰/黑 */
  text-transform: capitalize; /* 首字母大写 */
  text-align: left;
  margin: 0;
  letter-spacing: 0.03em;
  opacity: 0; 
  filter: blur(12px); 
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), 
              filter 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* SVG 折角通用样式 */
/* 3. 将 SVG 边框折角也改为深色 */
.aade-hero-v6-svg-bracket {
  position: absolute;
  color: #0f172a; /* 关键：从白色半透明改为深色 */
  width: clamp(30px, 5vw, 50px);
  height: clamp(30px, 5vw, 50px);
  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 左上折角初始位移 */
.aade-hero-v6-bracket-top-left {
  top: 0;
  left: 0;
  transform: translate(-20px, -20px);
  opacity: 0;
}

/* 右下折角初始位移 */
.aade-hero-v6-bracket-bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(20px, 20px);
  opacity: 0;
}

/* 激活状态动效 */
.aade-hero-v6-active .aade-hero-v6-strategic-title {
  opacity: 1;
  filter: blur(0px);
}

.aade-hero-v6-active .aade-hero-v6-bracket-top-left,
.aade-hero-v6-active .aade-hero-v6-bracket-bottom-right {
  transform: translate(0, 0);
  opacity: 1;
}

/* 响应式兼容：移动端优化 */
@media (max-width: 768px) {
  .aade-hero-v6-strategic-wrapper {
    padding: 0 1.5rem;
  }
  .aade-hero-v6-bracket-container {
    padding: 1rem 1.5rem;
  }
  /* 移动端隐藏右下折角，保持视觉轻盈 */
  .aade-hero-v6-bracket-bottom-right {
    display: none;
  }
}

/* ==========================================================================
   AADE HERO V5 - DYNAMIC NODES
   ========================================================================== */

/* 主容器：水平布局，让图标和文字并排对齐 */
.aade-hero-v5-nodes-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start; /* 顶部对齐，让图标和首行文字平齐 */
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem 1.5rem;
}

/* 图标容器：微调位置使其与大写字母视觉对齐 */
.aade-hero-v5-svg-container {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* 标题样式：Oswald 细体与字间距动效 */
/* 1. 基础样式：默认完全可见 (防低版本浏览器 & 防 JS 失败) */
.aade-hero-v5-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 300; 
  font-size: 3.5rem; /* Fallback */
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.15;
  color: #001e60;
  margin: 0;
  text-transform: capitalize;
  text-align: left;
  
  /* 默认直接显示 */
  opacity: 1;
  filter: none;
  transform: none;
  letter-spacing: 0.02em;
}

/* 2. 渐进增强：仅在支持现代 CSS，且确认 JS 已就绪时，才执行初始隐藏 */
@supports (filter: blur(10px)) and (transition: opacity 1s) {
  
  /* 注意这里加了 .js-ready 前缀！*/
  .js-ready .aade-hero-v5-title {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(20px); 
    
    transition: letter-spacing 1.5s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 1.2s ease-out,
                filter 1.2s ease-out,
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* 激活状态 */
  .js-ready .aade-hero-v5-active .aade-hero-v5-title {
    letter-spacing: 0.02em; 
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

/* 3. 尊重系统减弱动态效果设置 */
@media (prefers-reduced-motion: reduce) {
  .aade-hero-v5-title {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* 激活状态：文字汇聚成型 */
.aade-hero-v5-active .aade-hero-v5-title {
  letter-spacing: 0.02em; /* 恢复正常间距 */
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/* --- SVG 动效部分 --- */

/* 1. 跑马灯流动线 */
.aade-hero-v5-flow-line {
  /* 创建一段实线(25px)和一段极长的空白，实现单点光标流动的效果 */
  stroke-dasharray: 25 150; 
  stroke-dashoffset: 150;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.aade-hero-v5-active .aade-hero-v5-flow-line {
  opacity: 1;
  /* 持续循环流动 */
  animation: v5FlowAnimation 2.5s linear infinite; 
}

@keyframes v5FlowAnimation {
  0% { stroke-dashoffset: 150; }
  100% { stroke-dashoffset: -50; } /* 向前流动 */
}

/* 2. 节点脉冲动画 */
.aade-hero-v5-node {
  transform-box: fill-box;
  transform-origin: center;
}

/* 错开三个节点的呼吸时间，形成依次点亮的涟漪感 */
.aade-hero-v5-active .v5-node-1 { animation: v5Pulse 2s ease-in-out infinite 0s; fill:#052a7b;}
.aade-hero-v5-active .v5-node-2 { animation: v5Pulse 2s ease-in-out infinite 0.6s; fill: #052a7b;}
.aade-hero-v5-active .v5-node-3 { animation: v5Pulse 2s ease-in-out infinite 1.2s; fill: #052a7b;}

@keyframes v5Pulse {
  0%, 100% { 
    transform: scale(1.5); 
    stroke: rgba(255, 255, 255, 0.8); 
    stroke-width: 1.5px; 
  }
  50% { 
    transform: scale(2.6); /* 放大 */
    
    
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .aade-hero-v5-nodes-wrapper {
    flex-direction: column; /* 手机端改为上下结构 */
    gap: 1rem;
    padding-left: 1.5rem;
  }
  .aade-hero-v5-svg-container {
    margin-top: 0;
    transform: scale(0.85) translateX(-10%); /* 手机端稍微缩小图标 */
  }
}

/* ==========================================================================
   AADE HORIZONTAL NEWS LIST & SIDEBAR SECTION (1/4 & 3/4 Layout)
   ========================================================================== */

.aade-news-horizontal-list-section {
    background-color: #ffffff;
    padding: 5rem 1.5rem 8rem;
    font-family: 'Inter', sans-serif;
}

.aade-news-horizontal-list-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 3fr; /* 1/4 and 3/4 split */
    gap: 3rem;
    align-items: start;
}

/* --- Left Sidebar (1/4) --- */
.aade-news-sidebar-filters {
    position: sticky;
    top: 6rem; /* Stays fixed while scrolling */
}

.aade-news-sidebar-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #94a3b8; /* slate-400 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem;
}

.aade-news-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.aade-news-filter-btn {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569; /* slate-600 */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aade-news-filter-btn:hover {
    background-color: #f8fafc;
    color: #0076d4;
}

.aade-news-filter-btn.active {
    background-color: #f0f9ff;
    color: #0076d4;
    border-color: #bae6fd;
    font-weight: 600;
}

.aade-news-sort-btn {
    padding: 0.5rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aade-news-sort-btn:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.aade-news-sort-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* --- Right Main Content (3/4) --- */
.aade-news-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Narrow Horizontal Card Design --- */
.aade-news-row-card {
    display: flex;
    flex-direction: row;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    height: 245px; /* 关键：重新加回固定高度，245px 刚好完美容纳你的标题和简介 */
    /* 请确保删除了之前的 min-height */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.aade-news-row-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -5px rgba(0, 118, 212, 0.12);
    border-color: #bae6fd;
}

/* Image Section */
.aade-news-row-img-link {
    width: 32%;
    min-width: 250px;
    height: 100%; /* 紧紧跟随卡片固定的 245px 高度 */
    flex-shrink: 0;
    overflow: hidden;
    display: block; 
}

.aade-news-row-figure {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #f1f5f9;
}

.aade-news-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 保证等比例放大铺满，不扭曲 */
    object-position: left top; /* 满足要求：永远以左上角为基准点 */
    display: block;            /* 消灭底部的幽灵空白 */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.aade-news-row-card:hover .aade-news-row-img {
    transform: scale(1.05);
}

/* Text Content Section */
.aade-news-row-body {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start; /* Align content to top to prevent bottom cutoff */
}

.aade-news-row-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.aade-news-row-date {
    color: #64748b; /* slate-500 */
    font-weight: 500;
}

.aade-news-row-divider {
    color: #cbd5e1;
}

.aade-news-row-type {
    color: #0076d4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.aade-news-row-title {
    font-family: 'Inter', sans-serif; /* Forced to Inter for serious tone */
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.5;
    
    margin: 0 0 0.5rem 0;
    
    box-sizing: border-box;
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Truncate to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2; /* Modern browsers support */
    word-break: break-word;
    flex-shrink: 0;
}

.aade-news-row-card:hover .aade-news-row-title {
    color: #0076d4;
}

.aade-news-row-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Truncate to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
    flex-shrink: 0;
}

.aade-news-row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto; /* Push tags to bottom if text is short */
}

/* Card Filtering Animation */
.aade-news-row-card.hidden-card {
    display: none;
}

.aade-news-row-card.fade-in {
    animation: aadeNewsFadeIn 0.4s ease-out forwards;
}

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

/* --- Responsive adjustments for Mobile/Tablet --- */
@media (max-width: 992px) {
    .aade-news-horizontal-list-container {
        grid-template-columns: 1fr; /* Stack sidebar and cards */
        gap: 2rem;
    }

    .aade-news-sidebar-filters {
        position: relative;
        top: 0;
    }

    .aade-news-filter-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .aade-news-filter-btn {
        width: auto;
        padding: 0.5rem 1rem;
    }

    .aade-news-row-card {
        flex-direction: column;
        height: auto; /* Remove fixed height for stacked mode */
    }

    .aade-news-row-img-link {
        width: 100%;
        height: 200px;
    }
}
/* --- Sidebar Group Spacing --- */
.aade-news-filter-group + .aade-news-filter-group {
    margin-top: 2.5rem;
}

/* --- New Subject Tags Colors --- */
/* AI: 科技感的琥珀/橙色系 */
.ple-label-ai {
    background-color: #fff7ed; 
    border-color: #fed7aa; 
    color: #ea580c;
}

/* Web3: 赛博感的紫色/靛蓝色系 */
.ple-label-web3 {
    background-color: #f5f3ff; 
    border-color: #ddd6fe; 
    color: #7c3aed;
}

/* Cross-border: 全球化的玫瑰/红色系 */
.ple-label-crossborder {
    background-color: #fff1f2; 
    border-color: #fecdd3; 
    color: #e11d48;
}
.aade-news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem; /* 增加与上方卡片的间距 */
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
    width: 100%;
    
    /* 关键代码：强制排序到最后 */
    order: 999 !important; 
}

/* 同时确保卡片本身的 order 是默认值 0 */
.aade-news-row-card {
    order: 0;
}

.aade-news-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.aade-news-page-btn:hover:not(:disabled) {
    border-color: #0076d4;
    color: #0076d4;
    background-color: #f8fafc;
}

/* 选中当前页的样式 */
.aade-news-page-btn.active {
    background: #0076d4;
    color: #ffffff;
    border-color: #0076d4;
    cursor: default;
}

/* 禁用状态（例如在第一页时禁用"上一页"按钮） */
.aade-news-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f1f5f9;
}
/* ==========================================================================
   AADE CONTACT SECTION v2 — CSS
   粘贴至 styles.css 末尾，或单独引入 contact-section-v2.css
   ========================================================================== */

/* ── 核心色彩变量 ── */
:root {
  --cc-blue:       #0076d4;
  --cc-blue-mid:   #0099ff;
  --cc-blue-light: #e8f4ff;
  --cc-blue-pale:  #f0f7ff;
  --cc-text:       #0f172a;
  --cc-text-muted: #64748b;
  --cc-text-soft:  #94a3b8;
  --cc-border:     #e2e8f0;
  --cc-white:      #ffffff;
  --cc-radius-lg:  18px;
  --cc-radius-md:  12px;
}

/* ════════════════════════════════
   SECTION 容器
════════════════════════════════ */
.cc-section {
  background: #ffffff;
  background-image:
    radial-gradient(ellipse 65% 50% at 72% 25%, rgba(0, 118, 212, 0.055) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 18% 78%, rgba(0, 118, 212, 0.04) 0%, transparent 60%);
  padding: 100px 32px 96px;
  position: relative;
  overflow: hidden;
}

/* 背景光晕（用 absolute div 实现柔和的蓝光扩散感） */
.cc-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.cc-bg-glow--a {
  width: 480px; height: 320px;
  background: radial-gradient(ellipse, rgba(0, 118, 212, 0.06) 0%, transparent 70%);
  top: -60px; right: 5%;
  filter: blur(48px);
}
.cc-bg-glow--b {
  width: 360px; height: 280px;
  background: radial-gradient(ellipse, rgba(0, 153, 255, 0.05) 0%, transparent 70%);
  bottom: 80px; left: 2%;
  filter: blur(56px);
}

.cc-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════
   上半：欢迎语 + 表单网格
════════════════════════════════ */
.cc-top-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 52px;
  align-items: start;
  margin-bottom: 88px;
}
@media (max-width: 860px) {
  .cc-top-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ────────────────────────────────
   左：欢迎语
──────────────────────────────── */
.cc-welcome { padding-top: 4px; }

.cc-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cc-blue-pale);
  border: 1px solid rgba(0, 118, 212, 0.18);
  color: var(--cc-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.cc-welcome-title {
  font-family: 'Bricolage Grotesque', 'Oswald', sans-serif;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--cc-text);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.cc-title-accent { color: var(--cc-blue); }

.cc-welcome-divider {
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, var(--cc-blue) 0%, var(--cc-blue-mid) 100%);
  border-radius: 99px;
  margin-bottom: 24px;
}

.cc-welcome-body {
  font-size: 15px;
  color: var(--cc-text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

/* 主题标签 */
.cc-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 32px;
}
.cc-theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-blue);
  background: var(--cc-blue-pale);
  border: 1px solid rgba(0, 118, 212, 0.16);
  border-radius: 999px;
  white-space: nowrap;
}

/* 统计数字行 */
.cc-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--cc-border);
}
.cc-stat { padding: 0 20px; text-align: center; }
.cc-stat:first-child { padding-left: 0; }
.cc-stat-num {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--cc-blue);
  line-height: 1;
  margin-bottom: 4px;
}
.cc-stat-label {
  font-size: 11px;
  color: var(--cc-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.cc-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--cc-border);
  flex-shrink: 0;
}

/* ────────────────────────────────
   右：玻璃表单卡
──────────────────────────────── */
.cc-form-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 118, 212, 0.18);
  border-radius: 22px;
  padding: 36px 34px;
  position: relative;
  overflow: hidden;
  /* 蓝光玻璃感核心阴影 */
  box-shadow:
    0 0 0 1px rgba(0, 118, 212, 0.05),
    0 4px 20px rgba(0, 118, 212, 0.08),
    0 0 64px rgba(0, 118, 212, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(0, 118, 212, 0.05) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (max-width: 520px) {
  .cc-form-card { padding: 28px 20px; }
}

/* 表单内侧蓝色扩散光 */
.cc-form-glow {
  position: absolute;
  width: 300px; height: 200px;
  top: -80px; right: -60px;
  background: radial-gradient(ellipse, rgba(0, 118, 212, 0.07) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(24px);
}

/* 表单顶部 header */
.cc-form-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0, 118, 212, 0.10);
}
.cc-form-header-icon {
  width: 46px; height: 46px;
  background: var(--cc-blue-pale);
  border: 1px solid rgba(0, 118, 212, 0.16);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-blue);
  flex-shrink: 0;
}
.cc-form-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--cc-text);
  margin: 0 0 3px;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.cc-form-subtitle {
  font-size: 13px;
  color: var(--cc-text-soft);
  margin: 0;
}

/* ── 表单字段 ── */
.cc-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 500px) { .cc-row-2col { grid-template-columns: 1fr; } }

.cc-field { margin-bottom: 18px; }

.cc-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cc-text);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cc-req { color: var(--cc-blue); }

.cc-input,
.cc-textarea {
  width: 100%;
  background: #fafcff;
  border: 1px solid rgba(0, 118, 212, 0.14);
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--cc-text);
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
  -webkit-appearance: none;
}
.cc-input::placeholder,
.cc-textarea::placeholder { color: #b0bec5; }
.cc-input:hover,
.cc-textarea:hover {
  border-color: rgba(0, 118, 212, 0.28);
  background: #f6faff;
}
.cc-input:focus,
.cc-textarea:focus {
  border-color: rgba(0, 118, 212, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 118, 212, 0.10);
}
.cc-input--err {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}
.cc-textarea {
  resize: vertical;
  min-height: 116px;
  line-height: 1.65;
}

/* 错误文字 */
.cc-err {
  display: none;
  font-size: 11px;
  color: #ef4444;
  margin-top: 5px;
}
.cc-err--show { display: block; }

/* 标签按钮 */
.cc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-tag {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: 1px solid var(--cc-border);
  color: var(--cc-text-muted);
  background: #f8fafc;
  transition: all 0.18s;
}
.cc-tag:hover {
  border-color: rgba(0, 118, 212, 0.35);
  color: var(--cc-blue);
  background: var(--cc-blue-pale);
}
.cc-tag--on {
  border-color: var(--cc-blue);
  color: var(--cc-blue);
  background: var(--cc-blue-pale);
}

/* 提交按钮 */
.cc-submit {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--cc-blue) 0%, #0060b8 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(0, 118, 212, 0.30);
  position: relative;
  overflow: hidden;
}
.cc-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 55%);
  pointer-events: none;
}
.cc-submit:hover  { opacity: 0.90; box-shadow: 0 6px 20px rgba(0, 118, 212, 0.38); }
.cc-submit:active { transform: scale(0.985); }
.cc-submit:disabled { opacity: 0.6; cursor: not-allowed; }

@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-spinner { animation: cc-spin 0.85s linear infinite; }
.cc-hidden { display: none !important; }

/* 成功状态 */
.cc-success {
  text-align: center;
  padding: 40px 20px;
}
.cc-success-icon {
  width: 72px; height: 72px;
  background: var(--cc-blue-pale);
  border: 1px solid rgba(0, 118, 212, 0.20);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-blue);
  margin: 0 auto 18px;
}
.cc-success-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--cc-text);
  margin-bottom: 10px;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.cc-success-body {
  font-size: 14px;
  color: var(--cc-text-muted);
  line-height: 1.7;
  max-width: 300px;
  margin: 0 auto 24px;
}
.cc-reset-btn {
  background: none;
  border: 1px solid rgba(0, 118, 212, 0.30);
  border-radius: 999px;
  color: var(--cc-blue);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 9px 22px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.cc-reset-btn:hover {
  border-color: var(--cc-blue);
  background: var(--cc-blue-pale);
}

/* ════════════════════════════════
   Bento 区域 header
════════════════════════════════ */
.cc-bento-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cc-bento-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-bento-icon-wrap {
  width: 44px; height: 44px;
  background: var(--cc-blue-pale);
  border: 1px solid rgba(0, 118, 212, 0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-blue);
  flex-shrink: 0;
}
.cc-bento-title {
  font-family: 'Bricolage Grotesque', 'Oswald', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--cc-text);
  letter-spacing: -0.01em;
  margin: 0;
}
.cc-bento-sub {
  font-size: 14px;
  color: var(--cc-text-soft);
  margin: 0;
  max-width: 380px;
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 640px) {
  .cc-bento-sub { text-align: left; }
}

/* ════════════════════════════════
   Bento Grid
════════════════════════════════ */
.cc-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* SG 大卡占 2列 × 2行（桌面默认） */
.cc-card--large {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

@media (max-width: 900px) {
  .cc-bento { grid-template-columns: repeat(2, 1fr); }
  .cc-card--large { grid-column: 1 / span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .cc-bento { grid-template-columns: 1fr; gap: 14px; }
  .cc-card--large { grid-column: 1 / -1; grid-row: auto; }
}

/* ── 通用卡片样式 ── */
.cc-card {
  background: #ffffff;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.2s;
}
.cc-card:hover {
  box-shadow: 0 8px 32px rgba(0, 118, 212, 0.10);
  transform: translateY(-2px);
}

/* ── 卡片 Header（彩色条） ── */
.cc-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  position: relative;
}
/* 各地区颜色主题 */
.cc-card-head--sg  { background: linear-gradient(135deg, #0056a8 0%, #0076d4 100%); }
.cc-card-head--cn  { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); }
.cc-card-head--usa { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.cc-card-head--eu  { background: linear-gradient(135deg, #003380 0%, #1d4ed8 100%); }
.cc-card-head--ph  { background: linear-gradient(135deg, #0038a8 0%, #1d6ed8 60%, #ce1126 100%); }
.cc-card-head--jp  { background: linear-gradient(135deg, #9b1c1c 0%, #ef4444 100%); }
.cc-card-head--kr  { background: linear-gradient(135deg, #003478 0%, #1d4ed8 60%, #c60c30 100%); }

.cc-card-icon {
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  flex-shrink: 0;
}
/* SG 大卡图标更大 */
.cc-card--large .cc-card-icon {
  width: 62px; height: 62px;
  border-radius: 16px;
}
.cc-card--large .cc-card-icon svg { width: 44px; height: 44px; }

.cc-card-region {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.cc-card--large .cc-card-region { font-size: 22px; }

.cc-card-office-type {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.cc-card--large .cc-card-office-type { font-size: 13px; }

/* ── 卡片 Body ── */
.cc-card-body {
  padding: 20px 22px 22px;
  flex: 1;
}

/* 地址 */
.cc-addr-block {
  margin-bottom: 14px;
}
.cc-addr-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--cc-blue);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 4px;
}
.cc-addr-text {
  font-size: 13px;
  color: var(--cc-text-muted);
  line-height: 1.55;
}

/* SG 双地址布局 */
.cc-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cc-border);
}
@media (max-width: 700px) {
  .cc-addresses { grid-template-columns: 1fr; }
}

/* SG 联系人四宫格 */
.cc-contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
@media (max-width: 600px) {
  .cc-contacts-grid { grid-template-columns: 1fr; }
}

/* 联系人列表（非SG） */
.cc-persons-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 联系人条目 */
.cc-person {
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #f0f4f8;
  border-radius: 10px;
  transition: background 0.18s, border-color 0.18s;
}
.cc-person:hover {
  background: var(--cc-blue-pale);
  border-color: rgba(0, 118, 212, 0.12);
}
.cc-person-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cc-text);
  margin-bottom: 2px;
}
.cc-person-title {
  font-size: 11px;
  color: var(--cc-text-soft);
  margin-bottom: 10px;
  line-height: 1.4;
}
.cc-person-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cc-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  text-decoration: none;
  border-radius: 5px;
  padding: 3px 0;
  transition: color 0.15s;
  line-height: 1.3;
  word-break: break-word;
}
.cc-link-email {
  color: var(--cc-blue);
}
.cc-link-email:hover { color: #0060b8; text-decoration: underline; }

.cc-link-wa {
  color: #16a34a;
}
.cc-link-wa:hover { color: #15803d; }

.cc-link-phone {
  color: var(--cc-text-muted);
}
.cc-link-phone:hover { color: var(--cc-text); }

/* ── 小屏收紧 ── */
@media (max-width: 560px) {
  .cc-card-head { padding: 14px 16px; gap: 12px; }
  .cc-card-icon { width: 44px; height: 44px; border-radius: 12px; }
  .cc-card-icon svg { width: 28px; height: 28px; }
  .cc-card--large .cc-card-icon { width: 52px; height: 52px; border-radius: 14px; }
  .cc-card--large .cc-card-icon svg { width: 36px; height: 36px; }
  .cc-card-region { font-size: 16px; }
  .cc-card--large .cc-card-region { font-size: 19px; }
  .cc-card-body { padding: 16px 16px 18px; }
  .cc-contact-link { font-size: 11.5px; }
}

/* ════════════════════════════════
   入场动画
════════════════════════════════ */
@keyframes cc-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-anim { animation: cc-fade-up 0.5s ease both; }


/* 文本容器：保留原本的进场动画 */
.pillar4-hero-inner-text {
    max-width: 600px;
    animation: fadeUpInner 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 科技感小标签 - 浅色底适配 */
.pillar4-hero-badge {
    display: inline-block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
    color: #2563eb; /* 改为深蓝色，在浅色底上对比度更高 */
    
    text-transform: capitalize;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.3); /* 对应的深蓝色边框 */
    padding: 0.35rem 0.875rem;
    border-radius: 9999px;
    background: rgba(37, 99, 235, 0.08); /* 极浅的蓝色背景，保持通透感 */
    backdrop-filter: blur(4px);
}

/* 主标题 - 浅色底适配 */
.pillar4-hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 3.2rem;
    font-weight: 500;
    color: #0f172a; /* 极深的蓝灰色 (Slate 900)，比纯黑更有质感 */
    line-height: 1.1;
    
   
}

/* 描述文字 - 浅色底适配 */
.pillar4-hero-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: #5a6779; /* 深灰色 (Slate 600)，保证可读性的同时区分层级 */
    font-weight: 500;
    line-height: 1.6;
    margin-top: 1.5rem;
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
    .pillar4-hero-title { 
        font-size: 2.5rem; 
    }
    .pillar4-hero-desc { 
        font-size: 1rem; 
    }
}


/* =========================================
   Pillar4 专属发光网格背景 (更密、更亮、微蓝底色全宽版)
   ========================================= */

/* 网格最外层容器，铺设坚实的纯白底 */
.pillar4-grid-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #ffffff; 
    overflow: hidden;
}

/* 视觉遮罩层：左右 100% 铺满，仅在垂直方向向底部渐隐，保护文字 */
.pillar4-grid-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 线性渐变：顶部全显现，到 45% 开始变淡，到底部 95% 彻底消失为纯白 */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 95%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 95%);
}

/* 1. 底层光晕：显著的蓝色扩散，且格子内部不再留白，填充 5% 的微蓝 */
.pillar4-grid-glow {
    position: absolute;
    top: -60px; left: -60px; right: -60px; bottom: -60px;
    background-size: 54px 54px; /* 缩小到原来的 2/3 左右 */
    background-image:
        linear-gradient(to right, 
            rgba(90, 196, 255, 0.05) 0px, 
            rgba(67, 135, 238, 0.05) 20px, 
            rgba(67, 135, 238, 0.25) 24px, 
            rgba(67, 135, 238, 0.75) 27px, /* 增加亮度 */
            rgba(67, 135, 238, 0.25) 30px, 
            rgba(67, 135, 238, 0.05) 34px, 
            rgba(90, 196, 255, 0.05) 54px
        ),
        linear-gradient(to bottom, 
            rgba(90, 196, 255, 0.05) 0px, 
            rgba(67, 135, 238, 0.05) 20px, 
            rgba(67, 135, 238, 0.25) 24px, 
            rgba(67, 135, 238, 0.75) 27px, 
            rgba(67, 135, 238, 0.25) 30px, 
            rgba(67, 135, 238, 0.05) 34px, 
            rgba(90, 196, 255, 0.05) 54px
        );
    filter: blur(10px); /* 放大发光的模糊半径，让光效更均匀交融 */
    animation: pillar4-grid-pulse 4s ease-in-out infinite; 
}

/* 2. 顶层灯芯：更小的间距，剔除透明(transparent)，格子背景注入 4% 的微蓝 */
.pillar4-grid-core {
    position: absolute;
    top: -60px; left: -60px; right: -60px; bottom: -60px;
    background-size: 54px 54px; /* 必须与底板一致 */
    background-image:
        /* 竖线精密切割：中心点在 27px */
        linear-gradient(to right, 
            rgba(90, 196, 255, 0.04) 0px,      /* 核心改动：用 4% 幽蓝替代 transparent，消除刺眼留白 */
            rgba(90, 196, 255, 0.04) 25px, 
            rgba(90, 196, 255, 0.25) 25.8px, 
            #5ac4ff 26.4px,                    /* 蓝边缘 */
            #ffffff 26.7px,                    /* 白灯芯 */
            #ffffff 27.3px,                    /* 白灯芯 */
            #5ac4ff 27.6px,                    /* 蓝边缘 */
            rgba(90, 196, 255, 0.25) 28.2px, 
            rgba(90, 196, 255, 0.04) 29px, 
            rgba(90, 196, 255, 0.04) 54px
        ),
        /* 横线精密切割 */
        linear-gradient(to bottom, 
            rgba(90, 196, 255, 0.04) 0px, 
            rgba(90, 196, 255, 0.04) 25px, 
            rgba(90, 196, 255, 0.25) 25.8px, 
            #5ac4ff 26.4px, 
            #ffffff 26.7px, 
            #ffffff 27.3px, 
            #5ac4ff 27.6px, 
            rgba(90, 196, 255, 0.25) 28.2px, 
            rgba(90, 196, 255, 0.04) 29px, 
            rgba(90, 196, 255, 0.04) 54px
        );
    opacity: 0.95; 
}

/* 模拟环境光的轻微呼吸闪烁感 */
@keyframes pillar4-grid-pulse {
    0%, 100% { opacity: 0.8; filter: blur(8px); transform: scale(1); }
    50% { opacity: 1; filter: blur(12px); transform: scale(1.015); }
}

/* ==========================================================================
   SUMMARY SECTION (TAGGED CARDS)
   ========================================================================== */
.aade-summary-section {
    padding: 3rem 0 6rem 0; /* 移除原有的左右内边距，交给内部 container 控制 */
    background-color: #ffffff; /* 设为透明以更好融入背景 */
    display: flex;
    justify-content: center;
}

.summary-container {
    width: 100%;
    max-width: 80rem; /* 与上方 hero 区域的 max-width 严格一致 */
    padding: 3rem 1.5rem 0 3rem; /* 左侧保留 3rem padding，确保文字边缘绝对对齐 */
    margin: 0 auto;
}

.summary-tags-wrapper {
    display: flex;
    gap: 0.5rem;
    padding-left: 0; /* 移除之前的缩进，现在的对齐由 container 控制 */
}

.summary-tag {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: #64748b;
    background: #e2e8f0;
    padding: 0.75rem 2rem 1rem;
    border-radius: 12px 12px 0 0; /* 仅顶部圆角，形成文件夹形态 */
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    transform: translateY(4px); /* 未激活时稍微下沉 */
}

.summary-tag:hover {
    background: #cbd5e1;
    color: #0f172a;
}

.summary-tag.active {
    /* 顶部稍深，底部与卡片顶部颜色无缝衔接 */
    background: linear-gradient(180deg, #003b8e 0%, #0052b4 100%);
    color: #ffffff;
    z-index: 3;
    transform: translateY(1px);
    box-shadow: 0 -5px 15px rgba(0, 118, 212, 0.2);
}

.summary-cards-container {
    position: relative;
    z-index: 2;
    /* 从深蓝平滑过渡到品牌蓝，再到右下角的明亮青蓝色，与顶部光束呼应 */
    background: linear-gradient(135deg, #0052b4 0%, #0076d4 50%, #00aaff 100%);
    border-radius: 16px;
    border-top-left-radius: 0; /* 保持与第一个标签连接的文件夹视觉 */
    padding: 4rem;
    min-height: 380px;
    box-shadow: 0 20px 40px -10px rgba(0, 118, 212, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* 卡片内部结构 */
.summary-card {
    display: none; /* 默认隐藏 */
    position: relative;
    height: 100%;
}

.summary-card.active {
    display: block;
    animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeSlideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 巨型背景 Icon */
.summary-bg-icon {
    position: absolute;
    right: -5%;
    bottom: -15%;
    width: 350px;
    height: 350px;
    color: #ffffff;
    opacity: 0.12; /* 从原先的 0.04 提升到 0.12，显著增强存在感但保留水印质感 */
    pointer-events: none;
    transform: rotate(-10deg);
}

/* 文字内容排版 */
.summary-content-inner {
    position: relative;
    z-index: 10;
    max-width: 800px;
}

.summary-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.25rem;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.summary-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88); /* 纯白带点透明度，降低阅读疲劳 */
    margin: 0 0 1.25rem 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .aade-summary-section {
        padding: 4rem 1rem;
    }
    .summary-tags-wrapper {
        padding-left: 0;
        overflow-x: auto; /* 允许横向滑动标签 */
        flex-wrap: nowrap;
    }
    .summary-tag {
        font-size: 1rem;
        padding: 0.6rem 1.25rem 0.8rem;
        white-space: nowrap;
    }
    .summary-cards-container {
        padding: 2.5rem 1.5rem;
        border-top-left-radius: 16px; /* 移动端恢复四个圆角 */
    }
    .summary-title {
        font-size: 2.25rem;
    }
    .summary-bg-icon {
        width: 250px;
        height: 250px;
        right: -10%;
        bottom: -5%;
    }
}

/* ==========================================================================
   LUCA AGENTIC CUSTOM STYLES (Anti-Scam Page Specific)
   ========================================================================== */

/* 磨砂玻璃质感卡片 */
.luca-agentic-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 118, 212, 0.05);
    transition: all 0.3s ease;
}

.luca-agentic-glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -5px rgba(0, 118, 212, 0.15);
    border-color: rgba(0, 118, 212, 0.2);
}

/* 连线与箭头 (学术架构图) */
.luca-agentic-flow-arrow-down::after, 
.luca-agentic-flow-arrow-right::after {
    content: '';
    position: absolute;
    border: solid #cbd5e1; /* slate-300 */
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
}

.luca-agentic-flow-arrow-down::after {
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.luca-agentic-flow-arrow-right::after {
    right: -2px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* 论文引用链接 Hover 态 */
.luca-agentic-paper-link {
    transition: all 0.2s ease;
}
.luca-agentic-paper-link:hover {
    color: #0076d4;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 矩阵层级卡片 Hover 上浮 */
.luca-agentic-layer-card {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.luca-agentic-layer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px -8px rgba(0, 118, 212, 0.2);
}

/* ==========================================================================
   LUCA AGENTIC: Robust Flowchart Connections (终极修复版流程图连线)
   ========================================================================== */
/* 连线区域主容器：撑开高度，移动端默认隐藏 */
.luca-flow-container {
    position: relative;
    width: 100%;
    height: 120px; 
    margin: 4px 0;
    display: none; 
}
@media (min-width: 768px) {
    .luca-flow-container {
        display: block; 
    }
}

/* 主干道分支：像个倒 U 型，连接顶部卡片和底部两张卡片 */
.luca-flow-branch {
    position: absolute;
    top: 0;
    left: 25%;  /* 控制左分支的落点 */
    right: 25%; /* 控制右分支的落点 */
    height: 100%;
    border-top: 2px solid #cbd5e1;
    border-left: 2px solid #cbd5e1;
    border-right: 2px solid #cbd5e1;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 0;
}

/* 顶部小竖线：连接 Orchestrator 卡片的底部 */
.luca-flow-stem {
    position: absolute;
    top: -16px; 
    left: 50%;
    width: 2px;
    height: 16px;
    background-color: #cbd5e1;
    transform: translateX(-50%);
}

/* 箭头头部 - 指向左下卡片 */
.luca-flow-arrow-left {
    position: absolute;
    bottom: -2px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #cbd5e1;
    border-right: 2px solid #cbd5e1;
    transform: rotate(45deg);
}

/* 箭头头部 - 指向右下卡片 */
.luca-flow-arrow-right {
    position: absolute;
    bottom: -2px;
    right: -6px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #cbd5e1;
    border-right: 2px solid #cbd5e1;
    transform: rotate(45deg);
}

/* 数据传递横向虚线 (Step 2) */
.luca-flow-dashed {
    position: absolute;
    bottom: 25px;
    left: 20px;  /* 虚线起点缩进，不碰到主干 */
    right: 20px; /* 虚线终点缩进，不碰到主干 */
    height: 2px;
    border-bottom: 2px dashed #60a5fa;
    z-index: 5;
}

/* 虚线箭头头部 */
.luca-flow-arrow-dashed {
    position: absolute;
    right: -2px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #60a5fa;
    border-right: 2px solid #60a5fa;
    transform: translateY(-50%) rotate(45deg);
}

/* 所有的文字标签基础样式 */
.luca-flow-label {
    position: absolute;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    z-index: 10;
}

/* 各自独立定位标签位置 */
.luca-flow-label-1 {
    top: 25px;
    left: 0;
    transform: translateX(-50%); /* 完美居中在左侧主线上 */
}
.luca-flow-label-3 {
    top: 25px;
    right: 0;
    transform: translateX(50%); /* 完美居中在右侧主线上 */
}
.luca-flow-label-2 {
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%); /* 完美居中在横向虚线上 */
    color: #0076d4;
    background: #f0f7ff;
    border-color: #bfdbfe;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   JANUS RAG SECTION STYLES (Prefixed to avoid conflicts)
   ========================================================================== */
.janus-chart-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    max-height: 450px;
}
@media (min-width: 768px) {
    .janus-chart-container { height: 450px; }
}

.janus-tab-btn {
    transition: all 0.3s ease;
}
.janus-tab-btn.janus-active {
    background-color: #312e81; /* indigo-900 */
    color: white !important;
    border-color: #312e81;
}

.janus-fade-in {
    animation: janusFadeIn 0.5s ease-in-out;
}
@keyframes janusFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}