/* ═══════════════════════════════════════════════════════════════
   اکیپا | خدمات سازمانی — سیستم طراحی
   توکن‌های رنگ از ekeepa.co استخراج شده‌اند (نه اختراعی).
   ساختار: توکن‌ها → پایه → پرایمیتیو → چیدمان → کامپوننت → ریسپانسیو
   ═══════════════════════════════════════════════════════════════ */

/* فونت محلی — بدون وابستگی به CDN. مسیر url() نسبت به همین فایل CSS حل می‌شود.
   نسخه‌ی variable: یک فایل، پوشش کامل وزن‌های ۱۰۰ تا ۹۰۰. */
@font-face{
  font-family:"Vazirmatn";
  src:url("fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
      url("fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ─────────────────────────── ۱. توکن‌ها ─────────────────────────── */
:root{
  /* سطوح — «استیج» بنفش عمیق در برابر «بریف» خنثای تیره */
  --stage:#100330;          /* ekeepa banner purple */
  --stage-deep:#0A021F;
  --base:#17161B;           /* بدنه */
  --surf-1:#1E1D23;         /* کارت */
  --surf-2:#26242D;         /* کارت برجسته / هاور */
  --surf-3:#2F2D38;
  --line:#33323B;
  --line-2:#424242;         /* دیوایدر ekeepa */

  /* برند */
  --brand:#42199F;          /* دکمه‌ی پر ekeepa */
  --brand-hi:#5A2AC9;
  --brand-lo:#2E116F;
  --brand-soft:rgba(118,83,235,.15);
  --accent:#B0A3F5;         /* لینک و حالت فعال ekeepa */
  --accent-2:#C8BFF9;
  --accent-3:#EAE7FD;
  --accent-glow:rgba(176,163,245,.45);

  /* سیگنال */
  --signal:#F89543;         /* بج آفر ekeepa */
  --signal-bg:#3A2411;
  --alert:#F5627B;

  /* متن */
  --text:#F3F2F4;
  --text-2:#BDBAC6;
  --text-3:#8B8895;

  /* شکل */
  --r-xs:4px;
  --r-sm:8px;
  --r:12px;                 /* شعاع غالب ekeepa */
  --r-lg:16px;
  --r-xl:20px;

  /* سایه — کم‌رمق و واقعی، بدون گلوی نئونی */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 28px rgba(0,0,0,.45);

  /* حرکت */
  --ease:cubic-bezier(.2,.7,.3,1);
  --t-1:.16s;
  --t-2:.32s;

  /* تایپ — سیال، بدون override در مدیا‌کوئری */
  --f-xs:clamp(.72rem,.695rem + .11vw,.79rem);
  --f-sm:clamp(.82rem,.786rem + .15vw,.91rem);
  --f-md:clamp(.94rem,.912rem + .12vw,1.01rem);
  --f-lg:clamp(1.02rem,.965rem + .24vw,1.16rem);
  --f-xl:clamp(1.15rem,1.05rem + .44vw,1.42rem);
  --f-2xl:clamp(1.42rem,1.19rem + 1.02vw,2.05rem);
  --f-3xl:clamp(1.95rem,1.5rem + 2vw,3.2rem);
  --f-hero:clamp(2.35rem,1.5rem + 3.8vw,4.75rem);

  /* فاصله — سیال */
  --s1:.35rem;
  --s2:.6rem;
  --s3:.9rem;
  --s4:1.25rem;
  --s5:1.7rem;
  --s6:clamp(1.7rem,1.35rem + 1.5vw,2.7rem);
  --s7:clamp(2.6rem,1.85rem + 3.2vw,4.75rem);
  --s8:clamp(3.4rem,2.3rem + 4.6vw,6.5rem);

  /* عرض‌ها */
  --w-page:1180px;
  --w-hero:1290px;          /* عرض محتوای باند هیرو — هم‌اندازه‌ی بنر اکیپا */
  --banner-ar:2811/1134;    /* دقیقاً نسبت فایل پوستر دسکتاپ — تا برشی نیفتد */
  --rail-w:36px;            /* قطر مهره‌های ریل نظرات در موبایل */
  --w-text:64ch;            /* طول سطر خوانا */
  --header-h:70px;
  --pad-x:clamp(1.1rem,4vw,2rem);   /* پدینگ کانتینر — کروسل‌ها هم همین را می‌خوانند */

  --mono:ui-monospace,SFMono-Regular,"Segoe UI Mono",Consolas,"Liberation Mono",Menlo,monospace;
}

/* ─────────────────────────── ۲. پایه ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  direction:rtl;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  font-size:var(--f-md);
  line-height:1.85;
  color:var(--text);
  background:var(--base);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01";
}

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,ol{list-style:none}
bdo,.mono{unicode-bidi:bidi-override}
table{border-collapse:collapse}
::selection{background:var(--brand-hi);color:#fff}

h1,h2,h3,h4{
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{font-size:var(--f-3xl);font-weight:900;letter-spacing:-.028em}
h2{font-size:var(--f-2xl)}
h3{font-size:var(--f-xl);font-weight:700}
h4{font-size:var(--f-lg);font-weight:700}
p{text-wrap:pretty}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.skip-link{
  position:fixed;top:-100px;inset-inline-end:16px;z-index:200;
  background:var(--brand);color:#fff;padding:12px 20px;
  border-radius:var(--r-sm);font-weight:600;
  transition:top var(--t-2) var(--ease);
}
.skip-link:focus{top:12px}

/* شناسه‌ها و داده‌های لاتین — فونت مونوی سیستم.
   ارقام فارسی اینجا نمی‌آیند: فونت‌های مونو گلیف فارسی ندارند و
   مرورگر مجبور می‌شود تک‌تک رقم‌ها را به فونت جایگزین بیندازد. */
.mono,.code,.data-table td:not(:first-child){font-family:var(--mono);font-feature-settings:normal}

/* ─────────────────── ۳. چیدمان: کانتینر و باندها ─────────────────── */
.container{
  width:100%;
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* روت‌ها */
.route{display:none}
.route.active{display:block;animation:routeIn .4s var(--ease)}
@keyframes routeIn{from{opacity:0}to{opacity:1}}

/*  باند «بریف» = بدنه‌ی خنثی   |   باند «استیج» = بنفش عمیق اکیپا
    مرز هر استیج با یک هِرلاین برندی مشخص می‌شود. */
.section{padding-block:var(--s7)}
/* نوار نظرات و نمونه‌کارها کمی به باند بالای خود نزدیک‌تر می‌نشینند */
.testi-section{padding-top:calc(var(--s7) - 20px)}
.works-section{padding-top:calc(var(--s7) - 20px)}
.section-alt{
  background:linear-gradient(180deg,#1B1A20,#191820);
  border-block:1px solid var(--line);
}

.hero-lead,.hero,.page-hero,.cta-section,.site-footer{
  position:relative;
  background:
    radial-gradient(120% 90% at 85% -20%, #1D0947 0%, transparent 62%),
    linear-gradient(180deg,var(--stage),var(--stage-deep));
}
.hero-lead::after,.hero::after,.page-hero::after,.cta-section::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-hi),transparent);
  opacity:.55;
}

/* ─────────────────────────── ۴. هدر ─────────────────────────── */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--t-2) var(--ease),border-color var(--t-2);
}
.site-header.scrolled{
  background:rgba(16,3,48,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:var(--s4);
}

/* لوگو: تصویر بالا، شعار زیرش */
.brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  flex-shrink:0;line-height:1.2;
}
.brand img{height:32px;width:auto}
.brand small{font-size:.64rem;color:var(--text-3);font-weight:500;white-space:nowrap}

.main-nav{flex:1;display:flex;justify-content:center;min-width:0}
.main-nav > ul{display:flex;align-items:center;gap:2px}
.main-nav a{
  display:flex;align-items:center;gap:5px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:500;color:var(--text-2);
  white-space:nowrap;cursor:pointer;
  transition:color var(--t-1),background var(--t-1);
}
.main-nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.main-nav a.active{color:var(--accent-3);background:var(--brand-soft)}

.header-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.menu-btn{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line);
}
.menu-btn span{
  width:19px;height:2px;background:var(--text);border-radius:2px;
  transition:transform var(--t-2) var(--ease),opacity var(--t-1);
}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─────────────────────── ۵. تایپوگرافی صفحه ─────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--f-xs);font-weight:600;letter-spacing:.01em;
  color:var(--accent);
  padding:5px 11px;border-radius:999px;
  background:var(--brand-soft);
  border:1px solid rgba(176,163,245,.2);
}
.eyebrow .ic{opacity:.85}
/* واریانت نارنجی — همان رنگی که تیتر مشتریان داشت */
.eyebrow.is-signal{
  color:var(--signal);
  background:var(--signal-bg);
  border-color:rgba(248,149,67,.28);
}

