/* === LAPTOP 1200px === */
@media(max-width:1200px){
  .gallery-grid{columns:2}
  .timeline-content{width:calc(50% - 30px);padding:20px}
}

/* === TABLET 991px === */
@media(max-width:991px){
  #banner{height:40vh}
  .banner-img{width:45vw;min-width:250px}
  #video-scroll{height:200vh}
  #popular{padding:80px 24px}
  .popular-grid{grid-template-columns:repeat(2,1fr)}
  nav{padding:14px 24px}
  .nav-links a:not(.nav-cta){display:none}
  .menu-btn{display:flex}
  #about{padding:80px 24px}
  .about-inner{flex-direction:column;text-align:center;gap:40px}
  .about-stats{grid-template-columns:repeat(3,1fr)}
  .about-avatar-wrap{width:160px;height:160px}
  #featured{padding:80px 24px}
  .featured-card{border-radius:12px}
  #gallery{padding:80px 24px}
  #timeline{padding:80px 24px}
  .timeline-line{left:20px}
  .timeline-item,.timeline-item:nth-child(even){flex-direction:row!important}
  .timeline-dot{left:20px}
  .timeline-content{width:calc(100% - 50px);margin-left:50px!important;padding:16px}
  #connect{padding:100px 24px}
  footer{padding:60px 24px 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .gmodal-nav.prev{left:8px}.gmodal-nav.next{right:8px}
  .gmodal-close{top:8px;right:8px}
}

/* === MOBILE 767px === */
@media(max-width:767px){
  #banner{height:30vh}
  .banner-img{width:65vw;min-width:200px}
  .popular-grid{grid-template-columns:1fr;max-width:400px}
  .hero-title{font-size:clamp(40px,14vw,72px);gap:2px;letter-spacing:-2px}
  .hero-sub{font-size:11px;letter-spacing:5px}
  .hero-btns{flex-direction:column;align-items:center}
  .hero-btns .btn{width:100%;max-width:280px;justify-content:center}
  .about-stats{grid-template-columns:1fr;gap:10px;max-width:300px;margin:0 auto}
  .gallery-grid{columns:1}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-social{justify-content:center}
  .footer-bottom{flex-direction:column;gap:6px;text-align:center}
  .featured-play{width:56px;height:56px;font-size:22px}
  .connect-btns{flex-direction:column;align-items:center}
  .connect-btns .btn{width:100%;max-width:300px;justify-content:center}
  .cursor,.cursor-follower{display:none}
  body{cursor:auto}
  a,button,input,.gallery-item,.featured-card,.gmodal-nav,.gmodal-close,.footer-social a{cursor:auto}
  .mobile-menu a{font-size:22px;padding:12px}
}

/* === SMALL 575px === */
@media(max-width:575px){
  nav{padding:12px 16px}
  .nav-logo{font-size:15px;letter-spacing:3px}
  .btn{padding:12px 24px;font-size:10px}
  .btn-lg{padding:14px 32px;font-size:12px}
  .hero-title{font-size:32px;gap:1px;letter-spacing:-1px}
  .hero-badge{font-size:8px;padding:4px 12px}
  #about{padding:60px 16px}
  #featured{padding:60px 16px}
  #gallery{padding:60px 16px}
  #timeline{padding:60px 16px}
  #connect{padding:80px 16px}
  footer{padding:40px 16px 20px}
  .section-title{font-size:28px}
  .featured-label{left:12px;bottom:12px;font-size:11px}
  .gmodal-img{max-width:95vw;max-height:70vh}
  .stat-card{padding:14px}
  .timeline-title{font-size:15px}
}