@media (max-width: 768px) {
    .nav-desktop {
        display: none;
    }
    .mobile-menu-toggle {
        display: block;
    }
    #mobileMenuPanel {
        background: white;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }
    .mobile-menu-item {
        color: var(--text-primary);
    }
    .mobile-menu-item:hover {
        color: var(--brand-color);
        background-color: #F5F5F7;
    }
    .mobile-menu-item.active {
        background: rgba(0, 122, 255, 0.1);
        color: var(--brand-color);
        font-weight: 600;
    }
    
    /* Hero Section Mobile Optimization */
    .hero-section {
        padding: 60px 0 !important;
    }
    
    /* Spacing adjustments */
    .py-40 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .py-32 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Card padding adjustments */
    .card-elevated {
        padding: 1.5rem !important;
    }
    
    /* Grid adjustments */
    .gap-8 {
        gap: 1.5rem !important;
    }
    .gap-10 {
        gap: 1.5rem !important;
    }
    .gap-12 {
        gap: 2rem !important;
    }
    .gap-16 {
        gap: 2rem !important;
    }
    
    /* Rounded corners optimization */
    .rounded-\[40px\] {
        border-radius: 24px !important;
    }
    .rounded-\[32px\] {
        border-radius: 20px !important;
    }
    
    /* Large padding optimization */
    .p-10 {
        padding: 1.5rem !important;
    }
    .p-16 {
        padding: 2rem !important;
    }
    .p-24 {
        padding: 2rem !important;
    }
    
    /* Margin optimization */
    .mb-20 {
        margin-bottom: 3rem !important;
    }
    .mb-24 {
        margin-bottom: 3rem !important;
    }
    .mt-24 {
        margin-top: 3rem !important;
    }
    
    /* Button optimization */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    /* Flex direction for mobile */
    .flex-col.sm\:flex-row {
        width: 100%;
    }
    .flex-col.sm\:flex-row > * {
        width: 100%;
    }
}
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }
    #mobileMenuOverlay {
        display: none !important;
    }
}
@media (max-width: 640px) {
    .grid-responsive {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1025px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .section-title {
        font-size: 1.75rem;
    }
    .stats-number {
        font-size: 2rem;
    }
    #faqList .flex-shrink-0.w-14.h-14 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 0.875rem !important;
    }
    #faqList .pl-\[4\.5rem\] {
        padding-left: 3rem !important;
    }
    #registerCode:not(:placeholder-shown),
    #registerCode,
    #forgotCode {
        width: 100% !important;
    }
    #registerCode:is(input),
    #forgotCode:is(input) {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    #sendCodeBtn {
        width: auto !important;
        min-width: 120px !important;
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.8125rem !important;
        white-space: nowrap !important;
    }
    #modalContent .flex.space-x-2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (min-width: 769px) {
    .hero-title {
        font-size: 4rem;
    }
    .section-title {
        font-size: 2.5rem;
    }
}
/* Additional responsive utilities for new design */
@media (max-width: 640px) {
    .text-5xl {
        font-size: 2.25rem !important;
        line-height: 2.5rem !important;
    }
    .text-6xl {
        font-size: 2.75rem !important;
        line-height: 1.1 !important;
    }
    .text-7xl {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }
    .text-8xl {
        font-size: 3.5rem !important;
        line-height: 1 !important;
    }
    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    .text-xl {
        font-size: 1.125rem !important;
        line-height: 1.75rem !important;
    }
    
    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .py-28 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
    
    /* Pricing page optimization */
    .pt-32 {
        padding-top: 6rem !important;
    }
    
    /* Stats grid optimization */
    .grid-cols-2 {
        gap: 2rem !important;
    }
    
    /* Hide decorative elements on mobile */
    .lg\:block {
        display: none !important;
    }
    
    /* Max width adjustments */
    .max-w-\[1000px\],
    .max-w-\[1200px\],
    .max-w-\[1280px\] {
        max-width: 100% !important;
    }
    
    /* Padding adjustments */
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .px-10 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Button size adjustments */
    .px-10.py-4 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }
    
    /* Text alignment for mobile */
    .text-left {
        text-align: left !important;
    }
    
    /* Feature cards */
    .p-10 {
        padding: 1.5rem !important;
    }
    
    /* Improve readability */
    body {
        font-size: 16px !important;
    }
    
    /* Stats numbers */
    .stats-number,
    .text-5xl {
        font-size: 2rem !important;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .text-5xl {
        font-size: 2.5rem !important;
    }
    .text-6xl {
        font-size: 3rem !important;
    }
    .text-7xl {
        font-size: 3.5rem !important;
    }
    .text-8xl {
        font-size: 4rem !important;
    }
    
    /* Tablet spacing optimization */
    .py-40 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    /* Card padding for tablets */
    .card-elevated {
        padding: 2rem !important;
    }
}