.section-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  margin-bottom:var(--s6);
  max-width:var(--w-text);
}
.section-lead,.page-lead{
  font-size:var(--f-lg);color:var(--text-2);max-width:var(--w-text);
}
.sub-title{
  font-size:var(--f-xl);font-weight:700;
  margin:var(--s6) 0 var(--s4);
  padding-inline-start:12px;
  border-inline-start:3px solid var(--accent);
}
.split-text{display:block}
/* .grad-text حالا بدون گرادیان — تفاوت با وزن و رنگ */
.grad-text{color:var(--accent)}

.text-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--f-sm);font-weight:600;color:var(--accent);
  margin-top:auto;padding-top:var(--s2);
}
.text-link:hover{color:var(--accent-3)}
.text-link .ic{transition:transform var(--t-1) var(--ease)}
.text-link:hover .ic{transform:translateX(4px)}

/* ─────────────────────────── ۶. دکمه ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;
  border-radius:var(--r-sm);
  font-size:var(--f-sm);font-weight:700;
  cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--t-1),border-color var(--t-1),color var(--t-1);
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hi)}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--accent)}
.btn-sm{min-height:40px;padding:8px 16px;font-size:var(--f-xs)}
.btn-block{width:100%}

/* ─────────────────── ۷. امضا: کد و ردیف مشخصات ─────────────────── */
/* هر سرویس در PDFها با «قالب / اندازه / مدت / خروجی» توصیف شده؛
   کارت‌ها همان ساختار را حمل می‌کنند، نه تزئین. */
.code{
  font-size:var(--f-xs);font-weight:500;letter-spacing:.08em;
  color:var(--accent);opacity:.75;
}
.spec{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.spec li{display:flex;flex-direction:column;gap:1px;line-height:1.5}
.spec span{font-size:var(--f-xs);color:var(--text-3)}
.spec b{font-size:var(--f-sm);font-weight:600;color:var(--text)}

/* ─────────────────────────── ۸. کارت‌ها ─────────────────────────── */
.card,.mini-card,.callout,.quote-card,.step,.contact-item,
.xp-demo,.contact-form,.effect-card{
  background:var(--surf-1);
  border:1px solid var(--line);
  border-radius:var(--r);
}

.card{
  display:flex;flex-direction:column;
  padding:var(--s5);
  transition:border-color var(--t-1),background var(--t-1);
}
.card:hover{border-color:var(--line-2);background:var(--surf-2)}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--text-2);font-size:var(--f-sm)}

.card-ic{
  display:grid;place-items:center;
  width:44px;height:44px;flex-shrink:0;
  border-radius:var(--r-sm);
  margin-bottom:var(--s3);
  background:var(--brand-soft);
  color:var(--accent);
  border:1px solid rgba(176,163,245,.18);
}
.card-plain{background:transparent}
.card-plain:hover{background:var(--surf-1)}

.mini-card{padding:var(--s4)}
.mini-card h3{font-size:var(--f-md);font-weight:700;margin-bottom:4px}
.mini-card p{font-size:var(--f-sm);color:var(--text-2)}

/* آثار گیمیفیکیشن — کارت شماره‌دار نه، بلکه اثر مستقیم */
.effect-card{
  padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
  border-inline-start:3px solid var(--accent);
}
.effect-card b{font-size:var(--f-lg);font-weight:800}
.effect-card p{color:var(--text-2);font-size:var(--f-sm)}

.callout{
  padding:var(--s5);
  background:var(--brand-soft);
  border-color:rgba(176,163,245,.22);
}
.callout h3{margin-bottom:var(--s2)}
.callout p{color:var(--text-2)}

.quote-card{
  padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
}
.quote-ic{width:28px;height:28px;color:var(--accent);opacity:.5}
.quote-card p{font-size:var(--f-lg);line-height:1.75}
.quote-card footer{font-size:var(--f-sm);color:var(--text-3);font-weight:600}

.note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:var(--s5);padding:12px 16px;
  border-radius:var(--r-sm);
  background:var(--signal-bg);
  border:1px solid rgba(248,149,67,.24);
  color:var(--signal);
  font-size:var(--f-sm);
}
.note .ic{flex-shrink:0;margin-top:5px}



