@media (max-width: 768px) {
    .nav-desktop {
        display: none;
    }
    .mobile-menu-toggle {
        display: block;
    }
    .mobile-menu-item.active {
        background: rgba(99, 102, 241, 0.15);
        border: 1px solid rgba(99, 102, 241, 0.3);
    }
    .mobile-menu-item.active i {
        color: #6366f1 !important;
    }
    .mobile-menu-item.active span {
        color: white !important;
        font-weight: 700 !important;
    }
    .hero-section {
        padding: 60px 0 !important;
    }
    .py-40 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .py-32 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .card-elevated {
        padding: 1.5rem !important;
    }
    .gap-8 {
        gap: 1.5rem !important;
    }
    .gap-10 {
        gap: 1.5rem !important;
    }
    .gap-12 {
        gap: 2rem !important;
    }
    .gap-16 {
        gap: 2rem !important;
    }
    .rounded-\[40px\] {
        border-radius: 24px !important;
    }
    .rounded-\[32px\] {
        border-radius: 20px !important;
    }
    .p-10 {
        padding: 1.5rem !important;
    }
    .p-16 {
        padding: 2rem !important;
    }
    .p-24 {
        padding: 2rem !important;
    }
    .mb-20 {
        margin-bottom: 3rem !important;
    }
    .mb-24 {
        margin-bottom: 3rem !important;
    }
    .mt-24 {
        margin-top: 3rem !important;
    }
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .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;
    }
}
@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;
    }
    .pt-32 {
        padding-top: 6rem !important;
    }
    .grid-cols-2 {
        gap: 2rem !important;
    }
    .lg\:block {
        display: none !important;
    }
    .max-w-\[1000px\],
    .max-w-\[1200px\],
    .max-w-\[1280px\] {
        max-width: 100% !important;
    }
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .px-10 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .px-10.py-4 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }
    .text-left {
        text-align: left !important;
    }
    .p-10 {
        padding: 1.5rem !important;
    }
    body {
        font-size: 16px !important;
    }
    .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;
    }
    .py-40 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .card-elevated {
        padding: 2rem !important;
    }
}

@media (max-width: 768px) {
    .pricing-card {
        margin-bottom: 1.5rem;
    }
    #faqList > div {
        padding: 1.25rem !important;
    }
    .feature-card {
        padding: 1.5rem !important;
        margin-bottom: 1rem;
    }
    .cta-section {
        padding: 2rem 1rem !important;
        border-radius: 20px !important;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .space-y-10 > * + * {
        margin-top: 2rem !important;
    }
    .space-y-12 > * + * {
        margin-top: 2rem !important;
    }
    .space-y-16 > * + * {
        margin-top: 2.5rem !important;
    }
    #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;
    }
    #modalContent button[onclick="closeModal()"] {
        top: 1rem !important;
        right: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    #modalContent button[onclick*="showLoginModal"] {
        top: 1rem !important;
        left: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    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;
    }
    footer .space-y-4 > * + * {
        margin-top: 0.5rem !important;
    }
    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 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;
    }
    .grid-cols-2.md\:grid-cols-4 > div {
        padding: 1rem 0.5rem;
    }
    .hero-gradient {
        padding: 2rem 1rem !important;
    }
    button,
    a.btn-primary,
    a.btn-secondary {
        min-height: 44px;
        min-width: 44px;
    }
    #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;
    }
    #langOptions,
    #mobileLangOptions {
        max-height: 300px;
        overflow-y: auto;
    }
}

@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;
    }
    .btn-primary,
    .btn-secondary {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

@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;
    }
}

@media (min-width: 769px) {
    #mobileMenuOverlay,
    #mobileMenuPanel {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    * {
        -webkit-overflow-scrolling: touch;
    }
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    a, button, [onclick], [role="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    a, button, input, select, textarea {
        touch-action: manipulation;
    }
    *:focus {
        outline: 2px solid #007AFF;
        outline-offset: 2px;
    }
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    body {
        overflow-x: hidden;
    }
    section + section {
        margin-top: 2rem;
    }
    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;
    }
    .btn-primary,
    .btn-secondary {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
    }
    a[href="jiage.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;
    }
    .card-elevated,
    [class*="rounded-"] {
        border-radius: 16px !important;
    }
    nav {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    p {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    code, pre {
        font-size: 0.875rem !important;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
    }
    #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;
    }
    #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;
        font-size: 16px !important;
    }
    #modalContent .relative .absolute.left-4 {
        left: 1rem !important;
        pointer-events: none !important;
    }
    #modalContent input[id^="code"] {
        width: 2.5rem !important;
        height: 3rem !important;
        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;
    }
    #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;
    }
}