/* ═══════════════════════════════════════════════════════════════════
   فونت — پیدا، همان فونت اپ (لایسنس تجاری: fontiran.com)
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:Peyda;src:url(fonts/Peyda-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Peyda;src:url(fonts/Peyda-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Peyda;src:url(fonts/Peyda-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Peyda;src:url(fonts/Peyda-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Peyda;src:url(fonts/Peyda-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}

/* ═══════════════════════════════════════════════════════════════════
   توکن‌ها
   ═══════════════════════════════════════════════════════════════════
   دو خانواده‌ی رنگ اینجاست و عمداً قاطی نمی‌شوند:

   ۱. توکن‌های اپ (--bg-*, --bor-*, --txt-*, --primary-*) یک‌به‌یک از
      app/lib/core/tokens.dart. فقط داخلِ ماکاپ گوشی به کار می‌روند، چون
      آنجا داریم عکسِ خود اپ را می‌کشیم — اگر با رنگ سایت بکشیمش، دیگر
      عکسِ اپ نیست.

   ۲. توکن‌های شیشه (--g-*, --rim*, --t*) که کلِ پوسته‌ی سایت از آن‌هاست:
      سطح‌های نیمه‌شفاف روی یک بومِ گرادیانی. اینجا هیچ سطحِ ماتی نداریم.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── توکن‌های اپ (فقط داخل ماکاپ) ── */
  --bg-1:#FFFFFF; --bg-2:#F8F8F8; --bg-6:#121317;
  --primary-bg-1:#EFFEF5; --primary-bg-4:#11E775;
  --bor-1:#F5F5F5; --bor-2:#EBEBEB;
  --txt-1:#090A0C; --txt-2:#353D44; --txt-4:#777E8B; --txt-6:#FFFFFF;
  --primary-txt-3:#075E4B;
  --danger:#E5484D;

  /* ── بوم: چهار هاله‌ی رنگی که آرام جابه‌جا می‌شوند ──
     کانال‌ها جدا نوشته شده‌اند تا بشود همان رنگ را با آلفای صفر تمام کرد.
     ⚠️ در گرادیان هرگز `transparent` ننویس: یعنی rgba(0,0,0,0) و رنگ در
     میانه از خاکستری رد می‌شود — هاله‌ها را دقیقاً همین گِل‌آلود می‌کرد. */
  --canvas:#E7EBF1;
  /* ⚠️ فقط دو لهجه، هر دو سرد و هم‌خانواده. چهار رنگِ جدا (سبز/آبی/بنفش/
     کهربایی) بوم را رنگین‌کمان می‌کرد: هر بخش از صفحه رنگِ خودش را می‌گرفت
     و شیشه به‌جای یک ماده، چند ماده به نظر می‌رسید. */
  --t1:150 226 196;   /* مینت — همان لهجه‌ی برند، اشباع‌شکسته */
  --t2:158 176 202;   /* آبی‌خاکستری سرد — نقشش سایه است نه رنگ دوم */

  /* ── شیشه: دو عمق ──
     hi برجسته (نوار بالا، دکمه‌ی شیشه‌ای)، md سطح اصلی (کارت) */
  --g-hi:rgba(255,255,255,.66);
  --g-md:rgba(255,255,255,.42);

  /* لبه‌ی نوری — چیزی که شیشه را شیشه می‌کند */
  --rim:rgba(255,255,255,.95);
  --rim-soft:rgba(255,255,255,.55);
  --rim-low:rgba(14,18,28,.06);

  --blur-l:40px;   /* تنها blurِ باقی‌مانده: پشتِ نوار بالا */

  /* متنِ سایت — کمی نرم‌تر از متنِ اپ تا روی شیشه سنگینی نکند */
  --ink-1:#0B0E14; --ink-2:#39414F; --ink-3:#5C6675; --ink-4:#79839A;
  --accent:#06B36B;                      /* سبزِ خوانا روی شیشه‌ی روشن */
  --accent-deep:#04513A;
  --rose:#E5484D;

  /* radius — همه‌جا بزرگ و پیوسته */
  --r-10:10px; --r-14:14px; --r-18:18px; --r-26:26px; --r-34:34px; --r-44:44px;
  --r-pill:999px;

  --s-4:4px; --s-6:6px; --s-8:8px; --s-10:10px; --s-12:12px;
  --s-16:16px; --s-20:20px; --s-24:24px; --s-32:32px; --s-40:40px;
  --control-h:56px;

  /* حرکت — همان فنرهای Motion در اپ */
  --fast:180ms; --standard:320ms; --slow:460ms;
  --spring:cubic-bezier(.22,1.2,.36,1);
  --spring-tight:cubic-bezier(.32,.94,.28,1);
  --exit:cubic-bezier(.55,.055,.675,.19);

  /* سایه‌ها رنگی‌اند نه خاکستری — سایه‌ی خاکستری روی شیشه گِل‌آلود می‌شود */
  --lift-s:0 2px 10px -4px rgba(24,40,72,.16);
  --lift-m:0 10px 30px -12px rgba(24,40,72,.24);
  --lift-l:0 30px 70px -28px rgba(24,40,72,.34);
}

/* squircle واقعی iOS — با fallback به گوشه‌ی گرد در مرورگرهای قدیمی‌تر */
@supports (corner-shape: squircle){
  .sq{corner-shape:squircle}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; color:var(--ink-1); background:var(--canvas);
  font-family:Peyda,system-ui,"Segoe UI",sans-serif; font-weight:400;
  font-size:16px; line-height:1.75; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
body > main{flex:1 0 auto; position:relative; z-index:1}

/* ═══════════ بوم ═══════════
   سه هاله‌ی بزرگ، ثابت و بی‌حرکت. قبلاً یک لایه‌ی fixed به اندازه‌ی
   ۱۴۰vmax با filter:blur(20px) بود که ۲۸ ثانیه‌ای هم جابه‌جا می‌شد — روی
   هر فریمِ اسکرول دوباره رستر می‌شد و کلِ صفحه را کند و مه‌آلود می‌کرد.
   گرادیانِ ساده همان حسِ نرم را می‌دهد بی‌آنکه چیزی رستر شود. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70vmax 56vmax at 8% -6%,  rgb(var(--t1)/.55), rgb(var(--t1)/0) 62%),
    radial-gradient(66vmax 54vmax at 100% 2%, rgb(var(--t2)/.46), rgb(var(--t2)/0) 60%),
    radial-gradient(60vmax 50vmax at 50% 108%,rgb(var(--t1)/.32), rgb(var(--t1)/0) 60%);
}

/* دانه‌ی ریز — بدون این، گرادیانِ بزرگ روی نمایشگر ۸ بیتی نواری می‌شود */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.3;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.35; font-weight:800; letter-spacing:-.018em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{width:min(1180px,100% - 48px); margin-inline:auto}
@media (max-width:600px){ .wrap{width:calc(100% - 28px)} }

/* ═══════════════════════════════════════════════════════════════════
   شیشه — یک ماده، سه عمق
   ═══════════════════════════════════════════════════════════════════
   هر سطحِ شیشه‌ای سه چیز دارد و هر سه لازم‌اند:
     · یک سفیدِ نیمه‌شفاف که رنگِ بوم از زیرش رد شود
     · لبه‌ی نوری در بالا و لبه‌ی تیره‌ی خیلی کم‌رنگ در پایین (ضخامتِ ماده)
     · سایه‌ی رنگی، نه خاکستری (وگرنه روی بومِ رنگی گِل‌آلود می‌شود)

   ⚠️ backdrop-filter فقط روی نوار بالا مانده. قبلاً روی همین فهرستِ بلند
   بود: هر کارت یک لایه‌ی رستر جدا می‌ساخت، متنِ رویش تار می‌شد و اسکرول
   روی لپ‌تاپ معمولی می‌لنگید. بومِ ثابت پشتِ کارت‌ها تصویری ندارد که تار
   کردنش چیزی عوض کند — فقط یک گرادیانِ ملایم است.
   ═══════════════════════════════════════════════════════════════════ */
.glass,.card,.nav-in,.pin,.b-card,.beat,.price-card,.chart-card,.q,.toc,.prose,.post-card,
.feature-card,.trust,.f-store a,.contact-grid .card,.seg,.chip,.note{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28) 60%),
    var(--g-md);
  border:1px solid var(--rim-soft);
  box-shadow:
    inset 0 1px 0 var(--rim),
    inset 0 -1px 0 var(--rim-low),
    var(--lift-s);
}