/* ───────────────────── ۱۱. مرحله / فرمول / XP ───────────────────── */
.step{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s5);
}
.step-no{
  display:grid;place-items:center;
  width:42px;height:42px;flex-shrink:0;
  border-radius:var(--r-sm);
  font-family:var(--mono);font-size:1rem;font-weight:600;
  background:var(--brand);color:#fff;
}
.step p{color:var(--text-2);font-size:var(--f-sm)}

.formula{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);
  margin-bottom:var(--s5);
}
.formula-item{
  display:flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:var(--r-sm);
  background:var(--surf-1);border:1px solid var(--line);
  font-size:var(--f-sm);
}
.formula b{font-size:var(--f-lg);color:var(--accent);font-weight:800}

.xp-demo{
  padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);
}
.xp-row{display:flex;flex-direction:column;gap:7px;font-size:var(--f-sm);font-weight:600}
.xp-row i{
  display:block;height:8px;border-radius:999px;
  background:rgba(255,255,255,.07);overflow:hidden;position:relative;
}
.xp-row i::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:var(--w,60%);border-radius:999px;
  background:linear-gradient(90deg,var(--brand-hi),var(--accent));
}

/* ───────────────────── ۱۲. پیل، ژانر، لیست ───────────────────── */
.pill-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;
  font-size:var(--f-xs);font-weight:600;
  background:var(--surf-1);border:1px solid var(--line);
  color:var(--text-2);
}
.pill-city{background:transparent}

.genre{
  display:grid;place-items:center;gap:6px;
  padding:16px 10px;border-radius:var(--r);
  background:var(--surf-1);border:1px solid var(--line);
  font-size:var(--f-sm);font-weight:600;text-align:center;
  transition:border-color var(--t-1),background var(--t-1);
}
.genre:hover{border-color:var(--accent);background:var(--surf-2)}
.genre .ic{color:var(--accent)}

.objective{
  display:flex;align-items:center;gap:9px;
  padding:13px 16px;border-radius:var(--r-sm);
  background:var(--surf-1);border:1px solid var(--line);
  font-size:var(--f-sm);
}
.objective .ic{color:var(--accent);flex-shrink:0}
.objective-grid{gap:var(--s2)}

.check-list{display:grid;gap:var(--s2)}
.check-list li{
  position:relative;
  padding-inline-start:30px;
  font-size:var(--f-sm);color:var(--text-2);
}
.check-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:14px;height:8px;
  border-inline-start:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.check-list.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:var(--s2) var(--s5)}

.num-list{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5);counter-reset:n}
.num-list li{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:var(--r-sm);
  background:var(--surf-1);border:1px solid var(--line);
  font-size:var(--f-sm);
  counter-increment:n;
}
.num-list li::before{
  content:counter(n);
  display:grid;place-items:center;
  width:26px;height:26px;flex-shrink:0;
  border-radius:var(--r-xs);
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  background:var(--brand-soft);color:var(--accent);
}
.num-list.compact{flex-direction:column;gap:var(--s2);margin:var(--s3) 0}
.num-list.compact li{background:transparent;border:0;padding:0}

/* ─────────────────────────── ۱۳. گرید ─────────────────────────── */
/* گرید سیال: بدون override در بریک‌پوینت */
.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14.5rem),1fr))}
.genre-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(45%,9rem),1fr))}
.steps,.steps-4{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.quotes-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
}
.contact-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.contact-grid .wide{grid-column:1/-1}
.cities{display:flex;flex-wrap:wrap;gap:var(--s2)}

