/* 响应式样式 */
/* 断点设置：320px, 768px, 1024px, 1440px */

/* 基础响应式设置 */
* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* 基准字体大小 */
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body {
    font-size: 2.0rem;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* 容器响应式 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* 特色卡片响应式布局 */
@media (max-width: 1200px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr); /* 中等屏幕显示2列 */
    }
}

/* 会员卡片响应式布局 */
@media (max-width: 1200px) {
    .member-grid {
        grid-template-columns: repeat(2, 1fr); /* 中等屏幕显示2列 */
    }
}

@media (max-width: 768px) {
    .member-grid {
        grid-template-columns: 1fr !important; /* 移动端显示1列 */
        gap: 1.5rem; /* 增加间距，提高可读性 */
        padding: 0 1rem; /* 增加容器内边距 */
    }
    
    .feature-grid {
        grid-template-columns: 1fr !important; /* 移动端特色板块显示1列 */
        gap: 2rem !important; /* 增加间距，提高可读性 */
        padding: 0 1rem; /* 增加容器内边距 */
    }
    
    .feature-card {
        padding: 2rem !important; /* 增加特色卡片内边距，提高可读性 */
    }
    
    .video-thumbnail {
        height: 220px; /* 移动端增加高度以适应1列布局 */
        margin: 0; /* 确保没有外边距 */
        padding: 0; /* 确保没有内边距 */
    }
    
    .member-card {
        min-width: 0; /* 允许卡片缩小 */
        padding: 0 !important; /* 移动端也移除内边距 */
        margin: 0; /* 确保没有外边距 */
    }
    
    .member-info {
        padding: 1.5rem 1.5rem 1.5rem 1.5rem; /* 增加内边距，提高可读性 */
    }
    
    .member-basic-info {
        font-size: 1.4rem; /* 增加字体大小，提高可读性 */
        gap: 0.5rem; /* 增加间距 */
        margin-bottom: 1rem; /* 增加底部间距 */
    }
    
    .member-name {
        font-size: 1.6rem; /* 增加字体大小 */
    }
    
    .member-details {
        font-size: 1.3rem; /* 增加字体大小 */
    }
    
    .member-location {
        font-size: 1.2rem; /* 增加字体大小 */
    }
    
    .member-desc {
        font-size: 1.2rem; /* 增加字体大小 */
        line-height: 1.5; /* 增加行高 */
    }
    
    .separator {
        font-size: 1.1rem; /* 增加字体大小 */
        margin: 0 0.3rem; /* 增加间距 */
    }
    
    /* 修复其他页面的卡片布局 */
    .case-grid {
        grid-template-columns: 1fr !important; /* 移动端案例显示1列 */
        gap: 2rem !important;
    }
    
    .process-grid {
        grid-template-columns: 1fr !important; /* 移动端流程显示1列 */
        gap: 2rem !important;
    }
    
    .pricing-info {
        grid-template-columns: 1fr !important; /* 移动端定价信息显示1列 */
        gap: 2rem !important;
    }
    
    .contact-grid {
        grid-template-columns: 1fr !important; /* 移动端联系方式显示1列 */
        gap: 2rem !important;
    }
    
    .service-info {
        grid-template-columns: 1fr !important; /* 移动端服务信息显示1列 */
        gap: 2rem !important;
    }
    
    .faq-grid {
        grid-template-columns: 1fr !important; /* 移动端FAQ显示1列 */
        gap: 2rem !important;
    }
}

