/* =====================================================================
   لایه‌ی ریسپانسیو — بعد از site.css و site-extra.css بارگذاری می‌شه.
   برک‌پوینت‌ها:  360 · 480 · 560 · 640 · 700 · 820 (منو) · 1024 · 1280 · 1600 · 2200
   ===================================================================== */

/* ---------- ۱) پایه‌ی ایمن: هیچ‌وقت اسکرول افقی نداشته باش ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{max-width:100%;overflow-x:clip;}
img,svg,video,canvas{max-width:100%;height:auto;}
.item-media img{height:100%;} /* تصاویر کارت‌ها کل کادر رو پر می‌کنن */

/* آیتم‌های گرید نباید با محتوای داخلی (کاروسل‌های فلکس) عرض گرید رو منفجر کنن */
.about-grid>*,.service-grid>*,.pricing-card>*,.contact-links>*,.team-grid>*,.steps>*,.terms-list>*,.term>*{min-width:0;}
.service-text,.service-carousel,.carousel{min-width:0;max-width:100%;}
.carousel-track{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.cap,.who,.bio,.t-body,.q,.contact-card .value,.service-text p,.fact span{overflow-wrap:anywhere;}

/* ---------- ۲) هدر و منوی موبایل ---------- */
header nav{gap:14px;padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right));}
.nav-toggle{display:none;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:rgba(25,24,48,.07);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;}

@media (max-width:820px){
  header nav{justify-content:flex-end;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
  .brand{margin-right:auto;}
  .nav-toggle{display:flex;}
  .mobile-nav{position:absolute;top:100%;left:0;right:0;background:rgba(243,240,233,.98);border-bottom:1px solid rgba(25,24,48,.1);box-shadow:0 22px 34px rgba(16,15,28,.14);padding:4px max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left));max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;}
  .mobile-nav.open{display:block;}
  .mobile-nav a{display:flex;align-items:center;min-height:52px;font-size:17px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(25,24,48,.08);}
  .mobile-nav a:last-child{border-bottom:0;}
}
@media (max-width:380px){.nav-cta{display:none;}}
@media (min-width:821px){.mobile-nav{display:none !important;}}

/* ---------- ۳) فاصله‌ها و تایپوگرافی سیال ---------- */
section{padding:clamp(56px,9vw,92px) 0;}
.services-head{padding-bottom:0;}
.hero{padding:clamp(60px,11vw,110px) 0 clamp(70px,12vw,130px);}
.step{padding:clamp(18px,3vw,22px);}

@media (max-width:640px){
  .hero p.lede{font-size:17px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .btn-solid,.btn-outline{text-align:center;padding:15px 22px;}
  .glow-3{display:none;}
  .glow{filter:blur(48px);}
}
@media (max-width:480px){
  body{font-size:16px;}
  .hero h1{font-size:clamp(31px,9.4vw,42px);}
  section h2{font-size:clamp(25px,7.4vw,31px);}
  .eyebrow-label{font-size:13.5px;}
  .hero-brandmark{margin-bottom:20px;}
}

/* ---------- ۴) بخش‌ها ---------- */
/* سرویس‌ها: تبلت افقی هنوز دو ستونه‌ست؛ فاصله‌ی ستون‌ها کمتر */
@media (max-width:1024px){.service-grid{gap:34px;}}

/* کاروسل نمونه‌کار: عرض آیتم‌ها بر اساس صفحه */
@media (max-width:560px){.carousel-item{flex-basis:84%;}}
@media (min-width:561px) and (max-width:799px){.carousel-item{flex-basis:58%;}}

/* تیم: ۱ ستون موبایل، ۲ ستون تبلت، ۳ ستون لپ‌تاپ */
@media (min-width:561px) and (max-width:1023px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.team-grid{grid-template-columns:minmax(0,1fr);}}

/* فیدبک‌ها: ۱ کارت موبایل، ۲ کارت تبلت، ۳ کارت دسکتاپ (به‌جای یک کارت خیلی پهن) */
.quote-carousel .carousel-item{flex-basis:88%;}
@media (min-width:640px){.quote-carousel .carousel-item{flex-basis:calc((100% - 16px) / 2);}}
@media (min-width:1024px){.quote-carousel .carousel-item{flex-basis:calc((100% - 32px) / 3);}}

/* قیمت‌گذاری */
@media (max-width:700px){
  .pricing-card{padding:28px 22px;gap:20px;}
  .pricing-rate{font-size:clamp(40px,12vw,54px);}
}

/* فوتر */
footer{padding-bottom:calc(26px + env(safe-area-inset-bottom));}
@media (max-width:560px){footer .wrap{flex-direction:column;gap:6px;}}

/* ---------- ۵) پاپ‌آپ فرم تماس ---------- */
.popup-overlay{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
.popup-card{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;}
.popup-close{width:40px;height:40px;top:10px;right:10px;}
@media (max-width:480px){
  .popup-card{padding:26px 20px 22px;border-radius:18px;}
  .popup-actions{flex-direction:column;}
  .popup-field input,.popup-field select,.popup-field textarea{font-size:16px;} /* iOS موقع فوکوس زوم نکنه */
}
@media (max-height:520px) and (orientation:landscape){
  .popup-overlay{align-items:flex-start;}
  .hero{padding:44px 0 52px;}
  section{padding:44px 0;}
}

/* ---------- ۶) لمسی (موبایل/تبلت) ---------- */
@media (hover:none){
  .team-card:hover{transform:none;box-shadow:none;border:1px dashed rgba(25,24,48,.3);}
  .team-card:hover .team-avatar.placeholder{opacity:.25;}
}
@media (pointer:coarse){
  .carousel-btn{width:46px;height:46px;}
  .cta-btn{min-height:44px;padding:11px 18px;}
  .contact-card{padding:22px;}
}
@media (pointer:coarse) and (min-width:381px){
  .nav-cta{min-height:44px;display:inline-flex;align-items:center;}
}

/* ---------- ۷) صفحه‌های بزرگ ---------- */
@media (min-width:1280px){:root{--max:1200px;}}
@media (min-width:1600px){
  :root{--max:1320px;}
  body{font-size:18px;}
  .hero h1{font-size:clamp(66px,4.2vw,82px);max-width:900px;}
  .hero p.lede{font-size:20px;max-width:600px;}
  section{padding:108px 0;}
  section h2{font-size:clamp(41px,2.6vw,50px);max-width:700px;}
}
@media (min-width:2200px){
  :root{--max:1560px;}
  body{font-size:20px;}
}