:root{--bg:#030810;--crystal:#00d4c8;--crystal-dim:#007a73;--purple:#8b5cf6;--text:#cce4f0;--text-dim:#5a7a8a;--card-bg:rgba(0,20,35,0.7);}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden;}
#particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;}
#navbar{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;padding:0 48px;z-index:200;background:rgba(3,8,16,0.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,212,200,0.06);}
.nav-logo{font-size:18px;font-weight:300;letter-spacing:6px;color:var(--crystal);text-shadow:0 0 20px rgba(0,212,200,0.4);text-decoration:none;flex-shrink:0;}
.nav-links{display:flex;gap:32px;list-style:none;margin-left:auto;}
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:12px;letter-spacing:2px;transition:color 0.3s;position:relative;padding-bottom:4px;}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--crystal);transition:width 0.3s;}
.nav-links a:hover{color:var(--crystal);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--crystal);}
.nav-links a.active::after{width:100%;}
#nav-music{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:0 24px;border-left:1px solid rgba(0,212,200,0.1);border-right:1px solid rgba(0,212,200,0.1);white-space:nowrap;}
#musicToggle{background:none;border:1px solid rgba(0,212,200,0.3);color:var(--crystal);padding:5px 12px;border-radius:16px;font-size:10px;letter-spacing:2px;cursor:pointer;transition:all 0.2s;}
#musicToggle:hover{border-color:var(--crystal);}
#musicTitle{font-size:10px;letter-spacing:1px;color:var(--text-dim);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hero{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(0,212,200,0.07) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 30% 60%,rgba(139,92,246,0.04) 0%,transparent 60%),linear-gradient(180deg,#030810 0%,#020608 100%);}
.hero-crystal{position:absolute;width:700px;height:700px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.07;background:radial-gradient(circle,var(--crystal) 0%,transparent 70%);filter:blur(60px);animation:cp 6s ease-in-out infinite;}
@keyframes cp{0%,100%{opacity:0.07;transform:translate(-50%,-50%) scale(1)}50%{opacity:0.14;transform:translate(-50%,-50%) scale(1.1)}}
.hero-content{position:relative;text-align:center;z-index:2;}
.hero-sub{font-size:11px;letter-spacing:12px;color:var(--crystal);opacity:0;animation:fu 1s ease 0.3s forwards;margin-bottom:20px;}
.hero-title{font-size:clamp(40px,10vw,96px);font-weight:200;letter-spacing:16px;color:#fff;opacity:0;animation:fu 1.2s ease 0.6s forwards;text-shadow:0 0 60px rgba(0,212,200,0.3);}
.hero-title span{color:var(--crystal);text-shadow:0 0 40px var(--crystal);}
.hero-en{font-size:13px;letter-spacing:8px;color:var(--text-dim);margin-top:16px;opacity:0;animation:fu 1s ease 1s forwards;}
.hero-quote{max-width:500px;margin:32px auto 0;font-size:14px;line-height:2;color:var(--text-dim);border-left:1px solid var(--crystal-dim);padding-left:24px;text-align:left;font-style:italic;opacity:0;animation:fu 1s ease 1.4s forwards;}
.scroll-hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fu 1s ease 1.8s forwards;}
.scroll-hint span{font-size:10px;letter-spacing:3px;color:var(--text-dim);}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--crystal),transparent);animation:sd 2s ease infinite;}
@keyframes sd{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fu{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.divider{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(0,212,200,0.15),transparent);}
.section{position:relative;z-index:1;padding:120px 48px;max-width:1200px;margin:0 auto;}
.section-label{font-size:10px;letter-spacing:6px;color:var(--crystal);margin-bottom:16px;opacity:0.6;}
.section-title{font-size:clamp(28px,5vw,42px);font-weight:200;letter-spacing:6px;color:#fff;margin-bottom:56px;}
.section-title.center{text-align:center;}
#quotes{position:relative;z-index:1;padding:120px 48px;text-align:center;}
.quote-glow{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(0,212,200,0.05) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}
.quote-text{font-size:clamp(20px,3vw,28px);font-weight:200;line-height:2;color:#fff;max-width:800px;margin:0 auto 32px;font-style:italic;}
.quote-author{font-size:12px;letter-spacing:4px;color:var(--crystal);opacity:0.7;}
footer{text-align:center;padding:60px 48px;font-size:11px;letter-spacing:3px;color:var(--text-dim);border-top:1px solid rgba(0,212,200,0.05);position:relative;z-index:1;}
footer span{color:var(--crystal);}
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media(max-width:900px){#navbar{padding:0 24px;flex-wrap:wrap}.nav-links{gap:16px;font-size:11px}.section{padding:80px 24px}#quotes{padding:80px 24px}#nav-music{width:100%;padding:12px 0;border-left:none;border-right:none;border-top:1px solid rgba(0,212,200,0.06);margin-left:0;justify-content:center}}