/* درخششِ نقطه‌ای — نشانگر که روی سطح می‌رود، نور روی شیشه راه می‌افتد.
   --px/--py را همان اسکریپت tilt ست می‌کند. */
.card::after,.pin::after,.chart-card::after,.post-card::after,.feature-card::after,.b-card::after,.beat::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity var(--standard) ease;
  background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),
             rgba(255,255,255,.55),transparent 62%);
}
.card:hover::after,.pin:hover::after,.chart-card:hover::after,
.post-card:hover::after,.feature-card:hover::after,.b-card:hover::after,.beat:hover::after{opacity:1}

.card{border-radius:var(--r-26); padding:var(--s-24)}

/* ═══════════ نوار بالا — جزیره‌ی شیشه‌ای ═══════════ */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:80;
  padding:var(--s-12) 0;
  transition:padding var(--standard) var(--spring);
}
.nav .wrap{transition:width var(--slow) var(--spring)}
.nav.stuck .wrap{width:min(960px,100% - 48px)}

.nav-in{
  display:flex; align-items:center; gap:var(--s-12);
  padding:var(--s-8); border-radius:var(--r-pill);
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 55%),
    var(--g-hi);
  -webkit-backdrop-filter:blur(var(--blur-l)) saturate(190%);
  backdrop-filter:blur(var(--blur-l)) saturate(190%);
  transition:box-shadow var(--standard) ease, background var(--standard) ease,
             padding var(--standard) var(--spring);
}
.nav.stuck .nav-in{box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}

.brand{
  display:flex; align-items:center; gap:var(--s-8);
  font-weight:800; font-size:18px; letter-spacing:-.02em;
  padding:var(--s-4) var(--s-12) var(--s-4) var(--s-4);
  border-radius:var(--r-pill);
  transition:background var(--fast) var(--spring);
}
.nav .brand:hover{background:rgba(255,255,255,.5)}
.brand svg,.brand img{
  width:36px; height:36px; flex:none; padding:2px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 var(--rim), 0 1px 3px rgba(24,40,72,.14);
}

.nav-links{
  display:flex; align-items:center; gap:2px;
  margin-inline:auto; padding:3px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 var(--rim-low);
}
.nav-links a{
  padding:8px var(--s-16); border-radius:var(--r-pill);
  font-size:13px; font-weight:500; white-space:nowrap; color:var(--ink-2);
  transition:background var(--standard) var(--spring), color var(--fast) linear,
             box-shadow var(--standard) ease;
}
.nav-links a:hover{background:rgba(255,255,255,.55); color:var(--ink-1)}
.nav-links a.on{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));
  color:var(--ink-1); font-weight:600;
  box-shadow:inset 0 1px 0 #fff, 0 1px 4px rgba(24,40,72,.16);
}

@media (max-width:760px){
  .nav-links a{padding:8px var(--s-12); font-size:12px}
  .brand span{display:none}
  .brand{padding-inline:var(--s-4)}
}
@media (max-width:520px){
  .nav-links{display:none}
  .nav-in .btn{margin-inline-start:auto}
}

/* ═══════════ دکمه‌ها ═══════════
   دکمه‌ی اصلی جامد و تیره است: روی بومِ شیشه‌ای باید یک لنگرِ مات باشد
   وگرنه چشم نمی‌داند کجا را بزند. بقیه شیشه‌اند. */
.btn{
  --lift:0px;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-8);
  height:var(--control-h); padding-inline:var(--s-32); border:0; cursor:pointer;
  border-radius:var(--r-pill); font-size:14.5px; font-weight:600; white-space:nowrap;
  background:linear-gradient(180deg,#22262F,#0C0E13);
  color:#fff;
  transform:translateY(var(--lift)) scale(var(--sc,1));
  transition:transform var(--standard) var(--spring), box-shadow var(--standard) ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--lift-m);
}
/* برقِ متحرک روی لبه‌ی بالا — همان براقیِ شیشه‌ی iOS */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);
  transform:translateX(-120%);
  transition:transform 700ms var(--spring-tight);
}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{--lift:-3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--lift-l)}
.btn:active{--sc:.965; transition-duration:var(--fast)}
.btn-sm{height:44px; padding-inline:var(--s-20); font-size:13px}

.btn-ghost{
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.12) 55%),
    var(--g-hi);
  color:var(--ink-1);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-soft), var(--lift-s);
}
.btn-ghost::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%)}
.btn-ghost:hover{box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim), var(--lift-m)}

.btn-accent{
  background:linear-gradient(180deg,#2BF58C,#06B36B);
  color:#04351F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 30px -12px rgba(6,179,107,.7);
}

/* «به‌زودی» — تا وقتی لینک دانلود خالی است، دکمه نباید شبیه دکمه‌ی زنده باشد */
.btn[aria-disabled="true"]{
  cursor:default; color:var(--ink-4);
  background:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-soft);
}
.btn[aria-disabled="true"]::after{display:none}
.btn[aria-disabled="true"]:hover{--lift:0px; box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-soft)}
.cta .btn[aria-disabled="true"]{background:rgba(255,255,255,.12); color:rgba(255,255,255,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.cta .btn[aria-disabled="true"]:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.btn-accent:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 18px 44px -16px rgba(6,179,107,.8)}

/* ═══════════ نشان‌ها و چیپ‌ها ═══════════ */
.badge{
  display:inline-flex; align-items:center; gap:var(--s-8);
  height:34px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.74);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-soft);
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  padding-inline:var(--s-16);
}
.badge .dot{
  width:8px; height:8px; border-radius:99px; background:var(--accent);
  box-shadow:0 0 0 0 rgba(6,179,107,.55); animation:pulse 2.4s var(--spring-tight) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(6,179,107,.5)}
  70%{box-shadow:0 0 0 10px rgba(6,179,107,0)}
  100%{box-shadow:0 0 0 0 rgba(6,179,107,0)}
}

