/* ============================================
   RESPONSIVE CSS - Mobile First Approach
   ============================================ */

/* ============================================
   MOBILE DEVICES (Base styles already mobile-first)
   Extra-small screens: < 480px
   ============================================ */

@media (max-width: 479px) {
    /* Base Layout */
    .container {
        padding: 0 16px;
    }

    /* Typography */
    h1 {
        font-size: 24px !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 22px;
        margin-bottom: 16px;
    }

    h3 {
        font-size: 16px;
    }

    p {
        font-size: 14px;
    }

    .lead {
        font-size: 14px;
    }

    /* Header Navigation */
    .nav {
        padding: 12px 0;
    }

    .brand img {
        width: 150px !important;
    }

    .menu {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--card);
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        padding: 16px;
        gap: 12px;
    }

    .menu a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .menu a:last-child {
        border-bottom: none;
    }

    /* Hero Section */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .screen {
        padding: 12px;
    }

    .screen .fake {
        height: 200px;
    }

    .kpis {
        flex-direction: column;
        gap: 12px;
        margin: 18px 0 0;
    }

    .kpi {
        padding: 12px 14px;
        font-size: 13px;
    }

    /* CTA Button */
    .cta {
        padding: 10px 14px;
        font-size: 14px;
        width: 100%;
    }

    /* Cards Grid */
    .g {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        padding: 14px;
        min-height: auto;
    }

    .card h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .card p {
        font-size: 13px;
    }

    /* Steps */
    .steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .step {
        padding: 16px;
    }

    .step .n {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Pricing Toggle */
    .pricing-toggle {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 20px;
    }

    .toggle-label {
        font-size: 12px;
    }

    .toggle-switch {
        width: 52px;
        height: 28px;
    }

    .toggle-knob {
        width: 22px;
        height: 22px;
    }

    .toggle-switch.active .toggle-knob {
        left: 26px;
    }

    .save-badge {
        font-size: 11px;
        width: 100%;
        text-align: center;
    }

    /* Pricing Plans */
    .plan.popular {
        transform: scale(1);
    }

    .plan .price {
        font-size: 24px;
    }

    .plan .unit {
        font-size: 12px;
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-form {
        padding: 20px;
    }

    .contact-form h3 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .form-group input,
    .form-group textarea {
        padding: 10px;
        font-size: 14px;
    }

    .form-group textarea {
        min-height: 100px;
    }

    /* Footer */
    footer {
        padding: 40px 0 30px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .footer-col h4 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .footer-col a {
        font-size: 13px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-bottom .brand img {
        width: 120px !important;
    }

    .social-links {
        justify-content: center;
        gap: 12px;
    }

    .social-links a {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    /* Band Section */
    .band-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px;
    }

    /* Sections Padding */
    .hero {
        padding: 60px 0 30px;
    }

    .features,
    .how,
    .pricing,
    .contact {
        padding: 40px 0;
    }

    .band {
        padding: 30px 0;
    }

    /* About Page */
    .main-about .stats {
        grid-template-columns: 1fr;
    }

    .main-about .stat-item {
        padding: 16px;
    }

    /* Careers Page */
    .main-careers .job-card {
        padding: 16px;
    }

    .main-careers .benefits {
        grid-template-columns: 1fr;
    }

    /* Privacy & Terms Pages */
    .main-privacy .policy-section,
    .main-terms .terms-section {
        padding: 16px 0;
    }

    .main-privacy h3,
    .main-terms h3 {
        font-size: 16px;
    }
}

/* ============================================
   SMALL DEVICES
   Small screens: 480px - 640px
   ============================================ */

@media (min-width: 480px) and (max-width: 640px) {
    .container {
        padding: 0 18px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    .lead {
        font-size: 15px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .screen .fake {
        height: 240px;
    }

    .g,
    .steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .band-inner {
        flex-direction: column;
        text-align: center;
    }

    .main-about .stats,
    .main-careers .benefits {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   TABLET DEVICES
   Medium screens: 641px - 960px
   ============================================ */

@media (min-width: 641px) and (max-width: 960px) {
    .container {
        padding: 0 24px;
    }

    h1 {
        font-size: 36px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .screen .fake {
        height: 280px;
    }

    .g {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .contact-form {
        padding: 28px;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .band-inner {
        flex-direction: column;
        text-align: center;
    }

    .plan.popular {
        transform: scale(1);
    }

    .main-about .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-careers .benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-careers .job-listings {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DESKTOP DEVICES
   Large screens: 961px - 1440px
   ============================================ */

@media (min-width: 961px) and (max-width: 1440px) {
    .container {
        max-width: 1000px;
    }

    .g {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .footer-top {
        grid-template-columns: repeat(4, 1fr);
    }

    .plan.popular {
        transform: scale(1.02);
    }

    .main-about .stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-careers .benefits {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   LARGE DESKTOP
   Extra-large screens: > 1440px
   ============================================ */

@media (min-width: 1441px) {
    .container {
        max-width: 1200px;
    }

    .plan.popular {
        transform: scale(1.05);
    }
}

/* ============================================
   LANDSCAPE MODE
   Adjust for landscape orientation on mobile
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        padding: 40px 0 20px;
    }

    .hero-grid {
        gap: 16px;
    }

    .screen .fake {
        height: 150px;
    }

    .features,
    .how,
    .pricing,
    .contact {
        padding: 30px 0;
    }

    h1 {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .lead {
        font-size: 14px;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATION
   Better spacing and interaction targets
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .cta,
    button {
        min-height: 48px;
        padding: 12px 18px;
    }

    .menu a {
        padding: 14px 0;
    }

    /* Remove hover effects on touch devices */
    .card:hover,
    .step:hover {
        transform: none;
    }

    /* Adjust shadow on touch */
    .cta:active {
        box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
    }
}


/* ============================================
   HIGH CONTRAST MODE (Accessibility)
   ============================================ */

@media (prefers-contrast: more) {
    :root {
        --shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    }

    .card,
    .step,
    .contact-form {
        border: 2px solid rgba(255, 255, 255, .2);
    }

    .cta {
        font-weight: 700;
    }
}

/* ============================================
   REDUCED MOTION (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}