/* 全局横向滚动修复 */
@media (max-width: 768px) {
    /* 强制防止横向滚动 */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }
    
    /* 确保所有元素不会超出视口 */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 修复可能的横向滚动元素 */
    .hero, .hero-content, .hero-text, .hero-image,
    .container, .section, .card, .feature-grid,
    .member-grid, .process-grid, .case-grid {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* 移动端 - 768px以下 */
@media (max-width: 768px) {
    /* 隐藏桌面端导航 */
    .nav-links.desktop-nav {
        display: none !important;
    }
    
    /* 显示移动端菜单按钮 */
    .mobile-menu-wrapper {
        display: block !important;
    }
    
    .mobile-menu-btn {
        display: block !important;
        position: relative;
        z-index: 1002;
        background: none;
        border: none;
        cursor: pointer;
        padding: 12px 8px;
        width: 48px;
        height: 48px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-btn:hover {
        background: rgba(236, 72, 153, 0.1);
    }
    
    .mobile-menu-btn:active {
        background: rgba(236, 72, 153, 0.2);
        transform: scale(0.95);
    }
    
    /* 确保移动端菜单正确显示 */
    .mobile-menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 1001 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        display: none !important;
        max-height: calc(100vh - 70px);
        box-sizing: border-box;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu.show,
    .mobile-menu[x-show="true"] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    .hero {
        min-height: 100vh;
        max-height: 100vh; /* 限制最大高度，防止溢出 */
        padding: 0;
        text-align: center;
        position: relative;
        overflow: hidden; /* 改为hidden，防止内容溢出 */
        /* 移动端背景样式 */
        background: linear-gradient(135deg, #ffeef8 0%, #fff5e6 100%);
        align-items: center; /* 移动端居中对齐 */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 垂直居中 */
    }
    
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 2rem; /* 增加文字和图片之间的间距 */
        padding: 1.5rem;
        /* 移动端布局：文字在上，图片在下 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* 垂直居中 */
        min-height: 100vh;
        max-height: 100vh; /* 限制最大高度 */
        position: relative;
        overflow: hidden; /* 防止内容溢出 */
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    
    .hero-text {
        padding: 2rem 1.5rem;
        order: 1; /* 文字内容放在第一位 */
        margin-bottom: 0;
        margin-top: 0;
        text-align: center;
        /* 文字区域样式 - 卡片式设计 */
        position: relative;
        z-index: 5;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        border-radius: 25px;
        width: 90%;
        max-width: 400px; /* 增大最大宽度，适应更多内容 */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        align-self: center; /* 移动端水平居中 */
        box-sizing: border-box;
        overflow-x: hidden;
        flex-shrink: 0; /* 防止文字区域被压缩 */
        transform: translateY(10px);
        transition: transform 0.3s ease;
    }
    
    .hero-image {
        order: 2; /* 图片放在第二位 */
        margin-bottom: 0;
        /* 移动端图片完全显示 */
        display: flex;
        align-items: flex-end; /* 移动端图片底部对齐 */
        justify-content: center;
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 250px; /* 减少最小高度，优化布局 */
        max-height: 45vh; /* 限制最大高度，防止图片过大 */
        z-index: 1;
        padding: 0; /* 移除所有内边距，确保图片与容器底部对齐 */
        box-sizing: border-box;
        overflow-x: hidden;
        flex: 1; /* 允许图片区域占据剩余空间 */
    }
    
    .hero-title {
        font-size: 3.2rem !important;
        margin-bottom: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.8rem !important;
        margin-bottom: 3rem;
        padding: 0;
    }
    
    .beauty-main {
        width: 100% !important;
        max-width: 100%;
        height: auto;
        min-height: 200px; /* 减少最小高度，优化布局 */
        max-height: 40vh; /* 减少最大高度，为文字留出更多空间 */
        object-fit: contain;
        object-position: bottom; /* 移动端图片底部对齐 */
        margin-bottom: 0;
        border-radius: 20px;
        display: block;
        box-sizing: border-box;
        transition: all 0.3s ease; /* 添加过渡效果 */
        /* 确保图片与容器底部对齐 */
        align-self: flex-end;
        /* 移动端禁用悬停动画 */
        transform: none !important;
        filter: none !important;
    }
    
    /* 移动端禁用图片悬停效果 */
    .beauty-main:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
    
    /* 移动端背景装饰优化 */
    .bg-decor {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden; /* 改为hidden，防止装饰元素溢出 */
        z-index: 5;
    }
    
    .bg-decor .halo {
        width: 200px;
        height: 200px;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .bg-decor .circle {
        /* 移动端圆圈大小调整 */
    }
    
    .bg-decor .circle-1 {
        width: 120px;
        height: 120px;
        top: 30%;
        left: 20%;
    }
    
    .bg-decor .circle-2 {
        width: 100px;
        height: 100px;
        top: 40%;
        right: 15%;
    }
    
    .bg-decor .circle-3 {
        width: 80px;
        height: 80px;
        bottom: 30%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .bg-decor .particle {
        /* 移动端粒子大小调整 */
        width: 8px;
        height: 8px;
    }
    
    .bg-decor .sparkle {
        /* 移动端星星大小调整 */
        width: 12px;
        height: 12px;
    }
    
    /* VIP页面移动端特殊优化 */
    .vip-page .hero-image {
        height: auto; /* 自适应高度 */
        bottom: 0;
        align-items: flex-end; /* 移动端图片底部对齐 */
        padding: 0; /* 移除所有内边距，确保图片与容器底部对齐 */
        min-height: 250px; /* 与首页保持一致 */
        max-height: 45vh; /* 限制最大高度 */
        flex: 1; /* 允许图片区域占据剩余空间 */
    }
    
    .vip-page .beauty-main {
        width: 100%;
        height: auto;
        min-height: 200px; /* 与首页保持一致 */
        max-height: 40vh; /* 与首页保持一致 */
        object-fit: contain;
        object-position: bottom; /* 移动端图片底部对齐 */
        border-radius: 20px;
        display: block;
        transition: all 0.3s ease; /* 添加过渡效果 */
        /* 确保图片与容器底部对齐 */
        align-self: flex-end;
        /* 移动端禁用悬停动画 */
        transform: none !important;
        filter: none !important;
    }
    
    /* VIP页面移动端禁用图片悬停效果 */
    .vip-page .beauty-main:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
}

/* 平板端 - 768px+ */
@media (min-width: 769px) and (max-width: 1023px) {
    /* 显示桌面端导航 */
    .nav-links.desktop-nav {
        display: flex !important;
    }
    
    /* 隐藏移动端菜单按钮 */
    .mobile-menu-wrapper {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
    }
    
    .hero {
        min-height: 90vh;
        padding: 3rem 0;
    }
    
    .hero-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem;
        padding: 0 2rem;
    }
    
    .hero-title {
        font-size: 4rem !important;
    }
    
    .hero-subtitle {
        font-size: 2rem !important;
    }
    
    .beauty-main {
        width: 35rem !important;
        max-width: 100%; /* 确保图片不会超出容器 */
    }
    
    .section-title {
        font-size: 2.8rem !important;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem;
    }
    
    .process-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3rem;
    }
    
    .member-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem;
    }
    
    .case-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem;
    }
    
    .nav-links {
        display: flex !important;
    }
    
    .mobile-menu {
        display: none !important;
    }
    
    .container {
        padding: 0 30px;
    }
    
    /* 平板端背景装饰调整 */
    .halo {
        width: 50vw;
        height: 50vw;
        right: 5%;
    }
    
    .circle-1 {
        width: 8rem;
        height: 8rem;
    }
    
    .circle-2 {
        width: 6rem;
        height: 6rem;
    }
    
    .circle-3 {
        width: 4rem;
        height: 4rem;
    }
}

/* 中等屏幕优化 - 1024px-1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
    .hero-content {
        gap: 3.5rem;
        padding: 0 2.5rem;
    }
    
    .hero-title {
        font-size: 4.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 2.1rem !important;
    }
    
    .beauty-main {
        width: 40rem !important;
        max-width: 100%; /* 确保图片不会超出容器 */
    }
    
    .section-title {
        font-size: 3rem !important;
    }
    
    .feature-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3.5rem;
    }
    
    .member-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3.5rem;
    }
    
    .container {
        padding: 0 35px;
    }
}

