*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#18183a;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:#fff;overflow-x:hidden}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}#bg canvas{width:100%;height:100%}
.wrap{position:relative;z-index:2}

/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative}
#hero .inner{opacity:0;animation:fu .8s .3s both}
#hero .tag{font-size:11px;letter-spacing:5px;color:rgba(167,139,250,.3);margin-bottom:16px}
#hero h1{font-size:clamp(48px,8vw,110px);font-weight:200;letter-spacing:-.03em;line-height:.85;margin-bottom:8px}
#hero h1 .gr{background:linear-gradient(135deg,#fff 20%,#a78bfa 50%,#22d3ee 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#hero .sub{font-size:clamp(14px,1.2vw,22px);font-weight:200;letter-spacing:12px;color:rgba(255,255,255,.15);margin-top:16px}
#hero .stats{display:flex;gap:60px;margin-top:32px;justify-content:center;opacity:0;animation:fu .8s .6s both}
#hero .stats>div{text-align:center}
#hero .stats .n{font-size:30px;font-weight:200;color:rgba(167,139,250,.5)}
#hero .stats .l{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.15)}
#hero .sh{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);opacity:0;animation:fu .8s 1.5s both;pointer-events:none}
#hero .sh span{font-size:9px;letter-spacing:4px;color:rgba(255,255,255,.08)}
#hero .sh .bar{width:1px;height:20px;margin:6px auto;background:linear-gradient(#a78bfa,transparent);animation:br 2s infinite}

/* 通用 */
.sec{padding:80px 48px;max-width:1100px;margin:0 auto;position:relative}
@media(max-width:768px){.sec{padding:60px 24px}}
.sec .num{font-size:11px;letter-spacing:4px;margin-bottom:12px;display:block}
.sec .tt{font-size:clamp(24px,3vw,40px);font-weight:200;letter-spacing:-.02em;line-height:1.2;margin-bottom:20px}
.fu{opacity:0;transform:translateY(24px);transition:all .9s cubic-bezier(.16,1,.3,1)}
.fu.vi{opacity:1;transform:translateY(0)}

/* 区1 - 紫 */
#s1 .num{color:rgba(167,139,250,.2)}#s1 .tt{background:linear-gradient(135deg,rgba(255,255,255,.7),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s1 .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:768px){#s1 .grid{grid-template-columns:1fr}}
#s1 .c{background:rgba(255,255,255,.012);border:1px solid rgba(167,139,250,.04);border-radius:16px;padding:28px;transition:border-color .4s}
#s1 .c:hover{border-color:rgba(167,139,250,.1)}
#s1 .c .l{font-size:9px;letter-spacing:2px;color:rgba(167,139,250,.15);display:block;margin-bottom:6px}
#s1 .c .v{font-size:14px;color:rgba(255,255,255,.45);line-height:1.7}
#s1 .c .v em{color:rgba(167,139,250,.3);font-style:normal}

/* 区2 - 青 */
#s2{text-align:center}
#s2 .num{color:rgba(6,182,212,.2)}#s2 .tt{background:linear-gradient(135deg,rgba(255,255,255,.7),#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s2 .ng{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
#s2 .ng>div{text-align:center;padding:32px 40px;border-radius:16px;border:1px solid rgba(6,182,212,.04);background:rgba(6,182,212,.008);flex:1;min-width:140px}
#s2 .ng .b{font-size:48px;font-weight:200;background:linear-gradient(135deg,#22d3ee,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s2 .ng .lb{font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.12);margin-top:4px}

/* 区3 - 粉 */
#s3 .num{color:rgba(244,114,182,.2)}#s3 .tt{background:linear-gradient(135deg,rgba(255,255,255,.7),#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s3 .in{display:flex;gap:60px;align-items:center}@media(max-width:768px){#s3 .in{flex-direction:column;gap:30px}}
#s3 .col{flex:1}
#s3 .row{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.35);margin-bottom:6px}
#s3 .row .p{color:rgba(244,114,182,.3)}
#s3 .tr{height:3px;background:rgba(255,255,255,.02);border-radius:3px;margin-bottom:20px;overflow:hidden}
#s3 .tr .fi{height:100%;border-radius:3px;background:linear-gradient(90deg,#f472b6,#a78bfa);width:0;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
#s3.vi .tr .fi{width:var(--w)}
#s3 .tc{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-content:center}
#s3 .tc span{font-size:10px;letter-spacing:1px;color:rgba(244,114,182,.25);padding:6px 16px;border:1px solid rgba(244,114,182,.04);border-radius:14px;transition:all .3s}
#s3 .tc span:hover{color:rgba(244,114,182,.5);border-color:rgba(244,114,182,.1)}