/* Mobile-specific optimizations for various components */
@media (max-width: 768px) {
    /* Pricing cards */
    .pricing-card {
        margin-bottom: 1.5rem;
    }
    
    /* FAQ items */
    #faqList > div {
        padding: 1.25rem !important;
    }
    
    /* Feature sections */
    .feature-card {
        padding: 1.5rem !important;
        margin-bottom: 1rem;
    }
    
    /* CTA sections */
    .cta-section {
        padding: 2rem 1rem !important;
        border-radius: 20px !important;
    }
    
    /* Image containers */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Remove excessive margins on mobile */
    .space-y-10 > * + * {
        margin-top: 2rem !important;
    }
    .space-y-12 > * + * {
        margin-top: 2rem !important;
    }
    .space-y-16 > * + * {
        margin-top: 2.5rem !important;
    }
    
    /* Modal optimization for mobile */
    #modalWrapper {
        max-width: 95vw !important;
        margin: 0 1rem;
    }
    
    #modalContent {
        max-height: 85vh;
        overflow-y: auto;
    }
    
    #modalContent .p-10 {
        padding: 1.5rem !important;
    }
    
    #modalContent .text-3xl {
        font-size: 1.5rem !important;
    }
    
    #modalContent .text-2xl {
        font-size: 1.25rem !important;
    }
    
    #modalContent .py-4 {
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }
    
    #modalContent input,
    #modalContent select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Close button optimization */
    #modalContent button[onclick="closeModal()"] {
        top: 1rem !important;
        right: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* Back button optimization */
    #modalContent button[onclick*="showLoginModal"] {
        top: 1rem !important;
        left: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* Table responsive */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Footer optimization */
    footer {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    footer .gap-12 {
        gap: 1.25rem !important;
    }
    
    footer .mb-16 {
        margin-bottom: 1.5rem !important;
    }
    
    footer .mb-6 {
        margin-bottom: 0.875rem !important; /* 14px，保持标题间距 */
    }
    
    footer .space-y-4 > * + * {
        margin-top: 0.5rem !important; /* 8px，缩小到和联系板块一样 */
    }
    
    footer .pt-10 {
        padding-top: 1.25rem !important;
    }
    
    footer h3 {
        font-size: 13px !important;
        margin-bottom: 0.875rem !important;
    }
    
    footer ul {
        font-size: 13px !important;
    }
    
    footer ul li {
        line-height: 1.4 !important;
    }
    
    /* 修复 footer 链接高度问题 */
    footer a {
        min-height: auto !important;
        line-height: 1.4 !important;
        padding: 0 !important;
        display: inline !important;
    }
    
    footer li a {
        min-height: auto !important;
        display: inline !important;
    }
    
    /* Stats grid on mobile */
    .grid-cols-2.md\:grid-cols-4 > div {
        padding: 1rem 0.5rem;
    }
    
    /* Hero gradient background adjustments */
    .hero-gradient {
        padding: 2rem 1rem !important;
    }
    
    /* Improve touch targets */
    button,
    a.btn-primary,
    a.btn-secondary {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Billing cycle selector */
    #billingCycleSelector {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        justify-content: center;
    }
    
    #billingCycleSelector > div {
        flex-wrap: wrap;
        min-width: min-content;
        justify-content: center !important;
    }
    
    #billingCycleSelector .inline-flex {
        justify-content: center !important;
    }
    
    /* Language selector mobile */
    #langOptions,
    #mobileLangOptions {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* Small mobile devices */
@media (max-width: 375px) {
    .text-6xl {
        font-size: 2.25rem !important;
    }
    .text-5xl {
        font-size: 1.875rem !important;
    }
    .text-4xl {
        font-size: 1.5rem !important;
    }
    
    .px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Smaller buttons on very small screens */
    .btn-primary,
    .btn-secondary {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* Landscape mobile optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        padding: 3rem 0 !important;
    }
    
    .py-40 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-32 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    #mobileMenuPanel {
        overflow-y: auto;
    }
}

/* Ensure mobile menu is always hidden on desktop */
@media (min-width: 769px) {
    #mobileMenuOverlay,
    #mobileMenuPanel {
        display: none !important;
    }
}

