/* =========================================
   1. 全局设置 (Global)
   ========================================= */
:root {
    --primary-blue: #0091EA;
    --primary-green: #00C853;
    --accent-orange: #f56217;
    --dark-bg: #0f172a;
    --text-main: #1e293b;
    --text-light: #64748b;
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.95);
    --grad-brand: linear-gradient(135deg, #00C853 0%, #0091EA 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; }

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* 禁用原生滚动，由容器接管 */
    color: var(--text-main);
    background-color: #f8fafc;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* =========================================
   2. 导航栏 (一级菜单)
   ========================================= */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
    box-shadow: 0 1px 15px rgba(0,0,0,0.05);
}

.nav-logo { cursor: pointer; display: flex; align-items: center; margin-right: 40px; }
.nav-logo svg { height: 60px; width: auto; }

nav { height: 100%; flex: 1; }
nav > ul { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
    align-items: center;
    gap: 80px;
    margin: 0;
    padding: 0;
    padding-right: 300px;
}

nav > ul > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav > ul > li > a {
    display: block;
    padding: 12px 15px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
    white-space: nowrap;
    text-align: center;
}

nav > ul > li:hover > a, nav > ul > li.active > a {
    color: var(--primary-blue);
}
nav > ul > li::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--grad-brand);
    transition: 0.3s;
}
nav > ul > li:hover::after, nav > ul > li.active::after { width: 100%; }

/* =========================================
   3. 首页全屏滚动容器 (Scroll Snap)
   ========================================= */
.snap-container {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* 隐藏滚动条但保持功能 */
.snap-container::-webkit-scrollbar { width: 0; }

.snap-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 确保内容不被导航栏遮挡 */
    padding-top: 80px;
}

/* 普通页面容器 (非全屏滚动，用于产品详情) */
.normal-page {
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    padding-top: 80px;
    animation: fadeIn 0.5s ease;
}

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

/* =========================================
/* 4. 首页 - 屏1 (Hero)
   ========================================= */
.hero {
    /* 核心布局：启用 Flexbox 实现左右平行 */
    display: flex;
    flex-direction: row;       /* 明确方向为横向 */
    align-items: center;       /* 垂直方向居中对齐 */
    justify-content: space-between; /* 两端对齐 */
    
    /* 间距控制：替代原子元素的 padding-right，更现代 */
    gap: 4rem;                 
    padding: 0 8%;
    background: linear-gradient(to bottom, #ffffff, #f0f9ff);
    height: 100vh;
    overflow: hidden;
    position: relative;        /* 确保子元素定位参照 */
}

.hero-text {
    /* 宽度控制：占据剩余空间的 55% */
    flex: 0 0 60%;             
    max-width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    /* padding-right: 50px; -> 已移除，由父级 gap 接管 */
    z-index: 2;                /* 确保文字在视觉层之上 */
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #0f172a;
}

.hero-text h1 span {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p { 
    font-size: 1.3rem; 
    color: var(--text-light); 
    margin-bottom: 40px; 
    max-width: 90%; /* 防止文字太长撞到右侧视觉区 */
}

/* 3D 动态视觉 */
.hero-visual { 
    /* 宽度控制：占据剩余空间的 45% */
    flex: 0 0 40%;
    max-width: 120%;
    height: 120%; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 1;
}

/* 视觉元素动画保持不变 */
.ai-core { 
    width: 180px; 
    height: 180px; 
    background: var(--grad-brand); 
    border-radius: 50%; 
    position: absolute; 
    filter: blur(1px); 
    animation: pulse 4s infinite; 
}

/* 1. 基础轨道样式 (保持不变) */
.orbit-ring { 
    position: absolute; 
    border: 1px solid rgba(0,145,234,0.2); 
    border-radius: 50%; 
    animation: rotate 20s linear infinite; 
    /* 确保伪元素定位参考该容器 */
    display: flex; 
    justify-content: center;
}

/* 2. 新增：通用的“光点”样式 */
.orbit-ring::before {
    content: '';
    position: absolute;
    width: 10px;      /* 光点大小 */
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    
    /* 定位到圆环的顶部边缘 */
    top: -5px;        /* 负值是为了让光点圆心对准线条 */
    
    /* 添加发光效果 */
    box-shadow: 0 0 15px 2px rgba(0, 145, 234, 0.8);
}

/* 3. 针对 r1 (内圈) 的调整 */
.r1 { 
    width: 300px; 
    height: 300px; 
    border-width: 2px; 
    border-style: dashed; 
}

/* 4. 针对 r2 (外圈) 的调整 */
.r2 { 
    width: 450px; 
    height: 450px; 
    animation-direction: reverse; /* 反向旋转 */
    border-color: rgba(0,200,83,0.2); 
}

/* 5. 针对 r3 (最外圈) 的调整 */
.r3 { 
    width: 600px; 
    height: 600px; 
    animation-direction: reverse; /* 反向旋转 */
    border-color: rgba(34, 54, 198, 0.2); 
}

/* 给 r2 的光点换个颜色和位置，增加层次感 */
.r2::before {
    background: #fff;
    box-shadow: 0 0 15px 2px rgba(0, 200, 83, 0.8); /* 绿色荧光 */
    
    /* 让外圈的光点出现在底部，而不是顶部，错落有致 */
    top: auto; 
    bottom: -5px; 
    
    /* 如果想要两个光点，可以再加一个 ::after */
}

@keyframes pulse { 
    0%,100%{ transform:scale(1); } 
    50%{ transform:scale(1.05); box-shadow: 0 0 50px rgba(0,145,234,0.5); } 
}
@keyframes rotate { 
    to { transform: rotate(360deg); } 
}

/* =========================================
   5. 首页 - 屏2 (业务价值)
   ========================================= */
.business-section {
    background: white;
    padding: 0 8%;
    align-items: center;
}

.section-title { text-align: center; margin-bottom: 5vh; }
.section-title h2 { font-size: 2.5rem; margin-bottom: 10px; }
.section-title p { color: var(--text-light); font-size: 1.1rem; }

.card-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
    height: 40vh; /* 占屏幕高度的55% */
}

.feature-card {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.feature-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.feature-card:hover img { transform: scale(1.1); }

.feature-card .overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 80%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 30px; color: white;
}

.feature-card h3 { font-size: 1.6rem; margin-bottom: 10px; border-left: 4px solid var(--primary-green); padding-left: 15px; }
.feature-card p { font-size: 0.8rem; opacity: 0.9; font-weight: 300; line-height: 1.5; }

/* =========================================
   6. 首页 - 屏3 (联系 & Footer)
   ========================================= */
.contact-screen {
    background: var(--dark-bg);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 撑开布局，让Footer在底部 */
}

.contact-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    background: radial-gradient(circle at 50% 30%, rgba(0,145,234,0.1), transparent 60%);
}

