*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    min-height:100%;
}

body{
    background:#021f18;
    font-family:Arial,"Microsoft YaHei",sans-serif;
    color:#fff;
    overflow-x:hidden;
}

/* 首页容器 */
.landing{
    width:100%;
    max-width:430px;

    min-height:100vh;
    min-height:100svh;

    margin:0 auto;
    position:relative;
    overflow:hidden;

    padding:
        calc(30px + env(safe-area-inset-top))
        22px
        calc(24px + env(safe-area-inset-bottom));

    display:flex;
    flex-direction:column;

    background:
        radial-gradient(circle at 50% 0%, rgba(4,133,98,.55), transparent 34%),
        radial-gradient(circle at 15% 78%, rgba(4,133,98,.35), transparent 36%),
        linear-gradient(180deg,#032c22 0%,#021d17 48%,#01130f 100%);
}

/* 背景发光 */
.bg-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(18px);
    opacity:.65;
    pointer-events:none;
}

.bg-glow-1{
    width:220px;
    height:220px;
    background:rgba(4,133,98,.45);
    top:-60px;
    right:-80px;
}

.bg-glow-2{
    width:260px;
    height:260px;
    background:rgba(187,253,7,.10);
    left:-120px;
    bottom:70px;
}

/* 高级线条 */
.line-deco{
    position:absolute;
    width:360px;
    height:360px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    pointer-events:none;
}

.line-deco-1{
    top:-170px;
    left:-160px;
}

.line-deco-2{
    right:-210px;
    bottom:-170px;
}

/* Logo */
.top-logo{
    position:relative;
    z-index:2;

    width:100%;
    display:flex;
    justify-content:center;

    margin-bottom:30px;
}

.top-logo img{
    width:auto;
    max-width:260px;
    max-height:58px;
    object-fit:contain;
}

/* 主内容 */
.hero{
    position:relative;
    z-index:2;

    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;

    text-align:center;

    padding-bottom:10px;
}

.hero-badge{
    width:60px;
    height:60px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(4,133,98,.22);
    border:1px solid rgba(187,253,7,.36);

    box-shadow:
        0 0 0 7px rgba(4,133,98,.10),
        0 14px 34px rgba(0,0,0,.26),
        inset 0 0 22px rgba(4,133,98,.3);
}

.hero-badge span{
    font-size:26px;
}

.hero h1{
    margin:0;

    font-size:34px;
    line-height:1.06;
    font-weight:900;
    letter-spacing:-1.2px;

    text-shadow:0 8px 20px rgba(0,0,0,.32);
}

.hero h1 strong{
    display:inline-block;
    margin-top:4px;

    font-size:36px;
    line-height:1.06;

    color:#f7d46b;
    background:linear-gradient(180deg,#fff2a6 0%,#f2c14f 45%,#bf7f21 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:none;
}

.hero-desc{
    margin:24px auto 0;
    max-width:360px;

    font-size:16.5px;
    line-height:1.62;
    color:rgba(255,255,255,.88);
    font-weight:500;
}

.premium-line{
    margin:22px auto 0;
    max-width:330px;

    color:#f7d46b;
    font-size:16.5px;
    line-height:1.42;
    font-weight:800;
}

.premium-line::before{
    content:"★";

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:31px;
    height:31px;

    margin-right:9px;

    border-radius:50%;
    border:1px solid rgba(247,212,107,.55);

    color:#f7d46b;
    font-size:15px;
}

/* 按钮 */
.hero-btn{
    width:100%;
    height:56px;

    margin-top:34px;

    border:1px solid rgba(247,212,107,.62);
    border-radius:18px;

    background:
        linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),
        linear-gradient(135deg,#04b786 0%,#048562 55%,#03664c 100%);

    color:#fff;

    font-size:18px;
    font-weight:900;
    letter-spacing:.4px;

    cursor:pointer;

    box-shadow:
        0 15px 32px rgba(4,133,98,.36),
        0 0 0 5px rgba(4,133,98,.10),
        inset 0 1px 0 rgba(255,255,255,.32);
}

.hero-btn:active{
    transform:translateY(1px);
}

/* 登录弹窗 */
.mask{
    display:none;

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.55);

    z-index:50;

    align-items:center;
    justify-content:center;

    padding:20px;
}

