* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --orange:#E8541E; --red:#B23A28; --gold:#D9A441; --brown:#8C6A4F;
  --cream:#F4EEE3; --dark:#1B1612; --blue:#2E7DB8; --lightblue:#5FB0E6;
}
html{ scroll-behavior:smooth; }
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  background:var(--cream); color:#2B2520;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
.page{ max-width:750px; margin:0 auto; background:var(--cream); overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.12); }

/* ============ TOP NAV ============ */
.topnav{ position:sticky; top:0; z-index:100; max-width:750px; margin:0 auto;
  background:rgba(27,22,18,.95); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:6px; padding:0 10px; overflow-x:auto;
  scrollbar-width:thin; }
.topnav::-webkit-scrollbar{ height:3px; }
.topnav::-webkit-scrollbar-thumb{ background:rgba(240,180,140,.3); border-radius:2px; }
.topnav a{ color:#D8C9B4; font-size:13px; text-decoration:none; white-space:nowrap;
  padding:12px 12px; border-bottom:2px solid transparent; transition:.2s; }
.topnav a:hover{ color:#FF9A5C; border-bottom-color:var(--orange); }
.topnav .logo{ font-weight:900; color:#F0B48C; font-size:14px; letter-spacing:1px;
  border-bottom:none; margin-right:6px; }

/* ============ HERO ============ */
.hero{
  position:relative; background:var(--dark); padding:70px 44px 56px;
  background-image:radial-gradient(900px 500px at 78% -8%, rgba(232,84,30,.38), transparent 62%),
                   radial-gradient(700px 420px at 8% 108%, rgba(178,58,40,.28), transparent 60%),
                   linear-gradient(180deg,#211A14,#17120E);
  color:#F6EFE3;
}
.hero .wave{ position:absolute; right:-30px; top:54px; display:flex; gap:7px; align-items:flex-end; opacity:.55; }
.hero .wave i{ display:block; width:9px; border-radius:5px; background:linear-gradient(180deg,#F08A4B,#E8541E); }
.hero .kicker{ display:inline-block; font-size:19px; letter-spacing:5px; color:#F0B48C; border:1px solid rgba(240,180,140,.5);
  padding:7px 18px; border-radius:30px; margin-bottom:34px; }
.hero h1{ font-size:76px; line-height:1.18; font-weight:900; letter-spacing:4px; }
.hero h1 .accent{ color:#F0763E; }
.hero .sub{ margin-top:22px; font-size:27px; line-height:1.65; color:#EBD9C2; letter-spacing:1px; }
.hero .rule{ width:96px; height:5px; background:linear-gradient(90deg,#E8541E,transparent); margin:30px 0 28px; border-radius:3px; }
.hero .intro{ font-size:21.5px; line-height:1.95; color:#D8C9B4; }
.hero .intro p{ margin-bottom:18px; text-align:justify; }
.hero .intro b{ color:#F5B079; font-weight:700; }
.hero-stats{ display:flex; gap:14px; margin-top:36px; }
.hero-stats .s{ flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:20px 10px; text-align:center; }
.hero-stats .n{ font-size:34px; font-weight:900; color:#FF9A5C; line-height:1.2; }
.hero-stats .l{ font-size:15.5px; color:#C9B69E; margin-top:8px; line-height:1.45; }

/* ============ SECTIONS ============ */
.section{ padding:58px 40px 50px; position:relative; }
.sec-head{ display:flex; align-items:flex-start; gap:20px; margin-bottom:14px; }
.sec-num{ font-size:60px; font-weight:900; line-height:.95; color:var(--orange); letter-spacing:-2px; }
.sec-num.blue{ color:var(--blue); }
.sec-titles{ padding-top:4px; }
.sec-kicker{ font-size:16px; letter-spacing:4px; color:#A8957C; margin-bottom:8px; }
.sec-kicker.blue{ color:#7FB0D6; }
.sec-head h2{ font-size:37px; font-weight:900; color:#241D17; line-height:1.32; letter-spacing:1px; }
.sec-head h2.blue{ color:#EAF3FB; }
.sec-rule{ height:4px; width:100%; background:linear-gradient(90deg,#E8541E 0,#E8541E 120px,#E2D8C8 120px); border-radius:3px; margin:16px 0 26px; }
.sec-rule.blue{ background:linear-gradient(90deg,#2E7DB8 0,#2E7DB8 120px,rgba(255,255,255,.18) 120px); }
.lead{ font-size:22px; line-height:1.9; color:#463D34; margin-bottom:26px; text-align:justify; }
.lead b{ color:var(--red); }

.card{ background:#FFFDF8; border-radius:16px; padding:28px; box-shadow:0 6px 22px rgba(90,66,40,.08);
  border:1px solid #ECE2D1; margin-bottom:22px; }
.card h3{ font-size:24px; color:#241D17; margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.card h3::before{ content:""; width:8px; height:24px; border-radius:4px; background:var(--orange); display:inline-block; }
.card p{ font-size:20.5px; line-height:1.88; color:#4E453B; text-align:justify; }
.card p+p{ margin-top:12px; }
.card b{ color:var(--red); }
.src{ font-size:15px; color:#9C8E7B; margin:2px 0 26px; line-height:1.6; }
.src::before{ content:"数据来源 / "; }

.stat-grid{ display:flex; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.stat-grid .st{ flex:1; min-width:140px; background:#FFFDF8; border:1px solid #ECE2D1; border-radius:14px; padding:22px 12px; text-align:center;
  box-shadow:0 4px 14px rgba(90,66,40,.06); }
.stat-grid .st .v{ font-size:33px; font-weight:900; color:var(--orange); line-height:1.15; }
.stat-grid .st .v.dark{ color:var(--red); }
.stat-grid .st .t{ font-size:16px; color:#6B5F52; margin-top:9px; line-height:1.5; }

.chart{ width:100%; }
.cap{ font-size:16px; color:#9C8E7B; text-align:center; margin-top:6px; }

.months{ display:flex; align-items:flex-end; gap:9px; height:170px; padding:14px 6px 0; }
.months .m{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.months .m .bar{ width:100%; border-radius:6px 6px 3px 3px; background:#E4D8C4; }
.months .m.hot .bar{ background:linear-gradient(180deg,#F6A06A,#E8541E); }
.months .m.peak .bar{ background:linear-gradient(180deg,#FF8A45,#C83A16); }
.months .m span{ font-size:15px; color:#8A7A66; margin-top:9px; }
.months .m.hot span,.months .m.peak span{ color:var(--red); font-weight:700; }
.peak-note{ text-align:center; font-size:17px; color:var(--red); font-weight:700; margin-top:12px; }

.chips{ display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 4px; }
.chip{ border-radius:30px; padding:10px 22px; font-size:20px; font-weight:700; }
.chip.t1{ background:linear-gradient(135deg,#F0793E,#C83A16); color:#fff; box-shadow:0 4px 12px rgba(200,58,22,.3); }
.chip.t2{ background:#F6C8A6; color:#93311A; }
.chip.t3{ background:#EFE3D0; color:#7A6550; }
.legend{ display:flex; gap:20px; margin-top:14px; font-size:15.5px; color:#8A7A66; flex-wrap:wrap; }
.legend i{ display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:6px; vertical-align:-2px; }

.case{ background:linear-gradient(150deg,#2B211A,#1E1812); color:#EBDCC8; border-radius:16px; padding:28px; margin-bottom:22px;
  border:1px solid #3A2E22; }
.case .tag{ display:inline-block; font-size:15px; background:var(--orange); color:#fff; padding:4px 14px; border-radius:20px; margin-bottom:14px; letter-spacing:2px; }
.case .loss{ font-size:42px; font-weight:900; color:#FF8A45; margin-bottom:10px; }
.case p{ font-size:20px; line-height:1.85; color:#D7C4AC; text-align:justify; }
.case p b{ color:#FFB081; }
.case.two{ background:#FFFDF8; border:1px solid #ECE2D1; color:#4E453B; }
.case.two .tag{ background:#8C6A4F; }
.case.two p{ color:#4E453B; }
.case.two p b{ color:var(--red); }
.case.two .loss{ color:var(--red); font-size:30px; }

.step{ display:flex; gap:20px; margin-bottom:0; position:relative; }
.step .rail{ display:flex; flex-direction:column; align-items:center; }
.step .dot{ width:58px; height:58px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:900; color:#fff; background:linear-gradient(150deg,#F0793E,#C83A16); box-shadow:0 5px 14px rgba(200,58,22,.35); z-index:2; }
.step .line{ width:3px; flex:1; background:linear-gradient(180deg,#E89A6B,#E2D8C8); margin:4px 0; }
.step:last-child .line{ display:none; }
.step .body{ flex:1; padding-bottom:26px; }
.step .body .stitle{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.step .body .stitle .nm{ font-size:27px; font-weight:900; color:#241D17; }
.step .body .pct{ font-size:18px; font-weight:800; color:#fff; background:var(--orange); border-radius:20px; padding:4px 14px; }
.step .body .pct.alt{ background:#7A5AF8; }
.step .body p{ font-size:20px; line-height:1.85; color:#4E453B; text-align:justify; background:#FFFDF8; border:1px solid #ECE2D1;
  border-radius:14px; padding:20px 22px; box-shadow:0 4px 14px rgba(90,66,40,.06); }
.step .body p+p{ margin-top:10px; }
.step .body b{ color:var(--red); }
.eg{ font-size:18.5px; color:#6B5F52 !important; background:#F6EBDD !important; border-color:#E7D8C2 !important; }
.eg::before{ content:"典型案例  "; font-weight:800; color:#93311A; }

.four{ display:flex; flex-wrap:wrap; gap:16px; }
.four .fc{ width:calc(50% - 8px); background:#FFFDF8; border:1px solid #ECE2D1; border-radius:16px; padding:24px;
  box-shadow:0 5px 16px rgba(90,66,40,.07); }
.four .fc .ico{ width:54px; height:54px; border-radius:14px; background:linear-gradient(150deg,#F6A06A,#E8541E);
  display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:14px; }
.four .fc h4{ font-size:23px; color:#241D17; margin-bottom:12px; }
.four .fc .row{ display:flex; gap:10px; align-items:baseline; margin-top:10px; flex-wrap:wrap; }
.four .fc .row .big{ font-size:27px; font-weight:900; color:var(--orange); white-space:nowrap; }
.four .fc .row .tx{ font-size:17.5px; color:#5C534A; line-height:1.6; flex:1; min-width:120px; }
.four .fc p{ font-size:18.5px; line-height:1.8; color:#5C534A; }
.four .fc b{ color:var(--red); }

.chain{ display:flex; align-items:stretch; gap:0; margin:8px 0 10px; }
.chain .node{ flex:1; background:#FFFDF8; border:1px solid #ECE2D1; border-radius:14px; padding:16px 12px; text-align:center;
  box-shadow:0 4px 12px rgba(90,66,40,.07); position:relative; }
.chain .node .nn{ width:40px; height:40px; border-radius:50%; background:#2B2520; color:#FFB081; font-weight:900; font-size:20px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.chain .node h5{ font-size:19.5px; color:#241D17; margin-bottom:8px; }
.chain .node p{ font-size:15px; line-height:1.7; color:#62574B; text-align:left; }
.chain .node p b{ color:var(--red); }
.chain .arrow{ display:flex; align-items:center; justify-content:center; color:#D08A55; font-size:24px;
  line-height:1; padding:0 2px; font-weight:900; flex:none; width:18px; }

.funnel{ margin:6px 0 10px; }
.fl{ margin:0 auto 8px; border-radius:10px; padding:20px 26px; color:#fff; text-align:center; }
.fl .ft{ font-size:21px; font-weight:800; }
.fl .fd{ font-size:16.5px; margin-top:6px; opacity:.92; line-height:1.55; }
.fl.f1{ width:100%; background:linear-gradient(135deg,#E89A6B,#D97742); }
.fl.f2{ width:80%; background:linear-gradient(135deg,#E8793E,#C83A16); }
.fl.f3{ width:60%; background:linear-gradient(135deg,#D65A26,#A52E14); }
.fl.f4{ width:42%; background:linear-gradient(135deg,#B23A28,#7E1F12); }
.funnel-end{ text-align:center; font-size:22px; font-weight:900; color:#7E1F12; margin-top:14px; letter-spacing:2px; }

.note-band{ background:#2B211A; color:#EBDCC8; border-radius:16px; padding:26px 28px; margin-top:24px; }
.note-band p{ font-size:20.5px; line-height:1.9; text-align:justify; }
.note-band b{ color:#FFB081; }

.bubbles{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:stretch; margin:10px 0; }
.bub{ width:calc(50% - 10px); border-radius:44px; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:38px 34px; color:#fff;
  box-shadow:0 10px 26px rgba(178,58,40,.22); }
.bub h5{ font-size:23px; margin-bottom:10px; width:100%; }
.bub p{ font-size:17px; line-height:1.72; opacity:.96; text-align:left; width:100%; }
.bub p b{ font-size:19px; }
.bub.b1{ background:radial-gradient(circle at 30% 18%,#F0824A,#C83A16); }
.bub.b2{ background:radial-gradient(circle at 30% 18%,#D9913F,#A86A1E); }
.bub.b3{ background:radial-gradient(circle at 30% 18%,#B05A3C,#7E3520); }
.bub.b4{ background:radial-gradient(circle at 30% 18%,#8C5E46,#5C3A28); }
.bub .big{ font-size:35px; font-weight:900; line-height:1.22; margin-bottom:12px; }
.bub.b4 .big{ font-size:30px; }

.cloud{ background:linear-gradient(160deg,#241C15,#17120E); border-radius:18px; padding:36px 26px; margin-bottom:24px;
  display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center; align-items:center; }
.cloud span{ color:#F0C9A4; font-weight:800; white-space:nowrap; }
.cloud .w1{ font-size:37px; color:#FF8A45; }
.cloud .w2{ font-size:31px; color:#F0A06A; }
.cloud .w3{ font-size:26px; color:#D9A441; }
.cloud .w4{ font-size:22px; color:#C9B094; }
.cloud .w5{ font-size:19px; color:#9C8E7B; }

.ending{ background:linear-gradient(180deg,#11406B 0,#0D2F4E 60%,#0A2540 100%); color:#E4EFF8; position:relative; }
.ending .lead{ color:#C7DBED; }
.ending .lead b{ color:#8FD0FF; }
.layer{ display:flex; gap:20px; background:rgba(255,255,255,.07); border:1px solid rgba(160,205,240,.22);
  border-radius:16px; padding:24px; margin-bottom:16px; }
.layer .lic{ width:58px; height:58px; flex:none; border-radius:50%; background:linear-gradient(150deg,#5FB0E6,#2E7DB8);
  display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:900; color:#0A2540; }
.layer h4{ font-size:24px; color:#F2F8FD; margin-bottom:8px; }
.layer p{ font-size:19.5px; line-height:1.82; color:#C2D8EC; text-align:justify; }
.layer p b{ color:#8FD0FF; }
.effect{ display:inline-block; margin-top:10px; background:rgba(143,208,255,.14); border:1px solid rgba(143,208,255,.45);
  color:#BFE6FF; border-radius:24px; padding:5px 16px; font-size:17px; font-weight:700; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.tags span{ font-size:16.5px; background:rgba(143,208,255,.12); border:1px solid rgba(143,208,255,.35); color:#BFE6FF;
  border-radius:20px; padding:6px 16px; }

.phone{ width:330px; margin:14px auto 4px; background:#082039; border:3px solid rgba(160,205,240,.35); border-radius:30px;
  padding:22px 18px; }
.phone .scr{ background:#F2F7FB; border-radius:18px; padding:20px 18px; color:#20303F; }
.phone .app{ font-size:16px; font-weight:800; color:#2E7DB8; margin-bottom:14px; }
.phone .bigfont{ font-size:25px; font-weight:900; line-height:1.5; }
.phone .dlg{ margin-top:16px; background:#fff; border:2px solid #2E7DB8; border-radius:14px; padding:16px;
  box-shadow:0 8px 20px rgba(46,125,184,.25); }
.phone .dlg .t{ font-size:18px; font-weight:800; margin-bottom:8px; }
.phone .dlg .d{ font-size:15.5px; color:#556; line-height:1.6; }
.phone .btns{ display:flex; gap:10px; margin-top:14px; }
.phone .btns i{ flex:1; text-align:center; font-style:normal; font-size:16px; border-radius:20px; padding:9px 0; font-weight:700; }
.phone .btns .c{ background:#E4ECF2; color:#556; }
.phone .btns .o{ background:#2E7DB8; color:#fff; }
.phone-note{ text-align:center; font-size:15px; color:#8FB6D6; margin-top:10px; }

.timeline{ margin:14px 0 6px; padding-left:8px; }
.tl{ display:flex; gap:18px; position:relative; padding-bottom:22px; }
.tl:last-child{ padding-bottom:0; }
.tl .tl-l{ display:flex; flex-direction:column; align-items:center; width:26px; flex:none; }
.tl .tl-d{ width:18px; height:18px; border-radius:50%; background:#5FB0E6; border:4px solid rgba(143,208,255,.25); flex:none; margin-top:4px; z-index:2; }
.tl .tl-x{ width:2px; flex:1; background:rgba(143,208,255,.3); margin-top:2px; }
.tl:last-child .tl-x{ display:none; }
.tl .tl-c h5{ font-size:20px; color:#8FD0FF; margin-bottom:5px; }
.tl .tl-c p{ font-size:18.5px; color:#C2D8EC; line-height:1.7; }

.slogan{ margin:40px -40px -50px; padding:78px 44px 70px; text-align:center;
  background:radial-gradient(800px 360px at 50% 0%, rgba(95,176,230,.35), transparent 70%); position:relative; }
.slogan .wave2{ display:flex; gap:8px; justify-content:center; align-items:flex-end; margin-bottom:34px; }
.slogan .wave2 i{ width:10px; border-radius:5px; background:linear-gradient(180deg,#9ED8FF,#2E7DB8); }
.slogan .big{ font-size:47px; font-weight:900; letter-spacing:5px; color:#F4FAFF; line-height:1.5; }
.slogan .sm{ font-size:19px; color:#9CC4E4; letter-spacing:3px; margin-top:24px; }

.footer{ background:#0A2540; color:#7FA6C8; font-size:15.5px; line-height:1.9; padding:30px 40px 38px; text-align:center; }

/* back to top */
.backtop{ position:fixed; bottom:30px; right:30px; width:48px; height:48px; border-radius:50%;
  background:var(--orange); color:#fff; font-size:24px; border:none; cursor:pointer; z-index:99;
  box-shadow:0 4px 14px rgba(232,84,30,.4); opacity:0; visibility:hidden; transition:.3s;
  display:flex; align-items:center; justify-content:center; }
.backtop.show{ opacity:1; visibility:visible; }
.backtop:hover{ transform:translateY(-3px); }

@media(max-width:760px){
  .page{ box-shadow:none; }
  .hero{ padding:50px 24px 40px; }
  .hero h1{ font-size:54px; }
  .hero .sub{ font-size:22px; }
  .hero .intro{ font-size:18px; }
  .hero-stats{ flex-wrap:wrap; }
  .hero-stats .s{ min-width:45%; }
  .section{ padding:40px 22px; }
  .sec-num{ font-size:46px; }
  .sec-head h2{ font-size:28px; }
  .lead{ font-size:18px; }
  .card{ padding:20px; }
  .card p{ font-size:17px; }
  .four .fc{ width:100%; }
  .bub{ width:100%; }
  .chain{ flex-direction:column; }
  .chain .arrow{ transform:rotate(90deg); width:auto; padding:6px 0; }
  .slogan .big{ font-size:34px; }
  .slogan{ margin:30px -22px -40px; padding:50px 24px 50px; }
}