*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-snap-type:y proximity;}
body{
    background:#05070f;
    color:#e8ecf4;
    font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ========== 背景动效层 ========== */
.bg-fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;}
.orb-1{width:560px;height:560px;left:-160px;top:-180px;background:radial-gradient(circle,#00e5ff 0%,transparent 65%);opacity:.5;animation:drift1 18s ease-in-out infinite;}
.orb-2{width:520px;height:520px;right:-180px;top:26%;background:radial-gradient(circle,#7c4dff 0%,transparent 65%);opacity:.45;animation:drift2 22s ease-in-out infinite;}
.orb-3{width:480px;height:480px;left:28%;bottom:-220px;background:radial-gradient(circle,#ff3d9a 0%,transparent 65%);opacity:.32;animation:drift3 20s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(90px,70px) scale(1.12);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-80px,50px) scale(1.08);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(70px,-60px) scale(1.1);}}
.grid-overlay{position:absolute;inset:0;
    background-image:linear-gradient(rgba(120,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.05) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(ellipse 85% 62% at 50% 0%,#000 25%,transparent 72%);
    mask-image:radial-gradient(ellipse 85% 62% at 50% 0%,#000 25%,transparent 72%);}

/* ========== 通用 ========== */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.reveal{opacity:1;}
.js .reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(5px);transition:opacity .7s ease,transform .7s ease,filter .7s ease;}
.js .reveal.in{opacity:1;transform:none;filter:blur(0);}

/* ========== 首屏 ========== */
.hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 20px 46px;overflow:hidden;}
.scanline{position:absolute;left:0;right:0;height:140px;background:linear-gradient(180deg,transparent,rgba(0,229,255,.07),transparent);pointer-events:none;animation:scan 7s linear infinite;}
@keyframes scan{0%{top:-20%;}100%{top:115%;}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border:1px solid rgba(0,229,255,.4);border-radius:30px;font-size:13px;letter-spacing:4px;color:#7fdfff;background:rgba(0,229,255,.05);margin-bottom:30px;animation:heroIn .9s ease both;}
.hero-badge i{width:7px;height:7px;border-radius:50%;background:#00e5ff;box-shadow:0 0 12px #00e5ff;animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.hero-title{font-size:clamp(40px,7vw,76px);font-weight:800;letter-spacing:3px;line-height:1.18;animation:heroIn 1s .12s ease both;}
.grad{background:linear-gradient(90deg,#00e5ff,#7c4dff,#ff3d9a,#00e5ff);background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 8s linear infinite;}
@keyframes gradShift{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}
.hero-sub{max-width:660px;margin:26px auto 0;font-size:clamp(15px,2vw,18px);color:#9aa7c0;line-height:1.9;animation:heroIn 1s .24s ease both;}
.hero-sub em{font-style:normal;color:#00e5ff;font-weight:600;}
@keyframes heroIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
.hero-actions{margin-top:44px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;animation:heroIn 1s .36s ease both;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 40px;border-radius:40px;font-size:16px;font-weight:600;transition:.35s;cursor:pointer;}
.btn-primary{background:linear-gradient(135deg,#00e5ff,#7c4dff);color:#05070f;box-shadow:0 10px 34px rgba(0,229,255,.35);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(124,77,255,.5);}
.btn-ghost{border:1px solid rgba(255,255,255,.25);color:#e8ecf4;}
.btn-ghosts{border:1px solid rgba(255,255,255,.25);color:#070707;}
.btn-ghosts:hover{border-color:#00e5ff;color:#00e5ff;background:rgba(0,229,255,.06);transform:translateY(-3px);}
.btn-ghost:hover{border-color:#00e5ff;color:#00e5ff;background:rgba(0,229,255,.06);transform:translateY(-3px);}
.hero-stats{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;width:min(900px,100%);margin-top:64px;padding:30px 12px 0;border-top:1px solid rgba(255,255,255,.09);animation:heroIn 1s .5s ease both;}
.stat{flex:1;min-width:150px;}
.stat b{display:block;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:34px;font-weight:700;color:#00e5ff;text-shadow:0 0 24px rgba(0,229,255,.4);}
.stat span{font-size:13px;color:#8b96ad;letter-spacing:1px;}
.scroll-hint{position:absolute;bottom:22px;left:50%;margin-left:-12px;width:24px;height:40px;border:2px solid rgba(255,255,255,.3);border-radius:14px;animation:heroIn 1s .8s ease both;}
.scroll-hint:after{content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:#00e5ff;animation:wheel 1.8s ease-in-out infinite;}
@keyframes wheel{0%{opacity:1;transform:translateY(0);}60%{opacity:.2;transform:translateY(12px);}100%{opacity:0;transform:translateY(12px);}}

/* ========== 跑马灯 ========== */
.marquee{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);overflow:hidden;padding:15px 0;}
.marquee-track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:marquee 30s linear infinite;}
.marquee span{font-size:14px;color:#7d8aa5;letter-spacing:4px;}
.marquee i{font-style:normal;color:#00e5ff;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ========== 插件矩阵 ========== */
.plugins{position:relative;z-index:1;padding:110px 0 40px;}
.sec-head{text-align:center;margin-bottom:64px;}
.sec-tag{display:inline-block;font-family:ui-monospace,Consolas,monospace;font-size:13px;letter-spacing:6px;color:#00e5ff;border:1px solid rgba(0,229,255,.3);padding:5px 16px;border-radius:4px;background:rgba(0,229,255,.05);}
.sec-head h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:2px;margin:20px 0 12px;}
.sec-head p{color:#8b96ad;font-size:15px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px;}
.card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:32px 28px;overflow:hidden;transition:.35s;backdrop-filter:blur(6px);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00e5ff,transparent);opacity:0;transition:.35s;}
.card::after{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 40px rgba(0,229,255,0);transition:.35s;pointer-events:none;}
.card:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.45);}
.card:hover::before{opacity:1;}
.card:hover::after{box-shadow:inset 0 0 34px rgba(0,229,255,.05);}
.card .icon{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;
    background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(124,77,255,.16));border:1px solid rgba(0,229,255,.25);color:#00e5ff;transition:.35s;}
.card:hover .icon{box-shadow:0 0 24px rgba(0,229,255,.4);transform:rotate(-6deg) scale(1.05);}
.card .icon svg{width:27px;height:27px;}
.card .tag{position:absolute;top:24px;right:24px;font-size:11px;letter-spacing:2px;color:#7d8aa5;border:1px solid rgba(255,255,255,.14);padding:4px 12px;border-radius:20px;background:rgba(255,255,255,.02);}
.card h3{font-size:21px;font-weight:700;letter-spacing:1px;margin-bottom:10px;}
.card p{font-size:14px;color:#8b96ad;line-height:1.75;margin-bottom:20px;}
.card .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.card .chips span{font-size:12px;color:#aeb8d0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:4px 13px;border-radius:20px;}
.card .more{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#00e5ff;font-weight:600;}
.card .more .arr{transition:transform .3s;}
.card:hover .more .arr{transform:translateX(5px);}

/* 预留位卡片 */
.card.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-style:dashed;border-color:rgba(255,255,255,.18);background:transparent;min-height:320px;}
.card.soon:hover{border-color:rgba(0,229,255,.5);transform:translateY(-6px);box-shadow:0 18px 50px rgba(0,229,255,.1);}
.card.soon .plus{width:58px;height:58px;border-radius:50%;border:1px dashed rgba(0,229,255,.55);color:#00e5ff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;margin-bottom:20px;animation:pulse 2.4s ease-in-out infinite;}
.card.soon h3{color:#cfe6ff;font-size:19px;}
.card.soon p{font-size:13px;color:#6b7a94;max-width:220px;margin:0;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.35);transform:scale(1);}50%{box-shadow:0 0 0 16px rgba(0,229,255,0);transform:scale(1.07);}}

/* 入场错峰 */
.js .grid .reveal:nth-child(1){transition-delay:.0s;}
.js .grid .reveal:nth-child(2){transition-delay:.05s;}
.js .grid .reveal:nth-child(3){transition-delay:.1s;}
.js .grid .reveal:nth-child(4){transition-delay:.15s;}
.js .grid .reveal:nth-child(5){transition-delay:.2s;}
.js .grid .reveal:nth-child(6){transition-delay:.25s;}
.js .grid .reveal:nth-child(7){transition-delay:.3s;}
.js .grid .reveal:nth-child(8){transition-delay:.35s;}

/* ========== 特性 ========== */
.features{position:relative;z-index:1;padding:90px 0;margin-top:60px;border-top:1px solid rgba(255,255,255,.06);}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;}
.feat{text-align:center;padding:34px 18px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02);transition:.35s;}
.feat:hover{border-color:rgba(0,229,255,.35);transform:translateY(-4px);}
.feat svg{width:30px;height:30px;color:#00e5ff;margin-bottom:14px;}
.feat h3{font-size:17px;font-weight:700;margin-bottom:8px;}
.feat p{font-size:13px;color:#8b96ad;}

/* ========== 联系 CTA ========== */
.cta{position:relative;z-index:1;padding:110px 0 130px;}
.cta-inner{position:relative;max-width:860px;margin:0 auto;text-align:center;border:1px solid rgba(0,229,255,.28);border-radius:24px;padding:64px 40px;
    background:linear-gradient(160deg,rgba(0,229,255,.08),rgba(124,77,255,.06),transparent);
    box-shadow:inset 0 0 60px rgba(0,229,255,.06),0 24px 60px rgba(0,0,0,.45);overflow:hidden;}
.cta-inner::before{content:'';position:absolute;top:-60px;left:50%;width:300px;height:140px;margin-left:-150px;background:radial-gradient(ellipse,rgba(0,229,255,.18),transparent 70%);}
.cta-inner h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:2px;margin-bottom:14px;}
.cta-inner p{color:#9aa7c0;font-size:16px;}
.cta-inner .tel{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:42px;font-weight:700;color:#00e5ff;text-shadow:0 0 30px rgba(0,229,255,.45);margin:26px 0 34px;letter-spacing:2px;}
.cta-inner .tel small{display:block;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#8b96ad;letter-spacing:4px;margin-bottom:8px;font-weight:400;text-shadow:none;}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ========== 分节吸附 ========== */
.snap-section{scroll-snap-align:start;}
.snap-section:nth-child(2){scroll-snap-margin-top:0;}

/* ========== 阶段导航 ========== */
.dotnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:99;display:flex;flex-direction:column;align-items:center;gap:20px;}
.dotnav a{position:relative;width:13px;height:13px;border-radius:50%;border:2px solid rgba(0,229,255,.35);background:rgba(5,7,15,.55);transition:.3s;}
.dotnav a:hover{transform:scale(1.25);border-color:rgba(0,229,255,.7);}
.dotnav a.active{background:#00e5ff;border-color:#00e5ff;box-shadow:0 0 16px rgba(0,229,255,.8);animation:pulseDot 2s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.55);}50%{box-shadow:0 0 0 9px rgba(0,229,255,0);}}
.dotnav a::after{content:attr(data-label);position:absolute;right:26px;top:50%;transform:translateY(-50%) translateX(4px);font-size:12px;color:#7fdfff;white-space:nowrap;background:rgba(5,7,15,.88);border:1px solid rgba(0,229,255,.25);padding:4px 11px;border-radius:6px;opacity:0;pointer-events:none;transition:.25s;}
.dotnav a:hover::after,.dotnav a.active::after{opacity:1;transform:translateY(-50%) translateX(0);}

/* ========== 页脚 ========== */
.footer{position:relative;z-index:1;text-align:center;padding:26px 20px 36px;border-top:1px solid rgba(255,255,255,.06);color:#56637b;font-size:13px;letter-spacing:1px;}
.footer-log{display:inline-block;margin:12px 8px 0;}
.footer-log a{display:inline-block;color:#7e93ad;font-size:12px;text-decoration:none;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:5px 18px;letter-spacing:1px;transition:.25s;}
.footer-log a:hover{color:#00e5ff;border-color:rgba(0,229,255,.5);}

/* ========== 响应式 ========== */
@media screen and (max-width:768px){
    .hero{min-height:auto;padding:110px 20px 90px;}
    .hero-actions .btn{width:100%;justify-content:center;}
    .hero-stats{margin-top:44px;}
    .plugins{padding:80px 0 30px;}
    .cta{padding:80px 0 100px;}
    .cta-inner{padding:48px 22px;}
    .cta-inner .tel{font-size:30px;}
    .dotnav{display:none;}
}

/* ========== 留言弹窗 ========== */
.btn{font-family:inherit;cursor:pointer;}
.modal-mask{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,5,12,.74);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s;}
.modal-mask.show{opacity:1;visibility:visible;}
.modal{width:min(540px,100%);max-height:88vh;overflow-y:auto;background:linear-gradient(160deg,#0c1122,#070a16);border:1px solid rgba(0,229,255,.22);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 40px rgba(124,77,255,.18);padding:28px 30px 30px;transform:translateY(24px) scale(.97);transition:.35s;}
.modal-mask.show .modal{transform:none;}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.modal-head h3{font-size:20px;letter-spacing:1px;background:linear-gradient(90deg,#00e5ff,#7c4dff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.modal-close{width:32px;height:32px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.04);color:#8b96ad;font-size:18px;line-height:1;cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{color:#00e5ff;border-color:rgba(0,229,255,.5);transform:rotate(90deg);}
.modal form{display:flex;flex-direction:column;gap:14px;}
.form-row{display:flex;gap:14px;}
.form-row .form-item{flex:1;}
.form-item label{display:block;font-size:13px;color:#8b96ad;margin-bottom:6px;letter-spacing:1px;}
.form-item label .req{color:#ff3d9a;margin-left:2px;}
.form-item input,.form-item select,.form-item textarea{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#e8ecf4;font-size:14px;padding:11px 14px;outline:none;transition:.25s;font-family:inherit;}
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#00e5ff;box-shadow:0 0 0 3px rgba(0,229,255,.12);background:rgba(0,229,255,.04);}
.form-item select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#8b96ad 50%),linear-gradient(135deg,#8b96ad 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px;}
.form-item select option{background:#0c1122;color:#e8ecf4;}
.form-item textarea{resize:vertical;min-height:96px;}
.form-submit{width:100%;margin-top:4px;padding:13px;border:none;border-radius:30px;font-size:15px;font-weight:600;color:#05070f;background:linear-gradient(135deg,#00e5ff,#7c4dff);box-shadow:0 8px 24px rgba(0,229,255,.28);cursor:pointer;transition:.3s;font-family:inherit;}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(124,77,255,.45);}
@media screen and (max-width:768px){
    .form-row{flex-direction:column;}
    .modal{padding:24px 20px 26px;}
}