/* ═══════════ ظاهر شدن با اسکرول ═══════════
   ⚠️ اینجا قبلاً `filter:blur(8px)` هم بود. نتیجه‌اش این می‌شد که هر بخشی
   که هنوز نوبتش نرسیده بود، به‌جای نبودن، *تارِ* شکسته به نظر می‌رسید — و
   چون هیرو هم همین کلاس را داشت، اولین چیزی که آدم از سایت می‌دید یک صفحه‌ی
   محوِ خالی بود تا وقتی جاوااسکریپت برسد. حالا فقط یک بالا آمدنِ کوتاه است
   و هیچ‌چیزِ بالای خط تا به جاوااسکریپت بند نیست. */
.js .rise{opacity:0; transform:translateY(14px)}
/* سربرگِ هر صفحه همیشه بالای خط تا است. اگر پشتِ این انیمیشن قایم شود،
   اولین چیزی که کاربر می‌بیند تا رسیدنِ جاوااسکریپت، جای خالیِ آن است. */
.js .hero .rise,.js .page-hero .rise{opacity:1; transform:none}
.js .rise.in{
  opacity:1; transform:none;
  transition:opacity 380ms ease, transform 520ms var(--spring);
  transition-delay:var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1; transform:none}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* نوار پیشرفت اسکرول */
.progress{
  position:fixed; inset-block-start:0; inset-inline:0; height:2px; z-index:90;
  background:linear-gradient(90deg,var(--accent),#2BF58C);
  transform-origin:right; transform:scaleX(0);
}

/* ═══════════ بخش‌ها ═══════════
   هیچ بخشی خطِ جداکننده ندارد و هیچ‌کدام زمینه‌ی مات نمی‌گیرند — بوم از
   زیر همه رد می‌شود و جدایی از فاصله و عمق می‌آید، نه از border. */
section{padding:clamp(72px,9vw,120px) 0; position:relative}
.sec-head{max-width:64ch; margin-bottom:var(--s-40)}
.sec-head h2{font-size:clamp(28px,4.2vw,46px); margin:var(--s-16) 0 var(--s-12); line-height:1.25}
.sec-head p{color:var(--ink-3); font-size:clamp(15px,1.6vw,17px)}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; color:var(--accent-deep);
  letter-spacing:.06em; padding:5px var(--s-12); border-radius:var(--r-pill);
  background:rgba(255,255,255,.7); box-shadow:inset 0 0 0 1px var(--rim-soft);
}

/* ═══════════ HERO ═══════════ */
.hero{position:relative; padding:clamp(130px,16vw,170px) 0 clamp(64px,8vw,104px)}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,64px); align-items:center}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:56px} }

.hero h1{
  font-size:clamp(36px,6vw,66px); line-height:1.18; margin:var(--s-20) 0 var(--s-16);
  letter-spacing:-.03em;
}
.hero h1 .hl{position:relative; white-space:nowrap; color:var(--accent-deep)}
.hero h1 .hl::after{
  content:""; position:absolute; inset-inline:-12px; bottom:-.02em; height:.42em; z-index:-1;
  border-radius:var(--r-14);
  background:linear-gradient(180deg,rgba(43,245,140,.55),rgba(6,179,107,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transform:scaleX(var(--hl,0)); transform-origin:right;
  transition:transform 900ms var(--spring) 500ms;
}
.hero p.lead{font-size:clamp(15.5px,1.7vw,18.5px); color:var(--ink-3); max-width:48ch; line-height:1.85}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s-12); margin-top:var(--s-32)}

/* سه گواه — کپسول‌های شیشه‌ای */
.proof{display:flex; flex-wrap:wrap; gap:var(--s-8); margin-top:var(--s-24)}
.proof span{
  display:inline-flex; align-items:center; gap:var(--s-8);
  padding:10px var(--s-16); border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-soft);
  font-size:12.5px; font-weight:500; color:var(--ink-2);
}
.proof svg{width:15px; height:15px; flex:none; color:var(--accent)}

/* هاله‌ی موضعی و شبکه‌ی پس‌زمینه حذف شدند: بومِ ثابتِ body همان کار را
   یک‌دست‌تر می‌کند، و هاله‌ای که داخل مرز بخش بریده می‌شد روی صفحه‌های
   داخلی یک درزِ افقیِ دیدنی می‌ساخت. مارک‌آپشان هم از ویوها پاک شد. */

/* ═══════════ کارت قیمتِ هیرو ═══════════
   همان چیزی که ماکاپِ گوشی می‌خواست نشان بدهد، در اندازه‌ای که خوانده
   می‌شود. تکرارِ صفحه‌ی خودرو نیست — آن یکی پایین‌تر، در بخشِ خودش است. */
.price-card{
  border-radius:var(--r-34); padding:clamp(20px,3vw,30px);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-l);
}
.pc-head{display:flex; align-items:flex-start; gap:var(--s-12); margin-bottom:var(--s-20)}
.pc-head b{display:block; font-size:16.5px; letter-spacing:-.02em}
.pc-head span{font-size:12.5px; color:var(--ink-4)}
.pc-head .chg{margin-inline-start:auto; font-size:12px; padding:4px var(--s-10)}

