/* ============================================
   REVERTO - Responsive Styles
   Consolidated Media Queries - 6 Breakpoints
   ============================================ */

/* ============================================
   BREAKPOINT: 1200px and above (min-width)
   ============================================ *

/* ============================================
   BREAKPOINT: 1600px and below
   ============================================ */
@media (max-width: 1600px) {
    /* Use Cases - Using Bootstrap columns, no custom width needed */
    
    /* Integrations Network */
    .integrations-network {
        transform: scale(0.85);
        transform-origin: top center;
        height: 513.71px;
    }
    
    /* Orbit Testimonial */
    .orbit-testimonial-wrapper {
        transform: scale(0.85);
        transform-origin: top center;
        height: 807.5px;
    }
}

/* ============================================
   BREAKPOINT: 1400px and below
   ============================================ */
@media (max-width: 1400px) {
    /* Hero Video */
    .hero-video-wrapper {
        width: 180%;
        height: 900px;
    }
    
    .nav-link-custom{
        font-size: 16px;
    }
    
    /* Stats Section */
    .stats-card {
        padding: 36px 60px;
    }
    
    .stats-grid {
        gap: 100px;
    }
    
    /* Agents Section */
    .agent-tab:first-child {
        width: auto;
        flex: 1;
    }

    .agents-title {
        font-size: 44px;
    }
    
    .panel-text {
        width: 50%;
        padding: 80px 32px;
    }
    
    .tab-title {
        font-size: 24px;
    }
    
    .tab-desc {
        font-size: 16px;
        line-height: 24px;
    }
    
    /* How It Works */
    .how-accordion {
        width: 50%;
        padding: 80px 32px;
    }
    
    .visual-image {
        width: auto;
        height: 410px;
    }

    .visual-image {
        width: 100%;
    }
    
    .visual-image img {
        width: 100%;
        margin-left: 0;
    }
    
    .how-stats {
        gap: 100px;
    }
    .how-title {
        font-size: 44px;
    }

    
    .how-stats-grid {
        gap: 100px;
    }
    
    /* FAQ */
    .faq-title {
        font-size: 44px;
    }
    
    /* Integrations Network */
    .integrations-network {
        transform: scale(0.75);
        height: 428.09px;
    }

    .use-cases-title {
        font-size: 44px;
    }
    .comparison-title {
        font-size: 44px;
    }

    
    /* Orbit Testimonial */
    .orbit-testimonial-wrapper {
        /* transform: scale(0.7); */
        height: 665px;
    }

    .testimonial-arc {
        top: 116.21px;
    }
    
    .orbit-testimonial-card blockquote,
    .orbit-testimonial-card .testimonial-text {
        font-size: 20px;
        line-height: 28px;
    }

    .footer {
        padding: 50px 0px;
    }
    
    .footer-column a {
    font-size: 16px;
    line-height: 30px;
}
    
    .footer-content {
        padding: 0 0px;
    }
}

/* ============================================
   BREAKPOINT: 1200px and below
   ============================================ */