/* 桌面端 - 1024px+ */
@media (min-width: 1024px) {
    /* 显示桌面端导航 */
    .nav-links.desktop-nav {
        display: flex !important;
    }
    
    /* 隐藏移动端菜单按钮 */
    .mobile-menu-wrapper {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
    }
    
    .hero {
        min-height: 100vh;
    }
    
    .hero-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 4rem;
        padding: 0 2rem;
    }
    
    .hero-title {
        font-size: 5rem !important;
    }
    
    .hero-subtitle {
        font-size: 2.2rem !important;
    }
    
    .beauty-main {
        width: 45rem !important;
    }
    
    .section-title {
        font-size: 3.2rem !important;
    }
    
    .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4rem;
    }
    
    .process-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4rem;
    }
    
    .member-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3rem;
    }
    
    .case-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4rem;
    }
    
    .container {
        padding: 0 40px;
    }
    
    /* 桌面端背景装饰完整显示 */
    .bg-decor {
        display: block;
    }
    
    .halo {
        display: block;
    }
    
    .circle {
        display: block;
    }
    
    .particle {
        display: block;
    }
    
    .sparkle {
        display: block;
    }
}

/* 大屏端 - 1440px+ */
@media (min-width: 1440px) {
    .hero-content {
        max-width: 1600px;
        padding: 0 4rem;
    }
    
    .container {
        max-width: 1400px;
        padding: 0 60px;
    }
    
    .hero-title {
        font-size: 6rem !important;
    }
    
    .hero-subtitle {
        font-size: 2.4rem !important;
    }
    
    .beauty-main {
        width: 50rem !important;
    }
    
    .section-title {
        font-size: 3.6rem !important;
    }
    
    .feature-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5rem;
    }
    
    .process-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5rem;
    }
    
    .member-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4rem;
    }
}

