*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Microsoft YaHei,sans-serif;
}
/* 全局自适应基准：1rem=16px，手机自动缩小基准字号 */
html{
    font-size:16px;
}
@media screen and (max-width:768px){
    html{
        font-size:14px;
    }
}
@media screen and (max-width:480px){
    html{
        font-size:13px;
    }
}
:root{
    --dark-bg:#27272C;
    --green:#18CD4E;
    --white:#fff;
    --gray-light:#B8B8C0;
    --gray-mid:#888890;
}
body{
    background:var(--dark-bg);
    color:var(--white);
    line-height:1.7;
    /* 禁止手机横向滚动错乱 */
    overflow-x:hidden;
}
/* 导航栏 */
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.125rem 6%;
    position:sticky;
    top:0;
    background:#1f1f23;
    z-index:999;
    gap:1rem;
    flex-wrap:wrap;
}
.nav-logo {
    display: flex;
    align-items: center;
}
.nav-logo img {
    height: 2.25rem;
    width: auto;
}
.nav-menu{
    display:flex;
    gap:2.25rem;
}
.nav-menu a{
    color:var(--gray-light);
    text-decoration:none;
    font-size:0.9375rem;
    transition:0.2s;
}
.nav-menu a:hover{
    color:var(--green);
}
.nav-btns{
    display:flex;
    gap:1.25rem;
    align-items:center;
}
.btn-user{
    padding:0.5625rem 1.125rem;
    border:1px solid var(--gray-light);
    border-radius:6px;
    color:var(--gray-light);
    text-decoration:none;
    font-size:0.875rem;
    white-space:nowrap;
}
.btn-download{
    padding:0.5625rem 1.375rem;
    background:var(--green);
    border-radius:6px;
    color:#111;
    text-decoration:none;
    font-weight:500;
    font-size:0.875rem;
    white-space:nowrap;
}
/* Banner外层：1440:618固定比例背景图 */
.banner {
    width: 100%;
    aspect-ratio: 1440 / 618;
    background: url("../images/banner.png") center / cover no-repeat;
    position: relative;
    padding: 0 6%;
}

