/* =====================================================
   SYNTERA - Responsive Styles
   Desktop: 1440px+
   Tablet: 768px - 1439px
   Mobile: до 767px
===================================================== */

/* =====================================================
   TABLET: 768px - 1439px
===================================================== */
@media (max-width: 1439px) and (min-width: 768px) {
    /* Hero Section */
    .hero {
        min-height: 80vh;
        padding: 6rem 0;
    }

    .hero-title {
        font-size: clamp(3.5rem, 8vw, 6rem);
    }

    .hero-manifesto {
        font-size: clamp(1.125rem, 2vw, 1.375rem);
        max-width: 800px;
    }

    /* Social Proof */
    .social-proof {
        padding: 5rem 0;
    }

    .trust-cards {
        max-width: 800px;
        gap: 2rem;
    }

    .trust-card {
        padding: 2.5rem 1.75rem;
    }

    /* Approach */
    .approach {
        padding: 5rem 0;
    }

    .approach .section-title {
        margin-bottom: 3.5rem;
    }

    .approach-grid {
        gap: 2.5rem;
    }

    /* Expertise */
    .expertise {
        padding: 5rem 0;
    }

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

    /* Cases */
    .cases {
        padding: 5rem 0;
    }

    .cases-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* CTA */
    .cta {
        padding: 6rem 0;
    }

    .cta-form-container {
        max-width: 600px;
    }

    .cta-form {
        padding: 2.5rem;
    }
}

/* =====================================================
   MOBILE: до 767px
===================================================== */
@media (max-width: 767px) {
    /* Hero Section */
    .hero {
        min-height: 70vh;
        padding: 4rem 0;
    }

    .hero-content {
        padding: 2rem 1rem;
    }

    .hero-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
        margin-bottom: 1.5rem;
    }

    .hero-manifesto {
        font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
        letter-spacing: 0.05em;
    }

    /* Social Proof */
    .social-proof {
        padding: 5rem 0 3.5rem;
    }

    .social-proof .section-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 3rem;
    }

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

    .trust-card {
        padding: 2rem 1.5rem;
    }

    .trust-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 1.25rem;
    }

    .trust-icon svg {
        width: 40px;
        height: 40px;
    }

    .trust-title {
        font-size: clamp(1.0625rem, 4vw, 1.25rem);
    }

    /* Approach */
    .approach {
        padding: 5rem 0 3.5rem;
    }

    .approach .section-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 3rem;
    }

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

    .approach-card {
        padding: 2rem 1.5rem;
    }

    .approach-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
    }

    .approach-icon svg {
        width: 48px;
        height: 48px;
    }

    .approach-title {
        font-size: clamp(1.125rem, 4vw, 1.375rem);
    }

    .approach-text {
        font-size: 0.9375rem;
    }

    /* Expertise */
    .expertise {
        padding: 5rem 0 3.5rem;
    }

    .expertise .section-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .section-description {
        font-size: clamp(0.9375rem, 3vw, 1.0625rem);
        margin-bottom: 3rem;
    }

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

    .expertise-card {
        padding: 2rem 1.5rem;
    }

    .expertise-icon {
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
    }

    .expertise-title {
        font-size: 1.25rem;
    }

    .expertise-description {
        font-size: 0.9375rem;
    }

    .expertise-list li {
        font-size: 0.875rem;
        padding: 0.4rem 0;
        padding-left: 1.25rem;
    }

    /* Cases */
    .cases {
        padding: 5rem 0 3.5rem;
    }

    .cases .section-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 3rem;
    }

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

    .case-card {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }

    .case-badge {
        font-size: 0.8125rem;
        padding: 0.4rem 1rem;
        margin-bottom: 1.5rem;
    }

    .case-section {
        margin-bottom: 1.5rem;
    }

    .case-label {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .case-label svg {
        width: 18px;
        height: 18px;
    }

    .case-label span {
        font-size: 0.8125rem;
    }

    .case-text {
        font-size: 0.9375rem;
        padding-left: 1.5rem;
    }

    /* CTA */
    .cta {
        padding: 4rem 0;
    }

    .cta-header {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }

    .cta-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    .cta-subtitle {
        font-size: clamp(0.9375rem, 3vw, 1.125rem);
    }

    .cta-form-container {
        padding: 0 1rem;
    }

    .cta-form {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 0;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        font-size: 0.875rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
    }

    .cta-submit-btn {
        padding: 1.125rem 1.5rem;
        font-size: 1rem;
    }
}

/* =====================================================
   MOBILE SMALL: до 480px
===================================================== */
@media (max-width: 480px) {
    /* Hero Section */
    .hero {
        min-height: 60vh;
    }

    .hero-content {
        padding: 1.5rem 0.75rem;
    }

    .hero-title {
        font-size: clamp(2rem, 12vw, 3rem);
        margin-bottom: 1.25rem;
    }

    .hero-manifesto {
        font-size: clamp(0.875rem, 4vw, 1rem);
        letter-spacing: 0.04em;
    }

    /* Social Proof */
    .social-proof {
        padding: 3rem 0;
    }

    .trust-card {
        padding: 1.75rem 1.25rem;
    }

    .trust-icon {
        width: 64px;
        height: 64px;
    }

    .trust-icon svg {
        width: 36px;
        height: 36px;
    }

    /* Approach */
    .approach {
        padding: 3rem 0;
    }

    .approach-grid {
        gap: 1.5rem;
    }

    .approach-card {
        padding: 1.75rem 1.25rem;
    }

    .approach-icon {
        width: 72px;
        height: 72px;
    }

    .approach-icon svg {
        width: 44px;
        height: 44px;
    }

    /* Expertise */
    .expertise {
        padding: 3rem 0;
    }

    .expertise-grid {
        gap: 1.25rem;
    }

    .expertise-card {
        padding: 1.75rem 1.25rem;
    }

    .expertise-icon {
        font-size: 2.25rem;
    }

    /* Cases */
    .cases {
        padding: 3rem 0;
    }

    .case-card {
        padding: 1.75rem 1.25rem;
    }

    /* CTA */
    .cta {
        padding: 3rem 0;
    }

    .cta-header {
        margin-bottom: 2rem;
    }

    .cta-form {
        padding: 1.75rem 1.25rem;
        border-radius: 16px;
    }

    .cta-submit-btn {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .btn-text {
        text-align: center;
        font-size: 0.9375rem;
    }
}

/* =====================================================
   LANDSCAPE ORIENTATION (Mobile)
===================================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
    }

    .hero-content {
        padding: 2rem 1rem;
    }
}

/* =====================================================
   EXTRA WIDE SCREENS: 1920px+
===================================================== */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
        padding: 0 100px;
    }

    .hero-title {
        font-size: clamp(8rem, 10vw, 12rem);
    }

    .hero-manifesto {
        font-size: clamp(1.5rem, 2vw, 2rem);
    }
}