/* 超大屏端 - 1920px+ */
@media (min-width: 1920px) {
    .hero-content {
        max-width: 1800px;
        padding: 0 6rem;
    }
    
    .container {
        max-width: 1600px;
        padding: 0 80px;
    }
    
    .hero-title {
        font-size: 7rem !important;
    }
    
    .hero-subtitle {
        font-size: 2.6rem !important;
    }
    
    .beauty-main {
        width: 60rem !important;
    }
    
    .section-title {
        font-size: 4rem !important;
    }
    
    .feature-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6rem;
    }
    
    .member-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5rem;
    }
}

/* 触控优化 */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 24px; /* 增大触摸区域 */
    }
    
    .nav-link {
        min-height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px; /* 增大触摸区域 */
    }
    
    .floating-btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    .mobile-menu-btn {
        min-height: 48px;
        min-width: 48px;
    }
    
    .mobile-menu-link {
        min-height: 52px; /* 增大移动端菜单链接触摸区域 */
    }
    
    /* 触控设备上的图片优化 */
    .beauty-main {
        cursor: default; /* 移除鼠标指针样式 */
        transform: none !important; /* 禁用所有变换 */
        filter: none !important; /* 禁用所有滤镜 */
        animation: none !important; /* 禁用所有动画 */
    }
    
    .beauty-main:hover {
        transform: none !important; /* 移除悬停效果 */
        filter: none !important;
        box-shadow: none !important;
    }
    
    /* 禁用所有悬停动画 */
    .hover-lift:hover,
    .card:hover,
    .feature-icon:hover,
    .process-step:hover .process-number,
    .member-card:hover,
    .case-item:hover,
    .btn:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card {
        border-width: 0.5px;
    }
    
    .process-number {
        border-width: 0.5px;
    }
}