.split{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:start}
.split-side,.split-visual{align-self:start;min-width:0}
.split-text{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.split-text p{color:var(--text-2)}

/* کارت آمار — عدد بزرگ بالا، توضیح چسبیده به کف کارت */
/* ۶ کارت → ۳×۲ و ۴ کارت → ۴×۱؛ صریح، چون auto-fit یکی را تنها می‌گذاشت */
.stats-strip,.stats-about{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:var(--s6);
}
@media (min-width:760px){
  .stats-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats-about{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.stat{
  display:flex;flex-direction:column;
  gap:var(--s5);
  min-height:190px;
  padding:var(--s5) var(--s4);
  border-radius:var(--r-xl);
  background:var(--surf-1);
  border:1px solid var(--line);
}
.stat b{
  display:flex;align-items:baseline;gap:2px;
  font-size:clamp(2.1rem,1.5rem + 2vw,3.1rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--text);
}
.stat b i{
  font-style:normal;font-weight:700;
  font-size:.5em;color:var(--accent);
}
.stat span:last-child{
  margin-top:auto;
  font-size:var(--f-sm);color:var(--text-2);line-height:1.7;
}

/* ─────────────────── ۱۴. بخش‌های تصویری تازه ─────────────────── */
/* مارکیِ مشتریان — حلقه‌ی بی‌درز، همه‌ی کاشی‌ها یک‌شکل */
/* برچسب وسط‌چین نوارها — هم مشتریان، هم نظرات */
.band-label{
  display:flex;
  margin:var(--s6) auto var(--s4);
  width:fit-content;
}
.marquee{
  width:100%;overflow:hidden;
  padding-block:var(--s3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{
  display:flex;flex-wrap:nowrap;width:max-content;gap:var(--s3);
  animation:none;
  pointer-events:auto;
  touch-action:pan-y;
  will-change:transform;
  user-select:none;
}

.tile{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:150px;height:110px;padding:var(--s3);
  border-radius:var(--r-lg);
  background:var(--brand-soft);
  border:1px solid var(--line-2);
}
.tile img{
  max-width:100%;max-height:48px;width:auto;
  filter:brightness(0) invert(1);      /* هر منبعی → سیلوئت سفید */
  opacity:.92;
}
.tile-word{
  font-size:var(--f-lg);font-weight:800;color:#fff;opacity:.92;
  letter-spacing:-.02em;
}

/* ───────────────── نظرات کاربران ───────────────── */
/* متن در حرکت سخت خوانده می‌شود — پس خیلی کندتر از نوار لوگوها */
.testi-track{animation-duration:78s}

.testi-card{
  flex:0 0 auto;
  display:flex;flex-direction:column;gap:var(--s3);
  width:22rem;min-height:200px;
  padding:var(--s5);
  border-radius:var(--r);
  background:var(--surf-1);
  border:1px solid var(--line);
}
.testi-tag{
  align-self:flex-start;
  font-size:var(--f-xs);font-weight:700;
  padding:4px 10px;border-radius:var(--r-xs);
  background:var(--brand-soft);color:var(--accent);
}
.testi-card p{
  font-size:var(--f-sm);color:var(--text-2);line-height:1.9;
}
/* گیومه شناور است تا کنار خط اولِ همان متن بنشیند، نه زیر تگ بالای کارت */
.testi-card p::before{
  content:"”";
  float:right;                 /* سافاری مقدار منطقی float را نمی‌شناسد — سند RTL است پس معادل است */
  float:inline-start;
  margin-inline-end:.32rem;
  margin-block-start:-.1em;
  font-size:1.9rem;line-height:.85;
  color:var(--accent);opacity:.55;
}
.testi-card footer{
  display:flex;flex-direction:column;gap:2px;
  margin-top:auto;padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.testi-card footer b{font-size:var(--f-md);font-weight:700}
.testi-card footer span{font-size:var(--f-xs);color:var(--text-3)}

/* ریل موبایل — JS می‌سازدش */
.testi-rail{display:none}
.testi-rail button{
  position:relative;
  display:grid;place-items:center;
  width:var(--rail-w);height:var(--rail-w);flex-shrink:0;
  border-radius:50%;
  background:var(--surf-2);
  border:1px solid var(--line-2);
  color:var(--text-3);
  transition:background var(--t-2) var(--ease),color var(--t-2),
             border-color var(--t-2),transform var(--t-2) var(--ease);
}
.testi-rail button[aria-selected="true"]{
  background:var(--brand);border-color:var(--brand-hi);color:#fff;
  transform:scale(1.06);
}
/* حلقه‌ی پیشرفت دور مهره‌ی فعال — هم‌گام با تعویض خودکار */
@property --p{syntax:"<angle>";inherits:false;initial-value:0deg}
.testi-rail button::before{
  content:"";
  position:absolute;inset:-4px;border-radius:50%;
  /* رنگ پایه جدا از گرادیان اعلام می‌شود: روی سافاری زیر ۱۶٫۴ که @property ندارد
     var(--p) بی‌اعتبار می‌شود و فقط background-image می‌افتد — این حلقه می‌ماند.
     جایی که @property هست، همین رنگ تراکِ کم‌رنگِ زیر قوس پیشرفت است. */
  background-color:rgba(176,163,245,.3);
  background-image:conic-gradient(var(--accent) var(--p),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  opacity:0;
}
.testi-rail button[aria-selected="true"]::before{
  opacity:1;
  animation:testiProgress var(--testi-step,6s) linear forwards;
}
@keyframes testiProgress{from{--p:0deg}to{--p:360deg}}

/* ───────────────── نمونه‌کارها ─────────────────
   برخلاف نوارهای بالا، ترنسفورم این یکی را جاوااسکریپت می‌راند
   (حرکت خودکار + کشیدن با انگشت)، پس انیمیشن CSS باید خاموش باشد. */
.works{cursor:grab}
.works.is-drag{cursor:grabbing}
.works-track{
  animation:none;
  pointer-events:auto;      /* بازکردن قفلِ .marquee-track */
  touch-action:pan-y;       /* کشیدن افقی مال ماست، اسکرول عمودی مال صفحه */
  will-change:transform;
  user-select:none;
}
.work-card{
  flex:0 0 auto;
  width:clamp(14.5rem,20vw,17.5rem);
  display:flex;flex-direction:column;
  border-radius:var(--r);overflow:hidden;
  background:var(--surf-1);
  border:1px solid var(--line);
  transition:border-color var(--t-1),background var(--t-1);
}
.work-card:hover{
  border-color:var(--line-2);
  background:var(--surf-2);
}
.work-card-media{
  position:relative;
  width:100%;
  aspect-ratio:3/4;          /* هم‌نسبت با خود فایل‌ها (۵۸۴×۷۸۰) تا چیزی کراپ نشود */
  overflow:hidden;
  background:rgba(0,0,0,.2);
}
.work-card-media picture,
.work-card-media img{
  display:block;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;
  transition:transform var(--t-2) var(--ease);
}
.work-card:hover .work-card-media img{
  transform:none!important;
}

/* اسلایدر داخل کارت‌های چندعکسه‌ای */
.work-card-slider{
  position:relative;
  width:100%;aspect-ratio:3/4;
  overflow:hidden;
  background:rgba(0,0,0,.2);
  user-select:none;
}
.work-slider-track{
  position:relative;
  width:100%;height:100%;
}
.work-slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease, visibility .6s;
}
.work-slide.is-active{
  opacity:1;visibility:visible;
  z-index:1;
}
.work-slide img{
  display:block;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;
  transform:none!important;
}
.work-slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  color:#fff;border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;
  font-size:16px;font-weight:700;line-height:1;
  cursor:pointer;z-index:5;
  opacity:0;
  transition:opacity var(--t-1) var(--ease),background var(--t-1),border-color var(--t-1);
  pointer-events:auto;
}
.work-card-slider:hover .work-slider-btn{opacity:1}
.work-slider-btn:hover{background:var(--brand);border-color:var(--brand-hi)}
.work-slider-btn.prev{right:8px}
.work-slider-btn.next{left:8px}

.work-slider-dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;
  z-index:5;pointer-events:auto;
  padding:3px 8px;border-radius:12px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
}
.work-slider-dots .dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:background var(--t-1),transform var(--t-1),width var(--t-1);
  cursor:pointer;
}
.work-slider-dots .dot.is-active{
  background:#fff;width:14px;border-radius:4px;
}
.work-card-body{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s3) var(--s4) var(--s4);
  flex:1;
}
.work-card-eyebrow{
  font-size:var(--f-xs);font-weight:600;
  color:var(--accent);
  letter-spacing:.02em;
  margin:0;
}
.work-card-title{
  font-size:var(--f-md);font-weight:700;color:var(--text);
  line-height:1.35;margin:0;
}
.work-card-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:6px 14px;
  border-radius:var(--r-sm);
  font-size:var(--f-xs);font-weight:700;
  background:var(--brand);color:#fff;
  text-decoration:none;
  margin-top:auto;          /* کارت دیسکریپشن ندارد، پس خود دکمه ته کارت می‌نشیند */
  border:1px solid transparent;
  transition:background var(--t-1),border-color var(--t-1),transform var(--t-1);
}
.work-card-btn:hover{
  background:var(--brand-hi);color:#fff;
}
.work-card-btn .ic{
  flex-shrink:0;
}

/* گالری پروژه‌ها */
.gallery{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.gallery figure{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--surf-1);
}
.gallery picture,.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery .slot{
  display:grid;place-items:center;
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(-45deg,transparent 0 12px,rgba(255,255,255,.025) 12px 24px),
    var(--surf-1);
  color:var(--text-3);font-family:var(--mono);font-size:var(--f-xs);letter-spacing:.06em;
}
.gallery figcaption{
  padding:11px 14px;font-size:var(--f-sm);color:var(--text-2);
  border-top:1px solid var(--line);
}

/* کلیپ‌های ویدیویی */
.clip-list{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.clip-list a{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);border-radius:var(--r);
  background:var(--surf-1);border:1px solid var(--line);
  font-size:var(--f-sm);font-weight:600;
  transition:border-color var(--t-1),background var(--t-1);
}
.clip-list a:hover{border-color:var(--accent);background:var(--surf-2)}
.clip-list .ic{
  flex-shrink:0;width:38px;height:38px;padding:9px;
  border-radius:50%;background:var(--brand);color:#fff;
}

/* نمادهای اعتماد */
.trust-row{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:center;
}
/* بج‌ها رنگی و برای زمینه‌ی روشن طراحی شده‌اند — کاشی سفید می‌گیرند */
.trust-row li,.trust-row li > a{
  display:grid;place-items:center;
  width:70px;height:70px;
  border-radius:var(--r-sm);
  background:#fff;
  overflow:hidden;
}
.trust-row li > a{width:100%;height:100%}
.trust-row img{width:100%;height:100%;object-fit:contain}

/* ─────────────────────────── ۱۵. جدول ─────────────────────────── */
.table-wrap{
  position:relative;
  overflow-x:auto;
  border-radius:var(--r);
  border:1px solid var(--line);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.data-table{width:100%;min-width:540px;font-size:var(--f-sm);text-align:start}
.data-table th{
  padding:13px 16px;
  background:var(--brand-lo);
  font-weight:700;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.data-table td{
  padding:12px 16px;
  color:var(--text-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr{background:var(--surf-1);transition:background var(--t-1)}
.data-table tbody tr:hover{background:var(--surf-2)}
.data-table td:first-child{color:var(--text);font-weight:600;white-space:normal}

/* ─────────────────────────── ۱۶. هیرو ─────────────────────────── */
/* هیروی معرفی: سوییچر مخاطب + کارت اصلی */
.hero-lead{
  padding-top:calc(var(--header-h) + var(--s6));
  padding-bottom:var(--s7);
}
/* باند هیرو از بقیه‌ی صفحه پهن‌تر است تا بنر به اندازه‌ی نمونه‌ی اکیپا برسد.
   تب‌ها و ردیف مسیرها داخل همین کانتینرند، پس هم‌ترازی سه‌تایی حفظ می‌شود. */
.hero-lead .container{
  max-width:calc(var(--w-hero) + var(--pad-x)*2);
  display:flex;flex-direction:column;align-items:center;gap:var(--s5);
}

/* سوییچر دو تبی */
.tabs{
  display:flex;gap:4px;padding:5px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);
  max-width:100%;
}
.tab{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;min-height:44px;
  border-radius:999px;
  font-size:var(--f-sm);font-weight:600;
  color:var(--text-2);white-space:nowrap;
  transition:background var(--t-1),color var(--t-1);
}
.tab:hover{color:var(--text)}
.tab.is-on{background:var(--brand-hi);color:#fff}
.tab .ic{flex-shrink:0}

/* کارت اصلی هیرو — جعبه‌ی بنر با نسبت ثابت، نه ارتفاع تابع محتوا */
.hero-card{
  position:relative;width:100%;
  display:grid;                 /* بدنه در مرکز جعبه می‌نشیند */
  grid-template-columns:minmax(0,1fr);   /* ستون از عرض کارت پهن‌تر نشود */
  border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  overflow:hidden;
  isolation:isolate;
}
/* نگه‌دارنده‌ی نسبت: ارتفاع کارت = بیشینه‌ی (نسبت بنر، ارتفاع محتوا)
   تا روی صفحه‌های خیلی باریک هیچ‌چیز بریده نشود. */
.hero-card::before{
  content:"";grid-area:1/1;
  width:100%;aspect-ratio:var(--banner-ar);
}
/* زمینه‌ی گرادیانی — فقط تا لحظه‌ی بارگذاری پوستر دیده می‌شود */
.hero-card-bg{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#150836,#0D0224);
}

.hero-card-body{
  position:relative;
  grid-area:1/1;align-self:center;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  text-align:center;
  padding:var(--s5);            /* ارتفاع را نسبت تعیین می‌کند، نه پدینگ */
}
.hero-card-body[hidden]{display:none}

/* حالت بنری — پوستر تمام‌قاب و کل کادر کلیک‌پذیر.
   display:block تا لینک بدون دخالت flex کل جعبه را پر کند؛ گردیِ گوشه‌ها
   را همان overflow:hidden روی .hero-card می‌بُرد. */
.hero-card-body.is-banner{padding:0;align-self:stretch}
/* display جدا از بقیه: این انتخابگر با .hero-card-body[hidden] هم‌وزن است،
   پس بدون :not() هرکدام پایین‌تر باشد برنده می‌شد و پنلِ مخفی مخفی نمی‌ماند */
.hero-card-body.is-banner:not([hidden]){display:block}
.hero-banner{
  display:block;width:100%;height:100%;
  overflow:hidden;                 /* مهارِ scale روی hover */
}
.hero-banner img{
  display:block;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;
  transition:transform var(--t-2) var(--ease),filter var(--t-2);
}
.hero-banner:hover img{transform:scale(1.02);filter:brightness(1.05)}
.hero-banner:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.hero-card-body h1{
  font-size:clamp(1.85rem,1.15rem + 2.6vw,3.35rem);
  line-height:1.32;letter-spacing:-.025em;
  max-width:24ch;
}
.hero-card-body h1 em{
  font-style:normal;color:var(--accent);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;
}
.hero-line{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  font-size:var(--f-lg);color:var(--text-2);
}
.inline-pill{
  padding:5px 14px;border-radius:999px;
  background:var(--brand);color:#fff;font-weight:600;
}
.btn-pill{border-radius:999px;padding:16px 34px;min-height:56px;font-size:var(--f-md)}
.hero-hint{font-size:var(--f-sm);color:var(--text-3);max-width:42ch}

.path-picker{
  display:grid;width:100%;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
.path-picker a{
  display:flex;flex-direction:column;gap:5px;
  padding:var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(255,255,255,.03);
  transition:border-color var(--t-1),background var(--t-1);
}
.path-picker a:hover{border-color:var(--accent);background:rgba(255,255,255,.06)}
.path-picker b{font-size:var(--f-lg);font-weight:800}
.path-picker span{font-size:var(--f-sm);color:var(--text-2)}

.hero{
  padding-top:calc(var(--header-h) + var(--s7));
  padding-bottom:var(--s7);
}
/* وقتی هیروی معرفی بالای آن بنشیند، هیروی بریف به باند خنثی تبدیل می‌شود
   تا دو باند بنفش پشت سر هم به یک بلوک یکنواخت تبدیل نشوند. */
.hero-lead + .hero{
  background:var(--base);
  padding-top:var(--s7);
}
.hero-lead + .hero::after{
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}
.hero-lead + .hero .hero-title{font-size:var(--f-3xl)}
.hero-grid{
  display:grid;gap:var(--s6);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.hero-title{font-size:var(--f-hero);line-height:1.12;letter-spacing:-.035em}
.hero-sub{font-size:var(--f-lg);color:var(--text-2);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero-badges li{
  font-size:var(--f-xs);font-weight:600;color:var(--text-2);
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-2);
}

/* پنل بریف — امضای صفحه، جایگزین صحنه‌ی سه‌بعدی */
.brief-panel{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
  box-shadow:var(--sh-2);
}
.brief-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--line-2);
}
.brief-head b{font-size:var(--f-md);font-weight:700}
.brief-head .code{font-family:var(--mono)}
.brief-rows{display:flex;flex-direction:column}
.brief-rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:11px 0;
  border-bottom:1px dashed var(--line);
  font-size:var(--f-sm);
}
.brief-rows li:last-child{border-bottom:0}
.brief-rows span{color:var(--text-3)}
.brief-rows b{font-weight:600;text-align:end}
.brief-foot{font-size:var(--f-xs);color:var(--text-3)}
/* ورود پلکانی فقط روی همین پنل — تنها انیمیشن ارکستره‌ی صفحه */
.brief-rows li{opacity:0;transform:translateY(6px);animation:briefIn .5s var(--ease) forwards}
.brief-rows li:nth-child(1){animation-delay:.15s}
.brief-rows li:nth-child(2){animation-delay:.27s}
.brief-rows li:nth-child(3){animation-delay:.39s}
.brief-rows li:nth-child(4){animation-delay:.51s}
@keyframes briefIn{to{opacity:1;transform:none}}

/* هیروی صفحات داخلی */
.page-hero{
  padding-top:calc(var(--header-h) + var(--s6));
  padding-bottom:var(--s6);
}
.page-hero .container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}

/* ─────────────────────────── ۱۷. CTA ─────────────────────────── */
.cta-section{padding-block:var(--s7)}
.cta-panel{
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  text-align:center;
  padding:var(--s7) var(--s5);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-2);
}
.cta-panel p{color:var(--text-2);max-width:52ch}

/* ─────────────── ۱۸. حلقه‌ی روش کار (SVG) ─────────────── */
.loop-wrap{display:grid;place-items:center}
.loop-svg{width:min(440px,92vw);height:auto;overflow:visible}
.loop-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2}
/* دنباله‌ی نورانی که دور حلقه می‌چرخد */
.loop-dash{
  fill:none;stroke:url(#loopGrad);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:70 875;
  animation:loopmove 7s linear infinite;
  filter:drop-shadow(0 0 8px var(--accent-glow));
}
@keyframes loopmove{to{stroke-dashoffset:-945}}
.loop-node circle{
  fill:#161038;stroke:var(--line-2);stroke-width:1.5;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.loop-node text{
  fill:var(--text);font-size:15px;font-weight:700;text-anchor:middle;
  font-family:inherit;
}
.loop-center{
  fill:var(--text-2);font-size:17px;font-weight:800;text-anchor:middle;
  font-family:inherit;
}

/* ─────────────────────────── ۱۹. تماس ─────────────────────────── */
.contact-layout{
  display:grid;gap:var(--s6);
  grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  align-items:start;
}
.contact-main{min-width:0}
.contact-main .sub-title:first-child{margin-top:0}
.contact-item{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 16px;
}
.contact-item span{font-size:var(--f-xs);color:var(--text-3)}
.contact-item b{font-size:var(--f-sm);font-weight:600}
/* ردیف شماره/ایمیل با آیکون و جداکننده */
.contact-lines{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  margin-top:4px;
}
.contact-lines .ic{color:var(--accent);flex-shrink:0}
.contact-lines a{transition:color var(--t-1)}
.contact-lines a:hover{color:var(--accent)}
.contact-lines em{font-style:normal;color:var(--line-2)}
.form-status.is-error{color:var(--alert)}
.contact-inline{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  padding:14px 18px;border-radius:var(--r);
  background:var(--surf-1);border:1px solid var(--line);
  font-size:var(--f-sm);
}

.contact-form{
  position:sticky;top:calc(var(--header-h) + 16px);
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);
}
.contact-form .sub-title{margin:0 0 var(--s2)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--f-sm);font-weight:600}
.field label em{color:var(--alert);font-style:normal}
.field input,.field textarea{
  font:inherit;font-size:var(--f-sm);
  color:var(--text);
  background:rgba(0,0,0,.28);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:12px 14px;
  min-height:48px;
  width:100%;
  transition:border-color var(--t-1),background var(--t-1);
}
.field textarea{min-height:110px;resize:vertical;line-height:1.8}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.4)}
.field.error input,.field.error textarea{border-color:var(--alert)}
.field-err{font-size:var(--f-xs);color:var(--alert);min-height:1.2em}
.form-status{font-size:var(--f-sm);color:var(--accent-2)}

