/* ==========================
   TABLET
========================== */
@media (max-width:992px){

.container{
    width:90%;
}

.hero{
    grid-template-columns:1fr;
    text-align:center;
    gap:50px;
}

.hero-content{
    order:1;
}

.hero-image{
    order:2;
}

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

.contact-container,
.footer-container,
.dashboard-bottom{
    grid-template-columns:1fr;
}

.topbar{
    flex-direction:column;
    gap:20px;
    align-items:flex-start;
}
}
/* ==========================
   MOBILE
========================== */
@media (max-width:768px){
    .menu-toggle{
        display:block;
    }
    .nav-links{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:white;
        display:none;
        flex-direction:column;
        align-items:center;
        gap:20px;
        padding:30px 0;
        box-shadow:0 10px 25px rgba(0,0,0,.1);
    }
    .nav-links.active{
        display:flex;
    }
    .navbar .btn-primary{
        display:none;
    }
}
/* ==========================
   MOBILE DEVICES
========================== */
@media (max-width: 768px){
    /* Hero */
    .hero .container{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:40px;
}

.hero-content{
    width:100%;
    max-width:700px;
    order:1;
}

.hero-image{
    width:100%;
    order:2;
    display:flex;
    justify-content:center;
    flex-direction: column;
    align-items: center;
}

.dashboard{
    width:100%;
    max-width:420px;
}
.hero-content h1{
    font-size:2.5rem;
    line-height:1.2;
}
.hero-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
.dashboard-footer{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.dashboard-btn{
    display: inline-block;
}
    /* Features */
    .features-grid{
        grid-template-columns:1fr;
    }
    /* Dashboard */
    .dashboard-preview{
        width:100%;
        margin-top:30px;
    }
    /* Statistics */
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
    /* Contact */
    .contact-container{
        grid-template-columns:1fr;
    }
    /* Footer */
    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }
    .social-icons{
        justify-content:center;
    }
}
@media (max-width:480px){
    h1{
        font-size:2rem;
    }
    h2{
        font-size:1.8rem;
    }
    .container{
        width:90%;
    }
    .stats-grid{
        grid-template-columns:1fr;
    }
    .hero-buttons{
    display:flex;
    flex-direction:column;
    width:100%;
}
.hero-buttons a{
    width:100%;
    max-width:320px;
}
}
@media (max-width:768px){
  .dashboard-layout{
    flex-direction:column;
  }
  .sidebar{
    width:100%;
    padding:20px;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .sidebar ul{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding-bottom:6px;
  }
  .sidebar li{
    padding:10px 16px;
    margin-bottom:0;
    white-space:nowrap;
    flex-shrink:0;
  }
  .main-content{
    padding:20px;
  }
  .cards{
    grid-template-columns:1fr;
  }
}
@media (max-width:768px){
  .steps{
    flex-direction:column;
    gap:40px;
  }
  .step-card::after{
    display:none;
  }
}
@media (max-width:768px){
  .settings-grid{
    grid-template-columns:1fr;
  }
  .action-grid{
    grid-template-columns:1fr;
  }
  .toggle-item{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .switch{
    align-self:flex-start;
  }
  .toast{
    left:20px;
    right:20px;
    bottom:20px;
    text-align:center;
  }
}