/* 打印样式 */
@media print {
    .header,
    .footer,
    .floating-buttons,
    .bg-decor {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .hero-content {
        grid-template-columns: 1fr !important;
    }
    
    .beauty-main {
        width: 100% !important;
        max-width: 300px;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a;
        --bg-alt: #2d2d2d;
        --text: #ffffff;
        --text-light: #cccccc;
        --border: #404040;
    }
    
    .card {
        background: rgba(45, 45, 45, 0.95);
    }
    
    .process {
        background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
    }
    
    .hero {
        background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 50%, #2d2d2d 100%);
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .animate-halo-float,
    .animate-circle-float-1,
    .animate-circle-float-2,
    .animate-circle-float-3,
    .animate-gentle-float,
    .animate-halo-pulse {
        animation: none !important;
    }
}

/* 移动端样式优化 - 针对安卓和苹果端 */
@media (max-width: 767px) {
    /* 确保导航栏在移动端正确显示 */
    .nav {
        max-width: 100vw;
        overflow: hidden;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .header {
        max-width: 100vw;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* 移动端菜单内容样式 */
    .mobile-menu-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .mobile-menu-link {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        color: var(--primary);
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 500;
        border-radius: 12px;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        text-align: left;
        /* 移动端触摸优化 */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        min-height: 48px; /* 苹果推荐的最小触摸区域 */
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    
    .mobile-menu-link:hover,
    .mobile-menu-link:active {
        background: rgba(255, 255, 255, 0.2);
        transform: translateX(5px);
    }
    
    .link-icon {
        margin-right: 12px;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    
    .link-text {
        flex: 1;
    }
    
    /* 确保移动端背景装饰正确显示 */
    .bg-decor .halo,
    .bg-decor .circle,
    .bg-decor .particle,
    .bg-decor .sparkle {
        /* 移动端优化：确保动画元素可见 */
        will-change: transform, opacity;
        transform: translateZ(0);
        /* 安卓和苹果触摸优化 */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* 移动端英雄区域优化 */
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 20px;
    }
    
    .hero-text {
        order: 1;
        width: 100%;
        padding: 0 15px;
    }
    
    .hero-image {
        order: 2;
        width: 100%;
        height: 300px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
    }
    
    .beauty-main {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center; /* 移动端图片居中显示 */
        border-radius: 20px;
    }
    
    /* VIP页面移动端特殊优化 */
    .vip-page .hero-image {
        height: auto;
        margin: 0;
        padding: 0 20px 0 20px; /* 底部无内边距，确保与bg-decor对齐 */
        align-items: flex-end; /* 移动端图片底部对齐 */
    }
    
    .vip-page .beauty-main {
        width: 100%;
        height: auto;
        min-height: 250px;
        object-fit: contain;
        object-position: bottom; /* 移动端图片底部对齐 */
        border-radius: 15px;
        display: block;
    }
}

/* 安卓设备特殊优化 */
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
    .mobile-menu-btn {
        /* 安卓高DPI设备优化 */
        padding: 14px 10px;
        width: 48px;
        height: 48px;
    }
    
    .hamburger-line {
        /* 安卓高DPI设备线条优化 */
        height: 2px;
        margin: 5px auto;
    }
}

/* 苹果设备特殊优化 */
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 3) {
    .mobile-menu-btn {
        /* 苹果高DPI设备优化 */
        padding: 13px 9px;
        width: 46px;
        height: 46px;
    }
    
    .hamburger-line {
        /* 苹果高DPI设备线条优化 */
        height: 2.5px;
        margin: 4.5px auto;
    }
    
    .mobile-menu {
        /* 苹果设备毛玻璃效果优化 */
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
    }
}

/* 超小屏幕设备优化 */
@media (max-width: 375px) {
    .mobile-menu-btn {
        padding: 10px 6px;
        width: 44px; /* 保持最小触摸区域 */
        height: 44px;
    }
    
    .mobile-menu-link {
        padding: 16px 18px; /* 增大触摸区域 */
        font-size: 1.1rem; /* 保持字体可读性 */
        min-height: 48px; /* 保持最小触摸区域 */
    }
    
    .hero-text {
        max-width: 320px; /* 减少最大宽度，适应小屏幕 */
        padding: 1.5rem 1rem; /* 减少内边距 */
        width: 85%; /* 调整宽度 */
    }
    
    .hero-title {
        font-size: 2.8rem !important; /* 减少标题字体大小 */
    }
    
    .hero-subtitle {
        font-size: 1.6rem !important; /* 减少副标题字体大小 */
    }
    
    .hero-image {
        min-height: 220px; /* 减少图片最小高度 */
        max-height: 35vh; /* 减少图片最大高度 */
    }
    
    .beauty-main {
        min-height: 180px; /* 减少图片最小高度 */
        max-height: 35vh; /* 减少图片最大高度 */
        border-radius: 15px; /* 减少圆角 */
        /* 超小屏幕禁用所有动画 */
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
    
    .beauty-main:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
    
    .vip-page .hero-image {
        min-height: 220px; /* 与首页保持一致 */
        max-height: 35vh; /* 与首页保持一致 */
    }
    
    .vip-page .beauty-main {
        min-height: 180px; /* 与首页保持一致 */
        max-height: 35vh; /* 与首页保持一致 */
        border-radius: 15px; /* 减少圆角 */
        /* 超小屏幕禁用所有动画 */
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
    
    .vip-page .beauty-main:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
    
    /* 超小屏幕卡片布局优化 */
    .member-grid,
    .feature-grid,
    .case-grid,
    .process-grid,
    .pricing-info,
    .contact-grid,
    .service-info,
    .faq-grid {
        grid-template-columns: 1fr !important; /* 确保超小屏幕也是1列 */
        gap: 1.5rem !important; /* 减少间距以适应小屏幕 */
        padding: 0 0.5rem !important; /* 减少内边距 */
    }
    
    .feature-card,
    .case-item,
    .process-step {
        padding: 1.5rem !important; /* 减少卡片内边距 */
    }
    
    .member-card {
        padding: 0 !important; /* 会员卡片保持无内边距 */
    }
}