.pc-price{display:flex; align-items:flex-end; gap:var(--s-8)}
.pc-price .big{
  font-size:clamp(28px,4.4vw,42px); font-weight:800; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.pc-price .unit{font-size:13px; color:var(--ink-4); padding-bottom:6px}
.pc-ago{margin-top:var(--s-8); font-size:12.5px; color:var(--ink-4)}

.pc-spark{width:100%; height:96px; margin:var(--s-16) 0; overflow:visible}
.pc-spark .area{fill:url(#gHero)}
.pc-spark .line{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}

.pc-split{display:flex; gap:var(--s-10)}
.pc-split div{
  flex:1; border-radius:var(--r-18); padding:var(--s-12) var(--s-16);
  background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px var(--rim-soft);
}
.pc-split span{display:block; font-size:11.5px; color:var(--ink-4)}
.pc-split b{font-size:14px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.pc-split .mk{
  background:linear-gradient(180deg,rgba(43,245,140,.26),rgba(6,179,107,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.pc-split .mk span,.pc-split .mk b{color:var(--accent-deep)}

.pc-alerts{display:grid; gap:var(--s-8); margin-top:var(--s-16)}
.pc-alerts span{
  display:flex; align-items:center; gap:var(--s-10);
  padding:var(--s-10) var(--s-16); border-radius:var(--r-18);
  background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px var(--rim-soft);
  font-size:12.5px; font-weight:500; color:var(--ink-2);
}
.pc-alerts em{margin-inline-start:auto; font-style:normal; font-size:11px; color:var(--ink-4)}
.pc-alerts .d{width:8px; height:8px; border-radius:99px; flex:none}
.pc-alerts .d.up{background:var(--rose)}
.pc-alerts .d.down{background:var(--accent)}

/* ═══════════ ماکاپ گوشی ═══════════
   داخلِ صفحه با توکن‌های اپ کشیده می‌شود (عکسِ اپ است)، ولی بدنه‌اش
   شیشه‌ای است تا روی بوم شناور بماند.

   ⚠️ صاف می‌ایستد. قبلاً با نشانگرِ ماوس کج می‌شد و با اسکرول هم بالا و
   پایین می‌رفت؛ عکسِ اپ که کج باشد، دیگر نمی‌شود خواندش. */
.phone-stage{display:flex; justify-content:center}
.phone{
  position:relative; width:min(348px,84vw); aspect-ratio:393/820;
  border-radius:var(--r-44); padding:11px;
  background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  box-shadow:
    inset 0 1px 0 var(--rim),
    inset 0 0 0 1px var(--rim-soft),
    0 40px 90px -30px rgba(24,40,72,.45),
    0 8px 24px -12px rgba(24,40,72,.3);
}
.notch{
  position:absolute; inset-block-start:9px; inset-inline:0; margin-inline:auto; z-index:6;
  width:102px; height:28px; border-radius:99px; background:#0C0D10;
}
/* یک صفحه بیشتر نیست. قبلاً پنج صفحه روی هم بودند و با کلاس `on` بین‌شان
   فید می‌شد؛ با رفتنِ روایتِ اسکرولی، آن چیدمان هم دیگر لازم نیست. */
.stack{position:relative; height:100%; border-radius:34px; overflow:hidden; background:var(--bg-2)}
.screen{height:100%; display:flex; flex-direction:column; background:var(--bg-2)}

.s-head{
  padding:44px var(--s-16) var(--s-12); display:flex; align-items:center; gap:var(--s-8);
  background:var(--bg-1); border-bottom:1px solid var(--bor-1);
}
.s-head b{font-size:15px; margin-inline-end:var(--s-4)}
.s-head .back{order:-1; font-size:16px; color:var(--txt-4); line-height:1}
.chg{
  font-size:10px; font-weight:600; padding:2px var(--s-8); border-radius:var(--r-pill);
  display:inline-block; margin-inline-start:var(--s-6); font-variant-numeric:tabular-nums;
}
.chg.up{background:rgba(229,72,77,.12); color:var(--danger)}
.chg.down{background:rgba(17,231,117,.16); color:var(--primary-txt-3)}
.s-tabs{
  margin-top:auto; display:flex; justify-content:space-around; padding:var(--s-12) 0 var(--s-20);
  background:rgba(255,255,255,.7); border-top:1px solid var(--bor-1);
}
.s-tabs i{width:22px; height:22px; border-radius:7px; background:var(--bor-2); display:block}
.s-tabs i.on{background:var(--bg-6)}

.s-detail{padding:var(--s-16) var(--s-16) 0; background:var(--bg-1); flex:1; overflow:hidden}
.s-price{display:flex; align-items:flex-end; gap:var(--s-8)}
.s-price .big{font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.2; color:var(--txt-1)}
.s-price .unit{font-size:11px; color:var(--txt-4); padding-bottom:3px}
.s-meta{display:flex; align-items:center; gap:var(--s-8); margin-top:var(--s-8)}
.s-meta .ago{font-size:10.5px; color:var(--txt-4)}
.s-split{display:flex; gap:var(--s-8); margin-top:var(--s-16)}
.s-split div{flex:1; border-radius:var(--r-14); padding:var(--s-10) var(--s-12); background:var(--bg-2); border:1px solid var(--bor-1)}
.s-split span{display:block; font-size:10px; color:var(--txt-4)}
.s-split b{font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--txt-1)}
.s-split .mk{background:var(--primary-bg-1); border-color:transparent; color:var(--primary-txt-3)}
.s-split .mk span{color:inherit; opacity:.72}
.s-split .mk b{color:var(--primary-txt-3)}
.detail-chart{width:100%; height:76px; margin:var(--s-16) 0 var(--s-8); overflow:visible}
.detail-chart .area{fill:url(#g2)}
.detail-chart .line{fill:none; stroke:var(--primary-bg-4); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.s-spec{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s-10) 0; border-top:1px solid var(--bor-1); font-size:11px; color:var(--txt-4);
}
.s-spec b{font-size:11px; font-weight:600; color:var(--txt-1)}
.s-cta{
  margin:var(--s-12) 0 var(--s-16); height:38px; border-radius:var(--r-pill);
  background:var(--bg-6); color:var(--txt-6); font-size:11.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:var(--s-6);
}
/* ═══════════ امکانات ═══════════
   ⚠️ اینجا قبلاً یک «روایت اسکرولی» بود: یک گوشیِ چسبیده در ستونِ کنار که
   با اسکرول صفحه‌اش عوض می‌شد. سه هزینه داشت و هیچ‌کدام را پس نمی‌داد —
   پنج ماکاپِ قلابیِ اضافه در HTML، یک IntersectionObserver که با اسکرولِ
   تند یک قدم عقب می‌ماند، و ۳۰vh فضای خالی زیر آخرین مورد تا گوشی وقت
   داشته باشد. حالا پنج کارت است؛ هر پنج مورد یک‌جا دیده می‌شوند.

   ⚠️ پنج کارت در سه ستون همیشه یک خانه‌ی خالی می‌گذارد. شبکه شش‌ستونی است
   و کارت‌ها ۳+۳ و ۲+۲+۲ می‌شوند: دو ردیفِ پر، بدون سوراخ. */
.beats{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-16); align-items:stretch}
.beat{
  display:flex; flex-direction:column; grid-column:span 2;
  padding:var(--s-24); border-radius:var(--r-26);
  transition:transform var(--standard) var(--spring), box-shadow var(--standard) ease;
}
.beat.wide{grid-column:span 3}
.beat:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}

@media (max-width:980px){
  .beats{grid-template-columns:repeat(2,1fr)}
  .beat,.beat.wide{grid-column:span 1}
  /* پنج کارت در دو ستون: آخری تنها می‌ماند، پس کلِ ردیف را می‌گیرد */
  .beat:last-child{grid-column:span 2}
}
@media (max-width:620px){
  .beats{grid-template-columns:1fr}
  .beat,.beat.wide,.beat:last-child{grid-column:auto}
}

.beat .n{
  display:inline-flex; align-items:center; align-self:flex-start; gap:var(--s-8);
  font-size:11.5px; font-weight:700; color:var(--accent-deep);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
  padding:4px var(--s-10); border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(43,245,140,.28),rgba(6,179,107,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.beat h3{font-size:clamp(18px,2.1vw,22px); margin:var(--s-16) 0 var(--s-8); letter-spacing:-.025em}
.beat p{font-size:14.5px; color:var(--ink-3); line-height:1.9}
/* چیپ‌های تصویری ته کارت می‌چسبند تا با کارت‌های کناری یک خط بشوند */
.beat .art{margin-top:auto; padding-top:var(--s-16)}

/* ═══════════ کنترل بخش‌بندی ═══════════ */
.seg{
  display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 var(--rim-low);
  border:0;
}
.seg button{
  border:0; cursor:pointer; background:transparent; color:var(--ink-3);
  height:36px; padding-inline:var(--s-16); border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; white-space:nowrap;
  transition:background var(--standard) var(--spring), color var(--fast) linear,
             box-shadow var(--standard) ease, transform var(--fast) var(--spring);
}
.seg button:hover{color:var(--ink-1)}
.seg button:active{transform:scale(.94)}
.seg button.on{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.76));
  color:var(--ink-1);
  box-shadow:inset 0 1px 0 #fff, 0 2px 8px -2px rgba(24,40,72,.28);
}

/* ═══════════ نمودار قیمت ═══════════ */
.chart-card{border-radius:var(--r-34); padding:clamp(20px,3vw,34px);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}
.chart-top{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-16); margin-bottom:var(--s-24)}
.chart-title b{display:block; font-size:18px; letter-spacing:-.02em}
.chart-title span{font-size:12.5px; color:var(--ink-4)}
.chart-top .seg{margin-inline-start:auto}
@media (max-width:640px){
  .chart-top .seg{margin-inline-start:0; width:100%; justify-content:space-between}
  .seg button{flex:1; padding-inline:var(--s-8)}
}

.plot{position:relative; touch-action:pan-y}
.plot svg{width:100%; height:clamp(200px,28vw,310px); overflow:visible; display:block}
.plot .gridline{stroke:rgba(14,18,28,.07); stroke-width:1}
/* برچسب‌های محور. بدون این‌ها نمودار فقط با هاور خوانده می‌شد — یعنی روی
   موبایل اصلاً خوانده نمی‌شد. */
.plot .tick{fill:var(--ink-4); font-size:10.5px; font-family:inherit}
.plot .tick.y{text-anchor:end}
.plot .tick.x{text-anchor:middle}
/* محور زمان چپ‌به‌راست کشیده می‌شود (قدیمی‌ترین نقطه سمت چپ)، پس برچسبش
   هم باید همان‌طور بنشیند وگرنه تاریخ‌ها آینه‌ی نمودار می‌شوند */
.axis-x{display:flex; direction:ltr; justify-content:space-between; margin-top:var(--s-8);
  padding-inline-start:56px; font-size:11px; color:var(--ink-4); font-variant-numeric:tabular-nums}
.plot .area{fill:url(#gPlot)}
.plot .mk{fill:none; stroke:var(--accent); stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 4px 10px rgba(6,179,107,.4))}
.plot .fc{fill:none; stroke:var(--ink-4); stroke-width:1.5; stroke-dasharray:5 5; opacity:.55}
.plot .draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.3s var(--spring-tight) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.plot .guide{stroke:var(--ink-4); stroke-width:1; stroke-dasharray:3 4; opacity:0; transition:opacity var(--fast) linear}
.plot .knob{fill:#fff; stroke:var(--accent); stroke-width:3.5; opacity:0; transition:opacity var(--fast) linear;
  filter:drop-shadow(0 3px 8px rgba(6,179,107,.5))}
.plot.live .guide,.plot.live .knob{opacity:1}
.tip{
  position:absolute; top:0; left:0; z-index:3;
  transform:translate(-50%,calc(-100% - 14px)); pointer-events:none; opacity:0;
  padding:var(--s-10) var(--s-16); border-radius:var(--r-14);
  background:rgba(14,18,28,.82); color:#fff; font-size:11.5px; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--lift-m);
  transition:opacity var(--fast) linear;
}
.tip b{display:block; font-size:13.5px; font-variant-numeric:tabular-nums}
.tip span{opacity:.62}
.plot.live .tip{opacity:1}

.legend{display:flex; flex-wrap:wrap; gap:var(--s-16); margin-top:var(--s-16); font-size:12px; color:var(--ink-4)}
.legend i{display:inline-block; width:16px; height:3px; border-radius:99px; margin-inline-end:var(--s-6); vertical-align:middle}
.legend .mk i{background:var(--accent)}
.legend .fc i{background:repeating-linear-gradient(90deg,var(--ink-4) 0 4px,transparent 4px 8px)}

.chart-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-12); margin-top:var(--s-24);
  padding-top:var(--s-20); border-top:1px solid var(--rim-soft);
}
.chart-stats div span{display:block; font-size:11.5px; color:var(--ink-4)}
.chart-stats div b{font-size:clamp(16px,2vw,21px); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.chart-stats .neg b{color:var(--rose)}
.chart-stats .pos b{color:var(--accent-deep)}

/* ═══════════ بودجه ═══════════ */
.chips{display:flex; flex-wrap:wrap; gap:var(--s-8); margin-bottom:var(--s-24)}
.chip{
  height:46px; padding-inline:var(--s-20); border-radius:var(--r-pill); cursor:pointer;
  font-size:13px; font-weight:500; color:var(--ink-2);
  transition:transform var(--standard) var(--spring), color var(--fast) linear,
             background var(--standard) ease, box-shadow var(--standard) ease;
}
.chip:hover{transform:translateY(-2px)}
.chip.on{
  background:linear-gradient(180deg,#22262F,#0C0E13); color:#fff;
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--lift-m);
}

/* ⚠️ `align-self:start` بود، پس هر کارت قدِ متنِ خودش را می‌گرفت: اسمِ
   دوخطی کارت را بلندتر می‌کرد و قیمت و میله‌ی کنارش می‌افتاد روی یک خطِ
   دیگر. ردیفی که سه عدد در سه ارتفاعِ مختلف نشان بدهد، خوانده نمی‌شود. */
/* auto-fit و نه repeat(4): بازه‌ای که سه خودرو دارد، سه کارتِ پهن می‌گیرد
   نه سه کارت و یک خانه‌ی خالی. سقفِ هر بازه چهار تاست (LandingMarket). */
.budget-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-12); min-height:200px}
@media (max-width:520px){ .budget-grid{grid-template-columns:1fr} }
.b-card{
  display:flex; flex-direction:column;
  border-radius:var(--r-26); padding:var(--s-20);
  animation:pop 380ms var(--spring) both; animation-delay:var(--i,0ms);
  transition:transform var(--standard) var(--spring), box-shadow var(--standard) ease;
}
.b-card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}
@keyframes pop{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.b-card .nm{font-size:14.5px; font-weight:600; line-height:1.6}
.b-card .br{font-size:12px; color:var(--ink-4); margin-bottom:var(--s-16)}
/* قیمت و میله ته کارت‌اند، پس در همه‌ی کارت‌های یک ردیف هم‌خط می‌مانند */
.b-card .pr{margin-top:auto; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.b-card .unit{font-size:12px; font-weight:400; color:var(--ink-4)}
.b-bar{height:6px; border-radius:99px; background:rgba(14,18,28,.08); margin-top:var(--s-12); overflow:hidden}
.b-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),#2BF58C); width:var(--w)}
.empty{grid-column:1/-1; color:var(--ink-4); font-size:14px; padding:var(--s-24) 0}

/* کارت مشاوره — سطحِ معکوس، تنها جای تیره‌ی صفحه بعد از CTA */
.consult{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-20);
  margin-top:var(--s-24); padding:var(--s-24); border-radius:var(--r-34);
  background:linear-gradient(160deg,rgba(24,28,38,.92),rgba(10,12,18,.96));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--lift-l);
}
.consult .ico{margin:0; background:rgba(255,255,255,.1); color:#2BF58C; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.consult div{flex:1 1 260px}
.consult b{display:block; font-size:16.5px; margin-bottom:var(--s-6)}
.consult p{font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.8}
.consult .btn{background:linear-gradient(180deg,#2BF58C,#06B36B); color:#04351F}

/* نوار برندها — یک ردیفِ ساده که می‌پیچد.
   ⚠️ قبلاً نوارِ بی‌پایانِ متحرک بود: ‎width:max-content‎ داشت، پس عرضِ
   سندِ صفحه را از عرضِ پنجره بیشتر می‌کرد و فقط `overflow-x:hidden` روی
   body جلوی نوارِ اسکرولِ افقی را می‌گرفت. دوازده اسمِ برند که همیشه
   همان‌اند، ارزشِ یک انیمیشنِ ۳۸ ثانیه‌ایِ دائمی را نداشت. */
.marquee{display:flex; flex-wrap:wrap; gap:var(--s-8); margin-top:var(--s-32)}
.marquee span{
  padding:8px var(--s-16); border-radius:var(--r-pill); white-space:nowrap;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-soft);
  font-size:12.5px; font-weight:500; color:var(--ink-2);
}

/* ═══════════ تور صفحه‌ی خودرو ═══════════
   ⚠️ `align-items:center` بود: سه کارتِ هر ستون وسطِ یک گوشیِ ۸۰۰ پیکسلی
   شناور می‌ماندند و هیچ‌کدام روبه‌روی چیزی که توضیح می‌دهند نمی‌نشست.
   حالا از بالا می‌چینند و با فاصله‌ی برابر تا ته گوشی کشیده می‌شوند. */
.tour-sec{position:relative}
.tour{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(16px,3vw,40px); align-items:stretch}
.tour-col{display:grid; gap:var(--s-16); align-content:space-between}
.pin{
  padding:var(--s-16) var(--s-20); border-radius:var(--r-26);
  transition:transform var(--standard) var(--spring), box-shadow var(--standard) ease;
}
.pin:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}
.pin b{display:block; font-size:14.5px; margin-bottom:var(--s-6)}
.pin span{font-size:12.5px; color:var(--ink-3); line-height:1.8}
@media (max-width:980px){
  .tour{grid-template-columns:1fr; justify-items:center}
  .tour-col{grid-template-columns:1fr 1fr; width:100%; margin-top:var(--s-24)}
  .tour-col.end{margin-top:var(--s-16)}
}
@media (max-width:560px){ .tour-col{grid-template-columns:1fr} }

/* ═══════════ بنتو و مراحل ═══════════ */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-16)}
.bento .card{
  transition:transform 520ms var(--spring), box-shadow var(--standard) ease;
}
.bento .card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}
.b-6{grid-column:span 6} .b-4{grid-column:span 4} .b-3{grid-column:span 3} .b-2{grid-column:span 2}
@media (max-width:900px){ .b-4,.b-3,.b-2{grid-column:span 6} }
.ico{
  width:50px; height:50px; border-radius:var(--r-18); display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(43,245,140,.32),rgba(6,179,107,.16));
  color:var(--accent-deep); margin-bottom:var(--s-16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.ico svg{width:24px; height:24px}
.bento h3{font-size:16.5px; font-weight:700; margin-bottom:var(--s-8)}
.bento p{font-size:14.5px; color:var(--ink-3); line-height:1.85}

/* شماره‌ی مراحل باید فارسی باشد مثل بقیه‌ی ارقام صفحه — قبلاً به یک
   فیچر فونت (ss01) بند بود و با عوض شدن فونت بی‌صدا لاتین می‌شد */
@counter-style fa-digits{system:numeric; symbols:"۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹"}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-20); counter-reset:s}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-top:var(--s-40)}
.step::before{
  counter-increment:s; content:counter(s,fa-digits);
  position:absolute; inset-block-start:0; inset-inline-start:0;
  width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:linear-gradient(180deg,#22262F,#0C0E13); color:#fff; font-weight:700; font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--lift-s);
}
.step h3{font-size:17px; margin:var(--s-24) 0 var(--s-8)}
.step p{font-size:14.5px; color:var(--ink-3); line-height:1.85}

/* ═══════════ آکاردئون ═══════════ */
.faq{display:grid; gap:var(--s-12); max-width:860px}
.q{border-radius:var(--r-26); overflow:hidden; transition:box-shadow var(--standard) ease}
.q[open]{box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}
.q summary{
  list-style:none; cursor:pointer; padding:var(--s-20) var(--s-24);
  display:flex; align-items:center; gap:var(--s-12); font-size:15.5px; font-weight:600;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:""; margin-inline-start:auto; width:10px; height:10px; flex:none;
  border-right:2px solid var(--ink-4); border-bottom:2px solid var(--ink-4);
  transform:rotate(45deg); transition:transform var(--standard) var(--spring);
}
.q[open] summary::after{transform:rotate(-135deg)}
.q .a{padding:0 var(--s-24) var(--s-20); font-size:14.5px; color:var(--ink-3); line-height:1.95}
.q[open] .a{animation:reveal var(--slow) var(--spring)}
@keyframes reveal{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* ═══════════ CTA پایانی ═══════════ */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-44);
  padding:clamp(40px,7vw,88px); text-align:center;
  background:linear-gradient(160deg,rgba(24,28,38,.92),rgba(10,12,18,.97));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--lift-l);
}
/* ⚠️ اینجا یک conic-gradient بود که ۱۶ ثانیه‌ای می‌چرخید. روی کارتِ تیره
   شبیهِ نورِ نرم نمی‌شد؛ یک نوارِ مورّبِ روشن بود که کند رد می‌شد و مثل
   خطای رندر به نظر می‌رسید. یک هاله‌ی ثابت همان کار را می‌کند. */
