/* 移动端优化样式 */

/* 仅在移动设备上应用这些样式 */
@media (max-width: 768px) {

    /* 调整CTA区域 */
    .cta-section {
        text-align: center;
    }

    /* 主内容区域布局优化 */
    .main-content {
        padding: 0 15px;
        margin-bottom: 0;
    }
    
    /* 减少main-content和gmail-interface之间的间距 */
    .gmail-interface {
        margin-top: -15px;
        max-height: 70vh;
    }
    
    /* Make email-content height less than screen height on mobile */
    .gmail-container {
        max-height: 40vh;
        overflow-y: auto;
    }
    
    /* 统一各个section的垂直间距 - 更紧凑 */
    .features-section,
    .real-estate-value-section,
    .signup-section {
        margin-top: 30px;
        margin-bottom: 0;
        padding: 20px 0;
    }
    
    /* 增加features-section与gmail-footer之间的间距 */
    .features-section {
        margin-top: 70px;
    }
    
    /* Signup titles align left on mobile */
    .signup-title {
        text-align: left;
    }
    
    .signup-subtitle {
        text-align: left;
    }
    
    /* Center contact details on mobile */
    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .contact-details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 设备图片调整 */
    .device-container {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-15deg);
        z-index: 3;
        pointer-events: none;
        width: auto;
        height: auto;
    }

    .device-image {
        width: 200px;
        height: auto;
        margin: 0;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
        opacity: 0.9;
    }

    /* Product Description Spacing */
    .product-description {
        margin-top: 60px;
        margin-bottom: 20px;
        padding: 0 20px;
    }

    /* Logo优化 */
    .logo {
        font-weight: 900;
    }

    /* 主标题和标语优化 */
    .main-title1 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: visible;
    }

    .tagline {
        white-space: normal;
        font-size: 15px;
        line-height: 1.5;
    }

    /* 按钮优化 */
    .cta-button {
        width: 90%;
        max-width: none;
        display: block;
        margin: 0 auto;
        border-radius: 30px;
        padding: 12px 28px;
        box-sizing: border-box;
    }

    /* 功能卡片优化 */
    .features-grid {
        gap: 24px;
    }

    .feature-card {
        padding: 20px;
        margin-bottom: 15px;
    }

    /* 实时房地产卡片优化 */
    .real-estate-cards {
        gap: 24px;
    }

    .real-estate-card {
        padding: 20px;
    }

    /* 价值卡片优化 */
    .value-card {
        padding: 20px;
        margin-bottom: 15px;
    }

    /* 玻璃卡片样式移动端优化 */
    .glass-card-style {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
            0 4px 15px rgba(255, 255, 255, 0.2),
            inset 0 0 8px rgba(255, 255, 255, 0.2);
    }

    /* Free Trial 徽章调整 */
    .header {
        justify-content: center;
        padding: 15px 0;
    }

    .free-trial-badge {
        padding: 6px 16px;
        font-size: 13px;
    }
}

/* 小屏幕手机优化 */
@media (max-width: 480px) {

    /* 文字尺寸调整 */
    .logo {
        font-size: 80px;
        font-weight: 900;
    }

    .main-title1 {
        font-size: 24px;
        white-space: nowrap;
        overflow: visible;
    }

    .tagline {
        font-size: 14px;
    }

    /* 卡片内边距调整 */
    .feature-card,
    .real-estate-card,
    .value-card {
        padding: 16px;
    }

    /* 功能区域标题 */
    .features-heading {
        font-size: 32px;
        text-align: center;
    }

    .features-subheading {
        font-size: 14px;
        text-align: center;
    }

    /* 按钮尺寸调整 */
    .free-trial-badge {
        padding: 5px 14px;
        font-size: 12px;
    }

    .cta-button {
        padding: 10px 24px;
        font-size: 14px;
        width: 90%;
        border-radius: 24px;
        box-sizing: border-box;
    }
    
    /* 进一步减少小屏幕上的间距 */
    .gmail-interface {
        margin-top: -20px;
        max-height: 75vh;
    }
    
    /* Make email-content height less than screen height on small mobile */
    .gmail-container {
        max-height: 45vh;
        overflow-y: auto;
    }
    
    /* 统一各个section的垂直间距 - 更紧凑的小屏幕 */
    .features-section,
    .real-estate-value-section,
    .signup-section {
        margin-top: 20px;
        margin-bottom: 0;
        padding: 15px 0;
    }
    
    /* 增加features-section与gmail-footer之间的间距 - 小屏幕 */
    .features-section {
        margin-top: 90px;
    }
    
    /* Signup titles align left on mobile */
    .signup-title {
        text-align: left;
    }
    
    .signup-subtitle {
        text-align: left;
    }
    
    /* Center contact details on mobile */
    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .contact-details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}