@charset "utf-8";
@import "page.css";

/* ==================== 设计变量 ==================== */
:root{
    --blue:#206ae4;
    --blue-d:#1e40af;
    --blue-l:#4d8fff;
    --blue-ll:#64b5f6;
    --cyan:#06b6d4;
    --gold:#e0a93b;
    --gold-d:#c8922b;
    --ink:#0c1733;
    --ink-2:#16224a;
    --txt:#48505f;
    --txt-2:#7a8295;
    --line:#e8edf6;
    --bg:#ffffff;
    --bg-soft:#f5f8fe;
    --r:22px;
    --r-sm:14px;
    --sh:0 18px 50px rgba(20,48,110,.10);
    --sh-h:0 26px 70px rgba(32,106,228,.22);
    --ease:cubic-bezier(.22,.61,.36,1);
}

.wfx-page{min-height:100vh;background:#fff;}

/* ==================== Hero ==================== */
.wfx-hero{
    position:relative;
    overflow:hidden;
    background:radial-gradient(120% 90% at 12% 0%, #14224f 0%, #0c1733 45%, #081024 100%);
    padding:150px 0 100px;
    color:#fff;
}
.wfx-hero-decor{position:absolute;inset:0;pointer-events:none;z-index:0;}
.wfx-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.55;}
.wfx-orb-1{width:460px;height:460px;top:-160px;right:-80px;background:radial-gradient(circle,rgba(32,106,228,.55),transparent 65%);animation:wfxorbA 14s var(--ease) infinite;}
.wfx-orb-2{width:340px;height:340px;bottom:-120px;left:6%;background:radial-gradient(circle,rgba(6,182,212,.32),transparent 65%);animation:wfxorbB 16s var(--ease) infinite;}
.wfx-orb-3{width:220px;height:220px;top:28%;left:44%;background:radial-gradient(circle,rgba(224,169,59,.22),transparent 70%);animation:wfxorbA 20s var(--ease) infinite reverse;}
@keyframes wfxorbA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,24px) scale(1.08);}}
@keyframes wfxorbB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,-20px) scale(1.1);}}
.wfx-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);}

.wfx-hero-inner{position:relative;z-index:2;display:flex;align-items:center;gap:50px;width:100%;}

/* 左侧文案 */
.wfx-hero-copy{flex:1;max-width:640px;}
.wfx-hero-badge{display:inline-flex;align-items:center;gap:9px;padding:9px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:50px;font-size:14px;font-weight:500;color:#dfe8ff;backdrop-filter:blur(8px);margin-bottom:26px;}
.wfx-hero-badge i{color:var(--gold);font-size:13px;}
.wfx-hero-title{font-family:"biaotihei","Microsoft YaHei",sans-serif;font-size:clamp(40px,5vw,62px);line-height:1.12;font-weight:800;letter-spacing:1px;margin-bottom:18px;background:linear-gradient(120deg,#ffffff 0%,#cfe0ff 55%,#7fb2ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.wfx-title-hl{background:linear-gradient(120deg,#ffd98a 0%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.wfx-hero-sub{font-size:clamp(15px,1.6vw,18px);color:#9fb6e6;letter-spacing:2px;margin-bottom:22px;font-weight:300;}
.wfx-hero-desc{font-size:16px;line-height:1.9;color:rgba(255,255,255,.72);margin-bottom:34px;max-width:560px;}

.wfx-hero-chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px;}
.wfx-hero-chips span{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:50px;font-size:14px;color:#cdd9f5;}
.wfx-hero-chips i{color:var(--gold);font-size:13px;}

.wfx-hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:46px;}
.wfx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:50px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:all .35s var(--ease);border:1px solid transparent;}
.wfx-btn i{font-size:15px;}
.wfx-btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;box-shadow:0 12px 30px rgba(224,169,59,.32);}
.wfx-btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(224,169,59,.45);}
.wfx-btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px);}
.wfx-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:var(--gold);transform:translateY(-3px);}
.wfx-btn-white{background:#fff;color:var(--blue);}
.wfx-btn-white:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.18);}

