/* ---------- ۰. فونت Estedad (میزبانی محلی) ----------
   Google Fonts در ایران معمولاً در دسترس نیست. فونت متغیر است
   (۲۰۰–۶۰۰) پس یک فایل همهٔ وزن‌های سایت را پوشش می‌دهد. فقط
   زیرمجموعهٔ فارسی و لاتین برداشته شده، نه ویتنامی و latin-ext. */
/* arabic */
@font-face{
  font-family:"Estedad";
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url(assets/fonts/estedad-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face{
  font-family:"Estedad";
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url(assets/fonts/estedad-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   پاتیراصنعت — بازطراحی (ps2)
   زبان بصری برگرفته از قالب Leroux (Qode):
   پس‌زمینهٔ اُف‌وایتِ گرم، مرکّبِ زغالی-آبی، لهجهٔ مریمی/اسلیت،
   تیترهای درشتِ کم‌وزن، دکمه‌های قرصیِ خط‌نازک، گریدهای نامتقارن (بنتو)
   و فضای سفید سخاوتمند.
   ========================================================================== */

/* ---------- ۱. توکن‌ها ---------- */
:root{
  /* این طراحی عمداً تک‌تم (روشن) است — مثل مرجع بصری آن. */
  color-scheme:light;
  --bg:#FBF9F9;
  --bg-2:#F3F1F0;
  --panel:#EFEFEF;
  --ink:#20282D;
  --ink-2:#223035;
  --ink-3:#3A484E;
  /* AA برای متن کوچک ۴٫۵ می‌خواهد؛ مقادیر قبلی (#85979B و #929EA5)
     روی زمینهٔ روشن ۲٫۹ و ۲٫۶ می‌دادند. هم‌خانوادهٔ خودشان ماندند،
     فقط تیره‌تر — به‌اندازه‌ای که روی تیره‌ترین سطح روشن سایت
     (--sage-3 #E7EDED) هم از ۴٫۵ رد شوند. تم تیره از قبل
     مشکلی نداشت (۵٫۵ و ۷٫۱) و دست‌نخورده ماند. */
  --muted:#5A6B70;
  --muted-2:#5C6D72;
  --sage:#D5DEDE;
  --sage-2:#BAC8C8;
  --sage-3:#E7EDED;
  --line:#E3E0DF;
  --line-strong:#CFCBC9;
  --white:#fff;

  /* سطوح عمداً تیره (پابرگ، نوار بالا، بخش‌های --dark). این‌ها با تم
     برنمی‌گردند؛ در تم تیره فقط کمی عمیق‌تر می‌شوند تا از --bg جدا بمانند. */
  --dk:#20282D;
  --dk-2:#223035;
  --dk-fg:#FBF9F9;
  --dk-soft:#BAC8C8;

  /* پردهٔ نیمه‌شفافِ پشت بلوک‌های محتوا. چون لایهٔ خطوط شبکه (.netlines)
     ثابت و زیر .shell است، این پرده آن را کم‌رنگ از پشت نشان می‌دهد. */
  --veil:rgba(255,255,255,.8);
  --veil-line:rgba(32,40,45,.07);
  /* درخواست اولیه ۱۰px بود؛ در این عرض متن به لبه می‌چسبد، پس مقیاس‌پذیر
     شد. برای همان ۱۰px دقیق، فقط همین مقدار را عوض کنید. */
  --veil-pad:clamp(16px,2vw,28px);

  /* شیشهٔ هدر چسبیده و رنگ hover دکمه‌های آیکونی */
  --glass:rgba(251,249,249,.9);
  --hover-tint:rgba(32,40,45,.06);

  --shell:1320px;
  --gap:24px;
  --radius:2px;
  --pill:40px;

  /* ابعادی که تا پیش از این در اجزا هاردکد بودند و حالا قابل تنظیم‌اند */
  --h-weight:300;
  --h-display-max:4.4rem;
  --body-lh:2;
  --sec-pad:128px;
  --mesh-on:1;

  /* Estedad متغیر است (۱۰۰–۹۰۰)، پس وزن‌های ۲۰۰/۳۰۰ تیترها را نگه می‌دارد.
     Vazirmatn به‌عنوان جایگزین اول می‌ماند چون روی خیلی از دستگاه‌های ایرانی نصب است. */
  --ff:"Estedad","Vazirmatn",system-ui,"Segoe UI",Tahoma,sans-serif;

  --t-fast:.28s cubic-bezier(.4,0,.2,1);
  --t:.55s cubic-bezier(.22,.61,.36,1);
  --t-slow:.95s cubic-bezier(.22,.61,.36,1);
}

/* تم تیره. توکن‌ها معنایی‌اند (--ink یعنی «متن»، --bg یعنی «زمینه»)، پس
   وارونه‌کردنشان کل صفحه را بدون بازنویسی هر جزء تیره می‌کند. سطوحی که
   ذاتاً تیره‌اند (--dk*) از این وارونگی مستثنا هستند. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1518;
  --bg-2:#151D21;
  --panel:#1A2328;
  --ink:#E9EFF1;
  --ink-2:#DCE6E9;
  --ink-3:#AEC0C6;
  --muted:#7C8F95;
  --muted-2:#93A4AA;
  --sage:#2B383D;
  --sage-2:#3B4B51;
  --sage-3:#1B2428;
  --line:#263035;
  --line-strong:#39474D;
  --white:#182126;
  --dk:#070C0F;
  --dk-2:#0C1418;
  --glass:rgba(15,21,24,.92);
  --hover-tint:rgba(233,239,241,.09);
  --veil:rgba(0,0,0,.8);
  --veil-line:rgba(233,239,241,.09);
}
/* تصویرها و ویدیوها در تم تیره کمی آرام‌تر می‌شوند تا کنار متنِ کم‌نور نزنند */
:root[data-theme="dark"] .card__img img,
:root[data-theme="dark"] .srv__img img{filter:brightness(.86) saturate(.94)}

/* ---------- ۲. پایه ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff);
  font-size:15px;
  font-weight:400;
  line-height:var(--body-lh);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em;line-height:1.22}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.skip-link{
  position:fixed;top:-100px;inset-inline-start:16px;z-index:999;
  background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:var(--pill);
  transition:top var(--t-fast);
}
.skip-link:focus{top:16px}

/* اعداد و عبارات لاتین داخل متن فارسی */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- ۲ب. خطوط متحرک پس‌زمینه ----------
   لایهٔ ثابتی که روی پس‌زمینهٔ بخش‌ها می‌نشیند ولی زیر محتوای .shell.
   دو دستهٔ هم‌مکان دارد: یکی مرکّبی که روی زمینهٔ روشن دیده می‌شود و
   یکی روشن که روی بخش‌های تیره. هر دسته روی زمینهٔ مخالف خودش عملاً
   نامرئی است، پس نیازی به mix-blend-mode نیست — که در بعضی موتورها
   کل لایه را از رندر می‌انداخت. */
.netlines{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:layout paint}
.netlines svg{width:100%;height:100%;display:block}
.netset__base,.netset__pulses{fill:none;stroke-linecap:round;stroke-linejoin:round}
.netset__base{stroke-width:1}
.netset__pulses{stroke-width:1.6}

.netset--ink .netset__base{stroke:var(--ink);opacity:.09}
.netset--ink .netset__nodes{fill:var(--ink);opacity:.14}
.netset--ink .netset__pulses{stroke:var(--ink)}
.netset--light .netset__base{stroke:#fff;opacity:.1}
.netset--light .netset__nodes{fill:#fff;opacity:.16}
.netset--light .netset__pulses{stroke:#fff}

.netset__pulses .p{
  stroke-dasharray:130 2600;
  stroke-dashoffset:2730;
  animation:netpulse linear infinite;
}
.netset--ink .netset__pulses .p{opacity:.3}
.netset--light .netset__pulses .p{opacity:.42}

.netset__pulses .p1{animation-duration:17s;animation-delay:0s}
.netset__pulses .p2{animation-duration:23s;animation-delay:-6s}
.netset__pulses .p3{animation-duration:19s;animation-delay:-11s}
.netset__pulses .p4{animation-duration:26s;animation-delay:-3s}
.netset__pulses .p5{animation-duration:21s;animation-delay:-14s}
.netset__pulses .p6{animation-duration:29s;animation-delay:-8s}

@keyframes netpulse{from{stroke-dashoffset:2730}to{stroke-dashoffset:0}}

/* بخش‌ها position ندارند، پس پس‌زمینه‌شان زیر لایهٔ ثابت نقاشی می‌شود؛
   محتوای .shell موقعیت‌دار می‌شود تا بالای خطوط بماند. */
.shell{position:relative;z-index:1}
.topbar{position:relative;z-index:2}

/* ---------- ۳. مقیاس تیترها ---------- */
.h-display{font-size:clamp(2.5rem,5.8vw,var(--h-display-max));line-height:1.18;font-weight:var(--h-weight);letter-spacing:-.025em}
.h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.24;font-weight:var(--h-weight);letter-spacing:-.02em}
.h2{font-size:clamp(1.65rem,2.9vw,2.4rem);line-height:1.32;font-weight:var(--h-weight);letter-spacing:-.018em}
.h3{font-size:clamp(1.18rem,1.7vw,1.55rem);line-height:1.45;font-weight:400}
.lead{font-size:clamp(1rem,1.2vw,1.08rem);line-height:2.05;color:var(--ink-3)}
.muted{color:var(--muted)}
.small{font-size:.84rem;line-height:1.9}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:500;letter-spacing:.16em;
  color:var(--muted);margin-bottom:20px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--sage-2);flex:none}
.eyebrow--light{color:var(--dk-soft)}
.eyebrow--light::before{background:rgba(255,255,255,.3)}

/* ---------- ۴. چیدمان ---------- */
.shell{width:min(100% - 48px,var(--shell));margin-inline:auto}
.section{padding-block:clamp(70px,8.5vw,var(--sec-pad))}
.section--tight{padding-block:clamp(50px,6vw,84px)}
.section--dark{background:var(--dk);color:var(--dk-fg)}

/* بخش پلتفرم‌ها افکت اختصاصی خودش را دارد. position:relative آن را
   موقعیت‌دار می‌کند، پس خطوط سراسری پشتش می‌مانند — عمدی است تا دو
   سیستم خط با هم رقابت نکنند. */
#solutions{position:relative;overflow:hidden}
/* گرادیان ملایم پشت تیتر بخش، تا بارش زیر متن آرام شود */
#solutions .sec-head{position:relative}
#solutions .sec-head::before{
  content:"";position:absolute;inset:-24px -32px;z-index:-1;
  background:radial-gradient(ellipse 70% 130% at 70% 50%, rgba(32,40,45,.86), transparent 78%);
}
.weave{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.section--dark .lead{color:rgba(255,255,255,.66)}
.section--soft{background:var(--bg-2)}

/* پرش بومی مرورگر به لنگرها زیر هدر چسبان نیفتد. در نسخهٔ چندصفحه‌ای
   (dist/) همین کافی است و جاوااسکریپت اصلاً دخالت نمی‌کند. */
section[id]{scroll-margin-top:78px}

.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(22px,4vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,64px);
}
.sec-head__aside{padding-bottom:8px}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* ---------- ۵. دکمه‌ها ---------- */
.btn{
  --btn-fg:var(--ink);--btn-bd:var(--ink-2);--btn-bg:transparent;--btn-fill:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 30px 10px;border-radius:var(--pill);
  border:.8px solid var(--btn-bd);color:var(--btn-fg);background:var(--btn-bg);
  font-size:.94rem;font-weight:500;line-height:1.9;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-fill);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-fast);
}
.btn:hover{color:var(--bg);border-color:var(--ink)}
.btn:hover::before{transform:scaleY(1)}
.btn__arrow{flex:none;transition:transform var(--t-fast)}
.btn:hover .btn__arrow{transform:translate(-4px,-4px)}

.btn--solid{--btn-fg:var(--bg);--btn-bd:var(--ink);--btn-bg:var(--ink);--btn-fill:var(--sage)}
.btn--solid:hover{color:var(--ink);border-color:var(--sage)}

.btn--light{--btn-fg:var(--dk-fg);--btn-bd:rgba(255,255,255,.42);--btn-fill:var(--dk-fg)}
.btn--light:hover{color:var(--dk);border-color:var(--dk-fg)}

.btn--sm{padding:6px 22px 7px;font-size:.86rem}

.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;position:relative;padding-bottom:3px}
.tlink::after{
  content:"";position:absolute;inset-inline-end:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:inline-end;transition:transform var(--t-fast);
}
.tlink:hover::after{transform:scaleX(1)}
.tlink:hover .btn__arrow{transform:translate(-4px,-4px)}