/* Touch-friendly improvements for all mobile devices */
@media (max-width: 768px) {
    /* Prevent text selection on touch gestures */
    body {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* Improve scrolling performance */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Optimize font rendering on mobile */
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Better touch targets for links and buttons */
    a, button, [onclick], [role="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Prevent double-tap zoom */
    a, button, input, select, textarea {
        touch-action: manipulation;
    }
    
    /* Better focus states for keyboard navigation */
    *:focus {
        outline: 2px solid #007AFF;
        outline-offset: 2px;
    }
    
    /* Optimize images for mobile */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }
    
    /* Better spacing for stacked content */
    section + section {
        margin-top: 2rem;
    }
    
    /* Optimize form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 0.75rem !important;
        border-radius: 12px !important;
    }
    
    /* Better CTA buttons on mobile */
    .btn-primary,
    .btn-secondary {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
    }
    
    /* 首页底部 CTA 按钮优化 */
    a[href="tarifs.html"].rounded-full,
    a.rounded-full {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        border-radius: 9999px !important; /* 确保全圆角 */
    }
    
    /* Optimize cards for mobile */
    .card-elevated,
    [class*="rounded-"] {
        border-radius: 16px !important;
    }
    
    /* Better navigation on mobile */
    nav {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    
    /* Improve readability of long text */
    p {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Code blocks mobile optimization */
    code, pre {
        font-size: 0.875rem !important;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
    }
    
    /* Account page user info optimization */
    #userEmail {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.25rem !important;
    }
    
    .flex.items-center.gap-6 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    .flex.items-center.gap-6 > div:last-child {
        flex: 1;
        min-width: 0;
    }
    
    /* ============================================
       移动端弹窗修复 - Modal Fixes for Mobile
       ============================================ */
    
    /* 修复所有弹窗按钮文字居中问题 */
    #modalContent button span.flex {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 修复主按钮（继续、登录、创建账户等）的文字居中 */
    #modalContent button.w-full span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    /* 修复输入框图标与占位符重叠问题 */
    #modalContent input[type="email"],
    #modalContent input[type="password"],
    #modalContent input[type="text"] {
        padding-left: 3rem !important; /* 增加左侧padding，为图标留出空间 */
        font-size: 16px !important; /* 防止iOS缩放 */
    }
    
    /* 确保输入框图标正确定位 */
    #modalContent .relative .absolute.left-4 {
        left: 1rem !important;
        pointer-events: none !important;
    }
    
    /* 修复验证码输入框的显示 */
    #modalContent input[id^="code"] {
        width: 2.5rem !important; /* 10 -> 2.5rem */
        height: 3rem !important; /* 14 -> 3rem */
        font-size: 1.25rem !important;
        padding: 0 !important;
    }
    
    /* 修复验证码输入框容器 */
    #modalContent .flex.justify-center.gap-3 {
        gap: 0.5rem !important; /* 减小间距适配小屏幕 */
    }
    
    /* 修复注册和重置密码页面的验证码输入框与发送按钮布局 */
    #modalContent .flex.gap-3 > .relative.flex-1 input {
        padding-left: 3rem !important;
    }
    
    #modalContent .flex.gap-3 > button {
        flex-shrink: 0 !important;
        min-width: 80px !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* 移动端弹窗内边距优化 */
    #modalContent .p-8,
    #modalContent .md\:p-12 {
        padding: 1.5rem !important;
    }
    
    /* 移动端弹窗标题优化 */
    #modalContent h2.text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    #modalContent h2.text-2xl {
        font-size: 1.375rem !important;
        line-height: 1.875rem !important;
    }
    
    /* 修复弹窗中的图标容器尺寸 */
    #modalContent .w-16.h-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    
    /* 确保关闭和返回按钮可点击区域足够大 */
    #modalContent button.absolute.top-6 {
        top: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    #modalContent button.absolute.right-6 {
        right: 1rem !important;
    }
    
    #modalContent button.absolute.left-6 {
        left: 1rem !important;
    }
    
    /* 移动端确认对话框按钮优化 */
    #modalContent .grid.grid-cols-2 {
        gap: 0.75rem !important;
    }
    
    #modalContent .grid.grid-cols-2 button {
        padding: 0.875rem 1rem !important;
        font-size: 0.9375rem !important;
    }
    
    /* Header 和 MobileMenu 中的登录按钮修复 */
    #authContainer button,
    #mobileAuthContainer button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* 确保移动菜单中的登录按钮文字居中 */
    #mobileAuthContainer button {
        width: 100% !important;
    }
    
    /* 修复弹窗底部说明文字 */
    #modalContent p.text-xs {
        font-size: 0.75rem !important;
        line-height: 1.25rem !important;
    }
    
    /* 优化邮箱标签显示 */
    #modalContent .bg-gray-100.px-3.py-1 {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* 修复表单标签 */
    #modalContent label.text-sm {
        font-size: 0.875rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    /* 优化输入框高度 */
    #modalContent input.py-4 {
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }
    
    #modalContent input.py-3\.5 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* 修复按钮高度和字体 */
    #modalContent button.py-4 {
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
        font-size: 1rem !important;
    }
    
    #modalContent button.py-3\.5 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 0.9375rem !important;
    }
    
    /* 确保所有弹窗按钮的图标与文字对齐 */
    #modalContent button svg,
    #modalContent button i {
        flex-shrink: 0 !important;
    }
    
    /* 修复登录模式切换按钮 */
    #modalContent button[id*="switchLoginModeBtn"] {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    /* 优化"或者是"分隔线 */
    #modalContent .relative.my-8 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* 移动端弹窗内容区域最大高度 */
    #modalContent {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* 优化弹窗滚动条 */
    #modalContent::-webkit-scrollbar {
        width: 4px;
    }
    
    #modalContent::-webkit-scrollbar-track {
        background: transparent;
    }
    
    #modalContent::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
}