/* 按钮容器 */
.banner-btn-wrap {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 20%;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* 绿色按钮：下载律师版APP */
.btn-green {
    padding: 0.875rem 2.25rem;
    background: #008156;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.9375rem;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

/* 白色按钮：在线客服咨询入驻 */
.btn-white {
    padding: 0.875rem 2.25rem;
    background: #ffffff;
    border: 1px solid #008156;
    border-radius: 999px;
    color: #008156;
    font-size: 0.9375rem;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

/* 轻量化回到顶部按钮 */
.back-top{
    position: fixed;
    right: 1.25rem;
    bottom: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(4px);
    color: var(--gray-light);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.24s ease;
}
.back-top.show{
    opacity: 1;
    visibility: visible;
}
.back-top:hover{
    background: rgba(24,205,78,0.2);
    color: var(--green);
}

/* 通用区块 */
.section{
    padding:4.375rem 6%;
}
.section-title{
    text-align:center;
    margin-bottom:3.75rem;
}
.section-title h2{
    font-size:clamp(1.375rem,3vw,1.875rem);
    margin-bottom:0.625rem;
}
.section-title p{
    color:var(--gray-light);
    font-size:0.9375rem;
}
/* 四大功能外层容器 */
.func-list{
    display:flex;
    flex-direction:column;
    gap:4rem; /* PC模块上下间距从6rem缩小 */
    max-width: 1200px; /* 限制整组内容最大宽度，2K屏不再无限拉伸 */
    margin:0 auto; /* 大屏内容自动居中，不会贴满屏幕两侧 */
}
/* 单组图文容器 全局统一两栏 */
.func-item{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
    gap:1.8rem; /* PC图文左右间距从4rem缩小 */
}
/* 左图右文 */
.item-left .func-phone-box{order:1;}
.item-left .func-text{order:2;}
/* 左文右图 */
.item-right .func-phone-box{order:2;}
.item-right .func-text{order:1;}

/* 手机截图容器 悬浮阴影效果 */
.func-phone-box{
    display:flex;
    justify-content:center;
}
.phone-img-box{
    width: min(100%, 260px);
    height:370px;
    background:#27272C;
    border-radius:8px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* 四张截图背景图 */
.phone-img-box.img-case{
    background-image: url("../images/case.png");
}
.phone-img-box.img-order{
    background-image: url("../images/order.png");
}
.phone-img-box.img-msg{
    background-image: url("../images/message.png");
}
.phone-img-box.img-mine{
    background-image: url("../images/user.png");
}

/* 文字区域样式 */
.func-text h3{
    font-size:1.6rem;
    margin-bottom:1rem;
    color:var(--green);
}
.func-text p{
    color:var(--gray-light);
    font-size:1rem;
    line-height:1.7;
}

/* 入驻流程 */
.flow-wrap{
    display:flex;
    justify-content:center;
    gap:1.875rem;
    text-align:center;
    flex-wrap:wrap;
}
.flow-item{
    flex:1;
    min-width:140px;
    max-width:220px;
}
.flow-num{
    width:2.5rem;
    height:2.5rem;
    background:var(--green);
    color:#000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 0.875rem;
    font-weight:bold;
}
/* 收益优势外层容器 */
.profit-wrap{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.25rem;
    text-align:center;
}
.profit-card{
    background:#2f2f35;
    padding:1.875rem;
    border-radius:12px;
    height:100%; /* 三栏PC端自动等高 */
}
.profit-card h3{
    color:var(--green);
    margin-bottom:0.625rem;
    font-size:1.125rem;
}
.profit-card p{
    color:var(--gray-light);
    font-size:0.875rem;
    line-height:1.7;
}
/* 下载区块 */
.download-wrap{
    display:flex;
    align-items:center;
    gap:3.75rem;
    justify-content:center;
    background:#2f2f35;
    border-radius:14px;
    padding:3.125rem;
    margin-top:1.25rem;
    flex-wrap:wrap;
    text-align:center;
}
.download-text{
    flex:1;
    min-width:280px;
}
.download-text h3{
    font-size:1.625rem;
    margin-bottom:1rem;
}
.download-text p{
    color:var(--gray-light);
    margin-bottom:1.875rem;
}
.download-qrcode{
    display:flex;
    gap:1.875rem;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
}
.qrcode-box{
    text-align:center;
}
/* 二维码占位框 单张二维码 */
.qr-box{
    width:8.75rem;
    height:8.75rem;
    background:#fff;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#222;
    margin-bottom:0.75rem;
    border:1px dashed #999;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* FAQ */
.faq-item{
    background:#2f2f35;
    padding:1rem 1.25rem;
    border-radius:8px;
    margin-bottom:0.75rem;
}
.faq-item h4{
    margin-bottom:0.375rem;
    color:var(--green);
    font-size:1rem;
}
.faq-item p{
    color:var(--gray-light);
    font-size:0.875rem;
}
/* 页脚 */
.footer{
    padding:2.5rem 6%;
    border-top:1px solid #3a3a42;
    margin-top:2.5rem;
    text-align:center;
    color:var(--gray-mid);
    font-size:0.875rem;
}
.footer-links{
    margin-bottom:0.75rem;
    display:flex;
    gap:1.5rem;
    justify-content:center;
    flex-wrap:wrap;
}
.footer-links a{
    color:var(--gray-light);
    text-decoration:none;
}

/* ========== 移动端媒体查询 核心适配规则 ========== */
/* 平板、大屏手机 768px以下 */
@media screen and (max-width:768px){
    /* 导航菜单隐藏，仅保留logo和按钮 */
    .nav-menu{
        display:none;
    }
    .section{
        padding:3rem 4%;
    }
    .banner {
        padding: 0 4%;
        margin-bottom: 0;
    }
    .banner-btn-wrap {
        left: 4%;
        right: 4%;
        bottom: 15%;
        justify-content: flex-start;
        gap: 1.25rem;
    }
    .btn-green, .btn-white {
        padding: 0.75rem 1.75rem;
        font-size: 0.875rem;
    }
    .func-list{
        gap:3rem;
    }
    .func-item{
        gap:1.5rem; /* 平板图文间距再收缩 */
    }
    .phone-img-box{
        width: min(100%, 200px);
        height:300px;
    }
    .func-text h3{
        font-size:1.3rem;
    }
    /* 收益3栏变1栏 */
    .profit-wrap{
        grid-template-columns: 1fr;
    }
    .download-wrap{
        padding:2rem 1rem;
    }
    .profit-wrap{
        grid-template-columns: repeat(2,1fr);
        gap:1rem;
    }
    .profit-card{
        padding:1.5rem 1.25rem;
    }
}
/* 小屏手机 480px以下 */
@media screen and (max-width:480px){
    /* 功能卡片2栏变1栏 */
    .func-wrap{
        grid-template-columns: 1fr;
    }
    .banner-btn-wrap {
        top: auto;
        left: 4%;
        right: 4%;
        bottom: 15%;
        transform: none;
        flex-direction: row;
        justify-content: flex-start;
        width: auto;
        gap: 1rem;
    }
    .banner {
        margin-bottom: 0;
    }
    .btn-green, .btn-white {
        text-align: center;
        width: auto;
        padding: 0.425rem 1rem;
        font-size: 0.75rem;
    }
    /* 导航按钮缩小 */
    .nav-btns{
        gap:0.625rem;
    }
    .section{
        padding:2rem 4%;
    }
    .btn-user,.btn-download{
        padding:0.5rem 0.75rem;
        font-size:0.75rem;
    }
    .func-list{
        gap:2.2rem;
    }
    .func-item{
        gap:0.8rem; /* 手机最小图文间距 */
    }
    .phone-img-box{
        width: min(100%, 140px);
        height:220px;
    }
    .func-text h3{
        font-size:1.1rem;
        margin-bottom:0.5rem;
    }
    .func-text p{
        font-size:0.825rem;
        line-height:1.6;
    }
    /* 悬浮按钮缩小 */
    .float-switch{
        right:1rem;
        padding:0.5rem 0.75rem;
        font-size:0.75rem;
    }
    /* 区块左右内边距缩小 */
    .section,.banner,.nav{
        padding-left:4%;
        padding-right:4%;
    }
    .profit-wrap{
        grid-template-columns: 1fr;
        gap:1rem;
    }
    .profit-card{
        padding:1rem 0.875rem;
    }
    .profit-card h3{
        font-size:1rem;
    }
    .profit-card p{
        font-size:0.8125rem;
    }
}
/* 客服弹窗遮罩层 */
.modal-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease all;
}
.modal-mask.show {
    opacity: 1;
    visibility: visible;
}
/* 弹窗主体卡片 */
.modal-box {
    width: min(90%, 420px);
    background: #2f2f35;
    border-radius: 14px;
    padding: 2.25rem 1.875rem;
    text-align: center;
    transform: translateY(12px);
    transition: 0.25s ease all;
}
.modal-mask.show .modal-box {
    transform: translateY(0);
}
.modal-title {
    font-size: 1.375rem;
    color: #fff;
    margin-bottom: 0.75rem;
}
.modal-desc {
    color: var(--gray-light);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.modal-email {
    background: rgba(24,205,78,0.12);
    border: 1px solid var(--green);
    border-radius: 8px;
    padding: 0.875rem;
    font-size: 1.0625rem;
    color: var(--green);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 1.75rem;
}
.modal-close-btn {
    width: 100%;
    padding: 0.875rem;
    border-radius: 8px;
    border: none;
    background: var(--green);
    color: #111;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}
.modal-close-btn:hover {
    opacity: 0.9;
}