.cta::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(80% 120% at 50% -20%, rgba(43,245,140,.32), transparent 62%);
}
.cta > *{position:relative}
.cta h2{font-size:clamp(28px,4.4vw,48px); margin-bottom:var(--s-16); letter-spacing:-.03em}
.cta p{color:rgba(255,255,255,.68); max-width:52ch; margin-inline:auto}
.cta .hero-cta{justify-content:center}
.cta .btn{background:linear-gradient(180deg,#fff,#E8ECF2); color:var(--ink-1); box-shadow:var(--lift-m)}
.cta .btn::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%)}
.cta .btn-accent{background:linear-gradient(180deg,#2BF58C,#06B36B); color:#04351F}

.disclaimer{margin-top:var(--s-24); font-size:12.5px; color:var(--ink-4); line-height:1.9}

/* ═══════════════════════════════════════════════════════════════════
   صفحه‌های داخلی — سربرگ، متن بلند، فهرست کناری، تماس، ۴۰۴
   ═══════════════════════════════════════════════════════════════════ */
.page-hero{position:relative; padding:clamp(130px,16vw,168px) 0 var(--s-32)}
.page-hero h1{font-size:clamp(32px,5vw,54px); margin:var(--s-16) 0 var(--s-12); letter-spacing:-.03em}
.page-hero p{color:var(--ink-3); max-width:62ch; font-size:clamp(15px,1.6vw,17.5px); line-height:1.9}
.page-hero .updated{margin-top:var(--s-20); font-size:12.5px; color:var(--ink-4)}

.doc{display:grid; grid-template-columns:268px 1fr; gap:var(--s-32); align-items:start; padding-bottom:96px}
@media (max-width:900px){ .doc{grid-template-columns:1fr; gap:var(--s-16)} }

.toc{position:sticky; top:100px; border-radius:var(--r-26); padding:var(--s-16)}
@media (max-width:900px){ .toc{position:static; top:auto} }
.toc b{display:block; font-size:12px; color:var(--ink-4); font-weight:500; margin-bottom:var(--s-8)}
.toc a{
  display:block; padding:var(--s-8) var(--s-12); border-radius:var(--r-14);
  font-size:13px; font-weight:500; color:var(--ink-2);
  transition:background var(--fast) var(--spring), color var(--fast) linear;
}
.toc a:hover{background:rgba(255,255,255,.55); color:var(--ink-1)}
.toc a.on{
  background:linear-gradient(180deg,rgba(43,245,140,.3),rgba(6,179,107,.16));
  color:var(--accent-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.prose{border-radius:var(--r-34); padding:clamp(24px,4vw,44px)}
.prose section + section{margin-top:var(--s-32); padding-top:var(--s-32); border-top:1px solid var(--rim-soft)}
.prose h2{font-size:clamp(20px,2.4vw,26px); scroll-margin-top:110px; margin-bottom:var(--s-12); letter-spacing:-.025em}
.prose h3{font-size:16px; font-weight:700; margin:var(--s-24) 0 var(--s-8)}
.prose p{color:var(--ink-2); font-size:15.5px; line-height:2}
.prose p + p{margin-top:var(--s-12)}
.prose ul{margin-top:var(--s-12); display:grid; gap:var(--s-8)}
.prose ul li{position:relative; padding-inline-start:var(--s-20); color:var(--ink-2); font-size:15.5px; line-height:1.95}
.prose ul li::before{
  content:""; position:absolute; inset-inline-start:0; top:12px;
  width:7px; height:7px; border-radius:99px; background:var(--accent);
  box-shadow:0 0 8px rgba(6,179,107,.5);
}
.prose b{font-weight:700; color:var(--ink-1)}
.prose a.link{color:var(--accent-deep); font-weight:600; text-decoration:underline; text-underline-offset:4px}

.note{
  margin-top:var(--s-16); padding:var(--s-16) var(--s-20); border-radius:var(--r-18);
  font-size:14.5px; line-height:1.9; color:var(--accent-deep);
  background:linear-gradient(180deg,rgba(43,245,140,.26),rgba(6,179,107,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px var(--rim-soft);
  -webkit-backdrop-filter:none; backdrop-filter:none; border:0;
}
.note.warn{
  color:#8E2C2F;
  background:linear-gradient(180deg,rgba(229,72,77,.18),rgba(229,72,77,.08));
}

.tbl{width:100%; margin-top:var(--s-16); border-collapse:separate; border-spacing:0; font-size:14.5px}
.tbl th,.tbl td{text-align:start; padding:var(--s-12); border-bottom:1px solid var(--rim-soft)}
.tbl th{font-weight:600; color:var(--ink-4); font-size:12px}
.tbl tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto}

.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-16)}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.contact-grid .card{display:flex; flex-direction:column; gap:var(--s-8); border-radius:var(--r-26)}
.contact-grid h3{font-size:15.5px}
.contact-grid p{font-size:13.5px; color:var(--ink-3)}
.contact-grid .val{margin-top:auto; padding-top:var(--s-12); font-size:14.5px; font-weight:600; direction:ltr; text-align:start}

.nf{min-height:72vh; display:grid; place-items:center; text-align:center; padding:150px 0 96px}
.nf .code{
  font-size:clamp(88px,20vw,180px); font-weight:800; line-height:1; letter-spacing:-.05em;
  background:linear-gradient(180deg,var(--ink-1),rgba(121,131,154,.35));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nf h1{font-size:clamp(22px,3vw,34px); margin:var(--s-16) 0 var(--s-12); letter-spacing:-.025em}
.nf p{color:var(--ink-3); max-width:44ch; margin-inline:auto}

/* ═══════════════════════════════════════════════════════════════════
   فوتر
   ═══════════════════════════════════════════════════════════════════ */
footer{
  margin-top:var(--s-32); padding:var(--s-40) 0 var(--s-24);
  position:relative; z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.8));
  box-shadow:inset 0 1px 0 var(--rim);
}
.f-top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-32);
  padding-bottom:var(--s-32); border-bottom:1px solid var(--rim-soft);
}
@media (max-width:900px){ .f-top{grid-template-columns:1fr 1fr; gap:var(--s-24)} }
@media (max-width:560px){ .f-top{grid-template-columns:1fr} }