@media (max-width: 1200px) {
    /* Header */
    .header-nav {
        position: static;
        transform: none;
    }
    
    .nav-link-custom{
        font-size: 15px;
    }
    
    .header-inner {
        gap: 32px;
    }
    
    /* Stats Section */
    .stats-card {
        padding: 36px 80px;
    }
    
    .stats-grid {
        gap: 100px;
    }
    
    /* Agents Section */
    .agents-title {
        font-size: 44px;
    }
    
    .agents-tabs {
        flex-wrap: wrap;
    }
    
    .agent-tab {
        flex: 1 1 50%;
    }
    
    .agent-tab:first-child {
        flex: 1 1 50%;
    }
    
    /* How It Works */
    .how-title {
        font-size: 44px;
    }
    
    .how-stats {
        gap: 60px;
        padding: 0 24px;
    }
    
    .how-stat-item {
        width: auto;
        flex: 1;
    }
    
    /* Use Cases */
    .use-cases-title {
        font-size: 44px;
    }
    
    /* Comparison Section */
    .agent-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .agent-type-item:nth-child(2) {
        border-right: none;
    }
    
    .agent-type-item:nth-child(3),
    .agent-type-item:nth-child(4) {
        border-top: 1px solid var(--border-color);
    }
    
    .comparison-title {
        font-size: 40px;
    }
    
    .comparison-subtitle {
        font-size: 18px;
        line-height: 28px;
    }
    
    .comparison-cell.feature {
        font-size: 18px;
    }
    
    .comparison-row.header .comparison-cell {
        font-size: 24px;
    }
    
    .comparison-btn {
        font-size: 16px;
    }
    
    /* Platform Section */

    /* .platform-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .platform-card.large {
        grid-column: span 2;
    } */

     .platform-grid {
        grid-template-columns: 2fr 1fr;
    }
    
    .platform-card.large {
        grid-column: span 1;
    }
    
    .platform-card.large:last-child {
        grid-column: span 2;
    }
    /* Integrations Network */
    .integrations-network {
        transform: scale(0.6);
        height: 342.47px;
    }
    
    /* Orbit Testimonial */
    .orbit-testimonial-wrapper {
        transform: scale(0.6);
        height: 570px;
    }

    .footer {
        padding: 50px 10px;
    }
    
    .footer-column a {
    font-size: 16px;
    line-height: 30px;
}
    
    .footer-content {
        padding: 0 0px;
}
}

/* ============================================
   BREAKPOINT: 992px and below
   ============================================ */