/* ─────────────────────────── ۲۰. فوتر ─────────────────────────── */
.site-footer{
  padding-block:var(--s7) var(--s5);
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid;gap:var(--s5);
  grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(min(100%,10rem),1fr));
}
.footer-brand{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.footer-brand p{font-size:var(--f-sm);color:var(--text-2);max-width:44ch}
.footer-legal{font-size:var(--f-xs)!important;color:var(--text-3)!important}
.footer-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.footer-col h4{font-size:var(--f-sm);margin-bottom:4px}
.footer-col a{font-size:var(--f-sm);color:var(--text-2);transition:color var(--t-1)}
.footer-col a:hover{color:var(--accent)}
.footer-socials{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:10px!important;
}
.footer-socials a{
  display:inline-flex!important;
  flex-shrink:0!important;
  align-items:center!important;
  justify-content:center!important;
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:var(--text-2)!important;
  transition:all var(--t-1) var(--ease)!important;
}
.footer-socials a:hover{
  background:var(--brand)!important;
  border-color:var(--brand-hi)!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:0 4px 12px rgba(124,58,237,.35)!important;
}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:var(--f-xs);color:var(--text-3);
}
.footer-cities{max-width:52ch;line-height:1.9}
.footer-trust{margin-top:var(--s5)}