.f-brand .brand{margin-bottom:var(--s-12)}
.f-brand p{font-size:13.5px; color:var(--ink-3); line-height:2; max-width:38ch}
.f-store{display:flex; flex-wrap:wrap; gap:var(--s-8); margin-top:var(--s-16)}
.f-store a{
  display:inline-flex; align-items:center; gap:var(--s-8); height:46px;
  padding-inline:var(--s-16); border-radius:var(--r-pill);
  font-size:13px; font-weight:600;
  transition:transform var(--standard) var(--spring), box-shadow var(--standard) ease;
}
.f-store a:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 var(--rim), var(--lift-m)}
.f-store svg{width:16px; height:16px}

.f-col h4{font-size:12px; font-weight:600; color:var(--ink-4); margin-bottom:var(--s-12)}
.f-col a{
  display:block; padding:var(--s-6) 0; font-size:14px; color:var(--ink-2);
  transition:color var(--fast) linear, padding-inline-start var(--standard) var(--spring);
}
.f-col a:hover{color:var(--ink-1); padding-inline-start:var(--s-6)}

.f-trust{display:flex; flex-wrap:wrap; gap:var(--s-12); align-items:stretch;
  padding:var(--s-24) 0; border-bottom:1px solid var(--rim-soft)}
.trust{
  display:flex; align-items:center; gap:var(--s-12); flex:1 1 220px;
  padding:var(--s-12) var(--s-16); border-radius:var(--r-18);
  transition:transform var(--standard) var(--spring), box-shadow var(--standard) ease;
}
.trust:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 var(--rim), var(--lift-m)}
.trust .mark{
  width:46px; height:46px; flex:none; border-radius:var(--r-14);
  display:grid; place-items:center; color:var(--accent-deep);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px var(--rim-soft);
}
.trust .mark svg{width:22px; height:22px}
.trust b{display:block; font-size:13px}
.trust span{font-size:11px; color:var(--ink-4)}

