* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-width: 1200px;
    background: #f7f7f7;
    color: #333;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.page {
    width: 100%;
    overflow: hidden;
    background: #f7f7f7;
}

.section {
    background: #f7f7f7;
}

.section.white {
    background: #fff;
}

.wrap {
    width: 1200px;
    margin: 0 auto;
}

.split {
    min-height: 520px;
    display: grid;
    grid-template-columns: 1fr 520px;
    align-items: center;
    gap: 90px;
}

.split.reverse {
    grid-template-columns: 520px 1fr;
}

.copy h1 {
    margin: 0 0 42px;
    color: #333;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

.copy h2 {
    margin: 0 0 28px;
    color: #333;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
}

.copy h3 {
    margin: 0 0 24px;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
}

.copy p {
    margin: 0;
    color: #8a8a8a;
    font-size: 14px;
    line-height: 2.3;
    letter-spacing: 0;
}

.hero {
    min-height: 640px;
    padding-top: 76px;
}

.hero .split {
    min-height: 500px;
}

.hero-note {
    margin-bottom: 38px !important;
}

.hero-pill {
    width: 430px;
    height: 46px;
    margin: 0 0 24px;
    border: 3px solid #26c8bb;
    border-right-color: #3195de;
    border-radius: 26px;
    color: #20b9c5;
    font-size: 21px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
}

.title-band {
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.title-band h2 {
    margin: 0;
    color: #333;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
}

.visual {
    position: relative;
    height: 360px;
}

.laptop {
    position: absolute;
    left: 20px;
    top: 58px;
    width: 480px;
}

.laptop-screen {
    position: relative;
    height: 270px;
    overflow: hidden;
    border: 14px solid #e7ebee;
    border-bottom-width: 22px;
    border-radius: 12px 12px 5px 5px;
    background: #fff;
    box-shadow: 0 28px 45px rgba(60, 72, 86, .14);
}

.laptop-screen::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 88px;
    height: 100%;
    background: #263e58;
}

.laptop-screen::after {
    content: "";
    position: absolute;
    left: 118px;
    top: 38px;
    width: 300px;
    height: 190px;
    background:
        linear-gradient(#eaf6ff, #eaf6ff) 0 0 / 280px 36px no-repeat,
        linear-gradient(#ecfbf8, #ecfbf8) 0 58px / 300px 46px no-repeat,
        linear-gradient(#f0f4ff, #f0f4ff) 0 126px / 198px 46px no-repeat;
}

.laptop-base {
    width: 550px;
    height: 16px;
    margin-left: -35px;
    border-radius: 0 0 50% 50%;
    background: #edf0f2;
    box-shadow: 0 20px 28px rgba(60, 72, 86, .16);
}

.magnifier {
    position: absolute;
    right: 5px;
    top: 10px;
    width: 180px;
    height: 180px;
    padding-top: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 34px rgba(72, 82, 94, .16);
    text-align: center;
}

.magnifier span,
.magnifier em {
    display: block;
    color: #888;
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
}

.magnifier strong {
    display: block;
    margin: 6px 0 8px;
    color: #333;
    font-size: 28px;
    line-height: 1;
}

.orbit {
    position: relative;
    width: 500px;
    height: 300px;
    transform: rotate(-10deg);
}

.orbit::before,
.orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.orbit::before {
    left: 44px;
    top: 34px;
    width: 410px;
    height: 230px;
    border: 2px dashed #cfe8ef;
}

.orbit::after {
    left: 112px;
    top: 62px;
    width: 285px;
    height: 176px;
    background: rgba(225, 250, 255, .9);
    box-shadow: 0 0 0 45px rgba(237, 252, 255, .8);
}

.device {
    position: absolute;
    z-index: 2;
    border: 5px solid #2cc2df;
    background: #fff;
    box-shadow: 0 18px 35px rgba(34, 170, 198, .18);
}

.device.desktop {
    left: 212px;
    top: 112px;
    width: 150px;
    height: 90px;
}

.device.tablet {
    left: 130px;
    top: 145px;
    width: 90px;
    height: 68px;
}

.device.phone {
    left: 365px;
    top: 145px;
    width: 42px;
    height: 76px;
}

.cards {
    position: relative;
    height: 345px;
}

.sheet {
    position: absolute;
    width: 210px;
    height: 150px;
    border: 1px solid rgba(111, 230, 238, .5);
    border-radius: 6px;
    background: rgba(213, 249, 249, .48);
    transform: skewY(-20deg) rotate(-18deg);
}

.sheet:nth-child(1) {
    left: 20px;
    top: 104px;
    opacity: .35;
}

.sheet:nth-child(2) {
    left: 90px;
    top: 74px;
    opacity: .55;
}

.sheet:nth-child(3) {
    left: 165px;
    top: 44px;
}

.code-card {
    position: absolute;
    left: 212px;
    top: 105px;
    width: 92px;
    height: 128px;
    transform: rotate(-18deg);
    background: #13d0af;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 128px;
    text-align: center;
    box-shadow: 0 18px 35px rgba(19, 208, 175, .16);
}

.network {
    position: relative;
    height: 320px;
}

.network::before {
    content: "";
    position: absolute;
    left: 80px;
    right: 70px;
    bottom: 54px;
    height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 18% 55%, #9feaff 0 22px, transparent 23px),
        radial-gradient(circle at 48% 40%, #b8f1ff 0 18px, transparent 19px),
        radial-gradient(circle at 78% 60%, #d7f8ff 0 26px, transparent 27px),
        #fff;
    box-shadow: 0 0 0 34px rgba(255,255,255,.74);
}

.hub {
    position: absolute;
    left: 235px;
    bottom: 88px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #15d3ba;
    box-shadow: 0 0 0 10px rgba(21, 211, 186, .14);
}

.node {
    position: absolute;
    width: 42px;
    height: 42px;
    border: 4px solid #bfefff;
    border-radius: 50%;
    background: #fff;
}

.node:nth-child(2) { left: 120px; top: 80px; }
.node:nth-child(3) { left: 200px; top: 62px; }
.node:nth-child(4) { left: 300px; top: 96px; }
.node:nth-child(5) { left: 390px; top: 70px; }
.node:nth-child(6) { left: 420px; top: 190px; }

.lead-visual {
    position: relative;
    height: 350px;
}

.lead-bowl {
    position: absolute;
    left: 62px;
    top: 84px;
    width: 430px;
    height: 150px;
    border-radius: 52% 48% 54% 46% / 48% 48% 52% 52%;
    background: rgba(214, 246, 255, .78);
    border: 2px solid rgba(113, 211, 244, .7);
    box-shadow: 0 28px 0 rgba(216, 246, 255, .45);
}

.lead-bowl::before,
.lead-bowl::after {
    position: absolute;
    top: 56px;
    color: #333;
    font-size: 15px;
    font-weight: 700;
}

.lead-bowl::before {
    content: "销售线索汇集";
    left: 92px;
}

.lead-bowl::after {
    content: "商机分配";
    right: 92px;
}

.person,
.share {
    position: absolute;
    top: 42px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #16d0ae;
}

.person {
    left: 128px;
}

.share {
    right: 115px;
}

.beam {
    position: relative;
    height: 360px;
}

.beam::before {
    content: "";
    position: absolute;
    right: 40px;
    top: 86px;
    width: 410px;
    height: 160px;
    transform: rotate(35deg);
    border-radius: 90px;
    background: linear-gradient(90deg, rgba(74, 199, 255, .28), rgba(205, 255, 255, .7));
}

.beam::after {
    content: "";
    position: absolute;
    right: 92px;
    bottom: 12px;
    width: 260px;
    height: 130px;
    transform: rotate(-56deg);
    border-radius: 50%;
    background: rgba(75, 235, 231, .48);
}

.beam-icon {
    position: absolute;
    z-index: 2;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 30px rgba(64, 199, 223, .18);
}

.beam-icon::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 5px solid #22d2bc;
    border-radius: 50%;
}

.beam-icon:nth-child(1) { left: 128px; top: 72px; }
.beam-icon:nth-child(2) { left: 226px; top: 140px; }
.beam-icon:nth-child(3) { left: 338px; top: 92px; }

.anti-copy-note {
    position: fixed;
    left: -9999px;
    top: -9999px;
}

.door-footer {
    padding: 34px 0 38px;
    background: #fff;
    border-top: 1px solid #eee;
    text-align: center;
}

.door-footer p {
    margin: 0;
    color: #888;
    font-size: 13px;
    line-height: 2;
}

.door-footer a {
    color: #888;
}

.door-footer a:hover {
    color: #20b09f;
}