.contact-box {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    padding: 40px 50px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    width: 100%;
    max-width: 600px;
}

.contact-box h2 { font-size: 2rem; margin-bottom: 15px; }
.contact-box p { color: #94a3b8; margin-bottom: 30px; }

.form-input {
    width: 100%; padding: 14px; margin-bottom: 15px;
    border-radius: 8px; border: 1px solid #475569;
    background: rgba(0,0,0,0.3); color: white;
    font-size: 1rem;
}
.form-btn {
    width: 100%; padding: 12px 10px; background: var(--grad-brand);
    border: none; border-radius: 8px; color: white; font-weight: bold; font-size: 1.1rem;
    cursor: pointer; transition: 0.3s;
}
.form-btn:hover { box-shadow: 0 0 20px rgba(0,200,83,0.4); }

/* 页脚 */
footer {
    padding: 20px 0;
    background: #020617;
    text-align: center;
    border-top: 1px solid #1e293b;
    font-size: 0.85rem;
    color: #64748b;
}
footer a { color: #94a3b8; border-bottom: 1px dotted #64748b; }
footer a:hover { color: var(--primary-blue); border-bottom: 1px solid var(--primary-blue); }

/* =========================================
   7. 产品详情页 (Rich Content)
   ========================================= */
.product-banner {
    height: 40vh;
    background: #0f172a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.product-banner::after {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDQwTDQwIDBIMHY0MHpNNDAgNDBWMEg0MHY0MHoiIGZpbGw9IiMyNjMyMzgiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9nPjwvc3ZnPg==');
}
.product-banner h1 { font-size: 3rem; z-index: 2; margin-bottom: 10px; }
.product-banner p { font-size: 1.2rem; opacity: 0.8; z-index: 2; max-width: 700px; }

.content-wrapper { padding: 80px 15%; background: white; min-height: 60vh; }
.rich-block { margin-bottom: 80px; }
.rich-block h2 { font-size: 2rem; color: var(--text-main); margin-bottom: 30px; border-left: 5px solid var(--primary-blue); padding-left: 20px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.feature-item { padding: 30px; background: #f8fafc; border-radius: 12px; transition: 0.3s; }
.feature-item:hover { background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateY(-5px); }
.feature-item h4 { font-size: 1.2rem; margin-bottom: 10px; color: var(--primary-blue); }
.feature-item p { font-size: 0.95rem; color: var(--text-light); }