/* ==================== 基础样式 ==================== */
/* 设计稿基准: 375 x 640 */
/* 宽度换算: vw = px / 375 × 100 */
/* 高度换算: vh = px / 640 × 100 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 固定根字体 - 展开区域仍使用 rem */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}


/* ==================== 容器 ==================== */
.mobile-container {
    margin: 0 auto;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: transparent;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.first-full-page{
    height: 100dvh;
    background-image: url(../img/img_bg.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

/* ==================== Logo ==================== */
.logo-section {
    text-align: center;
    padding: clamp(12px, 3vh, 22px) 0 clamp(6px, 1.4vh, 12px);
}

.logo {
    height: clamp(32px, 6vh, 56px);
}

/* ==================== 英雄图 ==================== */
.hero-section {
    flex: 1 1 auto;
    min-height: 0;
    max-height: clamp(200px, 42vh, 360px);
    text-align: center;
    overflow: hidden;
}

.hero-image {
    width: 93.3vw;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* ==================== 主标题 ==================== */
.main-title {
    padding: clamp(6px, 1.1vh, 12px) 1.07vw;
    font-size: clamp(1.05rem, 4.8vw, 1.55rem);
    font-weight: 900;
    color: #041427;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.27vw;
}

/* ==================== 特性区域 ==================== */
.features {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 6vw, 32px);
    width: fit-content;
    padding: clamp(6px, 1vh, 12px) 5.33vw;
    margin: clamp(8px, 1.6vh, 14px) auto 0;
    background:
        /* 上边框 - 右上角渐变消失 */
        linear-gradient(90deg, white 0%, white 75%, transparent 100%) 0 0 / 100% 1px,
        /* 右边框 - 右上角渐变消失 */
        linear-gradient(180deg, transparent 0%, white 25%, white 100%) right 0 / 1px 100%,
        /* 下边框 - 左下角渐变消失 */
        linear-gradient(90deg, transparent 0%, white 25%, white 100%) left bottom / 100% 1px,
        /* 左边框 - 左下角渐变消失 */
        linear-gradient(180deg, white 0%, white 75%, transparent 100%) 0 0 / 1px 100%;
    background-repeat: no-repeat;
    border-radius: 6.4vw;
    box-shadow: 0 0.53vw 2.13vw rgba(0, 0, 0, 0.08);
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vh;
}

.feature-item img {
    width: clamp(18px, 5vw, 28px);
    height: clamp(18px, 5vw, 28px);
}

.feature-text {
    font-size: clamp(0.6rem, 3.2vw, 0.85rem);
    color: #041427;
    white-space: nowrap;
}

/* ==================== 下载区域 ==================== */
.download-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(12px, 3.2vh, 24px) 8.53vw clamp(4px, 0.8vh, 10px);
}

.download-btn {
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-bottom: 0.5vh;
}

.download-btn img {
    height: clamp(34px, 5.5vh, 54px);
}

.version-info {
    font-size: clamp(0.55rem, 2.88vw, 0.75rem);
    color: #999;
}

/* ==================== 展开提示区域 ==================== */
.expand-hint {
    text-align: center;
    padding: 0 8.53vw clamp(6px, 1.2vh, 12px);
    cursor: pointer;
    user-select: none;
}

.hint-text {
    font-size: clamp(0.7rem, 3.3vw, 0.95rem);
    font-weight: 500;
    color: #333;
    margin-bottom: clamp(4px, 0.8vh, 10px);
}

/* ==================== 箭头样式和动画 ==================== */
.arrow-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: clamp(22px, 3.4vh, 34px);
    height: clamp(22px, 3.4vh, 34px);
    transition: transform 0.3s ease;
    animation: float 2s ease-in-out infinite;
}

.arrow-wrapper img {
    width: clamp(14px, 3vw, 22px);
    height: clamp(14px, 3vw, 22px);
}

/* 箭头上下浮动动画 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1.25vh);
    }
}

/* 小高度屏幕：进一步压缩首屏占用，避免溢出 */
@media (max-height: 700px) {
    .logo {
        height: clamp(28px, 5.5vh, 48px);
    }

    .hero-section {
        max-height: clamp(180px, 38vh, 300px);
    }

    .download-btn img {
        height: clamp(30px, 5vh, 46px);
    }

    .main-title {
        font-size: clamp(1rem, 4.4vw, 1.45rem);
    }
}

/* ==================== 展开内容区域 ==================== */
.expand-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    margin-top: 0;
    background: linear-gradient(180deg, #E8F5FF 0%, #F0F8FF 100%);
}

.expand-content.expanded {
    max-height: 5000px;
    transition: max-height 0.8s ease-in;
}

/* ==================== 安装步骤（展开区域，保持 rem） ==================== */
.install-steps {
    margin-top: 1.5rem;
}

.steps-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00A8FF;
    text-align: center;
    margin: 3rem 0 1.5rem;
}

.step-item {
    margin-bottom: 1.5rem;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.step-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    height: 1.75rem;
    background: linear-gradient(135deg, #00A8FF 0%, #0080FF 100%);
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 700;
}

.step-title {
    font-size: 1rem;
    font-weight: 600;
    color: #00A8FF;
}

.step-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    padding-left: 2.5rem;
}

.step-image {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.step-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==================== iOS 特定优化 ==================== */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch;
    }
}