@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* --- 保持配色不变 --- */
    --aurora-blue: #2563eb;
    --aurora-purple: #7c3aed;
    --aurora-cyan: #06b6d4;
    --grad-aurora: linear-gradient(135deg, var(--aurora-blue), var(--aurora-purple), var(--aurora-cyan));
    
    --bg-main: #ffffff;
    --text-dark: #0f172a;
    --text-gray: #475569;
    
    /* --- 新增：磨砂玻璃变量 --- */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    --blur-amt: blur(12px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif; background-color: var(--bg-main); color: var(--text-dark); line-height: 1.6; overflow-x: hidden;
    /* 页面整体背景光 */
    background-image: 
        radial-gradient(at 10% 10%, rgba(37, 99, 235, 0.1) 0px, transparent 50%),
        radial-gradient(at 90% 90%, rgba(124, 58, 237, 0.1) 0px, transparent 50%);
    background-attachment: fixed;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* --- 通用磨砂玻璃类 --- */
.glass {
    background: var(--glass-bg); backdrop-filter: var(--blur-amt); -webkit-backdrop-filter: var(--blur-amt);
    border: var(--glass-border); box-shadow: var(--glass-shadow);
}

/* --- 导航栏 (磨砂) --- */
.navbar {
    position: fixed; top: 0; width: 100%; padding: 12px 0; z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.nav-box { display: flex; justify-content: space-between; align-items: center; }
.logo-img { height: 38px; width: auto; display: block; }
.nav-links a {
    color: var(--text-dark); text-decoration: none; margin-left: 32px; font-size: 15px; font-weight: 600; transition: 0.3s;
}
.nav-links a:hover { color: var(--aurora-blue); }
.btn-aurora {
    padding: 10px 24px; background: var(--grad-aurora); color: #fff !important; border-radius: 30px; transition: 0.3s; font-weight: 600; font-size: 15px;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}
.btn-aurora:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* --- Hero 区域 (新构思) --- */
.hero {
    padding: 160px 0 140px; position: relative; overflow: hidden;
}
/* 背景光斑动画 */
.hero-aurora-blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; z-index: -1;
    animation: blobFloat 20s infinite alternate;
}
.blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: var(--aurora-blue); }
.blob-2 { bottom: -10%; right: -10%; width: 600px; height: 600px; background: var(--aurora-purple); animation-delay: -5s; }
@keyframes blobFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 50px) scale(1.1); } }

.hero-flex { display: flex; align-items: center; justify-content: space-between; gap: 70px; }
.hero-text { flex: 1; max-width: 600px; }
.hero-badge {
    display: inline-block; padding: 6px 16px; color: var(--aurora-blue); font-size: 13px; font-weight: 700; border-radius: 30px; margin-bottom: 25px; letter-spacing: 1px;
}
.hero h1 { font-size: 64px; line-height: 1.15; font-weight: 800; margin-bottom: 25px; color: var(--text-dark); letter-spacing: -1px; }
.text-gradient { background: var(--grad-aurora); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero .desc { font-size: 18px; color: var(--text-gray); margin-bottom: 45px; max-width: 520px; }
.hero-btns { display: flex; gap: 16px; }
.btn-primary-aurora {
    padding: 14px 36px; background: var(--grad-aurora); color: #fff; border-radius: 30px; text-decoration: none; font-weight: 700; transition: 0.3s;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.5);
}
.btn-primary-aurora:hover { transform: translateY(-3px); filter: brightness(1.1); }
.btn-secondary {
    padding: 14px 36px; color: var(--text-dark); border-radius: 30px; text-decoration: none; font-weight: 700; transition: 0.3s;
}
.btn-secondary:hover { border-color: var(--aurora-purple); color: var(--aurora-purple); }

/* Hero 右侧视觉：玻璃面板包裹图片 */
.hero-visual { flex: 1; display: flex; justify-content: center; perspective: 1000px; }
.glass-panel-hero {
    position: relative; padding: 20px; border-radius: 30px;
    background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.hero-img-content {
    max-width: 100%; height: auto; max-height: 450px; object-fit: contain; border-radius: 20px;
    position: relative; z-index: 2; mix-blend-mode: multiply; /* 让图片白底透明 */
}
.hero-ring-svg {
    position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; z-index: 1; opacity: 0.6;
}

/* --- 统计条 (悬浮玻璃) --- */
.stats-section { margin-top: -40px; position: relative; z-index: 10; padding-bottom: 60px; }
.stats-glass-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
    padding: 30px 0; border-radius: 20px;
}
.stat-item h3 { font-size: 38px; font-weight: 800; margin-bottom: 5px; background: var(--grad-aurora); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-item p { color: var(--text-dark); font-size: 15px; font-weight: 600; }

/* --- 核心服务 (琉璃方块) --- */
.section-padding { padding: 100px 0; }
.section-title { text-align: center; margin-bottom: 70px; }
.section-title h2 { font-size: 36px; font-weight: 800; color: var(--text-dark); margin-bottom: 15px; }
.section-title p { color: var(--text-gray); font-size: 16px; }

.glass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.glass-tile {
    padding: 40px 30px; border-radius: 24px; background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: 0.4s; position: relative; overflow: hidden;
}
.glass-tile::before { /* 顶部光条 */
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--grad-aurora); opacity: 0; transition: 0.4s;
}
.glass-tile:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.8); box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
.glass-tile:hover::before { opacity: 1; }