/* ─────────────────────────── ۲۱. ریویل ─────────────────────────── */
[data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
[data-reveal].revealed{opacity:1;transform:none}

/* ───────────────── ۲۲. ریسپانسیو — فقط تغییر مفهوم چیدمان ───────────────── */

/* ۱۰۲۴px: ناوبری به درور، هیرو تک‌ستونی، فرم دیگر چسبان نیست */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  /* نسبت کادر دست‌نخورده می‌ماند: تا ۷۰۰px همان پوستر دسکتاپ نمایش داده می‌شود */
  .contact-layout{grid-template-columns:1fr}
  .contact-form{position:static}
  .footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}

  /* هدر موبایل:  [☰] [لوگو] ────── [مشاوره رایگان] */
  .menu-btn{display:flex}
  .header-cta{padding:8px 14px}
  .main-nav{
    position:fixed;
    inset-block:var(--header-h) auto;
    inset-inline:0;
    /* ارتفاع صریح و مستقل از containing block: اگر فیلتری روی هدر بنشیند
       (مثل backdrop-filter حالت اسکرول) درور دیگر جمع نمی‌شود.
       dvh نوار آدرس متغیر موبایل را حساب می‌کند، vh فالبک است. */
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    display:block;flex:none;
    background:var(--stage-deep);
    padding:var(--s5) clamp(1.1rem,5vw,2rem) calc(var(--s7) + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease),visibility var(--t-2);
  }
  body.menu-open .main-nav{opacity:1;visibility:visible;transform:none}
  /* backdrop-filter هدر را به containing block برای فرزندان position:fixed
     تبدیل می‌کند و درور را به ارتفاع هدر می‌چلاند. تا وقتی منو باز است
     خاموشش می‌کنیم — درور تمام صفحه را می‌پوشاند پس بلور اصلاً دیده نمی‌شد. */
  body.menu-open .site-header{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--stage-deep);
  }
  body.menu-open{overflow:hidden}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:4px}
  .main-nav a{
    font-size:1rem;padding:14px 16px;border-radius:var(--r);
    justify-content:flex-start;width:100%;min-height:48px;
  }
}

