/* Responsive layout rules for tablets and phones (general layout). Menu/detail-specific rules sit next to their own styles. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --bg:#0a0916; --bg2:#0e0c1e; --card:#16142b; --line:#2a2747; --heading:#ffffff; --text:#a8b2d1; --shadow:0 18px 50px rgba(0,0,0,.5); --glass:rgba(22,20,43,.7);}
}
@media (max-width:1100px){
  .cards4,.steps,.counters .row{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
}
@media (max-width:900px){
  .split,.contact{grid-template-columns:1fr;gap:40px}
  .cards3{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  
  .cards4,.cards3,.cards2,.steps{grid-template-columns:1fr}
  .counters .row{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:1fr}
  form.fm{grid-template-columns:1fr;padding:26px}
  .cta{padding:50px 24px}
  footer .cols{grid-template-columns:1fr}
  .hero.big{min-height:100svh}
  .hero .inner{padding:90px 0 130px}
  .modal .box{padding:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:1100px){
  .detail{grid-template-columns:1fr}
  .side{position:static}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .feat-grid,.benefits,.why-grid,.results,.pn{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .vstep{grid-template-columns:48px 1fr;padding:18px}
  .vstep b{width:48px;height:48px;font-size:1.1rem}
  .pn a:last-child{text-align:left}
  .cat-head{gap:14px}
  .float-contact a{width:48px;height:48px}
}
@media (max-width:900px){
  .hero{margin-top:-80px;padding-top:80px}
  .hero.small{padding:140px 0 60px}
  .hero.small .inner{padding:0}
}
@media (max-width:640px){
  .badge-pill{font-size:.76rem;padding:8px 14px}
  .hero.big .inner{padding:96px 0 150px}
  .hero h1{font-size:clamp(2.3rem,10.5vw,3rem)}
  .hero.small{padding:128px 0 52px}
  .hero.small h1{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  .btns{margin-top:28px}
  .btns .btn{padding:14px 26px}
  .float-contact{right:14px}
  .float-contact a{width:46px;height:46px}
  .totop{right:14px;width:46px;height:46px}
  .head h2,.h2{font-size:clamp(1.8rem,8vw,2.4rem)}
  .card{padding:26px}
  .catcard{padding:28px 24px}
  .cta{border-radius:26px}
}
@media (max-width:360px){
  .container{width:min(1240px,100% - 28px)}
  .btns .btn{width:100%}
}
@media (max-width:1100px){
  .side .svc-list{display:none}
}