/* ---------- ۶. نوار بالا ---------- */
.topbar{background:var(--dk);color:rgba(255,255,255,.72);font-size:.78rem;line-height:1.9}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px}
.topbar__meta{display:flex;align-items:center;gap:26px}
.topbar__item{display:inline-flex;align-items:center;gap:8px}
.topbar__item svg{opacity:.55;flex:none}
.topbar a:hover{color:#fff}
@media (max-width:780px){
  .topbar__tag{display:none}
  .topbar__in{justify-content:center}
  .topbar__meta{gap:18px}
}
@media (max-width:460px){.topbar__hours{display:none}}

/* ---------- ۷. هدر ---------- */
.header{position:sticky;top:0;z-index:80;background:transparent;transition:background var(--t-fast),box-shadow var(--t-fast)}
.header.is-stuck{background:var(--glass);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}

.brand{display:inline-flex;align-items:center;gap:10px}
/* لوگوی واقعی: نسخهٔ آبی روی زمینهٔ روشن، نسخهٔ سفید روی زمینهٔ تیره.
   هر دو در هدر هستند و CSS تصمیم می‌گیرد کدام دیده شود. */
.brand__logo{width:auto;height:30px;flex:none;object-fit:contain}
.brand__logo--light{display:none}
/* روی هیرو و در پابرگ، نسخهٔ سفید */
body.over-cine .header .brand__logo--ink,
:root[data-theme="dark"] .header .brand__logo--ink,
.footer .brand__logo--ink{display:none}
body.over-cine .header .brand__logo--light,
:root[data-theme="dark"] .header .brand__logo--light,
.footer .brand__logo--light{display:block}
.brand__name{font-size:1.55rem;font-weight:var(--h-weight);letter-spacing:-.02em;line-height:1}
.brand__dot{color:var(--muted-2)}

.nav{display:flex;align-items:center;gap:32px}
.nav__link{position:relative;font-size:.95rem;padding-block:6px;color:var(--ink-3);transition:color var(--t-fast)}
.nav__link::after{
  content:"";position:absolute;inset-inline-end:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:inline-end;transition:transform var(--t-fast);
}
.nav__link:hover,.nav__link.is-active{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}

.header__side{display:flex;align-items:center;gap:14px}
/* ۴۴ پیکسل کمینهٔ هدف لمسی است؛ نشانه‌ها همان اندازهٔ بصری قبل را دارند. */
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink);transition:background var(--t-fast)}
.icon-btn:hover{background:var(--hover-tint)}
.burger{display:none}
.burger span{display:block;width:22px;height:1.2px;background:currentColor;transition:transform var(--t-fast),opacity var(--t-fast)}
.burger span+span{margin-top:6px}
.burger.is-open span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}
@media (max-width:1080px){.nav,.header__cta{display:none}.burger{display:block}}