/* ۷۰۰px: بلوک‌های دوستونی واقعی تک‌ستونی می‌شوند */
@media (max-width:700px){
  .split{grid-template-columns:1fr}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1 1 100%}
  .cta-panel .hero-cta .btn{flex:1 1 auto}

  /* ── کروسل ۱٫۵ کارتی ──
     گریدهای کارت به یک نوار اسکرول‌شونده‌ی اسنپ‌دار تبدیل می‌شوند که تا
     لبه‌ی صفحه بلید می‌کند. هر کارت ۷۲٪ عرض می‌گیرد، پس کارت بعدی نیمه
     دیده می‌شود و کاربر می‌فهمد ادامه دارد. */
  .grid-2,.grid-3,.grid-4,
  .genre-grid,.steps,.steps-4,
  .quotes-grid,.gallery,.clip-list,.path-picker,.stats-about{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:var(--pad-x);
    margin-inline:calc(-1 * var(--pad-x));
    padding-inline:var(--pad-x);
    padding-bottom:4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .grid-2::-webkit-scrollbar,.grid-3::-webkit-scrollbar,.grid-4::-webkit-scrollbar,
  .genre-grid::-webkit-scrollbar,.steps::-webkit-scrollbar,.steps-4::-webkit-scrollbar,
  .quotes-grid::-webkit-scrollbar,.gallery::-webkit-scrollbar,.clip-list::-webkit-scrollbar,
  .path-picker::-webkit-scrollbar,.stats-about::-webkit-scrollbar{display:none}

  .grid-2 > *,.grid-3 > *,.grid-4 > *,
  .genre-grid > *,.steps > *,.steps-4 > *,
  .quotes-grid > *,.gallery > *,.clip-list > *,.path-picker > *,.stats-about > *{
    flex:0 0 72%;
    scroll-snap-align:start;
  }
  /* ژانرها کوچک‌اند — سه‌تا و نیم در هر نما */
  .genre-grid > *{flex:0 0 38%}

  .tile{width:126px;height:94px;flex:0 0 auto}
  /* نظرات در موبایل گرید روی‌هم‌چیده می‌شود، نه ردیف افقی — پس از این قانون مستثناست */
  .marquee-track:not(.testi-track){display:flex!important;flex-wrap:nowrap!important;width:max-content!important}

  /* ── نظرات: از کروسل به اسلایدر ریل‌دار ── */
  /* ریل مطلق است تا ارتفاع بخش را کارت تعیین کند، نه ۸ مهره‌ی ریل */
  .testi.is-rail{
    position:relative;
    padding-inline:var(--pad-x);
  }
  .testi.is-rail .marquee{
    width:auto;                                  /* وگرنه width:100% حاشیه را خنثی می‌کند */
    padding-block:0;                             /* لبه‌ی کارت دقیقاً روی لبه‌ی ریل بنشیند */
    margin-inline-end:calc(var(--rail-w) + var(--s3));
    -webkit-mask-image:none;mask-image:none;
  }
  /* کارت‌ها روی هم چیده می‌شوند تا محو/ظهور واقعی داشته باشیم
     و ارتفاع بخش موقع تعویض نپرد */
  .testi.is-rail .testi-track{
    display:grid;width:auto;
    animation:none;pointer-events:auto;
    transform:none!important;
  }
  .testi.is-rail .testi-card{
    grid-area:1/1;
    width:auto;min-height:0;
    opacity:0;visibility:hidden;
    transform:translateX(-16px);                 /* RTL: نظر تازه از سمت چپ می‌آید */
    filter:blur(3px);
    transition:opacity .42s var(--ease),transform .42s var(--ease),
               filter .42s var(--ease),visibility .42s;
  }
  .testi.is-rail .testi-card.is-active{
    opacity:1;visibility:visible;transform:none;filter:none;
  }
  /* اجزای داخل کارت پلکانی وارد می‌شوند */
  .testi.is-rail .testi-card > *{
    opacity:0;transform:translateY(9px);
    transition:opacity .38s var(--ease),transform .38s var(--ease);
  }
  .testi.is-rail .testi-card.is-active > *{opacity:1;transform:none}
  .testi.is-rail .testi-card.is-active .testi-tag{transition-delay:.07s}
  .testi.is-rail .testi-card.is-active p{transition-delay:.14s}
  .testi.is-rail .testi-card.is-active footer{transition-delay:.21s}
  /* ۸ مهره از کارت بلندتر است — ریل داخل خودش اسکرول می‌شود */
  .testi.is-rail .testi-rail{
    position:absolute;
    inset-block:0;
    inset-inline-end:calc(var(--pad-x) - 8px);
    width:calc(var(--rail-w) + 16px);
    padding-inline:8px;
    padding-block:6px;
    align-items:center;
    display:flex;flex-direction:column;gap:var(--s2);
    overflow-y:auto;overscroll-behavior-y:contain;
    scrollbar-width:none;
    z-index:3;
    /* ۸ مهره از کارت بلندتر است — دو سر ریل محو می‌شود تا اسکرول عمدی به‌نظر برسد */
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
            mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  }
  .testi.is-rail .testi-rail::-webkit-scrollbar{display:none}

  /* برچسب‌ها کوتاه‌اند، پس ردیفی می‌مانند — هر تب نصف عرض */
  .tabs{width:100%}
  .tab{flex:1 1 0;min-width:0;justify-content:center;padding:10px 12px;text-align:center}

  /* ── بنر موبایل: پوستر مخصوص موبایل با نسبت خودش ── */
  .hero-card{--banner-ar:1188/453}
  .hero-card-body{padding:var(--s4);gap:var(--s2)}
  .hero-card-body h1{font-size:clamp(1.35rem,1.05rem + 1.6vw,1.7rem);line-height:1.3}
  .hero-card-body h1 em{text-underline-offset:4px}
  .hero-line{font-size:var(--f-sm);gap:6px}
  .inline-pill{padding:3px 10px}
  .hero-card .btn-pill{min-height:48px;padding:12px 24px;font-size:var(--f-sm)}
  .hero-hint{font-size:var(--f-xs)}

  .work-card{width:clamp(14rem,72vw,17rem)}
  .works-section{margin-top:-15px}
}