/* 项目区 */
.ps{padding:80px 48px}@media(max-width:768px){.ps{padding:60px 24px}}
.ps:nth-of-type(4) .in{display:flex;gap:60px;align-items:center;flex-direction:row}
.ps:nth-of-type(5) .in{display:flex;gap:60px;align-items:center;flex-direction:row-reverse}
.ps:nth-of-type(6) .in{display:flex;gap:60px;align-items:center;flex-direction:row}
@media(max-width:768px){.ps .in{flex-direction:column!important;gap:30px}}
.ps .tx{flex:1.2}
.ps .num{font-size:11px;letter-spacing:4px;margin-bottom:10px;display:block}
.ps .tt{font-size:clamp(20px,2.5vw,34px);font-weight:200;letter-spacing:-.02em;line-height:1.25;margin-bottom:14px}
.ps .desc{font-size:13px;color:rgba(255,255,255,.4);line-height:2;margin-bottom:14px}
.ps .tag{display:inline-block;font-size:9px;letter-spacing:1px;padding:3px 10px;border-radius:10px;margin-right:6px;margin-bottom:4px;transition:all .3s}
.ps .sd{flex:.8;display:flex;align-items:center;justify-content:center}
.ps .sd .bk{width:100%;max-width:320px;aspect-ratio:1;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;border:1px solid rgba(255,255,255,.012)}
.ps .sd .bg{font-size:clamp(40px,5vw,70px);font-weight:200;letter-spacing:-.03em;margin-bottom:4px}
.ps .sd .sm{font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.05);margin-bottom:10px}
.ps .sd .ln{width:32px;height:1px;margin:10px 0}
.ps .sd .if{font-size:11px;color:rgba(255,255,255,.12);line-height:1.8;text-align:center}

#s4 .num{color:rgba(167,139,250,.2)}#s4 .tt{background:linear-gradient(135deg,rgba(255,255,255,.7),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s4 .sd .bk{background:radial-gradient(circle at 30% 30%,rgba(167,139,250,.04),transparent);border-color:rgba(167,139,250,.03)}
#s4 .sd .bg{background:linear-gradient(135deg,#a78bfa,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s4 .sd .ln{background:rgba(167,139,250,.08)}#s4 .tag{color:rgba(167,139,250,.25);border:1px solid rgba(167,139,250,.04)}

#s5 .num{color:rgba(6,182,212,.2)}#s5 .tt{background:linear-gradient(135deg,rgba(255,255,255,.7),#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s5 .sd .bk{background:radial-gradient(circle at 70% 30%,rgba(6,182,212,.04),transparent);border-color:rgba(6,182,212,.03)}
#s5 .sd .bg{background:linear-gradient(135deg,#22d3ee,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s5 .sd .ln{background:rgba(6,182,212,.08)}#s5 .tag{color:rgba(6,182,212,.25);border:1px solid rgba(6,182,212,.04)}

#s6 .num{color:rgba(244,114,182,.2)}#s6 .tt{background:linear-gradient(135deg,rgba(255,255,255,.7),#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s6 .sd .bk{background:radial-gradient(circle at 30% 70%,rgba(244,114,182,.04),transparent);border-color:rgba(244,114,182,.03)}
#s6 .sd .bg{background:linear-gradient(135deg,#f472b6,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s6 .sd .ln{background:rgba(244,114,182,.08)}#s6 .tag{color:rgba(244,114,182,.25);border:1px solid rgba(244,114,182,.04)}

/* 联系 */
#sc{padding:80px 48px;text-align:center}
#sc .num{color:rgba(167,139,250,.15);margin-bottom:16px}
#sc .tt{font-size:clamp(28px,3.5vw,48px);font-weight:200;letter-spacing:-.02em;background:linear-gradient(135deg,rgba(255,255,255,.7),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:24px}
#sc .cl{font-size:15px;font-weight:200;color:rgba(255,255,255,.4);margin-bottom:8px;letter-spacing:1px}
#sc .cl a{color:rgba(167,139,250,.3);text-decoration:none}

#ft{text-align:center;padding:40px 0 80px}#ft span{font-size:8px;letter-spacing:2px;color:rgba(255,255,255,.02)}

.mb{position:fixed;bottom:0;left:0;right:0;z-index:20;height:36px;display:flex;align-items:center;justify-content:center;gap:18px;background:rgba(24,24,58,.88);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.02)}
.mb .b{font-size:9px;color:rgba(255,255,255,.08);cursor:pointer}
.mb .tr{font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.03)}
.mb .tr em{color:rgba(167,139,250,.15);font-style:normal}

@keyframes fu{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes br{0%,100%{height:20px;opacity:.3}50%{height:30px;opacity:.7}}