/* ===========================================================================
   Moshtariat — public site v2, design system.

   Zero external requests, by policy rather than preference: this origin is
   served to Iranian networks where fonts.googleapis.com is unreachable, and a
   marketing page that hangs on a font request is worse than no marketing page.
   Same reasoning as landing/index.html and plugins/OtpLogin/Template/layout_v2.php.

   Tokens are the brand book palette verbatim (visual/system). The radius ladder
   and hero gradient match landing/index.html so the page a visitor lands on and
   the page they log in to read as one product.

   Component inventory harvested from the two competitor sites we mirrored
   (docs/COMPETITOR_RINGOCRM.md). Structure kept close to theirs on purpose —
   only the palette, typography, wording and status honesty are ours.
   =========================================================================== */

/* The variable font the product itself ships — one file, weights 100..900.
   Named `Vazirmatn` so the family name in the palette below resolves; the path
   is root-absolute because this stylesheet is reached from more than one URL
   depth (/landing/ and /landing/index.php). Without this rule the whole site
   silently falls back to Tahoma on any machine that has no Vazirmatn installed. */
@font-face{
  font-family:"Vazirmatn";
  src:url("/plugins/ModernTheme/assets/fonts/vazirmatn/Vazirmatn.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Brand palette — visual/system, verbatim */
  --indigo:#4F46E5;        /* Primary Indigo — main action, active nav, focus */
  --indigo-dark:#3730A3;   /* Primary Dark */
  --indigo-deep:#4338CA;
  --indigo-light:#6366F1;
  --lav:#EEF2FF;           /* Soft Lavender */
  --lav2:#F5F7FF;
  --navy:#0F172A;          /* Deep Navy */
  --ink:#1E293B;
  --muted:#64748B;
  --faint:#94A3B8;
  --border:#DBE3EF;
  --surface:#F8FAFC;
  --white:#fff;
  --green:#16A34A;         /* Sales Green */
  --red:#DC2626;           /* Risk Red */
  --amber:#D97706;         /* Attention Amber */
  --mint:#ECFDF5;
  --teal:#0F766E;

  /* The mark's purple is NOT the interface indigo — brand book visual/brand-mark
     is explicit that each consumer takes its colour from its own source. */
  --mark-purple:#5945E4;
  --mark-purple-dark:#4436C9;

  --r-xl:26px; --r-lg:16px; --r-md:13px; --r-sm:12px; --r-xs:11px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(15,23,42,.04);
  --shadow-lift:0 1px 2px rgba(15,23,42,.04), 0 30px 70px -30px rgba(15,23,42,.30);
  --shadow-pop:0 20px 45px -20px rgba(55,48,163,.45);
  --ring:0 0 0 3px rgba(79,70,229,.13);
  --maxw:1140px;
  --hdr-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 18px)}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;
  font-size:15.5px;line-height:1.95;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
/* Default size for every inline icon.
   An <svg> with a viewBox and no width stretches to fill its container, so any
   icon dropped into a element that has no size rule of its own renders enormous
   — that produced a 400px check mark in the "هست / نیست" panel. This is a bare
   element selector on purpose: every component rule below (.card-ico svg,
   .chan-ico svg, …) is class-based and therefore still wins. */
svg{width:17px;height:17px;flex:none;display:inline-block;vertical-align:middle}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.on-brand :focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.75)}
h1,h2,h3,h4{margin:0;line-height:1.5;color:var(--navy);font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
/* Latin numerals only inside form values and technical ids — brand book
   visual/typography. Persian digits are written literally in the markup. */
.lat{font-family:"Inter",Arial,sans-serif;font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}
/* Inline icons carry .ico wherever no component rule sizes them. Without this
   an <svg> with no width fills its container — a 17px chevron rendered at 120px. */
.ico{width:17px;height:17px;flex:none;display:inline-block;vertical-align:middle}
.mono{font-family:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.86em}

/* ---------- layout ---------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section-tight{padding:40px 0}
.section-flush{padding-top:0}
@media(min-width:900px){ .section{padding:86px 0} .section-tight{padding:52px 0} }
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media(min-width:720px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .g4{grid-template-columns:repeat(4,1fr)} }
.split{display:grid;gap:26px;align-items:center}
@media(min-width:940px){ .split{grid-template-columns:1.05fr .95fr;gap:44px} .split-rev>*:first-child{order:2} }
.center{text-align:center}
.stack-sm>*+*{margin-top:8px}
.stack>*+*{margin-top:14px}
.stack-lg>*+*{margin-top:26px}

/* ---------- type scale ------------------------------------------------ */
/* nowrap matters: as an inline-flex pill inside a centred, max-width section
   head the label otherwise breaks onto three lines and the chip turns into a
   blob with an icon in it. */
.kicker{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--indigo);
  background:var(--lav);border:1px solid #E0E7FF;
  padding:5px 13px;border-radius:var(--r-pill);
}
.kicker svg{width:15px;height:15px;flex:none}
.kicker.on-dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.h1{font-size:clamp(25px,4.6vw,42px);line-height:1.36;letter-spacing:-.01em}
/* وزن سنگین‌تر برای تیتر صفحهٔ اول. Vazirmatn متغیر است (۱۰۰ تا ۹۰۰) پس ۸۰۰
   وزن واقعی می‌دهد، نه چاق‌کردن مصنوعیِ مرورگر. */