/* ۴۸۰px: فشرده‌سازی ردیف‌های چیپ و آمار */
@media (max-width:480px){
  :root{--header-h:62px}
  .brand small{display:none}
  .brand img{height:28px}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .tab{gap:6px;padding:10px 8px;font-size:var(--f-xs)}
  .trust-row li{width:66px;height:66px}
  .spec{gap:var(--s2) var(--s3)}
  .footer-bottom{flex-direction:column}
}

/* ───────────────── ۲۲/ب. مسیر راهنما (breadcrumb) ───────────────── */
/* build.js آن را به‌عنوان اولین فرزندِ .page-hero .container تزریق می‌کند —
   نه بالای هیرو. چون .site-header ثابت و شفاف است و باید روی گرادیان بنفش
   هیرو بنشیند؛ هر نواری بالای هیرو زیر هدر پنهان می‌شود و پس‌زمینه‌ی تیره‌ی
   بدنه را زیر هدر شفاف نمایان می‌کند. */
.breadcrumb{
  /* فرزند فلکسِ .page-hero .container است؛ فاصله را همان gap می‌دهد */
  margin:0;
}
.breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  list-style:none;margin:0;padding:0;
  font-size:var(--f-xs);color:var(--text-3);
}
.breadcrumb li{display:flex;align-items:center;gap:var(--s2)}
/* جداکننده مستقیماً به شکل چپ‌گرا نوشته شده — بدون transform، چون در RTL
   و روی سافاری iOS رفتار scaleX روی شبه‌المان‌ها قابل اتکا نیست */
.breadcrumb li + li::before{content:"‹";color:var(--line-2)}
.breadcrumb a{color:var(--text-2)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current="page"]{color:var(--text-2);font-weight:600}

/* ───────────────── ۲۲/ج. سؤالات متداول ───────────────── */
.faq{
  display:grid;gap:var(--s3);
  max-width:var(--w-text);
}
@media (min-width:760px){
  .section-head.is-center{
    align-items:center;
    text-align:center;
    margin-inline:auto;
  }
  .faq{
    margin-inline:auto;
  }
}
.faq-item{
  background:var(--surf-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.faq-item[open]{border-color:var(--line-2);background:var(--surf-2)}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  padding:var(--s4);
  font-size:var(--f-md);font-weight:600;color:var(--text);
  cursor:pointer;
  /* حذف مثلث پیش‌فرض — وبکیت/سافاری iOS به قانون جدا نیاز دارد */
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px;
}
/* نشانگر باز/بسته: علامت + که در حالت باز به − تبدیل می‌شود.
   با شبه‌المان ساخته شده تا داخل summary به المان اضافه‌ای نیاز نباشد. */
.faq-item summary::after{
  content:"";
  flex:0 0 auto;
  width:16px;height:16px;margin-top:3px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/16px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 16px no-repeat;
  transition:transform var(--t-2) var(--ease);
}
.faq-item[open] summary::after{
  background:linear-gradient(var(--accent),var(--accent)) center/16px 2px no-repeat;
  transform:rotate(180deg);
}
.faq-a{
  padding:0 var(--s4) var(--s4);
  color:var(--text-2);font-size:var(--f-sm);line-height:1.85;
}
.faq-a p{margin:0}
.faq-a p + p{margin-top:var(--s2)}

/* ───────────────── ۲۳. کاهش حرکت ───────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .brief-rows li{opacity:1;transform:none}
  /* مارکی همیشه ریل افقی می‌ماند — نظرات مستثناست، آن‌جا گرید روی‌هم‌چیده است */
  .marquee-track:not(.testi-track){flex-wrap:nowrap;width:max-content}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .testi-track{padding-inline:var(--pad-x)}
  .testi.is-rail .testi-card,
  .testi.is-rail .testi-card > *{transition:none;filter:none;transform:none}
  /* تایمر خودکار زیر reduce-motion هم اجرا می‌شود (script.js آن را گیت نمی‌کند)،
     پس پنهان‌کردن کامل حلقه گمراه‌کننده بود. سوییپ خاموش می‌شود و
     مهره‌ی فعال یک حلقه‌ی کاملِ ثابت می‌گیرد — بدون وابستگی به @property. */
  .testi-rail button::before{animation:none}
  .testi-rail button[aria-selected="true"]::before{
    animation:none;              /* این سلکتور از قانون پایه specific‌تر است */
    opacity:1;
    background-image:none;
    background-color:var(--accent);
  }
}

/* ───────────────── ۲۴. چاپ ───────────────── */
@media print{
  .site-header,.skip-link,.cta-section,.menu-btn{display:none}
  body{background:#fff;color:#000}
  .route{display:block!important}
}