.wfx-hero-stats{display:flex;gap:38px;}
.wfx-stat{position:relative;padding-left:18px;}
.wfx-stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(var(--blue-l),var(--cyan));}
.wfx-stat-num{font-size:38px;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;display:inline-block;}
.wfx-stat em{font-size:18px;font-weight:700;color:var(--gold);font-style:normal;margin-left:2px;}
.wfx-stat-label{font-size:13px;color:#9fb6e6;margin-top:6px;}

/* 右侧 分销关系网络 */
.wfx-hero-visual{flex:1;display:flex;justify-content:center;align-items:center;}
.wfx-net{position:relative;width:440px;height:460px;}
.wfx-net-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,rgba(32,106,228,.85),rgba(30,64,175,.9));border:2px solid rgba(255,255,255,.4);box-shadow:0 20px 50px rgba(32,106,228,.45),inset 0 0 24px rgba(255,255,255,.18);z-index:3;}
.wfx-net-core i{font-size:34px;color:#fff;}
.wfx-net-core span{font-size:15px;font-weight:700;color:#fff;letter-spacing:.5px;}
.wfx-net-core em{font-size:11px;font-style:normal;color:rgba(255,255,255,.78);}

.wfx-net-node{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;backdrop-filter:blur(10px);box-shadow:0 10px 28px rgba(0,0,0,.28);z-index:2;animation:wfxnode 5s var(--ease) infinite;}
.wfx-net-node i{width:34px;height:34px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;font-size:15px;}
.wfx-net-node-t{display:flex;flex-direction:column;line-height:1.3;}
.wfx-net-node-t b{font-size:13px;color:#fff;font-weight:600;}
.wfx-net-node-t span{font-size:12px;color:var(--gold);font-weight:700;}
.wfx-net-node.n1{top:36px;left:18px;animation-delay:0s;}
.wfx-net-node.n2{top:54px;right:14px;animation-delay:1.2s;}
.wfx-net-node.n3{bottom:30px;left:50%;transform:translateX(-50%);animation-delay:2.4s;}
@keyframes wfxnode{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

.wfx-net-link{position:absolute;left:50%;top:50%;height:2px;transform-origin:left center;background:linear-gradient(90deg,rgba(77,143,255,.7),rgba(224,169,59,.55));border-radius:2px;z-index:1;}
.wfx-net-link.l1{width:212px;transform:rotate(-135deg);}
.wfx-net-link.l2{width:198px;transform:rotate(-41deg);}
.wfx-net-link.l3{width:184px;transform:rotate(90deg);}

.wfx-float{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:50px;font-size:13px;color:#dfe8ff;backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:4;animation:wfxfloatY 6s var(--ease) infinite;}
.wfx-float i{color:var(--gold);font-size:14px;}
.wfx-float-1{top:6px;right:24px;animation-delay:.4s;}
.wfx-float-2{bottom:96px;right:-8px;animation-delay:1.6s;}
.wfx-float-3{bottom:18px;left:8px;animation-delay:2.6s;}
@keyframes wfxfloatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ==================== 区块 / 标题 ==================== */
.wfx-section{padding:100px 0;position:relative;}
.wfx-advantage{background:#fff;}
.wfx-features{background:var(--bg-soft);}
.wfx-scenarios{background:#fff;}
.wfx-tech{background:var(--bg-soft);}

.wfx-head{text-align:center;max-width:720px;margin:0 auto 60px;}
.wfx-head-badge{display:inline-block;font-size:13px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:14px;}
.wfx-head-title{font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--ink);margin-bottom:14px;letter-spacing:.5px;}
.wfx-head-title-light{color:#fff;}
.wfx-head-desc{font-size:16px;color:var(--txt-2);line-height:1.7;}
.wfx-head-desc-light{color:rgba(255,255,255,.72);}
.wfx-head-line{display:block;width:64px;height:3px;margin:22px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--gold));}

/* ==================== 核心优势 ==================== */
.wfx-adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.wfx-adv{position:relative;padding:38px 34px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.wfx-adv::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.wfx-adv:hover{transform:translateY(-8px);box-shadow:var(--sh-h);border-color:transparent;}
.wfx-adv:hover::before{transform:scaleX(1);}
.wfx-adv-ic{width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(32,106,228,.1),rgba(6,182,212,.1));border:1px solid rgba(32,106,228,.14);margin-bottom:20px;transition:transform .4s var(--ease);}
.wfx-adv:hover .wfx-adv-ic{transform:scale(1.06);}
.wfx-adv-ic i{font-size:27px;background:linear-gradient(120deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.wfx-adv h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.wfx-adv p{font-size:14.5px;color:var(--txt);line-height:1.8;}

/* ==================== 功能模块 ==================== */
.wfx-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.wfx-feat{position:relative;padding:34px 26px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);box-shadow:var(--sh);text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.wfx-feat:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:rgba(32,106,228,.3);}
.wfx-feat-ic{width:60px;height:60px;margin:0 auto 18px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink-2),var(--ink));transition:transform .4s var(--ease);}
.wfx-feat:hover .wfx-feat-ic{transform:translateY(-4px) rotate(-4deg);}
.wfx-feat-ic i{font-size:25px;color:var(--gold);}
.wfx-feat h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.wfx-feat p{font-size:13.5px;color:var(--txt);line-height:1.7;}

/* ==================== 业务流程 ==================== */
.wfx-process{background:radial-gradient(120% 90% at 50% 0%,#14224f 0%,#0c1733 55%,#081024 100%);}
.wfx-flow{display:flex;align-items:stretch;justify-content:center;gap:8px;}
.wfx-step{flex:1;position:relative;padding:40px 26px 34px;text-align:center;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
.wfx-step:hover{transform:translateY(-8px);border-color:rgba(224,169,59,.5);box-shadow:0 20px 50px rgba(0,0,0,.35);}
.wfx-step-no{font-size:46px;font-weight:800;line-height:1;background:linear-gradient(120deg,var(--blue-l),rgba(224,169,59,.7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:16px;}
.wfx-step-ic{width:64px;height:64px;margin:0 auto 18px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--blue-d));box-shadow:0 12px 30px rgba(32,106,228,.4);}
.wfx-step-ic i{font-size:26px;color:#fff;}
.wfx-step h4{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;}
.wfx-step p{font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.7;}
.wfx-step-arrow{display:flex;align-items:center;justify-content:center;flex:none;width:42px;color:var(--gold);font-size:18px;}

/* ==================== 适用场景 ==================== */
.wfx-scn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.wfx-scn{position:relative;padding:38px 32px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.wfx-scn::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(32,106,228,.07),transparent 70%);transition:transform .5s var(--ease);}
.wfx-scn:hover{transform:translateY(-8px);box-shadow:var(--sh-h);border-color:rgba(32,106,228,.28);}
.wfx-scn:hover::after{transform:scale(1.25);}
.wfx-scn-ic{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:linear-gradient(135deg,rgba(224,169,59,.14),rgba(224,169,59,.05));border:1px solid rgba(224,169,59,.2);}
.wfx-scn-ic i{font-size:27px;color:var(--gold-d);}
.wfx-scn h4{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.wfx-scn p{font-size:14px;color:var(--txt);line-height:1.8;}

/* ==================== 技术支持 ==================== */
.wfx-tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.wfx-tech{position:relative;padding:36px 26px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);box-shadow:var(--sh);text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.wfx-tech:hover{transform:translateY(-6px);box-shadow:var(--sh-h);}
.wfx-tech-ic{width:62px;height:62px;margin:0 auto 18px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink-2),var(--ink));}
.wfx-tech-ic i{font-size:26px;color:var(--gold);}
.wfx-tech h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.wfx-tech p{font-size:13.5px;color:var(--txt);line-height:1.7;}

/* ==================== CTA ==================== */
.wfx-cta{position:relative;overflow:hidden;padding:96px 0;background:linear-gradient(120deg,var(--blue) 0%,var(--blue-d) 55%,var(--ink-2) 100%);}
.wfx-cta-decor{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 22% 30%,rgba(224,169,59,.28),transparent 42%),radial-gradient(circle at 80% 75%,rgba(6,182,212,.25),transparent 45%);}
.wfx-cta-inner{position:relative;z-index:2;text-align:center;}
.wfx-cta-inner h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;color:#fff;margin-bottom:16px;letter-spacing:.5px;}
.wfx-cta-inner p{font-size:16px;color:rgba(255,255,255,.82);margin-bottom:38px;}
.wfx-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ==================== 滚动渐显 ==================== */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ==================== 响应式 ==================== */
@media (max-width:1100px){
    .wfx-adv-grid,.wfx-scn-grid{grid-template-columns:repeat(2,1fr);}
    .wfx-feat-grid,.wfx-tech-grid{grid-template-columns:repeat(2,1fr);}
    .wfx-net{transform:scale(.92);}
}
@media (max-width:768px){
    .wfx-hero{padding:100px 0 70px;}
    .wfx-hero-inner{flex-direction:column;gap:40px;}
    .wfx-hero-copy{max-width:100%;text-align:center;}
    .wfx-hero-chips,.wfx-hero-btns,.wfx-hero-stats{justify-content:center;}
    .wfx-hero-stats{gap:26px;}
    .wfx-net{transform:scale(.8);margin-top:-10px;}
    .wfx-section{padding:60px 0;}
    .wfx-head{margin-bottom:40px;}
    .wfx-adv-grid,.wfx-scn-grid,.wfx-feat-grid,.wfx-tech-grid{grid-template-columns:1fr 1fr;}
    .wfx-flow{flex-direction:column;}
    .wfx-step-arrow{transform:rotate(90deg);width:auto;padding:6px 0;}
    .wfx-cta-inner h2{font-size:26px;}
}
@media (max-width:480px){
    .wfx-adv-grid,.wfx-scn-grid,.wfx-feat-grid,.wfx-tech-grid{grid-template-columns:1fr;}
    .wfx-hero-btns{flex-direction:column;}
    .wfx-btn{width:100%;justify-content:center;}
    .wfx-net{transform:scale(.66);}
}