/* Responsive Design */

/* Large screens (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
    
    .page-title {
        font-size: 2.5rem;
    }
    
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    
    /* 大屏幕下运营商卡片显示优化 */
    .upstream-partners .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .upstream-partners .partner-card {
        font-size: 0.85rem;
    }
    
    .upstream-partners .partner-name {
        font-size: 1.25rem;
    }
    
    .upstream-partners .cooperation-list {
        font-size: 0.8rem;
        line-height: 1.3;
    }
}

/* Medium screens (768px to 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .page-title {
        font-size: 2.5rem;
    }
    
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* Medium screens (768px to 991px) */
@media (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Partnership page adaptations */
    .upstream-partners .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .upstream-partners .partner-card {
        min-width: 200px;
    }
    
    .channel-types {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .client-categories {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* 中屏幕下的运营商卡片字体优化 */
    .upstream-partners .partner-name {
        font-size: 1.2rem;
    }
    
    .upstream-partners .cooperation-title {
        font-size: 0.95rem;
    }
    
    .upstream-partners .cooperation-list {
        font-size: 0.8rem;
    }
    
    .partnership-values .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Small screens (576px to 767px) */
@media (max-width: 767px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }
    
    /* Header */
    .nav-center {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        margin-left: 0;
    }
    
    .nav-menu {
        flex-direction: column;
        margin-bottom: 1rem;
    }
    
    .nav-center.active {
        left: 0;
    }
    
    .hamburger {
        display: flex;
    }
    
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* Hero Section */
    .hero {
        padding: 200px 0 180px;
        background-attachment: scroll;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        padding: 0 10px;
    }
    
    .hero-buttons .btn {
        padding: 12px 24px;
        font-size: 1rem;
    }
    
    /* Page Header */
    .page-title {
        font-size: 2rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    /* Grid Layouts */
    .features-grid,
    .values-grid,
    .team-grid,
    .team-content,
    .jobs-grid,
    .benefits-grid,
    .culture-grid {
        grid-template-columns: 1fr;
    }
    
    /* Team Content Mobile */
    .team-content {
        padding: 1.5rem;
        gap: 2rem;
    }
    
    .team-image {
        order: -1; /* 图片在移动端显示在上方 */
    }
    
    /* 职位列表移动端适配 */
    .jobs-list {
        margin: 0 1rem;
    }
    
    .job-item-header {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    
    .job-basic-info {
        width: 100%;
        padding-right: 3rem;
    }
    
    .job-title {
        font-size: 1.1rem;
    }
    
    .job-meta {
        gap: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .job-details {
        padding: 1rem;
    }
    
    .job-toggle {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    
    /* 招聘联系部分移动端适配 */
    .recruitment-content {
        margin: 0 1rem;
        text-align: center;
    }
    
    .recruitment-description {
        font-size: 1rem;
        line-height: 1.6;
        text-align: left;
    }
    
    .contact-card {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }
    
    .contact-title {
        font-size: 1.3rem;
    }
    
    .contact-description {
        font-size: 0.95rem;
        text-align: left;
    }
    
    .email-link {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .recruitment-footer {
        margin: 2rem 1rem 0;
        padding: 1.5rem;
    }
    
    .footer-note {
        font-size: 0.9rem;
    }
    
    .mission-vision-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .product-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .product-content.reverse {
        direction: ltr;
    }
    
        .who-content,
    .story-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .who-text {
        order: 2;
        text-align: center;
    }

    .who-image {
        order: 1;
        margin-bottom: 1rem;
    }
    
    .who-text .section-title {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .service-card {
        padding: 2rem;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Partnership page mobile styles */
    .overview-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .overview-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .upstream-partners .partners-grid,
    .channel-types,
    .client-categories {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* 移动设备下的运营商卡片字体优化 */
    .upstream-partners .partner-card {
        font-size: 0.95rem;
        min-width: 180px;
    }
    
    .upstream-partners .partner-name {
        font-size: 1.4rem;
        margin: 0.8rem 0 1.2rem 0;
    }
    
    .upstream-partners .cooperation-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .upstream-partners .cooperation-list {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .upstream-partners .cooperation-list li {
        margin-bottom: 0.6rem;
    }
    
    .upstream-partners .benefit-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        margin: 0.3rem;
    }
    
    .partnership-values .values-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .channel-features,
    .client-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .highlights-list {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .example-tags,
    .story-results {
        justify-content: flex-start;
        gap: 0.5rem;
    }
    
    .story-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .partner-card,
    .channel-type,
    .client-category {
        margin-bottom: 0;
    }
    
    .upstream-partners .partner-logo {
        padding: 1.5rem 1.5rem 0 1.5rem;
        flex-direction: row !important;
        text-align: left !important;
        gap: 0.5rem;
        align-items: center;
        display: flex !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .upstream-partners .partner-card {
        text-align: left !important;
    }
    
    .upstream-partners {
        text-align: left !important;
    }
    
    .upstream-partners .partner-icon {
        width: 50px !important;
        height: 50px !important;
        margin-right: 1rem !important;
        margin-bottom: 0 !important;
        display: block !important;
    }
    
    .upstream-partners .partner-name {
        text-align: left !important;
        font-size: 1.3rem;
        flex: 1;
        min-width: 80px;
        white-space: nowrap;
        overflow: visible;
    }
    
    .partner-name {
        font-size: 1.3rem;
    }
    
    .partner-content {
        padding: 1.5rem;
    }
    
    .cooperation-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .cooperation-list li {
        font-size: 0.95rem;
        padding: 0.5rem 0;
    }
    
    .partnership-benefits {
        gap: 0.5rem;
    }
    
    .benefit-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.8rem;
    }
    
    .channel-header {
        padding: 1.5rem;
    }
    
    .channel-icon {
        font-size: 2.5rem;
    }
    
    .channel-title {
        font-size: 1.3rem;
    }
    
    .channel-content {
        padding: 1.5rem;
    }
    
    .channel-description {
        font-size: 0.95rem;
        text-align: left;
    }
    
    .feature-number {
        font-size: 1.8rem;
    }
    
    .feature-label {
        font-size: 0.85rem;
    }
    
    .service-list li {
        font-size: 0.95rem;
        padding: 0.5rem 0;
    }
    
    /* Timeline */
    .timeline-container::before {
        left: 40px;
    }
    
    .timeline-item {
        flex-direction: row;
        align-items: flex-start;
        margin-left: 0;
        padding-left: 80px;
    }
    
    .timeline-date {
        position: absolute;
        left: 0;
        width: 60px;
        min-width: 60px;
        margin-right: 0;
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem;
    }
    
    .timeline-flag {
        display: none;
    }
    
    .timeline-content {
        margin: 0;
        margin-left: 0;
        width: 100%;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* 在小屏幕上，版权信息可能需要换行显示 */
    .footer-bottom {
        font-size: 0.8rem;
    }
    
    .footer-bottom p {
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .footer-bottom p.copyright::after {
        content: "";
        margin: 0;
    }
    
    .footer-bottom p:last-child {
        margin-bottom: 0;
    }
    
    /* Typography */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* Cards */
    .feature-card,
    .value-card,
    .team-member,
    .job-card,
    .benefit-item,
    .culture-card {
        padding: 1.5rem;
    }
    
    .mission-card,
    .vision-card {
        padding: 2rem;
    }
    
    /* Forms */
    .form {
        padding: 1.5rem;
    }
}

/* Extra small screens (up to 575px) */
@media (max-width: 575px) {
    .container {
        padding: 0 10px;
    }
    
    /* Header */
    .nav-container {
        padding: 0 10px;
    }
    
    .logo-text {
        font-size: 1.25rem;
    }
    
    /* Hero Section */
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 250px;
        margin-bottom: 1rem;
    }
    
    /* Page Header */
    .page-header {
        padding: 100px 0 40px;
    }
    
    .page-title {
        font-size: 1.75rem;
    }
    
    .page-subtitle {
        font-size: 0.9rem;
    }
    
    /* Sections */
    .features,
    .about-preview,
    .company-story,
    .mission-vision,
    .values,
    .team,
    .timeline,
    .product-section,
    .service-process,
    .contact-section,
    .culture-section,
    .benefits-section,
    .jobs-section,
    .application-section,
    .upstream-partners,
    .downstream-partners,
    .key-clients,
    .partnership-values {
        padding: 50px 0;
    }
    
    /* Typography */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    /* Cards */
    .feature-card,
    .value-card,
    .team-member,
    .job-card,
    .benefit-item,
    .culture-card {
        padding: 1rem;
    }
    
    .mission-card,
    .vision-card {
        padding: 1.5rem;
    }
    
    /* Partnership page extra small screens */
    .overview-stats {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    
    .stat-item {
        padding: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.85rem;
    }
    
    .partner-card {
        border-radius: 8px;
        overflow: hidden;
    }
    
    .upstream-partners .partner-logo {
        padding: 1rem;
        background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
        flex-direction: row !important;
        align-items: center;
        display: flex !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .upstream-partners .partner-card {
        text-align: left !important;
    }
    
    .upstream-partners {
        text-align: left !important;
    }
    
    .upstream-partners .partner-icon {
        width: 45px !important;
        height: 45px !important;
        margin-right: 0.8rem !important;
        margin-bottom: 0 !important;
        display: block !important;
    }
    
    .upstream-partners .partner-name {
        text-align: left !important;
        font-size: 1.2rem;
        flex: 1;
        min-width: 70px;
        white-space: nowrap;
        overflow: visible;
    }
    
    .partner-name {
        font-size: 1.2rem;
    }
    
    .partner-content {
        padding: 1rem;
    }
    
    .cooperation-title {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }
    
    .cooperation-list li {
        font-size: 0.9rem;
        padding: 0.4rem 0;
    }
    
    .partnership-benefits {
        gap: 0.4rem;
        margin-top: 1rem;
    }
    
    .benefit-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
    
    .channel-header {
        padding: 1rem;
    }
    
    .channel-icon {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
    }
    
    .channel-title {
        font-size: 1.2rem;
    }
    
    .channel-content {
        padding: 1rem;
    }
    
    .channel-description {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .channel-features {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .feature-number {
        font-size: 1.6rem;
    }
    
    .feature-label {
        font-size: 0.8rem;
    }
    
    .service-list li {
        font-size: 0.9rem;
        padding: 0.4rem 0;
    }
    
    .category-header {
        padding: 1rem;
    }
    
    .category-icon {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
    }
    
    .category-title {
        font-size: 1.2rem;
    }
    
    .category-content {
        padding: 1.5rem 1rem;
    }
    
    .category-description {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .client-stats {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .client-stats .stat-number {
        font-size: 1.6rem;
    }
    
    .client-stats .stat-label {
        font-size: 0.8rem;
    }
    
    .examples-title,
    .highlights-title {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }
    
    .example-tags {
        gap: 0.4rem;
    }
    
    .example-tag {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
    
    .highlights-list li {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    
    .success-stories {
        margin-top: 2rem;
        padding-top: 2rem;
    }
    
    .stories-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .story-item {
        padding: 1.5rem;
        border-radius: 8px;
    }
    
    .story-header {
        margin-bottom: 1rem;
    }
    
    .story-title {
        font-size: 1.1rem;
    }
    
    .story-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
    
    .story-content {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .story-results {
        gap: 0.5rem;
    }
    
    .result-item {
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
    }
    
    .partnership-values .value-card {
        padding: 1.5rem 1rem;
    }
    
    .partnership-values .value-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .partnership-values .value-title {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }
    
    .partnership-values .value-description {
        font-size: 0.9rem;
        text-align: left;
    }
    
    /* Who We Are */
    .who-we-are {
        padding: 40px 0;
    }
    
    .who-content {
        gap: 1.5rem;
    }
    
    .who-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* What We Provide */
    .what-we-provide {
        padding: 40px 0;
    }

    .service-card {
        padding: 1.5rem;
    }

    .service-icon {
        width: 80px;
        height: 80px;
    }

    .service-icon img {
        width: 40px;
        height: 40px;
    }

    /* Our Advantages */
    .our-advantages {
        padding: 40px 0;
    }

    /* Partners */
    .partners {
        padding: 40px 0;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .partner-item {
        padding: 1.5rem;
    }
    
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Icons */
    .feature-icon,
    .value-icon,
    .culture-icon {
        width: 60px;
        height: 60px;
    }
    
    .feature-icon img,
    .value-icon img,
    .culture-icon img {
        width: 30px;
        height: 30px;
    }
    
    .card-icon {
        width: 60px;
        height: 60px;
    }
    
    .card-icon img {
        width: 30px;
        height: 30px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    /* Team */
    .member-photo {
        width: 100px;
        height: 100px;
    }
    
    /* Forms */
    .form {
        padding: 1rem;
    }
    
    .form-input,
    .form-textarea {
        padding: 10px;
    }
    
    /* Contact */
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .contact-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    /* Contact section for partnership page */
    .contact-content {
        padding: 0 1rem;
    }
    
    .contact-info {
        max-width: 100%;
        text-align: center;
    }
    
    .contact-details {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Partnership Contact Details Mobile Styling */
    .partnership-values + .contact-section .contact-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
        padding: 1rem 0;
    }
    
    .partnership-values + .contact-section .contact-label {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .partnership-values + .contact-section .contact-value {
        text-align: center;
    }
    
    /* Footer */
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer-content {
        gap: 1.5rem;
    }
}

/* Landscape orientation for mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        padding: 80px 0 60px;
    }
    
    .page-header {
        padding: 80px 0 40px;
    }
    
    .nav-menu {
        top: 60px;
    }
    
    /* Partnership page landscape adjustments */
    .upstream-partners,
    .downstream-partners,
    .key-clients,
    .partnership-values {
        padding: 60px 0;
    }
    
    .overview-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .channel-features,
    .client-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo,
    .feature-icon img,
    .value-icon img,
    .culture-icon img,
    .card-icon img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .btn,
    .language-toggle,
    .hamburger {
        display: none !important;
    }
    
    .hero,
    .page-header {
        background: white !important;
        color: black !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .feature-card,
    .value-card,
    .team-member,
    .job-card,
    .benefit-item,
    .culture-card,
    .partner-card,
    .channel-type,
    .client-category,
    .story-item {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    
    .upstream-partners,
    .downstream-partners,
    .key-clients {
        page-break-inside: avoid;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .partner-card,
    .channel-type,
    .client-category,
    .story-item {
        transition: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #ffffff !important;
        color: #333333 !important;
    }
    
    .header {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .nav-link {
        color: #333333 !important;
    }
    
    .feature-card,
    .value-card,
    .team-member,
    .job-card,
    .benefit-item,
    .culture-card,
    .mission-card,
    .vision-card,
    .timeline-content,
    .process-step,
    .form,
    .partner-card,
    .channel-type,
    .client-category,
    .story-item {
        background: #ffffff !important;
        color: #333333 !important;
    }
    
    .form-input,
    .form-textarea {
        background: #ffffff !important;
        color: #333333 !important;
        border-color: #ccc !important;
    }
    
    .section-title,
    .feature-title,
    .value-title,
    .culture-title,
    .benefit-title,
    .job-title,
    .timeline-title,
    .step-title,
    .partner-name,
    .cooperation-title,
    .channel-title,
    .category-title,
    .examples-title,
    .highlights-title,
    .stories-title,
    .story-title {
        color: #333333 !important;
    }
    
    .feature-description,
    .value-description,
    .culture-description,
    .benefit-description,
    .timeline-description,
    .step-description,
    .channel-description,
    .category-description,
    .story-content {
        color: #666666 !important;
    }
    
    .cooperation-list li,
    .service-list li,
    .highlights-list li {
        color: #666666 !important;
    }
    
    .partner-logo {
        background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
    }
    
    .channel-header,
    .category-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }
    
    .channel-features,
    .client-stats {
        background: #f8f9fa !important;
    }
    
    .example-tag {
        background: #667eea !important;
        color: white !important;
        border-color: #764ba2 !important;
    }
    
    .highlights-list li {
        background: #f8f9fa !important;
        border-left-color: #667eea !important;
    }
    
    .story-tag {
        background: #667eea !important;
        color: white !important;
        border-color: #764ba2 !important;
    }
    
    .result-item {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }
}

/* Products Page Responsive Styles */

/* Large screens (1200px and up) */
@media (max-width: 1199px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .business-summary {
        gap: 2rem;
    }
    
    .summary-number {
        font-size: 2rem;
    }
    
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .contact-grid {
        gap: 3rem;
    }
}

/* Medium screens (992px and up) */
@media (max-width: 991px) {
    .products-hero {
        padding: 4rem 0;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .business-summary {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .business-section {
        padding: 4rem 0;
    }
    
    .business-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .service-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .contact-cta {
        padding: 3rem 0;
    }
    
    .cta-content h2 {
        font-size: 1.8rem;
    }
    
    .cta-content p {
        font-size: 1.1rem;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Small screens (768px and up) */
@media (max-width: 767px) {
    .products-hero {
        padding: 3rem 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .summary-number {
        font-size: 1.8rem;
    }
    
    .summary-text {
        font-size: 0.9rem;
    }
    
    .business-section {
        padding: 3rem 0;
    }
    
    .business-card {
        margin-bottom: 2rem;
    }
    
    .business-header {
        padding: 1.5rem;
    }
    
    .business-title h2 {
        font-size: 1.5rem;
    }
    
    .business-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.8rem;
    }
    
    .link-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .business-content {
        padding: 2rem 1.5rem;
    }
    
    .business-desc p {
        font-size: 1rem;
    }
    
    .service-item {
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .service-icon {
        width: 50px;
        height: 50px;
    }
    
    .service-info h4 {
        font-size: 1rem;
    }
    
    .service-brief {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }
    
    .service-detail {
        font-size: 0.85rem;
    }
    
    .app-tags {
        gap: 0.5rem;
    }
    
    .app-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .why-choose-section {
        padding: 3rem 0;
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }
    
    .advantage-item {
        padding: 1.5rem 1rem;
    }
    
    .advantage-number {
        font-size: 2.5rem;
    }
    
    .advantage-item h3 {
        font-size: 1.2rem;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .cta-btn {
        padding: 0.8rem 1.5rem;
        min-width: 200px;
    }
    
    .contact-section {
        padding: 1rem 0;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Extra small screens (576px and up) */
@media (max-width: 575px) {
    .products-hero {
        padding: 2rem 0;
    }
    
    .hero-content {
        padding: 0 1rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    
    .summary-number {
        font-size: 1.5rem;
    }
    
    .summary-text {
        font-size: 0.85rem;
    }
    
    .business-section {
        padding: 2rem 0;
    }
    
    .business-header {
        padding: 1rem;
        gap: 0.8rem;
    }
    
    .business-title h2 {
        font-size: 1.3rem;
    }
    
    .business-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
    
    .link-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .business-content {
        padding: 1.5rem 1rem;
    }
    
    .business-desc p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .service-item {
        flex-direction: column;
        text-align: center;
        padding: 1.2rem;
        gap: 1rem;
    }
    
    .service-icon {
        width: 45px;
        height: 45px;
        margin: 0 auto;
        margin-top: 0;
    }
    
    .service-info h4 {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }
    
    .service-brief {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    
    .service-detail {
        font-size: 0.8rem;
        text-align: center;
    }
    
    .applications h4 {
        font-size: 1.1rem;
    }
    
    .app-tags {
        gap: 0.4rem;
    }
    
    .app-tag {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .advantage-item {
        padding: 1rem;
    }
    
    .advantage-number {
        font-size: 2rem;
    }
    
    .advantage-item h3 {
        font-size: 1.1rem;
    }
    
    .advantage-item p {
        font-size: 0.9rem;
    }
    
    .contact-cta {
        padding: 2rem 0;
    }
    
    .cta-content h2 {
        font-size: 1.5rem;
    }
    
    .cta-content p {
        font-size: 1rem;
    }
    
    .cta-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
        min-width: 180px;
    }
    
    .contact-section {
        padding: 1rem 0;
    }
    

}