.h1-strong{font-weight:800}
.h2{font-size:clamp(21px,3.1vw,30px);line-height:1.44}
.h3{font-size:17px;line-height:1.6}
.h4{font-size:15px}
.lede{font-size:16.5px;color:var(--muted);line-height:2.05}
.muted{color:var(--muted)}
.small{font-size:13.2px;color:var(--muted);line-height:1.9}
.tiny{font-size:12px;color:var(--faint);line-height:1.8}
.sec-head{max-width:660px;margin:0 auto 34px}
.sec-head.start{margin-inline:0}
.sec-head .h2{margin-top:12px}
.sec-head .lede{margin-top:12px;font-size:15.5px}

/* ---------- buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:14.5px;font-weight:600;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  text-decoration:none!important;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 10px 24px -12px rgba(79,70,229,.7)}
.btn-primary:hover{background:var(--indigo-deep)}
.btn-ghost{background:var(--white);color:var(--navy);border-color:var(--border)}
.btn-ghost:hover{border-color:#C7D2FE;background:var(--lav2)}
.btn-quiet{background:transparent;color:var(--muted);padding:10px 14px}
.btn-quiet:hover{color:var(--indigo)}
/* On an indigo surface the primary action inverts to solid white — brand book
   visual/color-usage forbids indigo-on-indigo and translucent white. */
.btn-on-dark{background:#fff;color:var(--indigo);box-shadow:0 14px 30px -16px rgba(15,23,42,.6)}
.btn-on-dark:hover{background:#fff;color:var(--indigo-dark)}
.btn-outline-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{padding:9px 16px;font-size:13.4px}
.btn-lg{padding:14px 28px;font-size:15.4px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:11px}
.btn .ico{width:17px;height:17px;flex:none}

/* ---------- status chips (brand book governance/capabilities) ---------- */
.st{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:11.4px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid;line-height:1.7;
}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-live{color:#15803D;background:var(--mint);border-color:#BBF7D0}
.st-verify{color:#0E7490;background:#ECFEFF;border-color:#A5F3FC}
.st-beta{color:var(--amber);background:#FFFBEB;border-color:#FDE68A}
.st-planned{color:var(--muted);background:var(--surface);border-color:var(--border)}
/* Demo data marker — every mocked number, chart and screenshot carries one. */
.mock{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--muted);
  background:var(--surface);border:1px dashed var(--border);
  padding:2px 9px;border-radius:var(--r-pill);
}
.mock::before{content:"◇";font-size:9px}
.mock-on-dark{color:rgba(255,255,255,.82);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

/* ---------- header ---------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border);
}
.hdr-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;height:var(--hdr-h);display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand:hover{text-decoration:none}
/* One dimension stays auto — the mark's 1.9:1 ratio is fixed. */
.brand-mark{height:26px;width:auto}
.brand-name{font-size:16px;font-weight:700;color:var(--navy)}
.hdr-nav{display:none;align-items:center;gap:2px;margin-inline-start:12px;flex:1}
.hdr-nav a{
  padding:8px 11px;border-radius:var(--r-sm);font-size:13.8px;font-weight:500;color:var(--ink);
}
.hdr-nav a:hover{background:var(--lav);color:var(--indigo);text-decoration:none}
.hdr-nav a[aria-current="page"]{color:var(--indigo);background:var(--lav);font-weight:600}
.hdr-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.hdr-actions .btn-ghost{display:none}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--border);background:var(--white);border-radius:var(--r-md);cursor:pointer;
}
.nav-toggle svg{width:19px;height:19px;color:var(--navy)}
/* Declared after .nav-toggle on purpose: same specificity, so source order
   decides. Putting the hide rule in the earlier block let the base rule win. */
@media(min-width:1024px){
  .hdr-nav{display:flex}
  .hdr-actions .btn-ghost{display:inline-flex}
  .nav-toggle{display:none}
}

/* drawer (Yekta pattern: panel + backdrop + inert) */
/* inset-inline-end pins the panel to the left edge under dir=rtl, so the
   off-screen transform has to be negative — translate is physical, not logical.
   An earlier `html[dir=rtl]` override flipped it positive and parked the drawer
   inside the viewport on every page load. */
.drawer{
  position:fixed;inset-block:0;inset-inline-end:0;width:min(90vw,340px);
  background:#fff;z-index:95;transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:18px;overflow-y:auto;
  border-inline-start:1px solid var(--border);
}
html[dir="ltr"] .drawer{transform:translateX(100%)}
.drawer.is-open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--border)}
.drawer-close{width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center}
.drawer-group{margin-top:16px}
.drawer-group>.tiny{padding:0 6px 6px}
.drawer a.drawer-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 6px;border-radius:var(--r-sm);color:var(--ink);font-size:14.4px;font-weight:500;border-bottom:1px solid #F1F5F9}
.drawer a.drawer-link:hover{background:var(--lav);color:var(--indigo);text-decoration:none}
.drawer-cta{margin-top:auto;padding-top:18px;display:grid;gap:9px}
.backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:90;opacity:0;visibility:hidden;transition:opacity .24s ease}
.backdrop.is-open{opacity:1;visibility:visible}