/* SVG 图标容器 */
.svg-icon-box {
    width: 64px; height: 64px; margin-bottom: 25px; transition: 0.3s;
}
.glass-tile:hover .svg-icon-box { transform: scale(1.1); }
/* SVG 颜色填充 */
.blue-accent svg { stroke: var(--aurora-blue); } .purple-accent svg { stroke: var(--aurora-purple); } .cyan-accent svg { stroke: var(--aurora-cyan); }

.glass-tile h3 { font-size: 22px; font-weight: 700; margin-bottom: 15px; }
.glass-tile p { color: var(--text-gray); font-size: 15px; line-height: 1.6; }

/* --- 为什么选择我们 (交错玻璃板) --- */
.bg-pale-aurora {
    background-image: linear-gradient(180deg, transparent 0%, rgba(37, 99, 235, 0.03) 100%);
}
.why-glass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.why-glass-box {
    padding: 50px 40px; border-radius: 30px; display: flex; flex-direction: column; justify-content: center;
}
.why-glass-box:nth-child(even) { transform: translateY(40px); } /* 交错布局 */

.why-svg-wrap {
    width: 70px; height: 70px; margin-bottom: 30px;
}
.why-svg-wrap svg { stroke: url(#auroraGradGlobal); stroke-width: 1.5; } /* 使用全局渐变 */

.why-glass-box h4 { font-size: 24px; font-weight: 700; margin-bottom: 15px; }
.why-glass-box p { color: var(--text-gray); font-size: 16px; }

/* --- 全局动画定义 --- */
.floating { animation: float 6s ease-in-out infinite; }
.floating-slow { animation: float 8s ease-in-out infinite; }
.floating-slower { animation: float 10s ease-in-out infinite; }
.rotating { animation: rotate 20s linear infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes rotate { to { transform: rotate(360deg); } }

/* SVG 内部动画 */
.svg-anim-bounce { animation: svgBounce 2s infinite; }
.svg-anim-shake { animation: svgShake 3s ease-in-out infinite; transform-origin: center; }
.svg-anim-pulse { animation: svgPulse 2s infinite; transform-origin: center; }
.svg-anim-spin-slow { animation: rotate 10s linear infinite; transform-origin: center; }
.svg-anim-launch { animation: svgLaunch 3s ease-in-out infinite; }
.svg-anim-pulse-slow { animation: svgPulse 4s infinite; transform-origin: center; }
.svg-anim-swing { animation: svgSwing 3s ease-in-out infinite; transform-origin: top center; }

@keyframes svgBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes svgShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } }
@keyframes svgPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes svgLaunch { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(5px, -10px); } }
@keyframes svgSwing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }

/* --- 页脚 --- */
footer { padding: 80px 0 40px; background: transparent; text-align: center; border-top: 1px solid rgba(255,255,255,0.5); }
.footer-logo-img { height: 40px; margin: 0 auto 25px; display: block; }
.footer-info { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; font-size: 15px; font-weight: 500; }
.sep { opacity: 0.3; }
.footer-copyright { padding-top: 30px; color: var(--text-gray); font-size: 14px; border-top: 1px solid rgba(0,0,0,0.05); }
.icp { color: var(--text-gray); text-decoration: none; }

/* --- 定义全局SVG渐变 (Trick) --- */
/* 在CSS中无法直接定义SVG渐变，这里通过一个隐藏的SVG来实现 */
body::after {
    content: ''; display: block; height: 0; width: 0; overflow: hidden;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="auroraGradGlobal" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#2563eb"/><stop offset="50%" style="stop-color:#7c3aed"/><stop offset="100%" style="stop-color:#06b6d4"/></linearGradient></defs></svg>');
}

@media (max-width: 900px) {
    .hero-flex { flex-direction: column; text-align: center; }
    .hero-visual { margin-top: 50px; transform: scale(0.9); }
    .stats-glass-bar { grid-template-columns: 1fr 1fr; gap: 20px; }
    .why-glass-grid { grid-template-columns: 1fr; }
    .why-glass-box:nth-child(even) { transform: translateY(0); }
}