.modal{
    width:100%;
    max-width:395px;

    background:#f8f8f8;

    border-radius:22px;
    overflow:hidden;

    position:relative;

    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.tabs{
    display:flex;
    background:#fff;
}

.tab{
    flex:1;

    text-align:center;

    padding:15px 12px;

    font-weight:900;
    color:#666;

    border-bottom:3px solid transparent;

    cursor:pointer;
}

.tab.active{
    color:#048562;
    border-bottom-color:#048562;
}

.formbox{
    margin:26px 16px;
    background:#fff;

    border-radius:16px;

    padding:20px 18px;
}

.input{
    width:100%;
    height:47px;

    border:1px solid #ddd;
    border-radius:14px;

    margin-bottom:13px;
    padding:0 15px;

    font-size:16px;

    outline:none;
}

.input:focus{
    border-color:#048562;
    box-shadow:0 0 0 3px rgba(4,133,98,.16);
}

.fullbtn{
    width:100%;
    height:49px;

    border:none;
    border-radius:12px;

    background:#048562;
    color:#fff;

    font-size:16px;
    font-weight:900;

    cursor:pointer;
}

.close{
    position:fixed;
    left:50%;
    top:calc(50% + 220px);
    transform:translateX(-50%);

    width:50px;
    height:50px;

    border-radius:50%;

    background:#fff;
    color:#666;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;
    font-weight:300;

    cursor:pointer;
    z-index:60;

    box-shadow:0 10px 30px rgba(0,0,0,.28);
}

/* 普通手机优化 */
@media(max-width:430px){
    .landing{
        padding-top:calc(28px + env(safe-area-inset-top));
        padding-left:20px;
        padding-right:20px;
        padding-bottom:calc(22px + env(safe-area-inset-bottom));
    }

    .top-logo{
        margin-bottom:34px;
    }

    .top-logo img{
        max-width:248px;
        max-height:54px;
    }

    .hero-badge{
        width:58px;
        height:58px;
        margin-bottom:18px;
    }

    .hero-badge span{
        font-size:25px;
    }

    .hero h1{
        font-size:32px;
        line-height:1.06;
        letter-spacing:-1px;
    }

    .hero h1 strong{
        font-size:34px;
    }

    .hero-desc{
        margin-top:22px;
        font-size:16px;
        line-height:1.56;
    }

    .premium-line{
        margin-top:20px;
        font-size:16px;
        line-height:1.38;
    }

    .hero-btn{
        height:56px;
        border-radius:18px;
        font-size:17px;
    }
}

/* 小屏 iPhone 优化 */
@media(max-width:430px){
    .landing{
        padding-top:calc(26px + env(safe-area-inset-top));
        padding-left:20px;
        padding-right:20px;
        padding-bottom:calc(22px + env(safe-area-inset-bottom));
    }

    .top-logo{
        margin-bottom:26px;
    }

    .top-logo img{
        max-width:248px;
        max-height:54px;
    }

    .hero{
        justify-content:center;
        padding-bottom:6px;
    }

    .hero-badge{
        width:56px;
        height:56px;
        margin-bottom:17px;
    }

    .hero-badge span{
        font-size:24px;
    }

    .hero h1{
        font-size:32px;
        line-height:1.06;
        letter-spacing:-1px;
    }

    .hero h1 strong{
        font-size:34px;
    }

    .hero-desc{
        margin-top:21px;
        font-size:15.8px;
        line-height:1.55;
    }

    .premium-line{
        margin-top:19px;
        font-size:15.8px;
        line-height:1.38;
    }

    .hero-btn{
        height:55px;
        margin-top:30px;
        border-radius:18px;
        font-size:17px;
    }
}

@media(max-width:360px){
    .landing{
        padding-top:calc(22px + env(safe-area-inset-top));
        padding-left:18px;
        padding-right:18px;
        padding-bottom:calc(18px + env(safe-area-inset-bottom));
    }

    .top-logo{
        margin-bottom:22px;
    }

    .top-logo img{
        max-width:230px;
        max-height:50px;
    }

    .hero-badge{
        width:52px;
        height:52px;
        margin-bottom:14px;
    }

    .hero-badge span{
        font-size:22px;
    }

    .hero h1{
        font-size:29px;
    }

    .hero h1 strong{
        font-size:31px;
    }

    .hero-desc{
        margin-top:17px;
        font-size:14.8px;
        line-height:1.48;
    }

    .premium-line{
        margin-top:15px;
        font-size:14.8px;
        line-height:1.34;
    }

    .premium-line::before{
        width:28px;
        height:28px;
        font-size:13px;
        margin-right:7px;
    }

    .hero-btn{
        height:52px;
        margin-top:24px;
        font-size:16px;
    }
}

/* 握手图标动画 */
.hero-badge{
    position:relative !important;
    animation: badgeFloat 2.6s ease-in-out infinite !important;
}

.hero-badge::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:1px solid rgba(247,212,107,.35);
    animation: badgePulse 1.8s ease-in-out infinite !important;
}