@media (max-width: 992px) {
    /* Global */
    :root {
        --section-padding: 60px 0;
    }
    
    
    /* Header */
    .header-container {
        padding: 0 16px;
    }
    
    .header-nav {
        display: none;
    }
    
    .header-actions {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .header-logo {
        font-size: 28px;
    }
    
    /* Hero Section */
    .hero-video-wrapper {
        width: 200%;
        height: 700px;
    }
    
    /* Stats Section */
    .stats-card {
        padding: 30px 40px;
    }
    
    .stats-grid {
        gap: 60px;
        flex-direction: column;
        gap: 40px;
    }
    
    .stats-headline {
        white-space: normal;
        font-size: 20px;
        line-height: 28px;
    }
    
    .stat-value,
    .stat-prefix,
    .stat-suffix,
    .stat-range {
        font-size: 28px;
        line-height: 28px;
    }
    
    .stat-divider {
        width: 80px;
        height: 1px;
    }
    
    /* Agents Section */
    .agents-title {
        font-size: 36px;
    }
    
    .agents-subtitle {
        font-size: 18px;
    }
    
    .tab-panel.active {
        flex-direction: column;
    }
    
    .panel-text {
        width: 100%;
        min-height: auto;
        padding: 40px 24px;
        border-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .panel-image {
        width: 100%;
        min-height: 400px;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
    }
    
    /* How It Works */
    .how-content {
        flex-direction: column;
    }
    
    .how-accordion {
        width: 100%;
        min-height: auto;
        padding: 40px 24px;
    }
    
    .how-visual {
        width: 100%;
        min-height: auto;
    }

    
    .visual-image {
        top: 0;
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .how-title {
        font-size: 36px;
    }
    
    .how-subtitle {
        font-size: 18px;
    }
    
    .how-stats-grid {
        flex-direction: column;
        gap: 40px;
    }
    
    /* Use Cases */
    .use-case-main {
        height: auto;
        min-height: 267px;
    }
    
    /* Comparison Section */
    .comparison-title {
        font-size: 36px;
    }
    
    .comparison-subtitle {
        font-size: 18px;
        line-height: 28px;
    }
    
    .comparison-cell.feature {
        font-size: 20px;
    }
    
    .comparison-row.header .comparison-cell {
        font-size: 28px;
    }
    
    .agent-types-grid {
        grid-template-columns: 1fr;
    }
    
    .agent-type-item {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .agent-type-item:last-child {
        border-bottom: none;
    }
    
    .agent-detail {
        grid-template-columns: 1fr;
    }
    
    .agent-detail-content {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 60px 32px;
    }
    
    .how-it-works-content {
        grid-template-columns: 1fr;
    }
    
    .steps-container {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    /* Platform Section */
    .platform-grid {
        grid-template-columns: 1fr;
    }
    
    .platform-card.large {
        grid-column: span 1;
    }

    .use-case-title {
        font-size: 21px;
    }
    
    /* FAQ */
    .faq-title {
        font-size: 36px;
    }
    
    .faq-accordion-button {
        font-size: 20px;
        padding: 24px 20px;
    }
    
    .faq-accordion-body {
        font-size: 16px;
        padding: 0 20px 24px 20px;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .footer {
        padding: 50px 10px;
    }
    
    .footer-column a {
    font-size: 15px;
    line-height: 28px;
}
    
    .footer-content,
    .footer-bottom {
        padding: 0;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }
    
    .footer-column {
        width: 100%;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        margin-top: 30px;
    }
    
    /* Integrations Network */
    .integrations-network {
        transform: scale(0.5);
        height: 285.40px;
    }
    
    /* Orbit Testimonial - Hide desktop version, show mobile slider */
    .orbit-desktop {
        display: none !important;
    }
    
    .testimonial-mobile-slider {
        display: block;
    }
}

/* ============================================
   BREAKPOINT: 768px and below
   ============================================ */
@media (max-width: 768px) {
    /* Navigation */
    .navbar-nav {
        padding: 20px 0;
    }
    
    .navbar .d-flex {
        margin-top: 20px;
    }
    .reverto-header.scrolled {
        border-radius: 10px;
    }
    /* Hero Section */
    .hero-buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .logos-marquee {
        gap: 40px;
        animation-duration: 20s;
    }
    
    .company-logo {
        height: 32px;
    }
    
    .logo-item {
        height: 32px;
    }
    
    /* Stats Section */
    .stats-card {
        padding: 24px 20px;
    }
    
    .stats-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .stat-divider {
        width: 100%;
        height: 1px;
    }
    
    .stats-headline {
        font-size: 18px;
        line-height: 26px;
    }
    
    .section-header {
        padding: 30px 24px;
    }
    
    /* Agents Section */
    .agents-header {
        margin-bottom: 40px;
    }
    
    .agents-title {
        font-size: 28px;
    }
    
    .agent-tab {
        flex: 1 1 100%;
        padding: 16px 20px;
    }
    
    .tab-title {
        font-size: 20px;
    }
    
    .tab-desc {
        font-size: 14px;
        max-width: 100%;
    }
    
    .panel-title {
        font-size: 24px;
    }
    
    .panel-subtitle {
        font-size: 16px;
    }
    
    .panel-features li {
        font-size: 16px;
    }
    
    /* How It Works */
    .how-header {
        padding: 30px 20px 0;
        margin-bottom: 30px;
    }
    
    .how-title {
        font-size: 28px;
    }
    
    .how-stats {
        flex-direction: column;
        height: auto;
        gap: 0;
        padding: 30px 20px;
    }
    
    .how-stat-item {
        padding: 20px 0;
        width: 100%;
    }
    
    .how-stat-divider {
        width: 100%;
        height: 1px;
    }
    
    .accordion-title {
        font-size: 20px;
    }
    
    .accordion-desc {
        font-size: 16px;
    }
    
    .how-stat-value {
        font-size: 28px;
    }
    
    /* Use Cases */
    .use-cases-header {
        margin-bottom: 30px;
    }
    
    .use-cases-title {
        font-size: 32px;
    }
    
    .use-cases-subtitle {
        font-size: 18px;
    }
    
    .use-case-title {
        font-size: 22px;
    }
    
    .use-case-label,
    .outcome-label {
        font-size: 18px;
    }
    
    /* Comparison Section */
    .comparison-title {
        font-size: 32px;
    }
    
    .comparison-subtitle {
        font-size: 16px;
        line-height: 26px;
    }
    
    .comparison-row {
        grid-template-columns: 1fr;
    }
    
    .comparison-cell {
        padding: 16px;
        justify-content: flex-start !important;
    }
    
    .comparison-row.header .comparison-cell {
        font-size: 20px;
    }
    
    .comparison-cell.feature {
        font-size: 16px;
    }
    
    .comparison-btn {
        font-size: 16px;
        padding: 10px 18px;
    }
    
    /* FAQ */
    .faq-title {
        font-size: 28px;
    }
    
    .faq-accordion-button {
        font-size: 18px;
        padding: 20px 16px;
    }
    
    .faq-accordion-body {
        font-size: 14px;
        line-height: 22px;
        padding: 0 16px 20px 16px;
    }
    
    .faq-arrow {
        width: 20px;
        height: 20px;
        margin-left: 12px;
    }
    
    .faq-toggle {
        font-size: 18px;
        padding: 24px 16px;
    }
    
    /* Integration */
    .integration-orbit::before {
        width: 300px;
        height: 300px;
    }
    
    .integration-center {
        width: 150px;
        height: 150px;
    }
    
    .integration-center span {
        font-size: 28px;
    }
    
    .integration-node {
        --distance: 120px !important;
    }
    
    .integration-icon {
        width: 50px;
        height: 50px;
    }
    
    /* Integrations Network */
    .integrations-network {
        transform: scale(0.4);
        height: 228.32px;
    }
    
    /* Testimonials */
    .testimonial-card blockquote {
        font-size: 18px;
    }
    
    /* Testimonial Mobile - Responsive adjustments */
    .testimonial-text-mobile {
        font-size: 18px;
        line-height: 28px;
    }
    
    .author-name-mobile {
        font-size: 18px;
    }
    
    .author-title-mobile {
        font-size: 14px;
    }
    .footer {
        padding: 50px 10px;
    }
}

/* ============================================
   BREAKPOINT: 575px and below
   ============================================ */
@media (max-width: 575px) {
    /* Header */
    .header-logo {
        font-size: 24px;
    }
    
    .mobile-nav-link {
        font-size: 20px;
    }
    .reverto-header.scrolled {
        border-radius: 0px;
    }
    /* Hero Section */
    .hero-video-wrapper {
        width: 300%;
        height: 500px;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    /* Sections */
    .section-title {
        font-size: 28px;
    }
    
    .agent-header h3 {
        font-size: 24px;
    }
    
    /* Big Text */
    .big-text {
        font-size: 80px;
    }
    
    /* Integrations Network */
    .integrations-network {
        transform: scale(0.3);
        height: 171.24px;
    }
    
    /* Testimonial Mobile - Small screens */
    .testimonial-card-mobile {
        padding: 24px 16px;
    }

    .visual-image{
        position: relative;
    }

    .how-visual {
        min-height: auto;
    }
    
    .testimonial-text-mobile {
        font-size: 16px;
        line-height: 26px;
    }
    
    .testimonial-logo-mobile {
        /* width: 60px;
        height: 60px; */
    }
    
    .panel-image {
        min-height: auto;
    }

    .panel-image img {
        height: auto;
    }

    .slider-arrow {
        width: 36px;
        height: 36px;
    }

    .big-text-section {
        padding: 0px 0 10px 0;
    }
    .footer {
        padding: 50px 10px;
    }

    .footer-brand h3 {
        font-size: 25px;
    }
    .footer-column h4 {
        font-size: 18px;
    }

    .footer-column a {
        font-size: 15px;
    }

    .copyright {
        font-size: 16px;
    }

}