* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body.home {
    overflow: hidden;
    height: 100%;
}
body { font-family: "Microsoft YaHei", Arial, sans-serif; color: #fff; background: #010915; }
/* 第六屏横向全宽：不受其它屏 .section 的左右 7vw 内缩 */
#fullpage .footer-wrap {
    width: 100%;
    max-width: none;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 100vh;
}
#fullpage .footer-top-empty { flex: 0 0 42vh; }
#fullpage .footer-main { padding: 120px 78px 74px; }
.fullpage { height: 100vh; overflow: hidden; overscroll-behavior: none; }
.section { position: relative; height: 100vh; min-height: 760px; display: flex; align-items: center; justify-content: center; padding: 108px 7vw 64px; overflow: hidden; }
.section.footer-section {
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
}
.container { position: relative; max-width: 1320px; width: 100%; z-index: 2; }
.content { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.section.active .content { opacity: 1; transform: translateY(0); }
.fade-item { opacity: 0; transform: translateY(22px); transition: opacity .62s ease, transform .62s ease; }
.section.active .fade-item { opacity: 1; transform: translateY(0); }
.section.active .delay-1 { transition-delay: .14s; }
.section.active .delay-2 { transition-delay: .28s; }
.section.active .delay-3 { transition-delay: .42s; }
.hero { background: radial-gradient(circle at 73% 52%, rgba(46, 200, 255, .25) 0%, rgba(6, 54, 88, .14) 34%, rgba(1, 16, 34, .42) 74%), linear-gradient(130deg, #021325 10%, #022748 50%, #042b4d 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 9, 20, .35), rgba(0, 9, 20, .22)), url("img/top.png") center center / cover no-repeat; pointer-events: none; }
.hero-layout { display: grid; grid-template-columns: 1fr 400px; gap: 46px; align-items: center; margin-top: 24px; }
.hero-copy { padding-left: 54px; padding-top: 86px; }
.title { margin: 0 0 18px; font-size: 52px; line-height: 1.14; }
.hero-en { margin-top: 22px; font-size: 33px; color: rgba(255,255,255,.92); font-family: Arial, sans-serif; }
.hero-phone-wrap { opacity: 0; transform: translateX(42vw) scale(.92); }
.section.active .hero-phone-wrap { animation: flyInRight 1.2s cubic-bezier(.18,.78,.2,1) .15s forwards; }
.hero-phone {
width: 318px;
    height: 670px;
    margin-left: auto;
    border-radius: 44px;
    
}
.hero-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; }
@keyframes flyInRight { from { opacity: 0; transform: translateX(42vw) scale(.92);} to { opacity: 1; transform: translateX(0) scale(1);} }
.about {
    background: #010304;
}
.about::before {
    content: "";
    position: absolute;
    inset: 0;
    /* 背景图由 index.php 对 #s2 注入，避免 var() 无效时整句 background 作废 */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
.cert {
    background: #f1f3f5;
    color: #0f172a;
}
.cert::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.72) 0 36%, rgba(235,238,242,0.62) 36% 64%, rgba(255,255,255,0.72) 64% 100%);
    pointer-events: none;
}
.adv {
    background: #0a9b68;
}
.adv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("img/hxys.png") center center / cover no-repeat;
    pointer-events: none;
}
.xingou {
    background: #11b873;
}
.xingou::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("img/hxyw.png") center center / cover no-repeat;
    pointer-events: none;
}
.media-placeholder { width: 100%; border: 1px dashed rgba(255,255,255,.35); background: rgba(255,255,255,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; color: rgba(255,255,255,.88); font-size: 13px; padding: 10px; }
.about-layout,.app-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.about-content {
    max-width: 860px;
    padding-left: 22px;
}
.about-title {
    font-size: 54px;
    margin: 0;
    line-height: 1;
    letter-spacing: 1px;
    color: #2b2f33;
}
.about-line {
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: #00d971;
    margin: 24px 0 28px;
}
.about-desc {
    margin: 0;
    max-width: 820px;
    font-size: 17px;
    line-height: 2.05;
    color: rgba(38, 42, 46, 0.86);
}
.about-stats {
    display: flex;
    gap: 94px;
    margin-top: 54px;
}
.about-stat-num {
    font-size: 76px;
    line-height: 1;
    color: #00d971;
    font-weight: 700;
    letter-spacing: 1px;
}
.about-stat-unit {
    font-size: 40px;
    margin-left: 8px;
    color: #00d971;
    font-weight: 600;
}
.about-stat-label {
    margin-top: 24px;
    font-size: 20px;
    color: rgba(44, 49, 53, 0.62);
}
.about-more {
    margin-top: 52px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #00d971;
    text-decoration: none;
    font-size: 24px;
    border-bottom: 2px solid rgba(0, 217, 113, 0.45);
    padding-bottom: 6px;
}
.about-more-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #00d971;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}
.cert-layout {
    display: grid;
    grid-template-columns: 430px 1fr;
    align-items: center;
    gap: 26px;
}
.cert-content {
    padding-left: 18px;
}
.cert-title {
    font-size: 54px;
    margin: 0;
    line-height: 1;
    color: #2b2f33;
}
.cert-line {
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: #00d971;
    margin: 24px 0 28px;
}
.cert-desc {
    margin: 0;
    max-width: 360px;
    font-size: 17px;
    line-height: 2.05;
    color: rgba(38, 42, 46, 0.86);
}
.cert-board-wrap {
    width: 100%;
    min-height: 560px;
}
.cert-board {
    position: relative;
    width: 950px;
    height: 560px;
    margin-left: auto;
}
.cert-img {
    position: absolute;
    opacity: 0;
    transform: translate3d(var(--from-x), var(--from-y), 0) rotate(var(--from-r)) scale(0.84);
    transition: transform 1.08s cubic-bezier(.2,.8,.2,1), opacity .85s ease;
    will-change: transform, opacity;
    object-fit: cover;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.16));
    backface-visibility: hidden;
}
.section.active .cert-img {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
.cert-img.t1 { left: 18px; top: 30px; width: 240px; height: 290px; --from-x: -520px; --from-y: -240px; --from-r: -18deg; transition-delay: .08s; }
.cert-img.t2 { left: 285px; top: 26px; width: 240px; height: 295px; --from-x: 0; --from-y: -320px; --from-r: 10deg; transition-delay: .18s; }
.cert-img.t3 { left: 552px; top: 30px; width: 240px; height: 290px; --from-x: 520px; --from-y: -220px; --from-r: 16deg; transition-delay: .28s; }
.cert-img.b4 { left: 18px; top: 336px; width: 240px; height: 176px; --from-x: -460px; --from-y: 260px; --from-r: -16deg; transition-delay: .22s; }
.cert-img.b5 { left: 285px; top: 336px; width: 240px; height: 176px; --from-x: 0; --from-y: 320px; --from-r: 8deg; transition-delay: .32s; }
.cert-img.b6 { left: 552px; top: 336px; width: 240px; height: 176px; --from-x: 500px; --from-y: 280px; --from-r: 16deg; transition-delay: .42s; }
.cert-img.cover {
    left: 205px;
    top: 164px;
    width: 398px;
    height: 234px;
    z-index: 2;
    --from-x: 0;
    --from-y: -300px;
    --from-r: 0deg;
    transition-delay: .5s;
    transition-duration: 1.2s, .8s;
    transition-timing-function: cubic-bezier(.16,.84,.24,1), ease;
}
.adv-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 72px;
    align-items: center;
    color: #fff;
    margin-top: 34px;
}
.adv-left {
    padding-left: 26px;
}
.adv-title {
    font-size: 50px;
    line-height: 1;
    margin: 0;
    font-weight: 600;
}
.adv-line {
    width: 54px;
    height: 4px;
    border-radius: 2px;
    background: #00e38b;
    margin: 22px 0 30px;
}
.adv-card {
    padding: 22px 30px;
    min-height: 152px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.18);
    position: relative;
}
.adv-card.selected {
    background: url("img/hxysxz.png") center center / cover no-repeat;
    border-color: rgba(255,255,255,0.3);
}
.adv-card.selected::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 16px;
    bottom: 16px;
    width: 5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
}
.adv-card + .adv-card {
    border-top: none;
}
.adv-card-title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 500;
}
.adv-card-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: rgba(255,255,255,0.86);
}
.adv-more {
    margin-top: 42px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 26px;
    border-bottom: 1px solid rgba(255,255,255,0.48);
    padding-bottom: 4px;
}
.adv-more img {
    width: 24px;
    height: 24px;
    display: block;
}
.adv-circles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}
.adv-circle {
    width: 194px;
    height: 194px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.52);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 16px;
}
.adv-circle h4 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
}
.adv-circle p {
    margin: 0;
    font-size: 12px;
    line-height: 1.62;
    color: rgba(255,255,255,0.86);
}
.xingou-layout {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xingou .container {
    max-width: min(1920px, 96vw);
}
/*
 * 第五屏：手机宽高用「舞台 phones-stage 宽的百分比」，超宽屏随行放大（max 封顶）；左右锚点用 % 略外扩。
 * 平板/手机仍以 @media 内规则为准。
 */
.phones-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: clamp(560px, min(900px, 88vh), 900px);
    margin: 0 auto;
}
.phone {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(150px, 18.8%, 360px);
    height: auto;
    aspect-ratio: 323 / 698;
    object-fit: cover;
    border-radius: clamp(14px, 1.4vw, 22px);
    filter: drop-shadow(0 14px 24px rgba(0,0,0,0.2));
    transition: transform .65s ease, opacity .65s ease;
}
.p1 {
    width: clamp(175px, 24.8%, 430px);
    aspect-ratio: 400 / 823;
    z-index: 4;
}
.p2 { left: 29%; z-index: 5; }
.p3 { left: 71%; z-index: 5; }
.p4 { left: 9%; z-index: 2; }
.p5 { left: 91%; z-index: 2; }
.phone-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(220px, 29.8%, 520px);
    /* 与舞台同量级高度，避免过高被父级裁切；不用过小的 min-height，否则 cover 易把 hxywbg 裁成「只剩绿底」 */
    height: min(900px, calc(100vh - 160px));
    min-height: 560px;
    background: url("img/hxywbg.png") center center / contain no-repeat;
    z-index: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.xingou-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    text-align: center;
    color: rgba(255,255,255,0.88);
    font-size: clamp(22px, 2.35vw + 12px, 40px);
    letter-spacing: 1px;
    z-index: 6;
}
.xingou-more {
    position: absolute;
    right: clamp(24px, 7vw, 74px);
    bottom: clamp(72px, 10vh, 98px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: clamp(17px, 1.85vw + 10px, 34px);
    border-bottom: 1px solid rgba(255,255,255,0.48);
    padding-bottom: 4px;
    z-index: 6;
}
.xingou-more img {
    width: 26px;
    height: 26px;
}
.right-dots { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 31; display: flex; flex-direction: column; gap: 12px; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: transparent; cursor: pointer; }
.dot.active { background: #31d67b; border-color: #31d67b; }

/* —— 平板 / 手机（<1024px）：纵向滚动 + 版面收缩（汉堡见 css/site-common.css） —— */
@media (max-width: 1023px) {
    html { scroll-behavior: smooth; }
    body.home {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    body.home .fullpage {
        height: auto !important;
        overflow: visible !important;
        overscroll-behavior: auto;
    }
    body.home .section {
        position: relative;
        height: auto !important;
        min-height: 0 !important;
        padding: 88px 16px 48px;
        overflow: visible;
    }
    body.home .section.footer-section {
        padding: 0;
    }

    body.home .hero-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 0;
        text-align: center;
    }
    body.home .hero-copy {
        padding: 16px 8px 0;
        order: 1;
    }
    body.home .title {
        font-size: clamp(28px, 7vw, 38px);
    }
    body.home .hero-en {
        font-size: clamp(14px, 3.5vw, 20px);
    }
    body.home .hero-phone-wrap {
        order: 2;
        margin: 0 auto;
        max-width: 260px;
    }
    body.home .hero-phone {
        width: 100%;
        height: auto;
        min-height: 360px;
        max-height: 480px;
    }
    body.home .hero-phone img {
        max-height: 430px;
        object-fit: cover;
    }
    body.home .section.active .hero-phone-wrap {
        animation: none;
        opacity: 1;
        transform: none;
    }

    body.home .about-content {
        padding-left: 0;
        max-width: none;
    }
    body.home .about-title,
    body.home .cert-title {
        font-size: clamp(32px, 8vw, 44px);
    }
    body.home .about-desc {
        font-size: 15px;
        line-height: 1.75;
        max-width: none;
    }
    body.home .about-stats {
        flex-wrap: wrap;
        gap: 28px 40px;
        justify-content: flex-start;
    }
    body.home .about-stat-num {
        font-size: clamp(42px, 10vw, 56px);
    }
    body.home .about-stat-unit {
        font-size: 26px;
    }
    body.home .about-stat-label {
        font-size: 14px;
    }
    body.home .about-more {
        font-size: 18px;
    }

    body.home .cert-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    body.home .cert-content {
        padding-left: 0;
    }
    body.home .cert-desc {
        max-width: none;
        font-size: 15px;
    }
    body.home .cert-board-wrap {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 0 -8px;
        padding: 8px;
    }
    body.home .cert-board {
        width: 950px;
        height: 560px;
        flex-shrink: 0;
        margin-left: auto;
        margin-right: auto;
        transform-origin: center top;
    }

    body.home .adv-layout {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 16px;
    }
    body.home .adv-left {
        padding-left: 4px;
    }
    body.home .adv-title {
        font-size: clamp(30px, 7vw, 40px);
    }
    body.home .adv-card-title {
        font-size: 22px;
    }
    body.home .adv-card-desc {
        font-size: 13px;
    }
    body.home .adv-more {
        font-size: 18px;
    }
    body.home .adv-circles {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        justify-items: center;
    }
    body.home .adv-circle {
        width: 100%;
        max-width: 200px;
        height: auto;
        min-height: 160px;
        aspect-ratio: 1;
    }
    body.home .adv-circle h4 {
        font-size: 15px;
    }
    body.home .adv-circle p {
        font-size: 11px;
    }

    body.home .xingou-layout {
        min-height: auto;
        padding-bottom: 100px;
    }
    body.home .xingou .container {
        max-width: 100%;
    }
    body.home .phones-stage {
        height: 320px;
        margin-top: 8px;
    }
    body.home .phones-stage .phone-bg {
        height: 320px;
        width: min(280px, 70vw);
    }
    body.home .phones-stage .phone:not(.p1) {
        display: none;
    }
    body.home .phones-stage .phone.p1 {
        width: min(260px, 62vw);
        height: auto;
        max-height: 320px;
        object-fit: contain;
    }
    body.home .xingou-title {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 20px;
        font-size: 22px;
        padding-bottom: 8px;
    }
    body.home .xingou-more {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 16px;
        font-size: 18px;
        justify-content: center;
    }

    body.home .right-dots {
        right: 10px;
        bottom: calc(24px + env(safe-area-inset-bottom, 0));
        top: auto;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 120px;
        justify-content: flex-end;
        gap: 8px;
    }
    body.home .dot {
        width: 9px;
        height: 9px;
    }

    body.home .top-nav {
        flex-wrap: wrap;
        align-items: flex-start;
        height: auto;
        min-height: 72px;
        padding: 14px 16px 14px;
    }
    body.home .top-nav .brand {
        flex: 1 1 auto;
        padding-top: 6px;
    }
    body.home .brand-logo.default {
        max-width: 140px;
        width: auto;
        height: auto;
    }
    body.home .top-nav.on-footer .brand-logo.footer {
        max-width: 150px;
    }
    body.home #menu.menu {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 16px 0 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    body.home .top-nav.on-light #menu.menu {
        border-top-color: rgba(0, 0, 0, 0.08);
    }
    body.home .top-nav.nav-open #menu.menu {
        display: flex;
    }
    body.home .menu-item {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    body.home .top-nav.on-light .menu-item {
        border-bottom-color: rgba(0, 0, 0, 0.06);
    }
    body.home .menu-link {
        padding: 14px 8px;
        font-size: 17px;
    }
    body.home .menu-item .submenu {
        position: static;
        transform: none;
        display: none;
        padding: 8px 0 12px;
        text-align: left;
        margin-left: 8px;
    }
    body.home .menu-item.open .submenu {
        display: block;
    }
    body.home .submenu a {
        padding: 10px 8px;
        font-size: 15px;
    }

    body.home .footer-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        font-size: 12px;
    }
    body.home .section .content {
        opacity: 1 !important;
        transform: none !important;
    }
    body.home .section .fade-item {
        opacity: 1 !important;
        transform: none !important;
    }
    body.home .section:not(.active) .cert-img {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}

@media (max-width: 600px) {
    body.home .adv-circles {
        grid-template-columns: 1fr;
    }
    body.home .adv-circle {
        max-width: none;
        width: 100%;
        aspect-ratio: auto;
        min-height: 0;
    }
}

/* 中大型平板：收窄间距（全屏滚动与证书画布比例保持 PC） */
@media (max-width: 1280px) and (min-width: 1024px) {
    .hero-layout {
        grid-template-columns: 1fr min(340px, 34vw);
        gap: 32px;
    }
    .hero-copy {
        padding-left: 28px;
    }
    .title {
        font-size: 42px;
    }
    .menu {
        gap: 56px;
    }
    .top-nav {
        padding-left: 28px;
        padding-right: 36px;
    }
    .cert-layout {
        grid-template-columns: min(340px, 30vw) 1fr;
        gap: 16px;
    }
    .cert-title {
        font-size: 44px;
    }
    .cert-board-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
}