.hero-badge span{
    display:inline-block !important;
    position:relative !important;
    z-index:2 !important;
    transform-origin:center center !important;
    animation: handshakeShake 1.6s ease-in-out infinite !important;
}

@keyframes badgeFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-5px);
    }
}

@keyframes badgePulse{
    0%{
        transform:scale(.92);
        opacity:.35;
    }
    50%{
        transform:scale(1.12);
        opacity:.9;
    }
    100%{
        transform:scale(.92);
        opacity:.35;
    }
}

@keyframes handshakeShake{
    0%,100%{
        transform:rotate(0deg) scale(1);
    }
    20%{
        transform:rotate(-14deg) scale(1.12);
    }
    40%{
        transform:rotate(14deg) scale(1.12);
    }
    60%{
        transform:rotate(-8deg) scale(1.06);
    }
    80%{
        transform:rotate(8deg) scale(1.04);
    }
}

/* 顶部返回 / 关闭按钮：APP WebView 兼容版 */
.top-logo{
    position:relative;
}

.top-action-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;

    padding:0;
    margin:0;

    border:1px solid rgba(247,212,107,.34);
    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    z-index:30;

    -webkit-appearance:none;
    appearance:none;

    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;

    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.top-action-btn:active{
    transform:translateY(-50%) scale(.96);
}

.top-back-btn{
    left:0;
}

.top-close-btn{
    right:0;
}

/* 返回箭头：不用文字，用 CSS 画 */
.top-back-btn::before{
    content:"";
    width:10px;
    height:10px;

    border-left:2px solid #f7d46b;
    border-bottom:2px solid #f7d46b;

    transform:rotate(45deg);
    margin-left:4px;
}

/* 关闭 X：不用文字，用 CSS 画 */
.top-close-btn::before,
.top-close-btn::after{
    content:"";
    position:absolute;

    width:14px;
    height:2px;

    background:#f7d46b;
    border-radius:99px;
}

.top-close-btn::before{
    transform:rotate(45deg);
}

.top-close-btn::after{
    transform:rotate(-45deg);
}

@media(max-width:360px){
    .top-action-btn{
        width:32px;
        height:32px;
        min-width:32px;
        min-height:32px;
    }

    .top-back-btn::before{
        width:9px;
        height:9px;
    }

    .top-close-btn::before,
    .top-close-btn::after{
        width:13px;
    }
}

html,
body{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    touch-action:manipulation;
}

button,
a,
input,
textarea,
select{
    touch-action:manipulation;
}