:root {
    --color-bg-dark: #000000;
    --color-text-title: #ffffff;
    --color-text-body: #8e8e94;
    --color-glass-surface: rgba(255, 255, 255, 0.02);
    --color-glass-border: rgba(255, 255, 255, 0.08);
    --curve-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-title);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* =======================================
   三维灯光与氛围系统 (Advanced Lighting System)
   ======================================= */
/* 顶部全局强聚光灯 */
.top-spotlight {
    position: fixed;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 60vw; height: 500px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(200, 220, 255, 0.4) 40%, transparent 70%);
    opacity: 0; /* JS 控制联动 */
    pointer-events: none;
    z-index: 10;
    filter: blur(80px);
    transition: opacity 0.1s linear; 
    will-change: opacity;
}

/* 全白强追踪模糊高光（光标扫过效果） */
.cursor-glow-blob {
    position: fixed;
    top: 0; left: 0;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.6) 0%, rgba(0, 102, 255, 0.4) 30%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 20;
    mix-blend-mode: screen; 
    will-change: transform;
}

/* 背景幽深漫反射 */
.cinematic-lighting {
    position: fixed; inset: 0; pointer-events: none; z-index: -2;
    background: radial-gradient(circle at 60% 40%, rgba(138, 43, 226, 0.05) 0%, transparent 50%);
}


/* =======================================
   通透晶莹的水晶液态大字 (Crystal Text)
   ======================================= */
.crystal-text {
    font-size: 96px; font-weight: 700; letter-spacing: -3.5px; line-height: 1.05; margin-bottom: 24px;
    color: transparent;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 1) 20%,
        rgba(100, 150, 255, 0.8) 40%,
        rgba(255, 255, 255, 0.4) 60%,
        rgba(255, 255, 255, 1) 80%,
        rgba(200, 100, 255, 0.6) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.15);
    text-shadow: 0 10px 40px rgba(0, 100, 255, 0.5), 0 3px 8px rgba(255, 255, 255, 0.5);
    animation: crystalShimmer 8s linear infinite;
}
.crystal-text.smaller-crystal { font-size: 68px; letter-spacing: -2px;}
@keyframes crystalShimmer { to { background-position: 200% center; } }


/* =======================================
   通用布局结构
   ======================================= */
.glass-nav {
    position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 20px 6%; background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-bottom: 1px solid var(--color-glass-border); z-index: 100;
}
.logo-container { display: flex; align-items: center; gap: 12px; }
.nav-logo-icon { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.logo { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; }
.nav-links a { color: var(--color-text-body); text-decoration: none; font-size: 14px; margin-left: 40px; transition: color 0.3s; font-weight: 500; }
.nav-links a:hover { color: #fff; }
.nav-cta { color: #fff !important; }

.apple-section { padding: 180px 0; width: 100%; position: relative; }
.text-content { max-width: 800px; margin: 0 auto; z-index: 5; position: relative;}
.text-content.narrow { max-width: 600px; }
h2 { font-size: 56px; font-weight: 600; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 24px; }
p { font-size: 24px; font-weight: 400; line-height: 1.5; color: var(--color-text-body); }


/* =======================================
   图像比例与玻璃框架容器 (Full Original Aspect Layout)
   ======================================= */
/* 顶级约束容器：保护原图最大边界 */
.visual-content { margin: 80px auto 0; max-width: 1300px; padding: 0 5%; position: relative; perspective: 2500px; z-index: 5; }
.showcase-large { max-width: 1400px; }
.showcase-medium { max-width: 900px; }
.center-align { text-align: center; }

/* 强大的极简分离布局网格 */
.split-layout { display: flex; align-items: center; max-width: 1600px; margin: 0 auto; padding: 120px 5%; gap: 100px; text-align: left; }
.split-layout .text-content { flex: 0 0 35%; margin: 0; }
.split-layout .visual-content { flex: 0 0 65%; margin: 0; padding: 0;}
.split-layout.left-image { flex-direction: row-reverse; }

/* 液态冰晶相框体系 */
.premium-glass-frame {
    display: block; background: var(--color-glass-surface); border: 1px solid var(--color-glass-border);
    border-radius: 36px;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2);
    backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%);
    overflow: hidden; position: relative; will-change: transform;
}
/* 核心：无硬性高度限制，直接自适应原图比例 */
.premium-glass-frame img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: contain; /* 保底处理，通常高度 auto 已足够 */
}


/* =======================================
   复杂的子模块排版叠放处理
   ======================================= */
/* Clusters 允许原图保留独立层级互相覆盖 */
.cluster-container { position: relative; width: 100%; }
.cluster-base { width: 85%; }
.split-layout.right-image .cluster-base { margin-left: 0; }
.split-layout.left-image .cluster-base { margin-left: auto; }

/* Overlay 使用物理层级进行空间穿插 */
.cluster-float { 
    position: absolute; 
    box-shadow: 0 60px 120px -20px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,0.1); 
    z-index: 10; 
}
.overlay-bottom-right { width: 50%; bottom: -10%; right: 0; }

/* 两图平铺并列 */
.dual-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1400px; }

/* 个别背景强光渲染 */
.bloom-effect::after {
    content: ''; position: absolute; inset: 0; background: rgba(58, 16, 229, 0.1); mix-blend-mode: screen; pointer-events: none;
}


/* =======================================
   Bouttons CTA
   ======================================= */
.call-to-action { display: flex; gap: 24px; justify-content: center; margin-top: 60px; }
.btn { padding: 18px 48px; border-radius: 100px; font-size: 17px; font-weight: 600; text-decoration: none; transition: all 0.3s; }
.btn-primary { background: #fff; color: #000; box-shadow: 0 8px 30px rgba(255,255,255,0.2); }
.btn-primary:hover { transform: scale(1.04); background: #f0f0f0; }
.btn-secondary { color: #fff; border: 1px solid var(--color-glass-border); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

.social-links { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; }
.social-icon { color: var(--color-text-body); width: 32px; height: 32px; transition: color 0.3s, transform 0.3s var(--curve-smooth); }
.social-icon:hover { color: #fff; transform: scale(1.15) translateY(-2px); }

footer { text-align: center; padding: 80px; font-size: 14px; color: #666; border-top: 1px solid var(--color-glass-border); }

/* =======================================
   极其克制的 Fade Up 缓动进出场动画
   ======================================= */
.fade-up { opacity: 0; transform: translateY(80px); transition: opacity 1.4s var(--curve-smooth), transform 1.4s var(--curve-smooth); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay { transition-delay: 0.15s; }
.fast { transition-duration: 0.8s; transform: translateY(20px); }
.slow { transition-duration: 1.8s; transform: translateY(100px); transition-delay: 0.1s; }


/* =======================================
   移动端响应式网格断点
   ======================================= */
@media (max-width: 1000px) {
    .apple-section { padding: 100px 0; }
    .split-layout { flex-direction: column; padding: 100px 5%; text-align: center; gap: 80px; }
    .split-layout .text-content, .split-layout .visual-content { flex: auto; max-width: 100%;}
    h2 { font-size: 44px; } p { font-size: 20px; } .crystal-text { font-size: 56px; }
    .dual-showcase { grid-template-columns: 1fr; }
    .cluster-base { width: 90%; margin: 0 auto;}
    .cluster-float.overlay-bottom-right { width: 70%; right: 0; bottom: -5%; }
}