/* Responsive — desktop-first breakpoints: 1199, 991, 767, 575, 400 */
@media (max-width:1199px){
  .main-nav > li > a,.main-nav > li > button{padding:10px 10px;font-size:.9rem}
  .nav-cta .btn-dg{padding:12px 20px;font-size:.88rem}
}
@media (max-width:1099px){
  .main-nav,.nav-cta .btn-dg{display:none}
  .burger{display:block}
}
@media (max-width:991px){
  :root{--header-h:72px}
  .brand img{height:40px}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 36px)}
  .hero-visual{height:520px;margin-top:48px}
  .process{grid-template-columns:repeat(2,1fr)}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .cols-2,.svc-block,.svc-block:nth-child(even){grid-template-columns:1fr}
  .svc-block:nth-child(even) .svc-viz{order:0}
  .modal-grid{grid-template-columns:1fr}
  .deliv{grid-template-columns:repeat(2,1fr)}
  .intro-visual{min-height:420px;margin-bottom:20px}
  .b-row{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:12px}
  .builder{overflow-x:auto}
  .b-line{display:none}
}
@media (max-width:767px){
  .proj,.proj.wide{grid-column:span 12}
  .proj{padding:18px;border-radius:22px}
  .proj-stage,.proj.wide .proj-stage{height:290px}
  .proj-stage .browser{width:80%}
  .hero-visual{height:440px}
  .f4,.f3{display:none}
  .f1{width:88%}.f2{width:34%}
  .process,.stack-grid,.deliv,.sub-list{grid-template-columns:1fr}
  .hero-ctas .btn-dg{flex:1 1 100%}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 8px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter-btn{white-space:nowrap}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .modal-stage{padding:24px 16px 0;min-height:260px}.modal-stage .browser{width:80%}.modal-stage .phone{min-width:84px}
  .intro-visual{min-height:340px}
  .intro-visual .code-chip{display:none}
  .cta-box{border-radius:26px}
  .fab-wa{right:16px;bottom:16px;width:56px;height:56px}
  .to-top{right:20px;bottom:84px}
  .article-hero-img{aspect-ratio:16/9}
}
@media (max-width:575px){
  .section{padding:64px 0}
  .container{padding-left:18px;padding-right:18px}
  .brand img{height:36px}.brand{padding:4px 10px;border-radius:12px}
  .mobile-menu > ul > li > a,.mobile-menu .m-toggle{font-size:1.45rem}
  .hero-visual{height:380px}
  .f5,.f6{display:none}
  .svc-card,.feat,.step{padding:24px 22px}
  .proj-meta h3{font-size:1.25rem}
  .proj-arrow{width:42px;height:42px}
  .faq-q{padding:18px 18px;font-size:1rem}.faq-a p{padding:0 18px 20px}
  .chat{height:300px}
  .kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:10px}
}
@media (max-width:360px){
  .h-xl{font-size:2.3rem}
  .brand img{height:32px}
  .btn-dg{padding:14px 20px;font-size:.92rem}
  .notif{font-size:.72rem;padding:8px 10px}
}