.mobilenav{
  position:fixed;inset:0;z-index:90;background:var(--dk);color:var(--dk-fg);
  display:grid;place-items:center;clip-path:inset(0 0 100% 0);
  transition:clip-path var(--t);pointer-events:none;
}
.mobilenav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.mobilenav__list{display:grid;gap:4px;text-align:center}
.mobilenav__list a{
  font-size:clamp(1.55rem,7vw,2.3rem);font-weight:var(--h-weight);letter-spacing:-.02em;
  opacity:0;transform:translateY(18px);transition:opacity var(--t),transform var(--t);
}
.mobilenav.is-open .mobilenav__list a{opacity:1;transform:none}
.mobilenav.is-open .mobilenav__list a:nth-child(1){transition-delay:.10s}
.mobilenav.is-open .mobilenav__list a:nth-child(2){transition-delay:.16s}
.mobilenav.is-open .mobilenav__list a:nth-child(3){transition-delay:.22s}
.mobilenav.is-open .mobilenav__list a:nth-child(4){transition-delay:.28s}
.mobilenav.is-open .mobilenav__list a:nth-child(5){transition-delay:.34s}
.mobilenav.is-open .mobilenav__list a:nth-child(6){transition-delay:.40s}
.mobilenav__foot{position:absolute;bottom:34px;inset-inline:0;text-align:center;color:rgba(255,255,255,.5);font-size:.84rem}

/* ---------- ۷ب. هیرو سینمایی ----------
   نقطهٔ گریز تصویر تقریباً در (۴۹٪، ۵۳٪) است — همان دری که ته راهرو دیده
   می‌شود. هر zone یک حلقهٔ شعاعی حول همان نقطه است، پس zone یک دورترین
   و zone شش نزدیک‌ترین قسمت راهروست. لبه‌ها نرم و هم‌پوشان‌اند تا مرز
   بین حلقه‌ها دیده نشود. */
