/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* ========================================
   TABLET - 768px and up
   ======================================== */

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }

    .hidden-desktop {
        display: none;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .mobile-menu {
        display: none !important;
    }

    .container {
        padding-left: var(--margin-tablet);
        padding-right: var(--margin-tablet);
    }

    /* Header Navigation */
    .navbar {
        padding: 0;
    }

    .navbar-menu {
        display: flex;
    }

    /* Hero Section */
    .hero {
        padding: var(--spacing-5xl) var(--margin-tablet);
    }

    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4xl);
    }

    .hero-title {
        font-size: var(--font-size-display-xl);
        line-height: var(--line-height-display-xl);
    }

    .hero-buttons {
        flex-direction: row;
    }

    .hero-illustration {
        min-height: 500px;
    }

    /* Sections */
    .section-subtitle {
        max-width: 600px;
    }

    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why Choose Us */
    .why-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }

    .why-badge {
        display: block;
    }

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

    /* Cybersecurity Section */
    .cybersecurity-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-5xl);
    }

    .cybersecurity-title {
        font-size: var(--font-size-headline-lg);
        line-height: var(--line-height-headline-lg);
    }

    /* Process Timeline */
    .process-timeline {
        overflow-x: visible;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-bottom: 0;
    }

    .process-step {
        flex: 1;
        position: relative;
    }

    .process-step:last-child .process-step::after {
        display: none;
    }

    /* Key Figures */
    .figures-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-5xl);
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-links {
        text-align: right;
        grid-template-columns: repeat(2, auto);
        gap: calc(var(--spacing-4xl) + var(--spacing-lg));
        justify-content: flex-end;
    }

    .footer-link-group {
        text-align: right;
    }

    .footer-link-title {
        text-align: right;
    }

    .footer-link-group ul {
        align-items: flex-end;
    }
}

/* ========================================
   DESKTOP - 992px and up
   ======================================== */

@media (min-width: 992px) {
    .container {
        padding-left: var(--margin-desktop);
        padding-right: var(--margin-desktop);
    }

    /* Header */
    .header {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .navbar-menu {
        gap: calc(var(--spacing-2xl) + var(--spacing-lg));
    }

    /* Hero Section */
    .hero {
        padding: var(--spacing-5xl) var(--margin-desktop);
        margin-top: 80px;
        min-height: calc(100vh - 80px);
    }

    .hero-title {
        font-size: var(--font-size-display-xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-body-lg);
    }

    /* Services Grid */
    .services {
        padding: calc(var(--spacing-5xl) + var(--spacing-2xl)) var(--margin-desktop);
    }

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

    .service-card:nth-child(n+5) {
        margin-top: var(--spacing-lg);
    }

    /* Why Choose Us */
    .why-choose-us {
        padding: calc(var(--spacing-5xl) + var(--spacing-2xl)) var(--margin-desktop);
    }

    /* Cybersecurity */
    .cybersecurity {
        padding: calc(var(--spacing-5xl) + var(--spacing-2xl)) var(--margin-desktop);
    }

    /* Process */
    .process {
        padding: calc(var(--spacing-5xl) + var(--spacing-2xl)) var(--margin-desktop);
    }

    /* FAQ */
    .faq {
        padding: calc(var(--spacing-5xl) + var(--spacing-2xl)) var(--margin-desktop);
    }

    /* Contact */
    .contact {
        padding: calc(var(--spacing-5xl) + var(--spacing-2xl)) var(--margin-desktop);
    }
}

/* ========================================
   LARGE DESKTOP - 1200px and up
   ======================================== */

@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2xl);
    }

    .figures-grid {
        gap: var(--spacing-4xl);
    }

    .testimonials-grid {
        gap: var(--spacing-2xl);
    }

    .security-features {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--spacing-xl) + var(--spacing-lg));
    }
}

/* ========================================
   EXTRA LARGE DESKTOP - 1440px and up
   ======================================== */

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

    .hero-content {
        gap: var(--spacing-5xl);
    }

    .section-header {
        margin-bottom: var(--spacing-5xl);
    }

    .services-grid {
        gap: calc(var(--spacing-xl) + var(--spacing-lg));
    }

    .why-grid {
        gap: calc(var(--spacing-xl) + var(--spacing-lg));
    }

    .testimonials-grid {
        gap: calc(var(--spacing-xl) + var(--spacing-lg));
    }

    .security-features {
        gap: var(--spacing-2xl);
    }

    .process-timeline {
        gap: calc(var(--spacing-2xl) + var(--spacing-lg));
    }

    .contact-grid {
        gap: var(--spacing-5xl);
    }
}

/* ========================================
   SMALL MOBILE - 375px and up
   ======================================== */