.f-disclaimer{padding:var(--s-20) 0; border-bottom:1px solid var(--rim-soft);
  font-size:12.5px; color:var(--ink-4); line-height:1.95}
.f-bottom{display:flex; flex-wrap:wrap; gap:var(--s-12); align-items:center;
  justify-content:space-between; padding-top:var(--s-20)}
.f-bottom p{font-size:12.5px; color:var(--ink-4)}
.f-bottom .f-mini{display:flex; flex-wrap:wrap; gap:var(--s-16); font-size:12.5px; color:var(--ink-4)}
.f-bottom .f-mini a:hover{color:var(--ink-1)}
.f-top-link{display:inline-flex; align-items:center; gap:var(--s-6); font-size:12.5px; font-weight:500; color:var(--ink-2)}
.f-top-link:hover{color:var(--ink-1)}

/* ═══════════════════════════════════════════════════════════════════
   بلاگ
   ═══════════════════════════════════════════════════════════════════ */
.chips a.chip{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-8); text-decoration:none}
.chip-n{
  font-size:11px; font-weight:600; padding:1px var(--s-6); border-radius:var(--r-pill);
  background:rgba(14,18,28,.07); color:var(--ink-4);
}
.chip.on .chip-n{background:rgba(255,255,255,.2); color:#fff}

.post-meta{display:flex; align-items:center; gap:var(--s-8); flex-wrap:wrap;
  font-size:12px; color:var(--ink-4); margin-bottom:var(--s-12)}
.post-meta .cat{
  padding:4px var(--s-10); border-radius:var(--r-pill); font-weight:600; color:var(--accent-deep);
  background:linear-gradient(180deg,rgba(43,245,140,.3),rgba(6,179,107,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.feature-card{
  display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s-24); align-items:stretch;
  margin-bottom:var(--s-16); padding:var(--s-32); border-radius:var(--r-34);
  transition:transform 520ms var(--spring), box-shadow var(--standard) ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}
@media (max-width:820px){ .feature-card{grid-template-columns:1fr; padding:var(--s-24)} }
.feature-body{display:flex; flex-direction:column; align-items:flex-start}
.feature-card h2{font-size:clamp(21px,2.6vw,30px); margin-bottom:var(--s-12); letter-spacing:-.025em}
.feature-card p{color:var(--ink-3); font-size:15.5px; line-height:1.95}
.read-more{display:inline-flex; align-items:center; gap:var(--s-6); margin-top:var(--s-20);
  font-size:13px; font-weight:600; color:var(--accent-deep)}
.feature-card:hover .read-more svg{transform:translateX(-4px)}
.read-more svg{transition:transform var(--standard) var(--spring)}
.feature-art{
  display:grid; place-items:center; border-radius:var(--r-26); min-height:180px;
  background:linear-gradient(150deg,rgb(var(--t1)/.5),rgb(var(--t2)/.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.feature-art span{font-size:92px; font-weight:800; line-height:1; color:rgba(4,81,58,.26)}
@media (max-width:820px){ .feature-art{display:none} }

.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-16)}
@media (max-width:1000px){ .post-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .post-grid{grid-template-columns:1fr} }
.post-card{
  display:flex; flex-direction:column; border-radius:var(--r-26); padding:var(--s-24);
  transition:transform 520ms var(--spring), box-shadow var(--standard) ease;
}
.post-card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--rim-low), var(--lift-m)}
.post-card h2,.post-card h3{font-size:17.5px; line-height:1.6; margin-bottom:var(--s-8)}
.post-card a{color:inherit}
.post-card a::after{content:""; position:absolute; inset:0}
.post-card p{font-size:14.5px; color:var(--ink-3); line-height:1.85}
.post-foot{margin-top:auto; padding-top:var(--s-16); font-size:12px; color:var(--ink-4)}

.pager{display:flex; align-items:center; justify-content:center; gap:var(--s-16); margin-top:var(--s-32)}
.pager-n{font-size:13px; color:var(--ink-4)}

.article-hero h1{max-width:22ch}
.crumbs{display:flex; align-items:center; gap:var(--s-8); flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-4); margin-bottom:var(--s-16)}
.crumbs a{color:var(--ink-4)}
.crumbs a:hover{color:var(--ink-1)}

.article-wrap{display:grid; grid-template-columns:1fr 310px; gap:var(--s-32); align-items:start; padding-bottom:96px}
@media (max-width:960px){ .article-wrap{grid-template-columns:1fr} }
.article-wrap .prose h2{font-size:clamp(20px,2.4vw,27px); margin:var(--s-32) 0 var(--s-12)}
.article-wrap .prose h2:first-child{margin-top:0}
.article-wrap .prose h3{margin-top:var(--s-24)}

.article-cta{
  position:sticky; top:100px; border-radius:var(--r-34); padding:var(--s-24);
  background:linear-gradient(160deg,rgba(24,28,38,.92),rgba(10,12,18,.96));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--lift-l);
}
@media (max-width:960px){ .article-cta{position:static} }
.article-cta b{display:block; font-size:16.5px; margin-bottom:var(--s-8)}
.article-cta p{font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.85; margin-bottom:var(--s-16)}
.article-cta .btn{background:linear-gradient(180deg,#2BF58C,#06B36B); color:#04351F; width:100%}

/* ═══════════════════════════════════════════════════════════════════
   المان‌های تصویری کوچک — همان زبان کارت‌های اپ، در اندازه‌ی مینیاتور
   ═══════════════════════════════════════════════════════════════════ */
.art{display:flex; flex-wrap:wrap; gap:var(--s-8); margin-top:var(--s-16)}
.art span{
  display:inline-flex; align-items:center; gap:var(--s-8);
  font-size:11.5px; font-weight:500; color:var(--ink-2);
  padding:7px var(--s-12); border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-soft);
}
.art-toasts span{width:100%; border-radius:var(--r-14)}
.art-toasts .d{width:8px; height:8px; border-radius:99px; flex:none}
.art-toasts .d.up{background:var(--rose)}
.art-toasts .d.down{background:var(--accent)}
.art-stamp .pr{
  color:var(--accent-deep); font-weight:700; font-size:12px;
  background:linear-gradient(180deg,rgba(43,245,140,.3),rgba(6,179,107,.14));
}
.art-otp{gap:var(--s-6); direction:ltr; justify-content:flex-end}
.art-otp span{
  width:32px; height:38px; padding:0; justify-content:center;
  border-radius:var(--r-14); font-size:14.5px; font-weight:700; color:var(--ink-1);
}