:root{--bg:#0b0f1c;--bg2:#0f1424;--text:#e9eefc;--muted:#a7b0c7;--primary:#6aa7ff;--secondary:#7b4dff;--btn-shadow:0 8px 28px rgba(74,141,255,.35);--radius:16px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% 10%,rgba(61,90,254,.15),transparent),radial-gradient(800px 400px at 85% 80%,rgba(124,77,255,.18),transparent),linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;overflow-x:hidden}
#bgCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
main{position:relative;z-index:1}
.hero{min-height:100vh;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding:64px clamp(32px,6vw,96px);text-align: left;background-color: transparent;}
.title{font-size:64px;line-height:1.05;margin:0 0 12px;font-weight:800;letter-spacing:.5px}
.title-ai{color:#8ab4ff}
.title-highlight{background:linear-gradient(90deg,#6aa7ff,#7b4dff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:44px;margin:0 0 16px;color:#fff;font-weight:700}
.desc{margin:0 0 28px;color:var(--muted);font-size:16px;max-width:640px}
.actions{display:flex;gap:18px}
.btn{appearance:none;border:none;cursor:pointer;border-radius:12px;padding:14px 20px;font-size:16px;font-weight:600;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn.primary{background:linear-gradient(135deg,#5c9dff,#7b4dff);color:#fff;box-shadow:var(--btn-shadow)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 34px rgba(74,141,255,.5)}
.btn.secondary{background:rgba(255,255,255,.08);color:#cfe0ff;border:1px solid rgba(255,255,255,.18)}
.btn.secondary:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.btn-icon{display:inline-block;width:18px;height:18px;margin-right:8px;background:url('../images/uploadbtn.svg') center/contain no-repeat;vertical-align:-3px;filter:brightness(1.4)}
.hero-visual{position:relative}
.visual-img{width:100%;border-radius:var(--radius);border:1px solid rgba(138,164,255,.35);box-shadow:0 12px 60px rgba(58,116,255,.35),inset 0 0 0 1px rgba(255,255,255,.05)}
.decor .orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.85}
.orb-1{width:160px;height:160px;right:-30px;top:-20px;background:radial-gradient(closest-side,rgba(124,77,255,.55),rgba(124,77,255,.15) 60%,transparent 70%);animation:float1 9s ease-in-out infinite}
.orb-2{width:220px;height:220px;left:-40px;bottom:-30px;background:radial-gradient(closest-side,rgba(90,157,255,.6),rgba(90,157,255,.18) 60%,transparent 70%);animation:float2 11s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,12px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-12px)}}
.preview{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;border:1px dashed rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;background:rgba(4,8,18,.7);backdrop-filter:blur(2px)}
.preview img{max-width:100%;max-height:100%;object-fit:contain}

.header{background-color: transparent;}
.logo .nav a {color: #fff;}
.dropdown-content{background-color: transparent;}
.vip-tag-box {background: transparent;}
.text-btn {background-color: transparent;}
.footer {background-color: transparent;border-top: 0px solid rgba(255, 255, 255, 0.1);}
.footer p{color: #fff;}
.footer h3 {color: #fff;}
.footer a {color: #fff;}
.footer span {color: #fff;}
/* 响应式 */
@media (max-width:1200px){.title{font-size:56px}.subtitle{font-size:36px}.hero{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.hero{grid-template-columns:1fr;gap:32px;text-align:center}.desc{margin:0 auto 24px}.actions{justify-content:center}}

/* Compare Section */
.compare{padding:40px clamp(24px,6vw,80px);color:#0b0f1c}
.compare-header{max-width:1080px;margin:0 auto 22px;text-align:center}
.compare-title{font-size:32px;line-height:1.2;margin:0 0 16px;font-weight:800;background: linear-gradient(93deg, #a38aff, #4e4dff);background-clip: text;-webkit-text-fill-color: transparent;}
.compare-tabs{display:flex;gap:28px;justify-content:center;align-items:center}
.compare-tabs .tab{font-size:20px;appearance:none;border:none;background:transparent;color:#8ab4ff;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}
.compare-tabs .tab:hover{background:rgba(0,0,0,.06)}
.compare-tabs .tab.active{color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)}

.compare-stage{--split:50%;position:relative;margin:18px auto 0;max-width:1080px;height:520px;border-radius:28px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18);background:#cfd9e6}
.compare-stage .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-stage .img.before{filter:blur(0px) contrast(.92) saturate(.85) brightness(.97)}
.compare-stage .img.after{clip-path:polygon(var(--split) 0, 100% 0, 100% 100%, var(--split) 100%)}

/* 分割线 */
.compare-stage .divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.03)}

/* 拖动控件 */
.handle{position:absolute;left:var(--split);top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:none;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18);cursor:ew-resize;display:flex;align-items:center;justify-content:center;gap:6px}
.handle:active{transform:translate(-50%,-50%) scale(.98)}
.handle .chev{display:inline-block;width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.9}
.handle .chev.left{background-image:url('../images/left.svg')}
.handle .chev.right{background-image:url('../images/right.svg')}

/* 响应式收敛 */
@media (max-width:960px){.compare-stage{height:380px;border-radius:24px}.compare-title{font-size:26px}}
/* 强大功能 */
.features{padding:64px clamp(24px,6vw,80px);color:#e9eefc}
.section-head{text-align:center;max-width:880px;margin:0 auto 32px}
.section-title{font-size:32px;font-weight:800;margin:0 0 10px}
.section-sub{margin:0;color:#a7b0c7;font-size:20px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto}
.feature-card{background:transparent;;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:22px;box-shadow:0 12px 28px rgba(0,0,0,.3);transition:transform .18s ease,box-shadow .18s ease}
.feature-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.36)}
.feat-icon{width:124px;height:124px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;filter:saturate(1.1);margin-left:32%}
.feat-icon img{width:120px;height:120px;border-radius: 15px;}
.feat-title{margin:0 0 8px;font-size:20px;font-weight:700;color:#dce8ff}
.feat-desc{margin:0 0 8px;color:#a7b0c7;font-size:16px;line-height:1.6;min-height:40px}
.feat-link{appearance:none;border:none;background:transparent;color:#6aa7ff;font-weight:700;cursor:pointer;padding:0;font-size: 16px;}

/* 简单三步 */
.steps{background:#0b1222;padding:28px clamp(24px,6vw,80px) 60px;color:#e9eefc}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:980px;margin:0 auto}
.step-item{text-align:center}
.step-badge{--c1:#8f78ff;--c2:#6aa7ff;width:100px;height:100px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--c1),var(--c2));display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.35);position:relative}
.step-badge::after{content:attr(data-index);color:#fff;font-weight:800;font-size: 42px;}
.step-title{margin:6px 0 6px;font-size:22px;font-weight:700}
.step-desc{margin:0;color:#a7b0c7;font-size:18px}

/* 数据统计 */
.stats{background:#0b1222;padding:12px clamp(24px,6vw,80px) 64px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:980px;margin:0 auto}
.stat{text-align:center;color:#9ec1ff}
.stat .num{font-size:32px;font-weight:800;color:#7fb1ff;margin-bottom:6px}
.stat .label{font-size:18px;color:#a7b0c7}

/* 响应式 */
@media (max-width:1040px){.features-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.features-grid{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr}.compare{padding:28px 16px}}
@media (max-width:960px){.compare-stage{height:380px;border-radius:24px}.compare-title{font-size:26px}}