@media (max-width: 576px) {
    .hidden-mobile {
        display: none;
    }

    .hidden-desktop {
        display: flex;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile Menu Override */
    .mobile-menu {
        display: none !important;
    }

    .mobile-menu.active {
        display: flex !important;
    }

    /* Header Brand - Mobile Size */
    .brand-name {
        font-size: var(--font-size-body-md);
        line-height: var(--line-height-body-md);
    }

    .logo {
        height: 32px;
    }

    /* Scroll to Top Button - Mobile Size */
    .scroll-to-top {
        width: 44px;
        height: 44px;
        right: var(--spacing-lg);
        bottom: calc(-60px);
    }

    .scroll-to-top.visible {
        bottom: var(--spacing-lg);
    }

    .scroll-to-top svg {
        width: 20px;
        height: 20px;
    }
    h1 {
        font-size: var(--font-size-display-xl-mobile);
    }

    .section-title {
        font-size: var(--font-size-headline-lg);
    }

    .hero-title {
        font-size: 32px;
        line-height: 40px;
    }

    /* Spacing Adjustments */
    .container {
        padding-left: var(--margin-mobile);
        padding-right: var(--margin-mobile);
    }

    .services,
    .why-choose-us,
    .cybersecurity,
    .process,
    .faq,
    .contact,
    .testimonials {
        padding-top: var(--spacing-4xl);
        padding-bottom: var(--spacing-4xl);
    }

    /* Hero Section */
    .hero {
        margin-top: 80px;
        padding: var(--spacing-4xl) var(--margin-mobile);
        min-height: auto;
    }

    .hero-content {
        gap: var(--spacing-2xl);
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-illustration {
        min-height: 300px;
    }

    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Why Choose Us */
    .why-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Cybersecurity */
    .cybersecurity-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4xl);
    }

    .security-features {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .security-feature {
        padding: var(--spacing-md);
    }

    /* FAQ */
    .faq-item {
        padding: var(--spacing-lg);
    }

    .faq-summary {
        gap: var(--spacing-md);
    }

    .faq-question {
        font-size: var(--font-size-body-md);
    }

    .feature-icon {
        width: 28px;
        height: 28px;
    }

    .feature-icon svg {
        width: 20px;
        height: 20px;
    }

    .feature-title {
        font-size: 14px;
    }

    .feature-description {
        font-size: 12px;
    }

    /* Process Timeline */
    .process-timeline {
        gap: var(--spacing-lg);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: var(--spacing-xl) 0;
    }

    .process-timeline::before {
        display: none;
    }

    .process-step {
        min-width: 160px;
    }

    .step-number {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .step-number svg {
        width: 24px;
        height: 24px;
    }

    .step-title {
        font-size: 14px;
    }

    .step-description {
        font-size: 12px;
    }

    /* Key Figures */
    .key-figures {
        padding: var(--spacing-4xl) var(--margin-mobile);
    }

    .figures-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2xl);
    }

    .figure-number {
        font-size: 36px;
    }

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

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ */
    .faq-container {
        max-width: 100%;
    }

    .faq-item {
        padding: var(--spacing-lg);
    }

    .faq-question {
        font-size: 14px;
    }

    .faq-answer {
        font-size: 14px;
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4xl);
    }

    .contact-form {
        padding: var(--spacing-xl);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-map {
        height: 200px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .footer-links {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .footer-link-group {
        text-align: left;
    }

    .footer-link-title {
        text-align: left;
    }

    .footer-link-group ul {
        align-items: flex-start;
    }

    .footer-bottom {
        padding: var(--spacing-lg) var(--margin-mobile);
    }

    .copyright {
        font-size: 12px;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (orientation: landscape) and (max-height: 600px) {
    .hero {
        min-height: auto;
        padding: var(--spacing-2xl) var(--margin-mobile);
    }

    .hero-illustration {
        min-height: 300px;
    }

    .section-header {
        margin-bottom: var(--spacing-2xl);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    header,
    footer,
    .mobile-menu-toggle {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        color: inherit;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }

    .section {
        page-break-inside: avoid;
    }

    img {
        max-width: 100%;
    }
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: more) {
    .btn {
        border-width: 2px;
    }

    .service-card,
    .why-card,
    .testimonial-card,
    .contact-form {
        border-width: 2px;
    }

    button {
        border-width: 2px;
    }
}

/* ========================================
   DARK MODE SUPPORT (Optional Future Use)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Currently maintained in light mode as per design system */
    /* Dark mode colors can be added here if needed */
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATION
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    .btn:hover {
        transform: none;
    }

    .service-card:hover,
    .why-card:hover,
    .testimonial-card:hover,
    .security-feature:hover,
    .faq-item:hover {
        transform: none;
        box-shadow: none;
    }

    .btn {
        padding: var(--spacing-lg) var(--spacing-xl);
    }

    /* Increase touch targets to 44px minimum */
    button,
    a,
    input,
    select,
    textarea {
        min-height: 44px;
        min-width: 44px;
    }
}