.cine{
  --vp-x:49%;
  --vp-y:53%;
  position:relative;
  /* --chrome-h را جاوااسکریپت از ارتفاع واقعی نوار بالا + هدر پر می‌کند،
     تا تصویر از بالاترین نقطهٔ صفحه شروع شود و کل نمای اول را بگیرد. */
  height:100svh;
  margin-top:calc(-1 * var(--chrome-h, 0px));
  min-height:520px;
  overflow:hidden;
  background:var(--cine-void,#050A0F);
  isolation:isolate;
  /* --cine-tint روی هر دو لایهٔ تصویر (پایه و zoneها) اعمال می‌شود.
     مقدار خنثی باید تابعِ بی‌اثر باشد نه none — چون `filter:none blur(…)`
     ترکیب نامعتبری است و کل اعلان کنار گذاشته می‌شود. */
  --cine-tint:hue-rotate(0deg) saturate(1);
  --cine-glow-1:rgba(120,200,255,.34);
  --cine-glow-2:rgba(60,140,220,.12);
}
:root[data-theme="dark"] .cine{
  --cine-void:#0C0305;
  --cine-tint:hue-rotate(152deg) saturate(2.4);
  --cine-glow-1:rgba(255,86,86,.38);
  --cine-glow-2:rgba(190,30,40,.14);
}
.cine__stage{position:absolute;inset:0;z-index:0}

.cine__base,
.cine__zone{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
/* لایهٔ پایه: مرکز داده در تاریکی، ولی هنوز قابل تشخیص */
.cine__base{
  /* GSAP فقط این سه عدد را تکان می‌دهد، نه کل رشتهٔ filter را — وگرنه
     استایل درون‌خطی‌اش var(--cine-tint) را کامل بازنویسی می‌کرد و رنگ
     قرمز تم تیره روی لایهٔ پایه اثر نمی‌کرد. */
  /* این سه باید واقعاً اعلام شوند (نه فقط fallback داخل var)، وگرنه GSAP
     مقدار شروع را خالی می‌خواند و روی صفر می‌نشاند — یعنی تصویر سیاه. */
  --cine-b:.5;
  --cine-s:.62;
  --cine-c:1.05;
  filter:var(--cine-tint)
         brightness(var(--cine-b))
         saturate(var(--cine-s))
         contrast(var(--cine-c));
}
.cine__zones{position:absolute;inset:0}
.cine__zone{
  background-image:url(assets/hero-corridor-opt.jpg);
  background-size:cover;
  background-position:center;
  filter:var(--cine-tint) brightness(1.06) saturate(1.16);
  opacity:0;
  will-change:opacity;
}
/* حلقه‌های عمقی: از نقطهٔ گریز به بیرون */
.cine__zone[data-zone="1"]{-webkit-mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),#000 0%,#000 5%,transparent 12%);mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),#000 0%,#000 5%,transparent 12%)}
.cine__zone[data-zone="2"]{-webkit-mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 4%,#000 11%,#000 18%,transparent 26%);mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 4%,#000 11%,#000 18%,transparent 26%)}
.cine__zone[data-zone="3"]{-webkit-mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 16%,#000 25%,#000 34%,transparent 45%);mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 16%,#000 25%,#000 34%,transparent 45%)}
.cine__zone[data-zone="4"]{-webkit-mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 32%,#000 43%,#000 55%,transparent 68%);mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 32%,#000 43%,#000 55%,transparent 68%)}
.cine__zone[data-zone="5"]{-webkit-mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 52%,#000 65%,#000 79%,transparent 94%);mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 52%,#000 65%,#000 79%,transparent 94%)}
.cine__zone[data-zone="6"]{-webkit-mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 76%,#000 92%,#000 140%);mask-image:radial-gradient(ellipse 100% 100% at var(--vp-x) var(--vp-y),transparent 76%,#000 92%,#000 140%)}

/* درخشش ملایم آبی-فیروزه‌ای که با روشن‌شدن zoneها پخش می‌شود */
.cine__glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse 42% 34% at var(--vp-x) var(--vp-y), var(--cine-glow-1), var(--cine-glow-2) 46%, transparent 72%);
  will-change:opacity;
}
/* خوانایی متن + عمق سینمایی */
.cine__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%, rgba(5,10,15,.72) 0%, rgba(5,10,15,.42) 46%, transparent 78%),
    linear-gradient(to top, rgba(5,10,15,.62) 0%, transparent 42%),
    linear-gradient(to bottom, rgba(5,10,15,.55) 0%, transparent 26%);
}
.cine__content{
  position:relative;z-index:3;
  height:100%;
  display:flex;align-items:center;
  color:#F2F7FA;
}
.cine__content .shell{text-align:center}
.cine__content .h-display{color:#fff;margin-bottom:20px;text-wrap:balance}
.cine__content .lead{
  color:rgba(233,243,248,.82);
  max-width:46ch;margin-inline:auto;margin-bottom:30px;
}
.cine__content .hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cine__content .btn{--btn-fg:#F2F7FA;--btn-bd:rgba(255,255,255,.5);--btn-fill:#F2F7FA}
.cine__content .btn:hover{color:#0B1218;border-color:#fff}
.cine__content .btn--solid{--btn-fg:#0B1218;--btn-bd:#EAF3F7;--btn-bg:#EAF3F7;--btn-fill:#9FD4EE}
.cine__content .btn--solid:hover{color:#0B1218;border-color:#9FD4EE}

/* هدر روی هیرو: بدون پس‌زمینه و با متن روشن */
body.over-cine .header:not(.is-stuck),
body.over-cine .header.is-stuck{background:transparent;box-shadow:none}
body.over-cine .header .nav__link,
body.over-cine .header .icon-btn,
body.over-cine .header .brand__name{color:#EAF3F7}
body.over-cine .header .brand__dot{color:rgba(234,243,247,.6)}
body.over-cine .header .btn{--btn-fg:#EAF3F7;--btn-bd:rgba(255,255,255,.45);--btn-fill:#EAF3F7}
body.over-cine .header .btn:hover{color:#0B1218}
body.over-cine .topbar{background:transparent}

/* انیمیشن ورود نمایه transform می‌گذارد و transform روی نیای یک المان
   pin‌شده، containing block می‌سازد و pin را می‌شکند. در صفحه‌ای که هیرو
   سینمایی دارد خاموشش می‌کنیم. */
body.has-cine .view.is-active{animation:none}

/* اشارهٔ اسکرول */
.cine__hint{
  position:absolute;z-index:3;inset-inline:0;bottom:26px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(234,243,247,.62);font-size:.74rem;letter-spacing:.14em;
  transition:opacity var(--t-fast);
}
.cine__hint span{display:block;width:1px;height:34px;background:linear-gradient(to bottom,rgba(234,243,247,.7),transparent)}

@media (max-width:720px){
  .cine__content .lead{max-width:100%}
  .cine__hint{display:none}
  /* قاب عمودی با cover فقط ۲۶٪ میانی تصویر را نشان می‌دهد — دقیقاً
     تاریک‌ترین قسمت راهرو. به‌جایش صحنه را به نوار هم‌نسبت تصویر تبدیل
     می‌کنیم و وسط قاب می‌نشانیم، تا کل عمق راهرو دیده شود و ماسک‌های
     شعاعی هم دقیقاً روی همان تصویر منطبق بمانند. */
  .cine__stage{
    top:50%;bottom:auto;
    height:auto;aspect-ratio:1673/940;
    transform:translateY(-52%);
  }
  /* نوار تصویر وسط قاب است و متن زیر آن؛ پس فقط پایین کادر تیره می‌شود
     و خود نوار دست‌نخورده می‌ماند. */
  .cine__scrim{
    background:
      linear-gradient(to top, rgba(5,10,15,.94) 0%, rgba(5,10,15,.6) 20%, transparent 38%),
      linear-gradient(to bottom, rgba(5,10,15,.6) 0%, transparent 20%);
  }
  .cine__stage{transform:translateY(-62%)}
  .cine__content{align-items:flex-end;padding-bottom:7vh}
}

/* بدون انیمیشن: همه‌چیز روشن و ساکن */
@media (prefers-reduced-motion:reduce){
  .cine__base{--cine-b:.72;--cine-s:.9;--cine-c:1}
  .cine__zone{opacity:1}
  .cine__glow{opacity:.5}
}

/* ---------- ۷ج. جفت‌کارت زیر هیرو ----------
   دو کارت هم‌ارتفاع در گرید دوستونی واقعی. جایگزین گرید سه‌ستونی قبلی
   که با دو فرزند، ستون سوم را خالی می‌گذاشت و چیدمان را به‌هم می‌ریخت. */
.duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap);
  align-items:stretch;
}
.duo__card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  min-height:clamp(340px,38vw,440px);
  display:flex;
}
.duo__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  width:100%;padding:clamp(24px,3vw,36px);
}

/* کارت تیره با عکس */
.duo__card--ink{background:var(--dk-2);color:var(--dk-fg)}
.duo__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.7) contrast(1.05) brightness(.9);
}
.duo__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(200deg,rgba(32,40,45,.5),rgba(32,40,45,.92));
}
.duo__stat{
  margin:0 0 auto;
  font-size:clamp(3rem,5.4vw,4.6rem);font-weight:200;line-height:1;
  letter-spacing:-.04em;color:rgba(255,255,255,.58);
}
.duo__foot{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.duo__card--ink .duo__title{max-width:22ch}

/* کارت روشن */
.duo__card--sage{background:var(--sage-3)}
.duo__card--sage .duo__body{justify-content:flex-start}
.duo__title{
  margin:0;font-size:clamp(1.18rem,1.7vw,1.42rem);
  font-weight:400;line-height:1.55;
}
.duo__card--sage .duo__title{margin-bottom:22px;max-width:24ch}

.duo__list{margin:0 0 auto;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.duo__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line-strong);
}
.duo__list-k{font-size:.95rem;font-weight:500;color:var(--ink)}
.duo__list-v{font-size:.88rem;color:var(--ink-3);text-align:end}
.duo__cta{align-self:flex-start;margin-top:24px}

@media (max-width:860px){
  .duo{grid-template-columns:1fr}
  .duo__card{min-height:300px}
}

/* ---------- ۸. قهرمان (بنتو) ---------- */
.hero{padding-block:clamp(26px,3.5vw,48px) clamp(54px,7vw,92px)}
.hero__grid{display:grid;gap:var(--gap);grid-template-columns:1fr 1.28fr 1.06fr;align-items:stretch}
.hero__intro{display:flex;flex-direction:column;justify-content:center;padding-block:16px}
.hero__intro .h-display{margin-bottom:20px}
.hero__intro .lead{max-width:32ch;margin-bottom:30px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

.card{position:relative;overflow:hidden;border-radius:var(--radius);min-height:430px;display:flex}
.card__body{position:relative;z-index:2;padding:34px;display:flex;flex-direction:column;width:100%}
.card--dark{background:var(--dk-2);color:var(--dk-fg)}
.card--sage{background:var(--sage-3)}
.card__stat{
  font-size:clamp(3.4rem,5.6vw,5rem);font-weight:200;line-height:1;letter-spacing:-.04em;
  color:rgba(255,255,255,.52);margin-bottom:auto;
}
.card__title{font-size:1.38rem;font-weight:400;line-height:1.55;margin-bottom:22px;max-width:20ch}
.card__art{position:absolute;inset:0;z-index:1}
.card__art--btm{position:relative;inset:auto;margin:24px -34px -34px;z-index:1}
.scrim{position:absolute;inset:0;background:linear-gradient(200deg,rgba(32,40,45,.55),rgba(32,40,45,.93))}

/* عکس‌های واقعی: کم‌اشباع می‌شوند تا با پالت مرکّبی/مریمی سایت یکی شوند —
   همان رفتاری که مرجع بصری با تصاویرش دارد. رنگ زمینه باعث می‌شود اگر
   تصویر بارگذاری نشد (مثلاً در نسخهٔ Artifact) پنل تیره و تمیز بماند. */
.photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:var(--ink-2);
  filter:grayscale(.75) contrast(1.05) brightness(.95);
}
.mesh{position:absolute;inset:0;opacity:calc(.5 * var(--mesh-on))}

@media (max-width:1180px){
  .hero__grid{grid-template-columns:1fr 1fr}
  .hero__intro{grid-column:1/-1}
  .card{min-height:340px}
}
@media (max-width:720px){
  .hero__grid{grid-template-columns:1fr}
  .card{min-height:300px}
  .card__body{padding:26px}
  .card__art--btm{margin:20px -26px -26px}
}

/* ---------- ۹. آمار ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--bg);padding:34px 28px}
.section--dark .stats{background:rgba(255,255,255,.13)}
.section--dark .stat{background:var(--dk)}
.stat__n{font-size:clamp(2rem,3.2vw,2.8rem);font-weight:200;line-height:1.15;letter-spacing:-.03em;margin-bottom:4px}
.stat__l{font-size:.86rem;color:var(--muted)}
.section--dark .stat__l{color:var(--dk-soft)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- ۱۰. ویژگی‌ها ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.feat{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 32px 34px;position:relative;overflow:hidden;
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.feat::after{
  content:"";position:absolute;inset-inline-start:0;top:0;width:100%;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:inline-end;transition:transform var(--t-fast);
}
.feat:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 22px 44px -30px rgba(32,40,45,.45)}
.feat:hover::after{transform:scaleX(1)}
.feat__i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--sage-3);color:var(--ink);margin-bottom:24px}
.feat__n{position:absolute;top:26px;inset-inline-end:30px;font-size:2.3rem;font-weight:200;color:var(--sage-2);line-height:1}
.feat h3{margin-bottom:12px}
.feats--2{grid-template-columns:repeat(2,1fr)}
/* کارت ویژگی وقتی خودش لینک است */
a.feat{color:inherit;display:flex;flex-direction:column;align-items:flex-start}
a.feat .tlink{margin-top:auto}
@media (max-width:900px){.feats,.feats--2{grid-template-columns:1fr}}

/* ---------- ۱۱. بخش دوقسمتی ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;min-height:450px;background:var(--ink-2)}
.split__body .h2{margin-bottom:20px}
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .split__media{min-height:300px;order:0}
}

.checks{display:grid;margin-top:28px}
.checks li{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-top:1px solid var(--line);font-size:.98rem;line-height:1.85}
.checks li:last-child{border-bottom:1px solid var(--line)}
.checks svg{flex:none;margin-top:9px;color:var(--muted-2)}
.section--dark .checks li{border-color:rgba(255,255,255,.14)}

/* ---------- ۱۲. راهکارها ---------- */
.solutions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.sol{
  /* زمینهٔ تقریباً مات تا بارش پس‌زمینه از پشت متن رد نشود */
  background:#282832eb;
  backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  padding:34px 30px 30px;display:flex;flex-direction:column;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.sol:hover{background:#31313deb;border-color:rgba(255,255,255,.32);transform:translateY(-5px)}
/* متن‌های لاتین داخل بستر راست‌به‌چپ: جهت چینش حروف چپ‌به‌راست می‌ماند
   تا درست خوانده شوند، ولی بلوک به همان لبهٔ راستی می‌چسبد که متن فارسی
   کنارش می‌چسبد — وگرنه عنوان و توضیحش به دو لبهٔ مخالف می‌افتند. */
.sol__kicker{font-size:.72rem;letter-spacing:.18em;color:var(--dk-soft);margin-bottom:14px;direction:ltr;text-align:right}
.sol__t{font-size:1.22rem;font-weight:400;margin-bottom:8px}
.sol__sub{font-size:.9rem;color:rgba(255,255,255,.55);margin-bottom:22px}
.sol__list{margin-top:auto}
.sol__list li{
  padding:11px 0;border-top:1px solid rgba(255,255,255,.12);
  font-size:.9rem;color:rgba(255,255,255,.78);direction:ltr;
  /* row-reverse نقطه را به لبهٔ راست می‌برد (قاعدهٔ فهرست فارسی)
     در حالی که جهت ltr ترتیب حروف لاتین را سالم نگه می‌دارد. */
  display:flex;flex-direction:row-reverse;align-items:center;gap:10px;
}
.sol__list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--dk-soft);flex:none}
@media (max-width:960px){.solutions{grid-template-columns:1fr}}

/* ---------- ۱۳. خدمات ---------- */
.services{border-top:1px solid var(--line)}
.srv{
  display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.2fr) auto;
  gap:clamp(16px,3vw,48px);align-items:center;
  padding:34px 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding var(--t-fast);
}
.srv::before{content:"";position:absolute;inset:0 -24px;background:var(--white);opacity:0;transition:opacity var(--t-fast);border-radius:var(--radius)}
.srv:hover::before{opacity:1}
.srv:hover{padding-inline:24px}
.srv>*{position:relative;z-index:1}
.srv__n{font-size:1.02rem;font-weight:300;color:var(--muted-2)}
.srv__t{font-size:clamp(1.12rem,1.9vw,1.45rem);font-weight:400;line-height:1.45}
.srv__d{color:var(--ink-3);font-size:.95rem;line-height:1.95}
.srv__go{width:46px;height:46px;border-radius:50%;border:.8px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.srv__go svg{transition:transform var(--t-fast)}
.srv:hover .srv__go{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.srv:hover .srv__go svg{transform:translate(-3px,-3px)}
@media (max-width:900px){
  .srv{grid-template-columns:auto minmax(0,1fr) auto;row-gap:10px}
  .srv__d{grid-column:1/-1}
  .srv:hover{padding-inline:0}
}

/* ---------- ۱۳ب. پرسش‌های متداول ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(16px,3vw,48px)}
.faq__q{margin:0;font-size:clamp(1.02rem,1.5vw,1.18rem);font-weight:500;line-height:1.7}
.faq__a{margin:0;color:var(--ink-3);font-size:.96rem;line-height:2}
@media (max-width:820px){.faq__item{grid-template-columns:1fr;gap:8px}}

/* ---------- ۱۳ج. نشان الزام ---------- */
.reqs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.reqs__cell{background:var(--bg);padding:22px 20px}
.reqs__k{font-size:.72rem;letter-spacing:.14em;color:var(--muted);margin:0 0 6px}
.reqs__v{margin:0;font-size:.98rem;line-height:1.9}
@media (max-width:700px){.reqs{grid-template-columns:1fr}}

/* ---------- ۱۴. فرآیند ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.step{padding:36px 26px 34px;border-inline-start:1px solid var(--line);transition:background var(--t-fast)}
.step:first-child{border-inline-start:0}
.step:hover{background:var(--white)}
.step__n{font-size:2.5rem;font-weight:200;line-height:1;color:var(--sage-2);margin-bottom:18px;transition:color var(--t-fast)}
.step:hover .step__n{color:var(--ink)}
.step h3{font-size:1.1rem;font-weight:500;margin-bottom:10px}
.step p{font-size:.9rem;line-height:1.9;color:var(--ink-3)}
@media (max-width:1080px){
  .process{grid-template-columns:repeat(2,1fr)}
  .step{border-inline-start:0;border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
}
@media (max-width:600px){.process{grid-template-columns:1fr}}

/* ---------- ۱۵. تیم ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.member{position:relative;overflow:hidden;border-radius:var(--radius)}
.member__ph{
  aspect-ratio:1/1.04;display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--sage-3),var(--sage));
}
.member:nth-child(3n-1) .member__ph{background:linear-gradient(160deg,#EAE7E5,#D7D2CE)}
.member:nth-child(3n) .member__ph{background:linear-gradient(160deg,#E5EAEB,#C7D3D5)}
.member__init{font-size:clamp(2.2rem,3.8vw,3.2rem);font-weight:200;color:rgba(32,40,45,.4);letter-spacing:-.03em;z-index:2;transition:transform var(--t)}
.member:hover .member__init{transform:scale(1.07)}
.member__ph .mesh{opacity:calc(.32 * var(--mesh-on))}
.member__meta{padding:20px 4px 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.member__name{font-size:1.05rem;font-weight:500}
.member__role{font-size:.83rem;color:var(--muted);text-align:end}
@media (max-width:900px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team{grid-template-columns:1fr}}

/* ---------- ۱۵ب. دریافت نظرات، روی پس‌زمینهٔ ویدیو ---------- */
.vidsec{position:relative;overflow:hidden;color:var(--bg);isolation:isolate}
.vidsec__bg{position:absolute;inset:0;z-index:0}
.vidsec__v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity .32s linear;
  filter:grayscale(.55) contrast(1.06) brightness(.82);
}
.vidsec__v.is-on{opacity:1}
.vidsec__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to left, rgba(18,24,28,.9) 0%, rgba(18,24,28,.68) 48%, rgba(18,24,28,.5) 100%),
    linear-gradient(to top, rgba(18,24,28,.62) 0%, transparent 46%);
}
.vidsec .sec-head .h2,
.vidsec .fb__lead{color:#fff}
.vidsec .lead{color:rgba(236,244,247,.78)}

/* فرم روی زمینهٔ تیره */
.vidsec .field{border-bottom-color:rgba(255,255,255,.26)}
.vidsec .field input,.vidsec .field textarea{color:#F2F7FA}
.vidsec .field label{color:rgba(236,244,247,.6)}
.vidsec .field::after{background:#EAF3F7}
.vidsec .checks li{border-color:rgba(255,255,255,.16)}
.vidsec .form__ok{background:rgba(255,255,255,.12);color:#EAF3F7}

.fb__lead{margin:0 0 14px;font-size:1.06rem;font-weight:500}
.fb__contact{
  display:block;font-size:1.12rem;font-weight:500;color:#EAF3F7;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.16);
  transition:color var(--t-fast);
}
.fb__contact:hover{color:#fff}
.fb__note{margin:14px 0 22px;font-size:.86rem;color:rgba(236,244,247,.6)}

/* ---------- ۱۵ج. چیدمان نظرات ---------- */
.fb{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.fb__aside .checks li{border-color:var(--line)}
.fb__rate{border:0;padding:0;margin:26px 0 0}
.fb__rate legend{padding:0;font-size:.76rem;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.fb__rate-opts{display:flex;flex-wrap:wrap;gap:10px}
.fb__rate-opts label{position:relative;cursor:pointer}
.fb__rate-opts input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fb__rate-opts span{
  display:inline-block;padding:7px 20px;border-radius:var(--pill);
  border:.8px solid rgba(255,255,255,.32);font-size:.88rem;color:rgba(236,244,247,.82);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.fb__rate-opts label:hover span{border-color:#EAF3F7;color:#fff}
.fb__rate-opts input:checked + span{background:#EAF3F7;border-color:#EAF3F7;color:#141B20}
.fb__rate-opts input:focus-visible + span{outline:2px solid #EAF3F7;outline-offset:3px}
.fb__rate legend{color:rgba(236,244,247,.6)}
/* margin:auto کشش گریدی را برمی‌دارد، پس آیتم به عرض محتوایش جمع می‌شد
   (~۳۳۰px). width:100% آن را تا سقف ۵۵۰ باز نگه می‌دارد و auto وسط می‌چیند. */
#feedbackForm{width:100%;max-width:550px;margin:auto}
@media (max-width:900px){.fb{grid-template-columns:1fr}}

/* ---------- ۱۶. مشتریان ---------- */
.marquee{
  position:relative;overflow:hidden;
  border-block:1px solid var(--line);
  /* محوشدگی دو سر نوار، تا نام‌ها بریده به‌نظر نرسند */
  -webkit-mask-image:linear-gradient(to left,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to left,transparent,#000 9%,#000 91%,transparent);
}
/* دو نسخهٔ یکسانِ پشت‌سرهم؛ جاوااسکریپت ریل را حرکت می‌دهد و موقعیت را
   به‌پیمانهٔ عرض یک نسخه نگه می‌دارد، پس حلقه بی‌درز است و کاربر هم
   می‌تواند با کشیدن ماوس همان موقعیت را جابه‌جا کند. با انیمیشن CSS این
   ممکن نبود، چون کی‌فریم را نمی‌شود وسط کار با دست جابه‌جا کرد. */
.marquee__track{
  display:flex;width:max-content;
  will-change:transform;
}
/* کشیدن افقی مال نوار است، ولی اسکرول عمودی صفحه باید آزاد بماند. */
.marquee{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.marquee.is-dragging{cursor:grabbing}
/* حین کشیدن، لینک‌ها نباید حالت hover بگیرند یا متن انتخاب شود. */
.marquee.is-dragging .client{pointer-events:none}
/* لینک و متن نباید با کشیدن «برداشته» شوند؛ وگرنه مرورگر drag بومی خودش
   را شروع می‌کند، pointercancel می‌دهد و کشیدنِ نوار وسط کار می‌میرد. */
.marquee a,.marquee .client,.marquee .client *{-webkit-user-drag:none;user-drag:none}

.client{
  flex:none;min-width:210px;padding:30px 30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-align:center;color:var(--muted);
  border-inline-start:1px solid var(--line);
  transition:background var(--t-fast),color var(--t-fast);
}
a.client:hover{background:var(--white);color:var(--ink)}
.client__n{font-size:1rem;font-weight:500;line-height:1.55}
.client__u{font-size:.75rem;color:var(--muted-2);direction:ltr}
@media (max-width:720px){.client{min-width:172px;padding:24px 20px}}

/* بدون انیمیشن: نوار به یک شبکهٔ ساکن تبدیل می‌شود تا هیچ نامی پنهان نماند. */
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{
    width:100%;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  }
  /* نسخهٔ دوم فقط برای پیوستگی حلقه است؛ در حالت ساکن تکراری می‌شود. */
  .marquee__track > [data-clone]{display:none}
  .client{min-width:0;border-block-end:1px solid var(--line)}
}

/* ---------- ۱۸. تماس ---------- */
.contact{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,80px)}
.cinfo{align-content:start;border-top:1px solid var(--line)}
.cinfo__row{display:flex;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)}
.cinfo__i{width:40px;height:40px;border-radius:50%;background:var(--sage-3);display:grid;place-items:center;flex:none;color:var(--ink-3)}
.cinfo__k{font-size:.74rem;letter-spacing:.14em;color:var(--muted);margin-bottom:2px}
.cinfo__v{font-size:1.02rem;line-height:1.8}

.form{display:grid}
.field{position:relative;border-bottom:1px solid var(--line);padding-top:26px}
.field input,.field textarea{
  width:100%;border:0;background:none;padding:8px 0 14px;
  font-family:inherit;font-size:1rem;color:var(--ink);line-height:1.9;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none}
.field label{position:absolute;top:32px;inset-inline-start:0;color:var(--muted);font-size:1rem;pointer-events:none;transition:top var(--t-fast),font-size var(--t-fast),color var(--t-fast),letter-spacing var(--t-fast)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:4px;font-size:.74rem;letter-spacing:.1em;color:var(--muted-2)}
.field::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:inline-start;transition:transform var(--t-fast)}
.field:focus-within::after{transform:scaleX(1)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:30px}
.form__note{font-size:.82rem;color:var(--muted)}
.form__ok{margin-top:18px;padding:14px 20px;background:var(--sage-3);border-radius:var(--radius);font-size:.9rem;display:none}
/* همان کادر، وقتی ارسال ناموفق بوده */
.form__ok--bad{background:rgba(190,60,60,.14);box-shadow:inset 0 0 0 1px rgba(190,60,60,.4)}
.vidsec .form__ok--bad{background:rgba(255,90,90,.18);color:#FFE6E6;box-shadow:inset 0 0 0 1px rgba(255,120,120,.45)}
/* متنی که فقط صفحه‌خوان می‌خواند؛ برای وقتی که آیکون تنها معنا را
   منتقل نمی‌کند. تلهٔ ربات هم از همین شیوه استفاده می‌کند. */
.sr-only,
/* تلهٔ ربات: باید در DOM باشد ولی نه دیده شود، نه فوکوس بگیرد. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form__ok.is-on{display:block}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

.map{border-radius:var(--radius);overflow:hidden;min-height:300px;background:var(--dk-2);position:relative}
.map__pin{
  position:absolute;inset-inline-start:50%;top:50%;transform:translate(50%,-50%);z-index:3;
  background:var(--dk-fg);color:var(--dk);border-radius:var(--pill);
  padding:10px 22px;font-size:.88rem;font-weight:500;box-shadow:0 14px 34px -18px rgba(0,0,0,.7);
}

/* ---------- ۱۹. فراخوان ---------- */
.cta{background:var(--dk);color:var(--dk-fg);border-radius:var(--radius);padding:clamp(42px,6vw,80px);position:relative;overflow:hidden}
.cta__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.cta .h2{max-width:20ch}
@media (max-width:820px){.cta__in{grid-template-columns:1fr}}

/* ---------- ۲۰. پابرگ ---------- */
.footer{background:var(--dk);color:rgba(255,255,255,.66);padding-top:clamp(54px,7vw,86px)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(24px,4vw,56px);padding-bottom:54px}
.footer .brand__name{color:#fff}
/* پابرگ همیشه سطح تیره است، پس --muted-2 (که برای زمینهٔ روشن تنظیم
   شده) اینجا خوانا نیست؛ مثل حالت روی هیرو، نسخهٔ روشن می‌گیرد. */
.footer .brand__dot{color:rgba(234,243,247,.62)}
.footer__about{margin-top:20px;font-size:.92rem;line-height:2;max-width:38ch}
.footer__h{color:#fff;font-size:.76rem;letter-spacing:.16em;margin-bottom:20px;font-weight:500}
.footer__list{display:grid;gap:11px;font-size:.92rem}
.footer__bar{border-top:1px solid rgba(255,255,255,.13);padding-block:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;font-size:.82rem;color:rgba(255,255,255,.5)}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.socials a:hover{background:#fff;color:var(--dk);border-color:#fff}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* ---------- ۲۱. کوکی ---------- */
.cookie{
  position:fixed;inset-inline-start:20px;bottom:20px;z-index:70;max-width:520px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:0 26px 60px -30px rgba(32,40,45,.55);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  transform:translateY(160%);transition:transform var(--t);
}
.cookie.is-on{transform:none}
.cookie p{font-size:.88rem;line-height:1.9;flex:1 1 240px}
@media (max-width:560px){.cookie{inset-inline:16px;max-width:none}}

/* ---------- ۲۱ب. جست‌وجو ---------- */
.search{
  position:fixed;inset:0;z-index:95;background:rgba(32,40,45,.55);
  backdrop-filter:blur(6px);display:grid;place-items:start center;padding:14vh 24px 24px;
  opacity:0;pointer-events:none;transition:opacity var(--t-fast);
}
.search.is-on{opacity:1;pointer-events:auto}
.search__panel{
  width:min(100%,640px);background:var(--bg);border-radius:var(--radius);
  padding:34px 32px 28px;position:relative;
  transform:translateY(-14px);transition:transform var(--t);
}
.search.is-on .search__panel{transform:none}
.search__close{position:absolute;top:16px;inset-inline-end:16px}
.search__label{display:block;font-size:.74rem;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}
.search__input{
  width:100%;border:0;border-bottom:1px solid var(--line-strong);background:none;
  font-family:inherit;font-size:1.25rem;font-weight:300;color:var(--ink);
  padding:6px 0 14px;
}
.search__input:focus{outline:none;border-color:var(--ink)}
.search__results{margin-top:22px;max-height:44vh;overflow:auto}
.search__empty{font-size:.9rem;color:var(--muted);padding:8px 0}
.search__hit{display:block;padding:13px 12px;border-radius:var(--radius);margin-inline:-12px;transition:background var(--t-fast)}
.search__hit:hover{background:var(--panel)}
.search__hit-t{display:block;font-size:1rem;font-weight:500;line-height:1.6}
.search__hit-d{display:block;font-size:.83rem;color:var(--muted);line-height:1.7}

/* ---------- ۲۲. نمایه‌ها ---------- */
.view{display:none}
.view.is-active{display:block;animation:viewIn .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.pagehead{padding-block:clamp(44px,5.5vw,84px) clamp(34px,4vw,54px);border-bottom:1px solid var(--line)}
.pagehead__in{display:grid;grid-template-columns:1fr .8fr;gap:clamp(20px,4vw,64px);align-items:end}
.crumb{font-size:.8rem;color:var(--muted);margin-bottom:14px}
.crumb b{color:var(--ink);font-weight:500}
@media (max-width:860px){.pagehead__in{grid-template-columns:1fr}}

/* ---------- ۲۳. ظهور تدریجی ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--t-slow),transform var(--t-slow)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* پالس‌ها حذف می‌شوند، ولی خود خطوط ثابت می‌مانند */
  .netset__pulses{display:none}
  .rv{opacity:1;transform:none}
  html:focus-within{scroll-behavior:auto}
}

/* ---------- ۲۱. کلید تغییر تم ----------
   یک دکمه با دو آیکون هم‌مکان؛ CSS بر پایهٔ data-theme تصمیم می‌گیرد کدام
   دیده شود، پس جاوااسکریپت فقط یک صفت را عوض می‌کند و کاری با DOM ندارد. */
.theme-btn{position:relative}
.theme-btn svg{transition:opacity var(--t-fast),transform var(--t-fast)}
.theme-btn .i-moon{position:absolute;inset:0;margin:auto}
.theme-btn .i-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
.theme-btn .i-moon{opacity:1;transform:none}
:root[data-theme="dark"] .theme-btn .i-sun{opacity:1;transform:none}
:root[data-theme="dark"] .theme-btn .i-moon{opacity:0;transform:rotate(90deg) scale(.6)}

/* ---------- ۲۲. پردهٔ بلوک‌ها ----------
   یک ابزار مستقل، تا بعداً بشود بدون تکرار به بخش‌های دیگر هم داد.
   عمداً به بخش‌هایی که خودشان زمینهٔ تیره یا ویدیو دارند داده نمی‌شود؛
   آن‌جا پرده فقط تصویر را گل‌آلود می‌کند. */
.veil{
  background:var(--veil);
  border:1px solid var(--veil-line);
  border-radius:var(--radius);
  padding:var(--veil-pad);
}
/* بلوک‌های صفحهٔ تماس */
.contact > .veil{align-content:start}
/* خط بالای فهرست اطلاعات با لبهٔ کادر مماس می‌شد؛ داخل پرده لازم نیست. */
.veil > .cinfo{border-top:0}
.veil > .cinfo .cinfo__row:first-child{padding-top:0}
.veil > .cinfo .cinfo__row:last-child{border-bottom:0;padding-bottom:0}

/* بخش‌های صفحات داخلی (خدمات و مکنا) هم کادر می‌گیرند. فراخوان پایانی
   (.section--tight) کنار گذاشته می‌شود چون خودش یک پنل تیره است. */
.view--paneled .pagehead > .shell,
.view--paneled .section:not(.section--tight) > .shell{
  background:var(--veil);
  border:1px solid var(--veil-line);
  border-radius:var(--radius);
  padding:var(--veil-pad);
  width:min(100% - 48px,var(--shell));
}

/* ---------- ۲۳. تیتر چرخشی هیرو ----------
   چیدمان گریدی به‌جای position:absolute — هر سه اسلاید یک خانه را اشغال
   می‌کنند، پس ارتفاع کادر خودبه‌خود برابر بلندترین شعار می‌شود و هنگام
   تعویض هیچ پرشی در چیدمان رخ نمی‌دهد. */
/* ارتفاع کادر برابر بلندترین شعار است. روی موبایل شعار اول سه‌خطی
   می‌شود و دوتای دیگر دوخطی؛ با end، شعارهای کوتاه‌تر به کف کادر
   می‌چسبند تا فاصله‌شان تا پاراگراف زیر همیشه یکسان بماند. */
.rot{display:grid;align-items:end}
.rot__i{
  grid-area:1/1;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  /* اسلاید خاموش نباید کلیک یا انتخاب متن را بگیرد */
  pointer-events:none;
  visibility:hidden;
}
.rot__i.is-on{opacity:1;transform:none;visibility:visible}
/* اسلایدی که در حال رفتن است، به‌جای پایین‌آمدن، بالا می‌رود تا حرکت
   پیوسته به‌نظر برسد نه رفت‌وبرگشتی. */
.rot__i.is-out{opacity:0;transform:translateY(-14px);visibility:visible}

/* بدون انیمیشن: فقط شعار اول، ساکن. */
@media (prefers-reduced-motion:reduce){
  .rot__i{transition:none}
  .rot__i:not(.is-on){display:none}
}

/* ---------- ۲۳. معرفی برند خواهر (گریدوب) ----------
   سرویس طراحی سایت روی زیردامنهٔ جداست و برند خودش را دارد، پس به‌جای
   یک قلم در فهرست، کادر مستقل می‌گیرد تا هم دیده شود و هم معلوم باشد
   مقصدْ سایت دیگری است. */
.sister{
  margin-top:30px;padding:22px 24px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--veil);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  transition:border-color var(--t-fast);
}
.sister:hover{border-color:var(--line-strong)}
.sister__body{flex:1 1 260px;min-width:0}
.sister__k{font-size:.72rem;letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.sister__n{font-size:1.22rem;font-weight:500;line-height:1.4;margin-bottom:6px}
.sister__d{font-size:.9rem;line-height:1.9;color:var(--ink-3);margin:0}
.sister__u{font-size:.75rem;color:var(--muted-2);direction:ltr;display:block;margin-top:8px}
/* فلش رو به بیرون، تا پیش از کلیک معلوم باشد کاربر از سایت خارج می‌شود */
.sister__go{flex:none}
.sister__go svg{transform:rotate(-45deg)}