/* 响应式样式 */

/* 平板设备 */
@media (max-width: 1199px) {
    .hero-container,
    .about-container {
        gap: 40px;
    }
    
    .hero-content h1 {
        font-size: 40px;
    }
    
    .process-container {
        gap: 30px;
    }
    
    .process-circle {
        width: 80px;
        height: 80px;
        font-size: 16px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .capabilities-section::before {
        width: 100%;
        height: 40%;
        top: auto;
        bottom: 0;
    }
    
    .cases-container {
        grid-template-columns: 1fr;
    }
    
    .cases-phones {
        padding: 30px 15px;
        gap: 10px;
    }
    
    .phone-item {
        width: 150px;
    }
    
    .projects-main-container {
        grid-template-columns: 1fr;
    }
    
    .projects-sidebar {
        position: static;
        margin-top: 40px;
    }
    
    .project-showcase {
        grid-template-columns: 1fr;
    }
    
    .project-phones {
        justify-content: center;
    }
}

/* 小平板和大手机 */
@media (max-width: 900px) {
    .nav-menu {
        gap: 20px;
    }
    
    .nav-item {
        padding: 6px 15px;
        font-size: 14px;
    }
    
    .hero-container,
    .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .hero-content h1 {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .hero-image::before {
        width: 150px;
        height: 100px;
    }
    
    .about-image::before {
        width: 180px;
        height: 80px;
        bottom: -20px;
        left: -20px;
    }
    
    .process-container {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .process-arrow {
        display: none;
    }
    
    .about-content h2 {
        font-size: 28px;
    }
    
    .services-title {
        font-size: 26px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .capabilities-title {
        font-size: 26px;
    }
    
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
    
    .cases-stats {
        gap: 40px;
        flex-wrap: wrap;
    }
    
    .stat-item h3 {
        font-size: 40px;
    }
    
    .cases-container {
        grid-template-columns: 1fr;
    }
    
    .cases-content {
        padding: 50px 30px;
    }
    
    .cases-phones {
        display: none;
    }
    
    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-contact {
        align-items: center;
    }
    
    .projects-hero-title {
        font-size: 32px;
    }
    
    .projects-hero-image {
        height: 300px;
    }
    
    .projects-content {
        padding: 25px;
    }
    
    .project-features {
        grid-template-columns: 1fr;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .distribution-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .project-showcase-cross {
        grid-template-columns: 1fr;
    }
    
    .cross-border-phones {
        justify-content: center;
    }
    
    .project-showcase-membership {
        grid-template-columns: 1fr;
    }
    
    .membership-circle {
        width: 280px;
        height: 280px;
    }
    
    .circle-inner {
        width: 100px;
        height: 100px;
    }
    
    .heart-icon {
        font-size: 40px;
    }
    
    .membership-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .project-showcase-travel {
        grid-template-columns: 1fr;
    }
    
    .travel-phones {
        justify-content: center;
    }
    
    .activity-banner {
        flex-direction: column;
        gap: 20px;
    }
    
    .activity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .activity-features-list {
        grid-template-columns: 1fr;
    }
    
    .showroom-gallery {
        grid-template-columns: 1fr;
    }
    
    .mini-games-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .game-item.vertical:first-child,
    .game-item.horizontal,
    .game-item.large-horizontal,
    .game-item.vertical:last-child {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .ai-showcase {
        grid-template-columns: 1fr;
    }
    
    .ai-phones {
        justify-content: center;
    }
    
    .methodology-content {
        grid-template-columns: 1fr;
    }
    
    .methodology-title {
        font-size: 28px;
    }
    
    .about-capability-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .capabilities-grid-container {
        grid-template-columns: 1fr;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    .nav-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .hero-section,
    .about-section,
    .services-section,
    .capabilities-section {
        padding: 50px 0;
    }
    
    .hero-content h1 {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .process-circle {
        width: 70px;
        height: 70px;
        font-size: 14px;
    }
    
    .about-image::before {
        width: 120px;
        height: 60px;
        bottom: -15px;
        left: -15px;
    }
    
    .service-card {
        padding: 35px 25px;
    }
    
    .capability-card {
        padding: 35px 25px;
    }
    
    .capabilities-title {
        font-size: 22px;
    }
    
    .cases-stats {
        gap: 30px;
        padding: 40px 20px;
    }
    
    .stat-item h3 {
        font-size: 36px;
    }
    
    .stat-item p {
        font-size: 14px;
    }
    
    .cases-content {
        padding: 40px 20px;
        gap: 35px;
    }
    
    .case-category h3 {
        font-size: 18px;
    }
    
    .footer-main {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-slogan {
        font-size: 16px;
    }
    
    .qrcode-box {
        width: 120px;
        height: 120px;
    }
    
    .projects-hero {
        padding: 40px 0 0;
    }
    
    .projects-hero-title {
        font-size: 26px;
    }
    
    .projects-hero-desc {
        font-size: 14px;
    }
    
    .projects-hero-image {
        height: 250px;
    }
    
    .projects-content {
        padding: 20px;
    }
    
    .project-title {
        font-size: 20px;
    }
    
    .project-phones {
        flex-direction: column;
        align-items: center;
    }
    
    .phone-mockup {
        width: 160px;
        height: 320px;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-list {
        grid-template-columns: 1fr;
    }
    
    .distribution-features {
        grid-template-columns: 1fr;
    }
    
    .distribution-phones {
        flex-direction: column;
        align-items: center;
    }
    
    .project-showcase-cross {
        grid-template-columns: 1fr;
    }
    
    .cross-border-phones {
        flex-direction: column;
        align-items: center;
    }
    
    .project-showcase-membership {
        grid-template-columns: 1fr;
    }
    
    .membership-phones {
        flex-direction: column;
        align-items: center;
    }
    
    .membership-circle {
        width: 240px;
        height: 240px;
    }
    
    .circle-inner {
        width: 80px;
        height: 80px;
    }
    
    .heart-icon {
        font-size: 32px;
    }
    
    .membership-features {
        grid-template-columns: 1fr;
    }
    
    .project-showcase-travel {
        grid-template-columns: 1fr;
    }
    
    .travel-phones {
        flex-direction: column;
        align-items: center;
    }
    
    .activity-banner {
        flex-direction: column;
        padding: 30px 20px;
    }
    
    .activity-grid {
        grid-template-columns: 1fr;
    }
    
    .activity-features-list {
        grid-template-columns: 1fr;
    }
    
    .virtual-showroom {
        padding: 30px 20px;
    }
    
    .showroom-gallery {
        grid-template-columns: 1fr;
    }
    
    .mini-games-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .game-item.vertical,
    .game-item.horizontal,
    .game-item.large-horizontal {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 9/16;
    }
    
    .game-item.horizontal {
        aspect-ratio: 16/9;
    }
    
    .ai-showcase {
        grid-template-columns: 1fr;
    }
    
    .ai-phones {
        flex-direction: column;
        align-items: center;
    }
    
    .methodology-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .methodology-image {
        height: 250px;
    }
    
    .methodology-title {
        font-size: 24px;
    }
    
    .about-capability-container {
        grid-template-columns: 1fr;
    }
    
    .capability-title {
        font-size: 28px;
    }
    
    .image-decoration {
        width: 150px;
        height: 100px;
        bottom: -15px;
        right: -15px;
    }
    
    .capabilities-grid-container {
        grid-template-columns: 1fr;
    }
}

/* 联系我们页面响应式 */
@media (max-width: 900px) {
    .contact-section {
        padding: 80px 0 100px;
    }
    
    .contact-title {
        font-size: 32px;
    }
    
    .contact-description {
        font-size: 15px;
        margin-bottom: 60px;
    }
    
    .contact-details {
        gap: 30px;
    }
    
    .contact-detail-item {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: 60px 0 80px;
    }
    
    .contact-title {
        font-size: 26px;
    }
    
    .contact-description {
        font-size: 14px;
        margin-bottom: 50px;
    }
    
    .contact-details {
        gap: 25px;
    }
    
    .contact-detail-item {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }
    
    .detail-icon {
        font-size: 32px;
    }
    
    .detail-content h3 {
        font-size: 16px;
    }
    
    .detail-content p {
        font-size: 14px;
    }
}