/* ---------- breadcrumb (Ringo pattern) -------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.6px;color:var(--faint);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.crumbs .sep{opacity:.6}
.crumbs [aria-current]{color:var(--indigo);font-weight:600}

/* ---------- hero ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--lav2) 0%,#fff 78%);border-bottom:1px solid var(--border)}
.hero::before{
  content:"";position:absolute;inset-block-start:-180px;inset-inline-end:-140px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.18),transparent 68%);pointer-events:none;
}
.hero-inner{position:relative;padding:38px 0 52px}
@media(min-width:940px){ .hero-inner{padding:58px 0 74px} }
.hero .h1{margin-top:14px}
.hero-sub{margin-top:16px;max-width:560px}
.hero-cta{margin-top:24px}
.hero-note{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.8px;color:var(--muted)}
.hero-note>span{display:inline-flex;align-items:center;gap:6px}
.hero-note svg{width:15px;height:15px;color:var(--green);flex:none}

/* hero brand band variant (indigo surface) */
.hero-brand{background:linear-gradient(140deg,var(--indigo) 0%,var(--indigo-dark) 62%,#312E81 100%);border-bottom:0;color:#fff}
.hero-brand::before{background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%)}
.hero-brand h1,.hero-brand .h1,.hero-brand .h2{color:#fff}
.hero-brand .lede,.hero-brand .small{color:rgba(255,255,255,.84)}
.hero-brand .crumbs,.hero-brand .crumbs a{color:rgba(255,255,255,.72)}
.hero-brand .crumbs [aria-current]{color:#fff}

/* stat chip row (Ringo "۲.۵س / پنجرهٔ بازیابی" pattern) */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
@media(min-width:760px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--shadow-card)}
.stat b{display:block;font-size:19px;color:var(--indigo);line-height:1.4}
.stat span{display:block;font-size:12.6px;font-weight:600;color:var(--navy);margin-top:2px}
.stat em{display:block;font-style:normal;font-size:11.6px;color:var(--muted)}
.on-brand .stat{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);box-shadow:none}
.on-brand .stat b{color:#fff}
.on-brand .stat span{color:#fff}
.on-brand .stat em{color:rgba(255,255,255,.7)}

/* ---------- cards ----------------------------------------------------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-card)}
.card-quiet{background:var(--surface);box-shadow:none}
.card-lift{transition:transform .2s ease,box-shadow .2s ease}
.card-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card .h3{margin-top:12px}
.card p{margin-top:8px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-ico{
  width:40px;height:40px;border-radius:var(--r-md);flex:none;
  display:grid;place-items:center;background:var(--lav);color:var(--indigo);
}
.card-ico svg{width:20px;height:20px}
.card-ico.g{background:var(--mint);color:var(--green)}
.card-ico.a{background:#FFFBEB;color:var(--amber)}
.card-ico.r{background:#FEF2F2;color:var(--red)}
.card-num{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--indigo);color:#fff;font-size:13.5px;font-weight:700;
}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.4px;font-weight:600}
.card-link svg{width:15px;height:15px}
a.card{color:inherit}
a.card:hover{text-decoration:none;border-color:#C7D2FE}

/* ---------- numbered steps ------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:14px}
@media(min-width:760px){ .steps.cols3{grid-template-columns:repeat(3,1fr)} .steps.cols4{grid-template-columns:repeat(4,1fr)} }
.step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.step-n{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--lav);color:var(--indigo);font-size:13px;font-weight:700}
.step .h3{margin-top:11px}
.step p{margin-top:7px}
/* horizontal flow with arrows (Yekta vertical pages) */
.flow{display:grid;gap:12px}
@media(min-width:860px){
  .flow{grid-template-columns:repeat(4,1fr);gap:26px}
  .flow>*+*::before{
    content:"";position:absolute;inset-block-start:32px;inset-inline-end:-20px;
    width:14px;height:14px;border-top:2px solid var(--border);border-inline-start:2px solid var(--border);
    transform:rotate(-45deg);
  }
  html[dir="rtl"] .flow>*+*::before{transform:rotate(135deg);border-top:2px solid var(--border);border-inline-start:2px solid var(--border)}
}

/* ---------- channel section backdrop ---------------------------------- */
/* دو لوگوی کانال به‌عنوان واترمارک در گوشهٔ بخش، بریده از لبه.
   گوشهٔ بالا-چپ انتخاب شد چون تنها جای این بخش است که کارت رویش نمی‌افتد:
   .wrap عرضش ۱۱۴۰ است و تیتر وسط‌چین و باریک، پس بالای سمت چپ خالی می‌ماند.
   pointer-events:none لازم است تا کارت‌های زیرش همچنان قابل کلیک باشند. */
.chan-section{position:relative;overflow:hidden}
.chan-section::before,
.chan-section::after{
  content:"";position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;
}
.chan-section::before{
  inset-block-start:-46px;inset-inline-end:-58px;width:250px;height:250px;
  background-image:url("../img/logo-instagram.svg");
  opacity:.09;transform:rotate(-12deg);
}
.chan-section::after{
  inset-block-start:104px;inset-inline-end:150px;width:132px;height:132px;
  background-image:url("../img/logo-api.svg");
  opacity:.13;transform:rotate(8deg);
}
/* زیر ۹۲۰ پیکسل کارت‌ها تک‌ستونی می‌شوند و تا لبه می‌آیند؛ واترمارک آنجا
   فقط پشت متن می‌افتد و خوانایی را کم می‌کند. */
@media(max-width:920px){ .chan-section::before,.chan-section::after{display:none} }

/* ---------- channel cards (Yekta instagram/telegram/bale row) --------- */
.chan{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.chan:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#C7D2FE;text-decoration:none}
.chan-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff}
.chan-ico svg{width:24px;height:24px}
.chan-ico.ig{background:linear-gradient(135deg,#833AB4,#E1306C 55%,#F77737)}
.chan-ico.tg{background:linear-gradient(135deg,#2AABEE,#229ED9)}
.chan-ico.wa{background:linear-gradient(135deg,#25D366,#128C7E)}
.chan-ico.xl{background:linear-gradient(135deg,#16A34A,#0F766E)}
.chan-ico.api{background:linear-gradient(135deg,var(--indigo),var(--indigo-dark))}
.chan-ico.man{background:linear-gradient(135deg,#64748B,#334155)}

/* ---------- transparency panel (Ringo "هست / نیست") ------------------ */
.trans{display:grid;gap:16px}
@media(min-width:820px){ .trans{grid-template-columns:1fr 1fr} }
.trans-col{border-radius:var(--r-lg);padding:20px;border:1px solid}
.trans-is{background:var(--mint);border-color:#BBF7D0}
.trans-not{background:var(--surface);border-color:var(--border)}
.trans-col h3{display:flex;align-items:center;gap:8px;font-size:15.6px}
.trans-col h3 svg{width:19px;height:19px}
.trans-is h3 svg{color:var(--green)}
.trans-not h3 svg{color:var(--faint)}
.trans-col ul{margin-top:14px;display:grid;gap:10px}
.trans-col li{display:flex;gap:9px;align-items:flex-start;font-size:14.2px;line-height:1.85}
.trans-col li svg{width:17px;height:17px;flex:none;margin-top:5px}
.trans-is li svg{color:var(--green)}
.trans-not li svg{color:var(--faint)}
.trans-not li{color:var(--muted)}

/* ---------- feature tabs --------------------------------------------- */
.tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.tab{
  padding:9px 17px;border-radius:var(--r-pill);border:1px solid var(--border);background:#fff;
  font-size:13.6px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;flex:none;
}
.tab:hover{border-color:#C7D2FE;color:var(--indigo)}
.tab[aria-selected="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.tabpanel[hidden]{display:none}
.tabpanel{margin-top:24px}

/* ---------- accordion / FAQ ------------------------------------------ */
.acc{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.acc details+details{border-top:1px solid var(--border)}
.acc summary{
  display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;
  font-size:14.6px;font-weight:600;color:var(--navy);list-style:none;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";width:9px;height:9px;flex:none;margin-inline-start:auto;
  border-inline-end:2px solid var(--faint);border-block-end:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .2s ease;
}
.acc details[open] summary::after{transform:rotate(225deg)}
.acc details[open] summary{color:var(--indigo)}
.acc summary:hover{background:var(--lav2)}
.acc .acc-body{padding:0 18px 17px;font-size:14.2px;color:var(--muted);line-height:2}

/* ---------- pricing --------------------------------------------------- */
.price-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;gap:3px}
.price-toggle button{
  padding:8px 18px;border:0;background:transparent;border-radius:var(--r-pill);
  font-size:13.4px;font-weight:600;color:var(--muted);cursor:pointer;
}
.price-toggle button[aria-pressed="true"]{background:#fff;color:var(--indigo);box-shadow:var(--shadow-card)}
.save-badge{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11.5px;font-weight:600;color:var(--green);background:var(--mint);border:1px solid #BBF7D0;padding:3px 9px;border-radius:var(--r-pill)}
.save-badge svg{width:14px;height:14px;flex:none}
.plans{display:grid;gap:16px;align-items:start}
@media(min-width:880px){ .plans{grid-template-columns:repeat(3,1fr)} }
.plan{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;box-shadow:var(--shadow-card)}
.plan-pop{border-color:var(--indigo);box-shadow:var(--shadow-pop)}
.plan-ribbon{
  position:absolute;inset-block-start:-12px;inset-inline-start:50%;transform:translateX(50%);
  background:var(--indigo);color:#fff;font-size:11.6px;font-weight:700;padding:4px 14px;border-radius:var(--r-pill);
}
html[dir="ltr"] .plan-ribbon{transform:translateX(-50%)}
.plan-kick{font-size:12.6px;font-weight:600;color:var(--muted)}
.plan-name{font-size:19px;font-weight:700;color:var(--navy);margin-top:6px}
.plan-price{margin-top:14px;font-size:26px;font-weight:700;color:var(--navy);line-height:1.4}
.plan-price small{display:block;font-size:12.8px;font-weight:500;color:var(--muted);line-height:1.8}
.plan-price .was{font-size:15px;color:var(--faint);text-decoration:line-through;font-weight:500;margin-inline-start:8px}
.plan-feats{margin-top:18px;display:grid;gap:9px;flex:1}
.plan-feats li{display:flex;gap:9px;align-items:flex-start;font-size:13.8px;line-height:1.85}
.plan-feats svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--green)}
.plan-feats li.off{color:var(--faint)}
.plan-feats li.off svg{color:var(--border)}
.plan .btn{margin-top:20px}
.plan-note{margin-top:12px;font-size:11.8px;color:var(--faint);text-align:center}

/* ---------- comparison table ----------------------------------------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff}
table.cmp{width:100%;border-collapse:collapse;min-width:660px;font-size:13.8px}
table.cmp th,table.cmp td{padding:13px 15px;text-align:start;border-block-end:1px solid var(--border);vertical-align:middle}
table.cmp thead th{background:var(--surface);font-size:13px;color:var(--navy);white-space:nowrap;position:sticky;top:0}
table.cmp thead th.us{background:var(--lav);color:var(--indigo)}
table.cmp tbody tr:last-child td{border-block-end:0}
table.cmp td.us{background:#FAFBFF;font-weight:600}
table.cmp .yes{color:var(--green);font-weight:700}
table.cmp .no{color:var(--faint)}
table.cmp .partial{color:var(--amber);font-weight:600}
table.cmp td:first-child{font-weight:600;color:var(--navy)}

/* ---------- mock charts (Ringo dashboards, all demo data) ------------ */
.charts{display:grid;gap:14px}
@media(min-width:760px){ .charts{grid-template-columns:1fr 1fr} }
.chart{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.chart-head h4{font-size:14px}
.donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-ring{
  width:118px;height:118px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--indigo) 0 42%,var(--indigo-light) 42% 70%,#A5B4FC 70% 88%,#DDD6FE 88% 100%);
}
.donut-ring::after{content:"";position:absolute;inset:20px;background:#fff;border-radius:50%}
.donut-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:1}
.donut-mid b{display:block;font-size:19px;color:var(--navy)}
.donut-mid span{font-size:11.4px;color:var(--muted)}
.legend{display:grid;gap:8px;flex:1;min-width:170px}
.legend li{display:flex;align-items:center;gap:9px;font-size:13px}
.legend .dot{width:9px;height:9px;border-radius:3px;flex:none}
.legend b{margin-inline-start:auto;color:var(--navy)}
.bars{display:flex;align-items:flex-end;gap:9px;height:124px}
.bars>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-align:center}
.bars .bar{background:linear-gradient(180deg,var(--indigo-light),var(--indigo));border-radius:6px 6px 3px 3px;min-height:5px}
.bars .bar.b2{background:linear-gradient(180deg,#C7D2FE,#A5B4FC)}
.bars .lbl{font-size:11px;color:var(--muted)}
.funnel{display:grid;gap:9px}
.funnel-row{display:flex;align-items:center;gap:11px}
.funnel-row .name{font-size:12.8px;color:var(--navy);width:74px;flex:none}
.funnel-row .track{flex:1;height:26px;background:var(--surface);border-radius:var(--r-sm);overflow:hidden}
.funnel-row .fill{height:100%;background:linear-gradient(90deg,var(--indigo),var(--indigo-light));border-radius:var(--r-sm);display:flex;align-items:center;justify-content:flex-end;padding-inline-end:8px;color:#fff;font-size:11.6px;font-weight:600}
.funnel-row .pct{font-size:12px;color:var(--muted);width:38px;flex:none;text-align:end}
.heat{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.heat i{aspect-ratio:1;border-radius:5px;background:var(--lav)}
.heat i[data-l="1"]{background:#E0E7FF}
.heat i[data-l="2"]{background:#C7D2FE}
.heat i[data-l="3"]{background:#A5B4FC}
.heat i[data-l="4"]{background:var(--indigo-light)}
.heat i[data-l="5"]{background:var(--indigo)}
.heat-legend{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:11.4px;color:var(--muted)}

/* ---------- device frames -------------------------------------------- */
.shot{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-lift)}
.shot img{width:100%;display:block}
.shot-cap{padding:10px 14px;border-block-start:1px solid var(--border);background:var(--surface);font-size:11.8px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px}
.phone{
  width:min(272px,74vw);margin-inline:auto;border-radius:34px;padding:9px;
  background:linear-gradient(160deg,#1E293B,#0F172A);box-shadow:var(--shadow-lift);
}
.phone-screen{border-radius:26px;overflow:hidden;background:#fff;position:relative}
.phone-notch{position:absolute;inset-block-start:8px;inset-inline-start:50%;transform:translateX(50%);width:74px;height:5px;border-radius:99px;background:rgba(15,23,42,.28);z-index:2}
html[dir="ltr"] .phone-notch{transform:translateX(-50%)}

/* ---------- chat demo — an Instagram DM, animated by site.js -----------
   The direct is where a lead actually arrives, so the frame is the Instagram
   thread as the visitor knows it: 20px pill bubbles, #EFEFEF received, the
   blue→purple sent gradient, grouped corners, story-ring avatar, and the
   camera / mic / gallery composer. Instagram's own greys are hard-coded on
   purpose — the brand tokens are ours and would break the resemblance.

   The one thing that is NOT Instagram is .msg-sys: those lines are what
   Moshtariat writes into the thread, so they read as an app annotation
   (centred indigo pill) rather than as a message from either side. The
   channel name and the demo-data marker sit on the stage above the frame,
   which keeps the frame itself honest to the client it imitates. */
.chat-stage{background:linear-gradient(165deg,#312E81,#1E1B4B);border-radius:var(--r-xl);padding:16px;box-shadow:var(--shadow-lift)}
.chat-stage-head{display:flex;align-items:center;gap:9px;padding:2px 4px 12px;color:rgba(255,255,255,.9);font-size:12.4px;font-weight:600}
.chat-stage-head svg{width:15px;height:15px;opacity:.85}
.chat-stage-head .mock{margin-inline-start:auto}
.chat-frame{background:#fff;color:#262626;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;height:406px}

/* header: back, avatar in a story ring, name + presence, call actions */
.chat-top{display:flex;align-items:center;gap:9px;padding:9px 11px;border-block-end:1px solid #EFEFEF;background:#fff}
.chat-back{width:21px;height:21px;color:#262626}
.chat-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;padding:2px;
  background:conic-gradient(from 200deg,#FFDC80,#FCAF45,#F56040,#FD1D1D,#E1306C,#C13584,#833AB4,#5851DB,#FFDC80);
}
.chat-avatar i{display:block;width:100%;height:100%;border-radius:50%;border:1.5px solid #fff;background:linear-gradient(135deg,#833AB4,#E1306C)}
.chat-who{min-width:0}
.chat-top b{display:block;font-size:13.4px;font-weight:700;color:#262626;line-height:1.5}
.chat-presence{margin:0;font-size:11.2px;color:#8E8E8E;line-height:1.5}
.chat-actions{margin-inline-start:auto;display:flex;align-items:center;gap:15px;color:#262626}
.chat-actions svg{width:20px;height:20px}

/* thread */
/* justify-content:flex-end pins the thread to the composer the way a real
   client does — a half-full thread starts at the bottom, and once site.js has
   appended past the frame height the oldest bubble clips off the top edge
   instead of the newest one hanging in mid-air. */
.chat-body{flex:1;overflow:hidden;padding:12px 12px 8px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;background:#fff}
.msg{max-width:74%;padding:8px 13px;border-radius:20px;font-size:13.4px;line-height:1.8;animation:msg-in .3s ease both}
.msg-in{align-self:flex-start;background:#EFEFEF;color:#262626}
.msg-out{align-self:flex-end;background:linear-gradient(150deg,#4F5BD5,#7A3BC4 58%,#962FBF);color:#fff}
/* consecutive bubbles from one side group like the real client: only the
   shared edge loses its radius, the outer corners stay a full pill */
.msg-in + .msg-in{border-start-start-radius:6px}
.msg-in:has(+ .msg-in){border-end-start-radius:6px}
.msg-out + .msg-out{border-start-end-radius:6px}
.msg-out:has(+ .msg-out){border-end-end-radius:6px}
.msg-in + .msg-out,.msg-out + .msg-in{margin-block-start:8px}
.msg-day{align-self:center;color:#8E8E8E;font-size:11px;font-weight:600;padding:2px 0 8px;animation:msg-in .3s ease both}
.msg-typing{
  align-self:flex-start;background:#EFEFEF;border-radius:20px;padding:11px 14px;
  display:flex;align-items:center;gap:4px;animation:msg-in .3s ease both;
}
.msg-typing i{width:6px;height:6px;border-radius:50%;background:#B0B0B0;animation:typing 1.1s infinite ease-in-out}
.msg-typing i:nth-child(2){animation-delay:.15s}
.msg-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.msg-sys{
  align-self:center;max-width:92%;margin-block:6px;padding:6px 12px;
  background:rgba(79,70,229,.08);color:var(--indigo-dark);
  font-size:11.7px;font-weight:600;line-height:1.7;border-radius:var(--r-pill);
  display:flex;align-items:center;gap:6px;text-align:center;
}
.msg-sys svg{width:14px;height:14px;flex:none}
@keyframes msg-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* composer */
.chat-foot{padding:8px 10px;border-block-start:1px solid #EFEFEF;background:#fff;display:flex;align-items:center;gap:9px}
.chat-cam{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#4F5BD5,#962FBF);
}
.chat-cam svg{width:16px;height:16px}
.chat-foot .fake-input{
  flex:1;min-width:0;height:34px;border-radius:var(--r-pill);background:#fff;border:1px solid #DBDBDB;
  display:flex;align-items:center;padding-inline:14px;color:#8E8E8E;font-size:12.6px;
}
.chat-tools{display:flex;align-items:center;gap:13px;color:#262626}
.chat-tools svg{width:19px;height:19px}

/* ---------- carousel (Yekta splide testimonials) --------------------- */
.carousel{position:relative}
.carousel-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>*{scroll-snap-align:start;flex:0 0 88%}
@media(min-width:760px){ .carousel-track>*{flex:0 0 46%} }
@media(min-width:1060px){ .carousel-track>*{flex:0 0 31.5%} }
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px}
.carousel-nav button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;
  display:grid;place-items:center;color:var(--navy);
}
.carousel-nav button:hover{border-color:var(--indigo);color:var(--indigo)}
.carousel-nav svg{width:17px;height:17px}
.quote{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;height:100%}
.quote p{font-size:14px;line-height:2.05;color:var(--ink);flex:1}
.quote-who{display:flex;align-items:center;gap:11px;margin-top:16px;padding-block-start:14px;border-block-start:1px solid var(--border)}
.quote-av{width:36px;height:36px;border-radius:50%;background:var(--lav);color:var(--indigo);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.quote-who b{display:block;font-size:13.4px;color:var(--navy)}
.quote-who span{font-size:12px;color:var(--muted)}

/* ---------- logo band (Yekta clients strip) -------------------------- */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){ .logos{grid-template-columns:repeat(4,1fr)} }
.logo-slot{
  height:66px;border:1px dashed var(--border);border-radius:var(--r-md);background:var(--surface);
  display:grid;place-items:center;color:var(--faint);font-size:12.4px;font-weight:600;text-align:center;padding:0 10px;
}

/* ---------- ROI calculator (Ringo) ---------------------------------- */
.roi{display:grid;gap:20px}
@media(min-width:860px){ .roi{grid-template-columns:1fr 1fr} }
.field{display:block}
.field span{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:7px}
.field input[type="range"]{width:100%;accent-color:var(--indigo)}
.field .val{font-size:13px;color:var(--indigo);font-weight:700}
.roi-out{background:linear-gradient(150deg,var(--indigo),var(--indigo-dark));border-radius:var(--r-lg);padding:22px;color:#fff}
.roi-out .num{font-size:30px;font-weight:700;line-height:1.4}
.roi-out .lbl{font-size:12.8px;color:rgba(255,255,255,.82)}
.roi-out hr{border:0;border-block-start:1px solid rgba(255,255,255,.22);margin:16px 0}

/* ---------- industry block (Ringo solutions) ------------------------- */
.ind{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:#fff}
.ind+.ind{margin-top:22px}
.ind-head{padding:20px;border-block-end:1px solid var(--border);background:linear-gradient(180deg,var(--lav2),#fff)}
.ind-body{padding:20px;display:grid;gap:22px}
@media(min-width:940px){ .ind-body{grid-template-columns:1.15fr .85fr} }
.pain{display:grid;gap:12px}
.pain-row{display:grid;gap:7px;padding:13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
.pain-row .p{display:flex;gap:8px;font-size:13.6px;color:var(--navy);font-weight:600}
.pain-row .p svg{width:16px;height:16px;color:var(--red);flex:none;margin-top:5px}
.pain-row .s{display:flex;gap:8px;font-size:13.2px;color:var(--muted)}
.pain-row .s svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:5px}
.roles{display:grid;gap:11px}
.role{padding:14px;border-radius:var(--r-md);border:1px solid var(--border)}
.role.mgr{background:var(--lav);border-color:#E0E7FF}
.role.rep{background:var(--mint);border-color:#BBF7D0}
.role b{font-size:12.6px;display:block;margin-bottom:5px}
.role.mgr b{color:var(--indigo-dark)}
.role.rep b{color:#15803D}
.role p{font-size:13.2px;line-height:1.9}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{font-size:12.2px;font-weight:600;color:var(--indigo);background:var(--lav);border:1px solid #E0E7FF;padding:4px 11px;border-radius:var(--r-pill)}
.scenario{padding:14px;border-radius:var(--r-md);background:#FFFBEB;border:1px solid #FDE68A;font-size:13.2px;line-height:1.95;color:#78350F}
.scenario b{color:#92400E}

/* ---------- integrations grid ---------------------------------------- */
.integ{display:grid;gap:14px}
@media(min-width:700px){ .integ{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .integ{grid-template-columns:repeat(3,1fr)} }
.integ-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;background:#fff}
.integ-card ul{margin-top:12px;display:grid;gap:7px}
.integ-card li{display:flex;gap:8px;font-size:13px;color:var(--muted)}
.integ-card li svg{width:15px;height:15px;color:var(--indigo);flex:none;margin-top:5px}

/* data-path strip (Ringo "مسیر داده") */
.path{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.path-node{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:9px 14px;font-size:12.8px;font-weight:600;color:var(--navy)}
.path-arrow{color:var(--faint);flex:none}
.path-arrow svg{width:17px;height:17px}

/* ---------- blog ------------------------------------------------------ */
.post-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#fff;height:100%}
.post-card:hover{text-decoration:none;border-color:#C7D2FE}
.post-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--lav),#DDD6FE);display:grid;place-items:center;color:var(--indigo);position:relative}
.post-thumb svg{width:34px;height:34px;opacity:.55}
.post-thumb .mock{position:absolute;inset-block-end:8px;inset-inline-end:8px}
.post-body{padding:16px;display:flex;flex-direction:column;flex:1}
.post-body .h3{font-size:15.4px}
.post-meta{margin-top:auto;padding-block-start:12px;font-size:11.8px;color:var(--faint);display:flex;flex-wrap:wrap;gap:5px 10px}
.cats{display:flex;flex-wrap:wrap;gap:7px}
.cat{font-size:12.2px;font-weight:600;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--border);background:#fff;color:var(--muted)}
.cat[aria-current]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pager{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:26px}
.pager a,.pager span{min-width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border);display:grid;place-items:center;font-size:13.2px;color:var(--muted);background:#fff}
.pager [aria-current]{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:700}
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
.toc ol{margin:11px 0 0;padding-inline-start:18px;display:grid;gap:7px;font-size:13.4px;list-style:decimal}

/* ---------- video mock player (Yekta lazy video) -------------------- */
.vplayer{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:linear-gradient(150deg,#1E1B4B,#312E81);aspect-ratio:16/9;display:grid;place-items:center}
.vplayer .play{
  width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--indigo);box-shadow:var(--shadow-lift);
}
.vplayer .play svg{width:24px;height:24px;margin-inline-start:3px}
.vplayer .mock{position:absolute;inset-block-end:12px;inset-inline-start:12px}
.vplayer .cap{position:absolute;inset-block-end:12px;inset-inline-end:12px;font-size:12px;color:rgba(255,255,255,.82)}

/* ---------- CTA band -------------------------------------------------- */
.band{
  background:linear-gradient(140deg,var(--indigo) 0%,var(--indigo-dark) 60%,#312E81 100%);
  color:#fff;border-radius:var(--r-xl);padding:34px 24px;text-align:center;position:relative;overflow:hidden;
}
/* الگوی لوگو به‌عنوان واترمارک روی گرادیان. کاشی بی‌درز است، پس repeat کافی
   است؛ ماسک، الگو را پشت متن کم‌رنگ می‌کند تا کنتراست تیتر دست‌نخورده بماند. */
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/logo-pattern.svg") 50% 50%/820px 358px repeat;
  -webkit-mask-image:radial-gradient(115% 95% at 50% 50%,transparent 12%,#000 62%);
          mask-image:radial-gradient(115% 95% at 50% 50%,transparent 12%,#000 62%);
}
.band::after{content:"";position:absolute;inset-block-start:-90px;inset-inline-start:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%)}
.band>*{position:relative}
.band .h2{color:#fff}
.band .lede{color:rgba(255,255,255,.86);margin-top:12px}
.band .btn-row{justify-content:center;margin-top:22px}
/* روی موبایل کاشیِ بزرگ فقط چند خط بریده نشان می‌دهد؛ کوچک‌ترش می‌کنیم تا
   دست‌کم یک لوگوی کامل داخل کادر بیفتد. */
@media(max-width:560px){ .band::before{background-size:520px 227px} }
@media(min-width:820px){ .band{padding:46px 40px} }

/* ---------- footer ---------------------------------------------------- */
.ftr{background:var(--navy);color:#CBD5E1;margin-top:70px}
.ftr-top{display:grid;gap:30px;padding:46px 0 34px}
@media(min-width:900px){ .ftr-top{grid-template-columns:1.5fr 1fr 1fr 1fr} }
.ftr h4{color:#fff;font-size:14px;margin-bottom:14px}
.ftr ul{display:grid;gap:10px}
.ftr a{color:#CBD5E1;font-size:13.4px}
.ftr a:hover{color:#fff}
.ftr-about p{font-size:13.4px;line-height:2;color:#94A3B8;margin-top:14px;max-width:330px}
.ftr .brand-name{color:#fff}
.ftr-social{display:flex;gap:9px;margin-top:16px}
.ftr-social a{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#CBD5E1}
.ftr-social a:hover{border-color:#fff;color:#fff}
.ftr-social svg{width:17px;height:17px}
.ftr-bottom{border-block-start:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:12.4px;color:#94A3B8}
.ftr-addr{display:flex;gap:8px;font-size:12.8px;color:#94A3B8;margin-top:16px;line-height:1.9}
.ftr-addr svg{width:16px;height:16px;flex:none;margin-top:5px}

/* ---------- floating support (Yekta) -------------------------------- */
.fsup{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:70}
.fsup-toggle{
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--indigo);color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(79,70,229,.8);
}
.fsup-toggle svg{width:23px;height:23px}
.fsup-options{
  position:absolute;inset-block-end:62px;inset-inline-start:0;display:grid;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease;
}
.fsup-options.is-open{opacity:1;visibility:visible;transform:none}
.fsup-options a{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-pill);padding:9px 15px;font-size:13.2px;font-weight:600;color:var(--navy);
  box-shadow:var(--shadow-lift);white-space:nowrap;
}
.fsup-options a:hover{text-decoration:none;border-color:var(--indigo);color:var(--indigo)}
.fsup-options svg{width:17px;height:17px;flex:none}

/* ---------- misc ------------------------------------------------------ */
.note{display:flex;gap:10px;padding:14px 16px;border-radius:var(--r-md);background:var(--lav);border:1px solid #E0E7FF;font-size:13.4px;line-height:1.95;color:var(--indigo-dark)}
.note svg{width:17px;height:17px;flex:none;margin-top:5px}
.note-warn{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.note-quiet{background:var(--surface);border-color:var(--border);color:var(--muted)}
.hr{border:0;border-block-start:1px solid var(--border);margin:0}
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .msg,.msg-day{animation:none}
  /* No animation means site.js leaves the full transcript in place, and a
     typing indicator inside a finished transcript is a reply that never
     arrives. It is a placeholder for motion, so it goes with the motion. */
  .msg-typing{display:none}
  html{scroll-behavior:auto}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:12px;inset-block-start:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:var(--r-sm);box-shadow:var(--shadow-lift)}

/* ---------- in-page product preview (demo.php) ----------------------- */
/* A real interactive preview, not a screenshot: the promise on every page is
   "دموی بدون ثبت‌نام", so the demo has to actually be openable without one. */
.prev{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow-lift)}
.prev-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--surface);border-block-end:1px solid var(--border)}
.prev-bar .dots{display:flex;gap:5px}
.prev-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--border)}
.prev-bar b{font-size:13px;color:var(--navy)}
.board{display:flex;gap:12px;overflow-x:auto;padding:16px;background:var(--surface);scrollbar-width:thin}
.col{flex:0 0 232px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);display:flex;flex-direction:column}
.col-head{padding:11px 13px;border-block-end:1px solid var(--border);display:flex;align-items:center;gap:8px}
.col-head b{font-size:12.8px;color:var(--navy)}
.col-head .n{margin-inline-start:auto;font-size:11.4px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:1px 8px}
.col-body{padding:10px;display:grid;gap:9px;min-height:120px}
.lead{border:1px solid var(--border);border-radius:var(--r-sm);padding:11px;background:#fff;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.lead:hover{border-color:var(--indigo);box-shadow:var(--shadow-card)}
.lead b{display:block;font-size:13px;color:var(--navy)}
.lead .meta{display:flex;flex-wrap:wrap;gap:4px 9px;margin-top:6px;font-size:11.2px;color:var(--muted)}
.lead .meta span{display:inline-flex;align-items:center;gap:4px}
.lead .meta svg{width:12px;height:12px}
.lead .tag{display:inline-block;margin-top:8px;font-size:10.8px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--lav);color:var(--indigo)}
.lead .tag.due{background:#FEF2F2;color:var(--red)}
.lead .tag.src{background:var(--mint);color:#15803D}
.prev-strip{display:grid;gap:12px;padding:16px;border-block-start:1px solid var(--border)}
@media(min-width:780px){ .prev-strip{grid-template-columns:repeat(4,1fr)} }
.kpi{border:1px solid var(--border);border-radius:var(--r-md);padding:13px}
.kpi b{display:block;font-size:20px;color:var(--navy)}
.kpi span{font-size:11.8px;color:var(--muted)}
.kpi .up{font-size:11.4px;color:var(--green);font-weight:600}
.kpi .down{font-size:11.4px;color:var(--red);font-weight:600}