/* =====================================================
   BARAKAH WEB DESIGN AGENCY - RESPONSIVE STYLES
   ===================================================== */
@media(max-width:1024px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .features__grid{grid-template-columns:repeat(2,1fr)}
  .testimonials__grid{grid-template-columns:repeat(2,1fr)}
  .portfolio__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:repeat(2,1fr);gap:36px}
  .hero__cards{grid-template-columns:repeat(3,1fr)}
  .stats-bar__inner{grid-template-columns:repeat(4,1fr)}
  .process__steps{grid-template-columns:repeat(3,1fr);gap:24px}
  .process__steps::before{display:none}
  .about__grid{gap:48px}
  .contact__grid{gap:40px}
}
@media(max-width:900px){
  .hero{padding:72px 20px 56px}
  .hero__cards{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__visual{max-width:480px;margin:0 auto}
  .about__content .section__title,.about__content .section__divider{text-align:center}
  .about__content p{text-align:center}
  .about__list li{justify-content:flex-start}
  .about__actions{justify-content:center}
  .contact__grid{grid-template-columns:1fr}
  .stats-bar__inner{grid-template-columns:repeat(2,1fr)}
  .process__steps{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media(max-width:768px){
  .section{padding:64px 20px}
  .topbar__left{display:none}
  .services__grid{grid-template-columns:1fr 1fr}
  .features__grid{grid-template-columns:1fr 1fr}
  .testimonials__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .footer__bottom{flex-direction:column;text-align:center;gap:6px}
  .portfolio__item{flex-direction:column;gap:28px}
  .portfolio__item--reverse .portfolio__item-img{order:0}
  .portfolio__item--reverse .portfolio__item-content{order:0}
  .portfolio__item-img img{height:280px}
  .portfolio__item-title{font-size:1.3rem}
}
@media(max-width:640px){
  .navbar__links{display:none;flex-direction:column;position:fixed;top:70px;left:0;right:0;bottom:0;background:var(--white);padding:32px 24px;gap:24px;box-shadow:0 12px 40px rgba(0,0,0,.12);overflow-y:auto;align-items:flex-start;z-index:800;transform:translateX(100%);transition:transform .35s ease}
  .navbar__links.open{display:flex;transform:translateX(0)}
  .navbar__link{font-size:1rem;width:100%;padding:8px 0;border-bottom:1px solid var(--border)}
  .navbar__link--cta{width:100%;text-align:center;border:none!important;background:var(--accent)!important;color:var(--white)!important;border-radius:var(--radius-sm)!important;padding:14px!important;margin-top:8px}
  .navbar__hamburger{display:flex}
  .hero{padding:56px 20px 48px}
  .hero__cards{grid-template-columns:1fr;gap:14px}
  .hero__title{font-size:1.9rem}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{text-align:center;justify-content:center}
  .btn--outline-light{margin-left:0}
  .hero__scroll-hint{display:none}
  .stats-bar__inner{grid-template-columns:1fr 1fr;gap:12px}
  .stat-item__num{font-size:2.2rem}
  .services__grid{grid-template-columns:1fr}
  .features__grid{grid-template-columns:1fr}
  .portfolio__list{gap:40px}
  .portfolio__item-img img{height:240px}
  .portfolio__filters{flex-direction:row;flex-wrap:wrap}
  .process__steps{grid-template-columns:1fr;gap:32px}
  .process__steps::before{display:none}
  .testimonials__grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:32px;padding:48px 20px 32px}
  .footer__bottom{padding:18px 20px}
  .about__floating-card{display:none}
  .about__badge{width:96px;height:96px;bottom:-14px;right:-10px}
  .about__badge-num{font-size:1.6rem}
  .scroll-top{bottom:20px;right:16px;width:40px;height:40px}
}
@media(max-width:400px){
  .hero__title{font-size:1.6rem}
  .section__title{font-size:1.5rem}
  .btn{padding:12px 22px;font-size:.82rem}
  .stat-item__num{font-size:1.9rem}
}
@media print{
  .topbar,.navbar,.hero__scroll-hint,.scroll-top,#progressBar,#loadingOverlay{display:none!important}
  .hero{padding:24px}
  *{box-shadow:none!important;animation:none!important}
}