/* ═══════════════════════════════════════════════════════════
   خانه‌یار — سایت معرفی · چیدمان ادیتوریال
   برند: سرمه‌ای #0D1B2A + زمردی #10B981 + نعنایی #34D399
   لهجهٔ مرجانی روی سقف لوگو · فلت · وزیرمتن · تمام‌RTL
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Vazirmatn";
  src:
    url("../fonts/Vazirmatn-Variable.woff2") format("woff2 supports variations"),
    url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0d1b2a;
  --navy-2: #132639;
  --green: #10b981;
  --green-strong: #059669;
  --green-light: #22c55e;
  --mint: #34d399;
  --coral: #ff6b5b;
  --surface: #e6f7f0;

  --bg: #f8f7f4;
  --card: #ffffff;
  --card-2: #edece7;
  --border: rgba(13, 27, 42, 0.09);
  --border-strong: rgba(13, 27, 42, 0.18);
  --text: #0d1b2a;
  --text-2: #4b5563;
  --text-3: #656d79;
  --income: #22c55e;
  --expense: #ef4444;
  --on-navy: #f4f6f9;
  --on-navy-2: #a8b0bd;
  --on-navy-3: #64748b;

  /* رنگ‌های بخش‌ها — همان توکن‌های نرم‌افزار */
  --t-emerald-fg: #047857;
  --t-emerald-bg: #d9f0e6;
  --t-indigo-fg: #3f4a78;
  --t-indigo-bg: #e0e4f3;
  --t-amber-fg: #8a6a0f;
  --t-amber-bg: #f6ecd2;
  --t-rose-fg: #9f3f52;
  --t-rose-bg: #f7e2e6;
  --t-violet-fg: #6b4a91;
  --t-violet-bg: #ece3f5;
  --t-teal-fg: #0e6f78;
  --t-teal-bg: #d7eef0;
  --t-sky-fg: #1f5f8b;
  --t-sky-bg: #dceaf5;
  --t-lime-fg: #5a6f14;
  --t-lime-bg: #eaf1d4;

  --r-btn: 8px;
  --r-card: 12px;
  --r-pill: 999px;

  /* نردبان فاصله — هیچ عدد خامی در padding/margin/gap نوشته نشود
     ۱–۲ داخل یک جزء · ۳–۴ بین اجزای یک گروه · ۵–۶ padding کارت
     ۷–۸ بین گروه‌ها · ۹–۱۰ بین بخش‌های صفحه */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
  --sp-9: 64px;
  --sp-10: 96px;

  /* نردبان تایپ — h1 تنها استثناست و clamp() می‌گیرد
     بلوک تازه فقط از اینها بردارد؛ بلوک قدیمی هنگام دست‌زدن گِرد شود */
  --fs-1: 11.5px; /* ریزنوشت زیر دکمه */
  --fs-2: 13px; /* توضیح فرعی */
  --fs-3: 14px; /* برچسب، متن کوتاه */
  --fs-4: 16px; /* متن اصلی */
  --fs-5: 18px; /* لید پاراگراف، تیتر کارت */
  --fs-6: 21px; /* h2 */
  --fs-7: 26px; /* h3 بزرگ، عدد شاخص */

  /* حرکت — فقط transform و opacity؛ prefers-reduced-motion سراسری هندل شده */
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.05);
  --shadow-md: 0 10px 30px rgba(13, 27, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(13, 27, 42, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* بافت کاغذی خیلی ظریف — نویز SVG داخلی، بدون تصویر بیرونی */
body {
  font-family:
    "Vazirmatn",
    -apple-system,
    "Segoe UI",
    Tahoma,
    sans-serif;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  color: var(--text);
  direction: rtl;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: rgba(16, 185, 129, 0.22);
}

a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
}
button {
  font: inherit;
  cursor: pointer;
}

.container {
  width: min(1080px, calc(100% - 40px));
  margin-inline: auto;
}

.ic {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─────────── دکمه‌ها ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid transparent;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.32);
}
.btn-primary:hover {
  background: var(--green-strong);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--navy);
  background: rgba(13, 27, 42, 0.03);
}
.btn-ghost.on-navy {
  color: var(--on-navy);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-ghost.on-navy:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.btn .ic {
  width: 19px;
  height: 19px;
}

/* ─────────── هدر ─────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 247, 244, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 74px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand svg {
  height: 46px;
  width: auto;
}
.brand-name {
  font-weight: 800;
  font-size: 20px;
}
.brand-name small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  line-height: 1.5;
}
.main-nav {
  display: flex;
  gap: 6px;
  margin-inline-start: auto;
}
.main-nav a {
  padding: 8px 14px;
  border-radius: var(--r-btn);
  font-size: 14.5px;
  color: var(--text-2);
  font-weight: 500;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.main-nav a:hover {
  color: var(--text);
  background: rgba(13, 27, 42, 0.05);
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-cta .btn {
  padding: 10px 20px;
  font-size: 14px;
}

/* ─────────── سرفصل ادیتوریال بخش‌ها ─────────── */
.sec-no {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-3);
}
.sec-no b {
  color: var(--coral);
  font-weight: 800;
}
.sec-no::after {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--border-strong);
}
.sec-head.center .sec-no {
  justify-content: center;
}
.sec-head.center .sec-no::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--border-strong);
}

/* ─────────── هیرو ─────────── */
.hero {
  padding: 76px 0 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--green-strong);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
}
.hero-badge .ic {
  width: 16px;
  height: 16px;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.4;
  margin: 24px 0 18px;
}
/* خط موجی دست‌کشیده زیر کلمهٔ کلیدی */
.hw {
  position: relative;
  white-space: nowrap;
}
.hw svg {
  position: absolute;
  right: -2%;
  bottom: -0.14em;
  width: 104%;
  height: 0.24em;
  overflow: visible;
}
.hero-sub {
  font-size: 17px;
  color: var(--text-2);
  max-width: 33em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.hero-note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-note .ic {
  width: 16px;
  height: 16px;
  color: var(--green-strong);
}
.hero-note span + span::before {
  content: "·";
  margin-inline: 8px;
  color: var(--border-strong);
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-visual .phone {
  transform: rotate(-1.6deg);
}
.float-chip {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  font-weight: 600;
  animation: floaty 6s ease-in-out infinite;
}
.float-chip .fc-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-chip .fc-ic .ic {
  width: 18px;
  height: 18px;
}
.float-chip small {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.float-chip.sms {
  top: 128px;
  inset-inline-start: max(0px, calc(50% - 335px));
}
.float-chip.sms .fc-ic {
  background: var(--t-sky-bg);
  color: var(--t-sky-fg);
}
.float-chip.budget {
  bottom: 148px;
  inset-inline-end: max(0px, calc(50% - 335px));
  animation-delay: -3s;
}
.float-chip.budget .fc-ic {
  background: var(--surface);
  color: var(--green-strong);
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* فلش دست‌کشیدهٔ حاشیه‌نویسی کنار گوشی */
.hand-arrow {
  position: absolute;
  top: 30px;
  inset-inline-end: -10px;
  width: 100px;
  transform: rotate(8deg);
  z-index: 6;
  pointer-events: none;
}
.hand-note {
  position: absolute;
  top: 128px;
  inset-inline-end: -18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  transform: rotate(7deg);
  z-index: 6;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   ماکاپ گوشی — قاب خنثی، بدون نام برند
   ═══════════════════════════════════════════ */
.phone {
  position: relative;
  z-index: 5;
  width: 336px;
  padding: 10px;
  border-radius: 60px;
  /* ماکاپ یک «عکس» است نه محتوا (role="img" هم همین را می‌گوید): متنِ
     داخلش نباید انتخاب و کپی شود، و نگه‌داشتنِ انگشت روی گوشی نباید
     منوی کپی/اشتراک بیاورد. سه اعلان لازم است چون سافاریِ iOS هنوز
     پیشوند می‌خواهد و منوی لمسیِ طولانی جدا خاموش می‌شود. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: linear-gradient(
    150deg,
    #565b63 0%,
    #23262b 28%,
    #101215 55%,
    #3d4148 100%
  );
  box-shadow:
    var(--shadow-lg),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.18),
    inset 0 0 0 5px rgba(0, 0, 0, 0.9);
}
.phone::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 55px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* دکمه‌های فیزیکی کناری */
.side {
  position: absolute;
  width: 3.5px;
  border-radius: 3px;
  z-index: 0;
  background: linear-gradient(180deg, #666b73, #23262a);
  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.4);
}
.side.power {
  right: -3.5px;
  top: 172px;
  height: 94px;
}
.side.action {
  left: -3.5px;
  top: 122px;
  height: 34px;
}
.side.vol1 {
  left: -3.5px;
  top: 178px;
  height: 58px;
}
.side.vol2 {
  left: -3.5px;
  top: 248px;
  height: 58px;
}

.phone-screen {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 712px;
}
.island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 102px;
  height: 30px;
  border-radius: 999px;
  background: #000;
  z-index: 45;
}
.island::after {
  content: "";
  position: absolute;
  top: 9px;
  inset-inline-end: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #1e2f44 0 18%, #0a0d12 60%);
  box-shadow: inset 0 0 1px rgba(120, 160, 255, 0.35);
}
.p-home-bar {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  border-radius: 999px;
  background: rgba(13, 27, 42, 0.28);
  z-index: 45;
  pointer-events: none;
}

/* ─────────── قابِ اندروید (الگوی گوشی‌های سامسونگ) ───────────
   محتوای صفحه یکی است چون خودِ نرم‌افزار یکی است؛ فرق در خودِ دستگاه است و
   عمداً کم‌شمار و واقعی نگه داشته شده:
     · گوشهٔ تیزتر (گردیِ درشتِ آیفون را ندارد) و بدنهٔ روشن‌ترِ فلزی
     · دوربینِ سوراخ‌وسط به‌جای جزیرهٔ کشیده
     · هر دو کلید روی لبهٔ راست — کلیدِ صدا بالا، روشن/خاموش پایین
     · نوار وضعیتِ اندرویدی: آنتن پلکانی، وای‌فای، و درصدِ باتری به عدد
   کلاسِ .android را جاوااسکریپتِ صفحهٔ دانلود همراهِ تبِ فعال جابه‌جا
   می‌کند؛ بدون جاوااسکریپت همان حالتِ اندروید (پیش‌فرضِ HTML) می‌ماند. */
/* width و padding عمداً دست‌نخورده می‌مانند: قاب با عوض‌شدنِ تب نباید
   بالا/پایین یا چپ/راست بپرد. تفاوت فقط در گردیِ گوشه و رنگِ بدنه است،
   که از نازکیِ حاشیه هم چشمگیرتر است. */
.phone.android {
  border-radius: 40px;
  background: linear-gradient(
    150deg,
    #9aa0a9 0%,
    #4f545c 30%,
    #24272c 58%,
    #737a84 100%
  );
}
.phone.android::before {
  border-radius: 35px;
}
.phone.android .phone-screen {
  border-radius: 30px;
}

/* دوربینِ سوراخ‌وسط */
.punch {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  z-index: 45;
  background: radial-gradient(circle at 34% 30%, #22344a 0 20%, #05070a 62%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.85);
}
/* کلیدهای لبهٔ راست — چپ/راستِ فیزیکی عمدی است: جای کلیدهای گوشیِ
   واقعی با راست‌به‌چپ بودنِ صفحه عوض نمی‌شود. */
.side.a-vol {
  right: -3.5px;
  top: 150px;
  height: 86px;
}
.side.a-power {
  right: -3.5px;
  top: 252px;
  height: 52px;
}

/* کدام جزء در کدام قاب دیده می‌شود */
.phone .punch,
.phone .side.a-vol,
.phone .side.a-power,
.phone .p-icons.st-android {
  display: none;
}
.phone.android .island,
.phone.android .side.power,
.phone.android .side.action,
.phone.android .side.vol1,
.phone.android .side.vol2,
.phone.android .p-icons.st-ios {
  display: none;
}
.phone.android .punch {
  display: block;
}
.phone.android .side.a-vol,
.phone.android .side.a-power {
  display: block;
}
.phone.android .p-icons.st-android {
  display: flex;
}
/* نوارِ اشارهٔ اندروید کمی باریک‌تر و پایین‌تر از آیفون است */
.phone.android .p-home-bar {
  width: 98px;
  height: 4px;
  bottom: 9px;
  background: rgba(13, 27, 42, 0.34);
}
/* line-height: 1 لازم است وگرنه همین یک عدد می‌تواند ارتفاعِ نوار وضعیت را
   نسبت به حالتِ آیفون چند دهم پیکسل جابه‌جا کند. */
.p-batt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
/* خطِ ۱٫۸پیکسلیِ .ic برای نشان‌دادنِ شارژِ داخلِ باتری کافی نیست و باید پر شود.
   چون .ic رنگش را از CSS می‌گیرد، صفتِ fill روی خودِ تگ بی‌اثر است (CSS همیشه
   بر صفتِ ارائه‌ای می‌چربد) — پس اینجا کلاس شده است. */
.p-icons .ic-fill {
  fill: currentColor;
  stroke: none;
}

/* نوار وضعیت مالِ خودِ گوشی است نه مالِ خانه‌یار، پس مثل یک گوشیِ واقعی
   انگلیسی و چپ‌به‌راست است: ساعت سمت چپ، نمادها سمت راست. بدون این
   direction، ترتیبِ فلکس در قالبِ RTLِ صفحه برعکس می‌شد. */
.p-status {
  direction: ltr;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 30px 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.p-status .p-icons {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--text);
}
.p-status .p-icons .ic {
  width: 16px;
  height: 16px;
}

.p-body {
  flex: 1;
  overflow: hidden;
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─────────── هدر صفحات داخل گوشی ─────────── */
.p-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 6px;
  flex: none;
}
/* پیشوندِ .phone الزامی است و تزئینی نیست: تیترهای صفحه مثل
   `.page-hero h1` و `.hero h1` هم‌ویژگیِ این قاعده‌اند (۰،۱،۱) و چون
   پایین‌ترِ فایل می‌آیند، بی این پیشوند از بیرون به داخلِ ماکاپ نشت
   می‌کنند و نامِ خانواده را ۴۶ پیکسل می‌کنند. با .phone ویژگی ۰،۲،۱
   می‌شود و دیگر به ترتیبِ خطوطِ فایل وابسته نیست. */
.phone .p-app-title h1 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}
.p-app-title p {
  font-size: 12px;
  color: var(--text-3);
}
.p-app-actions {
  display: flex;
  gap: 8px;
}
.p-ibtn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-btn);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  flex: none;
}
.p-ibtn .ic {
  width: 18px;
  height: 18px;
}
.p-ibtn.sm {
  width: 34px;
  height: 34px;
}
.p-ibtn.fill {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.p-sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.p-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--green-strong);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────── کارت عمومی داخل گوشی ─────────── */
.p-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 14px 16px;
  flex: none;
}
.p-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 800;
  gap: 8px;
}
.p-card-title a {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-strong);
}
.up {
  color: var(--green-strong);
}
.down {
  color: var(--expense);
}

/* پیل کوچک رنگی — همه‌جا داخل ماکاپ */
.tk-pill {
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ─────────── داشبورد (هیرو) ─────────── */
.p-hub {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 0 16px;
}
.p-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 4px;
  flex: none;
}
/* نامِ خانواده عمداً کوچک‌تر از تیترِ صفحه است: داخلِ یک گوشیِ ۳۳۶ پیکسلی،
   ۲۱ پیکسل داد می‌زد و کاشی‌ها را زیرِ خودش گم می‌کرد.
   پیشوندِ .phone به همان دلیلِ .p-app-title h1 بالاست. */
.phone .p-hub-head h1 {
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.4;
}
.p-hub-head p {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
}
.p-date {
  font-size: 10.5px;
  color: var(--text-3);
  padding: 2px 2px 10px;
  flex: none;
}

.p-hub-add {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--green);
  color: #fff;
  border-radius: var(--r-card);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.28);
  flex: none;
}
.p-hub-add-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--r-btn);
  flex: none;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-hub-add-ic .ic {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}
.p-hub-add-txt b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
}
.p-hub-add-txt span {
  font-size: 11px;
  opacity: 0.85;
}

.p-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.p-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 12px 13px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.p-tile-top b {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
}
.p-tile-ic {
  width: 36px;
  height: 36px;
  border-radius: var(--r-btn);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-tile-ic .ic {
  width: 19px;
  height: 19px;
}
.p-tile-val {
  font-size: 16px;
  font-weight: 800;
  margin-top: auto;
}
.p-tile-sub {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.6;
}
.p-tile-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(13, 27, 42, 0.08);
  overflow: hidden;
  margin-top: auto;
}
.p-tile-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--green);
}

.tone-emerald {
  background: var(--t-emerald-bg);
  color: var(--t-emerald-fg);
}
.tone-indigo {
  background: var(--t-indigo-bg);
  color: var(--t-indigo-fg);
}
.tone-amber {
  background: var(--t-amber-bg);
  color: var(--t-amber-fg);
}
.tone-rose {
  background: var(--t-rose-bg);
  color: var(--t-rose-fg);
}
.tone-violet {
  background: var(--t-violet-bg);
  color: var(--t-violet-fg);
}
.tone-teal {
  background: var(--t-teal-bg);
  color: var(--t-teal-fg);
}
.tone-sky {
  background: var(--t-sky-bg);
  color: var(--t-sky-fg);
}
.tone-lime {
  background: var(--t-lime-bg);
  color: var(--t-lime-fg);
}

/* ─────────── پنل مالی (hp) ─────────── */
.p-hp {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  flex: none;
}
.p-hp-top {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 13px 16px 11px;
}
.p-hp-label {
  font-size: 11.5px;
  color: var(--text-2);
  display: block;
}
.p-hp-balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.p-hp-balance small {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0;
}
.p-hp-ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 11px 10px 9px;
}
.p-hp-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  padding-inline: 4px;
}
.p-hp-metric + .p-hp-metric {
  border-inline-start: 1px solid var(--border);
}
.p-hp-metric > span {
  font-size: 10.5px;
  color: var(--text-3);
}
.p-hp-metric > b {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}
.p-hp-metric b.in {
  color: var(--income);
}
.p-hp-metric b.out {
  color: var(--expense);
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  font-style: normal;
}
.delta .ic {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}
.delta.good {
  color: var(--income);
  background: rgba(34, 197, 94, 0.12);
}
.delta.bad {
  color: var(--expense);
  background: rgba(239, 68, 68, 0.1);
}
.p-hp-cap {
  border-top: 1px solid var(--border);
  padding: 11px 16px 13px;
}
.p-hp-cap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
}
.p-hp-cap-head i {
  font-style: normal;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card-2);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}
.p-hp-cap-val {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 3px 0 9px;
  font-size: 20px;
  font-weight: 800;
  color: var(--green-strong);
}
.p-hp-cap-val small {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}
.p-hp-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(13, 27, 42, 0.07);
  overflow: hidden;
}
.p-hp-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--green);
}
.p-hp-cap-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-3);
}
.p-hp-cap-foot b {
  font-weight: 700;
  color: var(--text-2);
}

/* ردیف‌های لیستی داخل گوشی (قبض، رویداد) */
.p-tx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.p-tx + .p-tx {
  border-top: 1px solid var(--border);
}
.p-tx-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-tx-ic .ic {
  width: 17px;
  height: 17px;
}
.p-tx-name {
  font-size: 11.5px;
  font-weight: 700;
}
.p-tx-name small {
  display: block;
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 500;
}
.p-tx b {
  margin-inline-start: auto;
  font-size: 12px;
  white-space: nowrap;
}
.p-tx .end {
  margin-inline-start: auto;
}

/* پس‌انداز هدف */
.p-save-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
}
.p-save-head span {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 600;
}

/* ─────────── کارها و چک‌لیست ─────────── */
.p-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.p-task + .p-task {
  border-top: 1px solid var(--border);
}
.p-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.p-check.on {
  background: var(--green);
  border-color: var(--green);
}
.p-check .ic {
  width: 12px;
  height: 12px;
  stroke-width: 3.2;
}
.p-task-name {
  font-size: 11.5px;
  font-weight: 700;
  min-width: 0;
}
.p-task-name small {
  display: block;
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 500;
}
.p-pri {
  margin-inline-start: auto;
  flex: none;
}
.p-pri.high {
  color: #e11d48;
  background: rgba(225, 29, 72, 0.09);
}
.p-pri.routine {
  color: var(--text-3);
  background: var(--card-2);
}
.p-task.done .p-task-name {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: rgba(101, 109, 121, 0.5);
}
.p-sum {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 700;
}
.p-sum .p-hp-bar {
  flex: 1;
}

/* ─────────── تقویم خانه ─────────── */
.p-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 10px;
}
.p-cal .dow {
  font-size: 8.5px;
  color: var(--text-3);
  text-align: center;
  padding-bottom: 4px;
  font-weight: 700;
}
.p-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  height: 25px;
  border-radius: 7px;
}
.p-day.today {
  background: var(--navy);
  color: #fff;
  font-weight: 800;
}
.p-day .evd {
  position: absolute;
  bottom: 2px;
  width: 3.5px;
  height: 3.5px;
  border-radius: 99px;
}
.p-ev {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  font-size: 11px;
}
.p-ev + .p-ev {
  border-top: 1px solid var(--border);
}
.p-ev b {
  font-weight: 700;
}
.p-ev .dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}
.p-ev small {
  color: var(--text-3);
  margin-inline-start: auto;
  font-size: 9.5px;
  white-space: nowrap;
}

/* ─────────── نوار یادآورها (تیکر) ─────────── */
.ticker-wrap {
  margin-top: 56px;
}
.ticker-cap {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 12px;
}
.ticker-band {
  border-block: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  position: relative;
}
.ticker-band::before,
.ticker-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 2;
  pointer-events: none;
}
.ticker-band::before {
  inset-inline-start: 0;
  background: linear-gradient(to left, var(--card), transparent);
}
.ticker-band::after {
  inset-inline-end: 0;
  background: linear-gradient(to right, var(--card), transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker-band:hover .ticker-track {
  animation-play-state: paused;
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
.ticker-list {
  display: flex;
  align-items: center;
}
.tk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 13.5px;
  border-inline-end: 1px solid var(--border);
  white-space: nowrap;
}
.tk b {
  font-weight: 700;
}
.tk span {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
}

/* ─────────── سکشن‌ها ─────────── */
.section {
  padding: 96px 0;
}
.section.alt {
  background: var(--card);
  border-block: 1px solid var(--border);
}
.sec-head {
  max-width: 680px;
  margin-bottom: 52px;
}
.sec-head.center {
  margin-inline: auto;
  text-align: center;
}
.sec-head h2 {
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 900;
  line-height: 1.45;
  margin: 16px 0 12px;
}
.sec-head p {
  color: var(--text-2);
  font-size: 16px;
}
/* دایرهٔ دست‌کشیدهٔ دور عبارت */
.hc {
  position: relative;
  padding: 0 8px;
  white-space: nowrap;
}
.hc svg {
  position: absolute;
  inset: -8px -6px;
  width: calc(100% + 12px);
  height: calc(100% + 16px);
  overflow: visible;
}

/* ─────────── ماژول‌ها (بنتو ادیتوریال) ─────────── */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mod {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.mod:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.mod.w2 {
  grid-column: span 2;
}
.mod-ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mod-ic .ic {
  width: 23px;
  height: 23px;
}
.mod h3 {
  font-size: 16.5px;
  font-weight: 800;
}
.mod p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.95;
  max-width: 40em;
}

/* ─────────── نماهای نرم‌افزار ─────────── */
.app-views {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 34px;
  flex-wrap: wrap;
}
.av-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.av-item:nth-child(1) .phone {
  transform: rotate(1.4deg);
}
.av-item:nth-child(2) .phone {
  transform: rotate(-1.2deg);
}
.av-item:nth-child(3) .phone {
  transform: rotate(1.4deg);
}
.av-caption {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.av-caption i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* ─────────── آنبوردینگ ─────────── */
.ob-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ob {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 22px 20px;
  position: relative;
}
.ob-no {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  color: rgba(13, 27, 42, 0.12);
  -webkit-text-stroke: 1.5px rgba(13, 27, 42, 0.3);
}
.ob h3 {
  font-size: 15.5px;
  font-weight: 800;
  margin: 12px 0 6px;
}
.ob p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.9;
}

/* ─────────── امنیت و حریم خصوصی ─────────── */
.sec-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.scard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.scard-ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: none;
  background: var(--surface);
  color: var(--green-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scard-ic .ic {
  width: 23px;
  height: 23px;
}
.scard h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}
.scard p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.95;
}
.sec-strip {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-card);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
}
.sec-strip .ic {
  width: 26px;
  height: 26px;
  color: var(--mint);
  flex: none;
}
.sec-strip em {
  font-style: normal;
  color: var(--mint);
}

/* ─────────── CTA بزرگ ─────────── */
.cta-panel {
  background: var(--navy);
  border-radius: 20px;
  padding: 72px 48px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-panel::after {
  content: "";
  position: absolute;
  inset-inline-start: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset-inline-end: -60px;
  top: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 107, 91, 0.1);
}
.cta-panel h2 {
  color: var(--on-navy);
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 900;
  line-height: 1.45;
}
.cta-panel h2 em {
  font-style: normal;
  color: var(--green-light);
}
.cta-panel p {
  color: var(--on-navy-2);
  margin-top: 14px;
  font-size: 15.5px;
  max-width: 30em;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.cta-actions .btn {
  width: 100%;
}
.cta-actions .btn-primary {
  background: var(--green);
}
.cta-actions .btn-primary:hover {
  background: var(--green-light);
}
.cta-note {
  font-size: 12px;
  color: var(--on-navy-3);
  text-align: center;
}

/* ─────────── سوالات ─────────── */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq[open] {
  border-color: var(--border-strong);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 22px;
  font-size: 15.5px;
  font-weight: 700;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  margin-inline-start: auto;
  width: 11px;
  height: 11px;
  flex: none;
  border-inline-end: 2.5px solid var(--text-3);
  border-bottom: 2.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}
.faq[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.faq .faq-a {
  padding: 0 22px 20px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 2;
}

/* ─────────── فوتر ─────────── */
.site-footer {
  background: var(--navy);
  color: var(--on-navy-2);
  margin-top: 96px;
}
.footer-inner {
  padding: 56px 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}
.footer-brand {
  max-width: 310px;
}
.footer-brand svg {
  height: 46px;
  width: auto;
  margin-bottom: 14px;
}
.footer-brand p {
  font-size: 13px;
  line-height: 2;
}
.footer-links {
  display: flex;
  gap: 56px;
  margin-inline-start: auto;
}
.footer-links h4 {
  color: var(--on-navy);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
}
.footer-links a {
  display: block;
  font-size: 13.5px;
  padding: 5px 0;
  color: var(--on-navy-2);
  transition: color 0.15s ease;
}
.footer-links a:hover {
  color: var(--mint);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--on-navy-3);
}
.footer-bottom .heart {
  color: var(--mint);
}

/* ─────────── انیمیشن ورود ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ─────────── واکنش‌گرا ─────────── */
@media (max-width: 1020px) {
  .mod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .hero {
    padding-top: 48px;
  }
  .ob-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hand-arrow,
  .hand-note {
    display: none;
  }
}
@media (max-width: 860px) {
  .main-nav {
    display: none;
  }
  .cta-panel {
    grid-template-columns: 1fr;
    padding: 48px 28px;
  }
  .sec-cards {
    grid-template-columns: 1fr;
  }
  .footer-links {
    margin-inline-start: 0;
  }
}
@media (max-width: 640px) {
  .section {
    padding: 68px 0;
  }
  .mod-grid {
    grid-template-columns: 1fr;
  }
  .mod.w2 {
    grid-column: span 1;
  }
  .ob-grid {
    grid-template-columns: 1fr;
  }
  .app-views {
    gap: 22px;
  }
  .av-item:nth-child(2) {
    order: -1;
  }
  .float-chip.sms {
    inset-inline-start: 0;
    top: 100px;
  }
  .float-chip.budget {
    inset-inline-end: 0;
    bottom: 128px;
  }
  .header-cta .btn-ghost {
    display: none;
  }
  .header-inner {
    height: 66px;
  }
  .hero h1 {
    font-size: 33px;
  }
  .hero-actions .btn {
    flex: 1;
  }
  .footer-inner {
    gap: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   صفحهٔ داخلی — دریافت نرم‌افزار (/download/)
   ═══════════════════════════════════════════════════════════ */

/* ─────────── هیروی صفحهٔ داخلی ───────────
   در صفحهٔ دانلود این هیرو دو ستون می‌شود: ستونِ آغاز متن+انتخاب+کارت،
   ستونِ پایان ماکاپِ گوشی. زیرِ ۹۲۰ پیکسل یک ستون می‌شود و ترتیبِ DOM
   همان ترتیبِ خواندن است: تیتر → لید → گوشی → انتخاب → کارت. */
.page-hero {
  padding: 56px 0 var(--sp-9);
}
.page-hero .crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--text-2);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  transition:
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
.page-hero .crumb:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.page-hero .crumb .ic {
  width: 15px;
  height: 15px;
}
.page-hero .badge-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-3);
  font-weight: 800;
  color: var(--green-strong);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.page-hero .badge-line .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
.page-hero h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 900;
  line-height: 1.4;
}
.page-hero .lead {
  color: var(--text-2);
  font-size: var(--fs-5);
  max-width: 40em;
  margin-top: var(--sp-4);
  line-height: 1.9;
}

/* ─────────── چیدمانِ دوستونیِ صفحهٔ دانلود ─────────── */
.dl-grid {
  display: grid;
  gap: var(--sp-7);
}
.dl-aside {
  display: flex;
  justify-content: center;
}
@media (min-width: 920px) {
  .dl-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: var(--sp-9);
    align-items: start;
  }
  .dl-head {
    grid-area: 1 / 1;
  }
  .dl-pick {
    grid-area: 2 / 1;
  }
  /* start و نه center: دو کارتِ اندروید و iOS قدِ یکسان ندارند، و با
     align-self: center قابِ گوشی با هر بار عوض‌کردنِ تب بالا/پایین
     می‌پرید. حالا سرِ گوشی همیشه هم‌تراز سرِ تیتر است و سرِ جایش می‌ماند. */
  .dl-aside {
    grid-area: 1 / 2 / span 2 / auto;
    align-self: start;
  }
}

/* ─────────── کلیدِ دوتایی اندروید / iOS ───────────
   سیستم‌عاملِ بازدیدکننده خودکار تشخیص داده می‌شود و همان تبِ درست باز
   می‌شود؛ ولی کلید سرِ جایش می‌ماند تا هر کسی دستی عوض کند. بدونِ
   جاوااسکریپت کلید پنهان می‌شود و هر دو پنل باز می‌مانند (noscript در head). */
.dl-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.dl-seg-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  font-size: var(--fs-3);
  font-weight: 800;
  color: var(--text-2);
  background: transparent;
  transition:
    color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}
.dl-seg-btn:hover {
  color: var(--text);
}
.dl-seg-btn[aria-selected="true"] {
  background: var(--card);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* ─────────── کارتِ دانلود — قهرمانِ صفحه ───────────
   تنها جسارتِ بصریِ این صفحه همین کارت است: سرستونِ سرمه‌ای، بدنهٔ سفید،
   یک دکمهٔ زمردیِ تمام‌عرض. هر چیزِ دیگری روی صفحه عمداً ساکت است. */
.dl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.dl-card[hidden] {
  display: none;
}

.dl-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  row-gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  background: var(--navy);
}
.dl-mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}
.dl-mark .mark {
  width: 26px;
  height: 26px;
}
.dl-card-head h2 {
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.5;
  color: var(--on-navy);
}
.dl-card-head p {
  font-size: var(--fs-2);
  color: var(--on-navy-2);
  line-height: 1.7;
}
.dl-ver {
  margin-inline-start: auto;
  flex: none;
  font-size: var(--fs-1);
  font-weight: 800;
  color: var(--mint);
  background: rgba(52, 211, 153, 0.14);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

.dl-body {
  padding: var(--sp-6);
}
.dl-body .btn {
  width: 100%;
  min-height: 52px;
  font-size: var(--fs-4);
}
/* فرادادهٔ فایل: سه قلمِ کوتاه با جداکنندهٔ مویی، نه سه کارتِ جدا */
.dl-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-1);
  color: var(--text-3);
  line-height: 1.7;
}
.dl-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dl-meta span + span::before {
  content: "";
  width: 1px;
  height: 11px;
  background: var(--border-strong);
  margin-inline-end: var(--sp-2);
}

/* منابعِ جانبیِ همان پلتفرم (فروشگاه‌ها) — ردیفِ مویی، نه کارت */
.dl-alt {
  border-top: 1px solid var(--border);
}
.dl-alt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
}
.dl-alt-row:first-child {
  border-top: 0;
}
.dl-alt-mark {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-btn);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-alt-mark .mark {
  width: 22px;
  height: 22px;
}
.dl-alt-mark.on-bazaar {
  background: #dff5ea;
}
.dl-alt-mark.on-play {
  background: #e8f1e8;
}
.dl-alt-mark.on-appstore {
  background: var(--t-sky-bg);
}
.dl-alt-mark.on-sibapp {
  background: var(--t-rose-bg);
}
.dl-alt-body {
  flex: 1;
  min-width: 0;
}
.dl-alt-body b {
  display: block;
  font-size: var(--fs-3);
  font-weight: 800;
  color: var(--text-2);
}
.dl-alt-body span {
  font-size: var(--fs-1);
  color: var(--text-3);
  line-height: 1.7;
}
.dl-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: 800;
  color: var(--t-amber-fg);
  background: var(--t-amber-bg);
}
.dl-state .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

/* راهنمای «افزودن به صفحهٔ اصلی» زیرِ پنلِ iOS */
.dl-steps {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--border);
  background: rgba(13, 27, 42, 0.016);
}
.dl-steps h4 {
  font-size: var(--fs-3);
  font-weight: 800;
  margin-bottom: var(--sp-3);
}
.dl-steps p {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--text-3);
  line-height: 1.9;
}

/* ─────────── کد QR — فقط دسکتاپ ───────────
   روی دسکتاپ فایل نصب به کار نمی‌آید، پس راهِ رسیدن به گوشی همین است.
   SVG درون‌خطی است (ساختهٔ tools/make-qr.cjs) تا صفحه به شبکه وابسته نشود. */
.dl-qr {
  display: none;
}
@media (min-width: 920px) {
  .dl-qr {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-card);
  }
  .dl-qr svg {
    flex: none;
    width: 92px;
    height: 92px;
    border-radius: 6px;
  }
  .dl-qr b {
    display: block;
    font-size: var(--fs-3);
    font-weight: 800;
    margin-bottom: 3px;
  }
  .dl-qr p {
    font-size: var(--fs-1);
    color: var(--text-3);
    line-height: 1.8;
  }
}

/* ─────────── قفسهٔ پلتفرم‌ها (اندروید / آیفون) ───────────
   ساختار: .plat-list  →  .plat (یک پلتفرم)  →  .src-list  →  .src (یک منبعِ دریافت)
   افزودنِ فروشگاهِ تازه فقط یک <li class="src"> است؛ نه چیدمانِ تازه می‌خواهد
   نه شکستنِ ستون‌ها. سه ستونِ هر ردیف: نشان · متن · کنش.
   قاعدهٔ رنگ: منابعِ خودمان (مستقیم/مرورگر) رنگِ برندِ خانه‌یار،
   فروشگاه‌های دیگران رنگِ برندِ خودشان. رنگ اینجا اطلاعات است نه تزئین. */

/* شناسه‌های SVG فقط تعریف‌اند؛ خودِ گره نباید جایی اشغال کند. — فعال */
.mark-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ─────────── قفسهٔ پلتفرم‌ها (.plat-* و .src-*) — بازنشسته ───────────
   چیدمانِ قبلیِ صفحهٔ دانلود بود: دو کارتِ بزرگِ اندروید/iOS، هر کدام با
   فهرستی از منابعِ دریافت در سه ستون (نشان · متن · کنش). در ۱۴۰۵/۰۶/۲۵
   جایش را به `.dl-*` داد — کلیدِ دوتایی + یک کارتِ قهرمان + ماکاپ + QR —
   چون کاربر باید یک کنشِ روشن ببیند، نه شش گزینهٔ هم‌وزن.

   دست‌نخورده می‌ماند چون: (۱) قاعدهٔ پروژه حذفِ کد نیست، (۲) اگر روزی
   صفحه‌ای لازم شد که واقعاً چند فروشگاهِ فعال را کنار هم بگذارد، این
   چیدمان همان است و دوباره نوشتنش هدر است.
   هیچ HTML ای الان از اینها استفاده نمی‌کند. ــ`.mini-steps` استثناست و
   پایینِ همین بلوک فعال است. */

.plat-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}

.plat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.plat-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background: linear-gradient(to bottom, rgba(13, 27, 42, 0.028), transparent);
  border-bottom: 1px solid var(--border);
}
.plat-ic {
  width: 34px;
  height: 34px;
  flex: none;
}
.plat-title h2 {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.5;
}
.plat-title p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
}
.plat-ver {
  margin-inline-start: auto;
  flex: none;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--green-strong);
  background: var(--surface);
  padding: 6px 14px;
  border-radius: 999px;
}

.src-list {
  list-style: none;
}
.src {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  border-top: 1px solid var(--border);
}
.src:first-child {
  border-top: 0;
}

/* کفِ نشان: مربعِ نرم با رنگِ کم‌مایهٔ همان برند */
.src-mark {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.src-mark .mark {
  width: 30px;
  height: 30px;
}
.src-mark.on-direct {
  background: var(--t-emerald-bg);
}
.src-mark.on-bazaar {
  background: #dff5ea;
}
.src-mark.on-pwa {
  background: #e3e8ef;
}
/* آمادهٔ فروشگاه‌های بعدی */
.src-mark.on-play {
  background: #e8f1e8;
}
.src-mark.on-appstore {
  background: var(--t-sky-bg);
}
.src-mark.on-sibapp {
  background: var(--t-rose-bg);
}

.src-body {
  flex: 1;
  min-width: 0;
}
.src-body h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 3px;
}
.src-body p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.9;
  max-width: 46em;
}

.src-act {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 216px;
}
.src-act .btn {
  width: 100%;
}
.src-note {
  font-size: 11.5px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.6;
}

/* منبعی که هنوز فعال نیست: حالتِ خوانا به‌جای دکمهٔ غیرفعال */
.src.is-soon .src-body h3 {
  color: var(--text-2);
}
.src-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: var(--r-btn);
  font-size: 14px;
  font-weight: 700;
  color: var(--t-amber-fg);
  background: var(--t-amber-bg);
}
.src-state .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

/* راهنمای کوتاهِ زیرِ یک پلتفرم — .src-extra بازنشسته، .mini-steps فعال */
.src-extra {
  padding: 22px 26px 26px;
  border-top: 1px solid var(--border);
  background: rgba(13, 27, 42, 0.016);
}
.src-extra h4 {
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 12px;
}

/* ↓ فعال: داخلِ .dl-steps استفاده می‌شود. عددِ خامش هنگام همین دست‌زدن
   به نردبان گِرد شد (۱۳٫۵ → --fs-3، ۱۲٫۵ → --fs-2). */
.mini-steps {
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.mini-steps li {
  font-size: var(--fs-3);
  color: var(--text-2);
  line-height: 1.9;
}
.mini-steps li::marker {
  color: var(--green-strong);
  font-weight: 800;
}
.mini-steps code {
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-2);
  color: var(--navy);
  background: var(--card-2);
  padding: 2px 8px;
  border-radius: 6px;
}
.src-extra-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.85;
}

/* ─────────── جعبهٔ راهنما/هشدار ─────────── */
.note-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--green);
  border-radius: var(--r-card);
  padding: 18px 20px;
  margin-top: 24px;
}
.note-box .ic {
  width: 21px;
  height: 21px;
  color: var(--green-strong);
  margin-top: 3px;
}
.note-box p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.95;
}
.note-box.warn {
  border-inline-start-color: var(--coral);
}
.note-box.warn .ic {
  color: var(--coral);
}
.note-box b {
  color: var(--text);
  font-weight: 700;
}

/* ─────────── گام‌های نصب (فهرست شماره‌دار) — بازنشسته ───────────
   تنها مصرف‌کننده‌اش بخشِ «سه قدم تا نصب روی اندروید» در /download/ بود که
   در ۱۴۰۵/۰۶/۲۴ حذف شد. راهنمای گام‌به‌گامِ باقی‌مانده (افزودن به صفحهٔ اصلی)
   از `.mini-steps` استفاده می‌کند، نه این. اگر صفحهٔ تازه‌ای گامِ شماره‌دار
   خواست، این بلاک را برگردان به‌جای نوشتنِ دوباره:

   .steps { max-width: 720px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 4px; counter-reset: step; }
   .step { display: flex; gap: 18px; padding: 20px 4px; border-bottom: 1px solid var(--border); }
   .step:last-child { border-bottom: 0; }
   .step-no { counter-increment: step; flex: none; width: 38px; height: 38px; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     font-weight: 900; font-size: 16px; color: var(--green-strong); background: var(--surface); }
   .step-no::before { content: counter(step); }
   .step-body h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
   .step-body p { font-size: 14px; color: var(--text-2); line-height: 1.9; }
   .step-body code { font-family: inherit; font-weight: 700; font-size: 13px; color: var(--navy);
     background: var(--card-2); padding: 2px 8px; border-radius: 6px; }
   ─────────────────────────────────────────────────────────────── */

/* ─────────── گزینهٔ جایگزین (پاورقی صفحه) ─────────── */
.alt-line {
  margin: 48px auto 0;
  max-width: 720px;
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--text-2);
}
.alt-line a {
  color: var(--green-strong);
  font-weight: 800;
}
.alt-line a:hover {
  text-decoration: underline;
}

/* ─────────── واکنش‌گرا (صفحات داخلی) ─────────── */
@media (max-width: 860px) {
  /* ستونِ کنش زیرِ متن می‌رود، ولی نشان کنارِ عنوان می‌ماند تا ردیف خوانا بماند. */
  .src {
    flex-wrap: wrap;
    row-gap: 16px;
  }
  .src-body {
    flex-basis: calc(100% - 72px);
  }
  .src-act {
    width: 100%;
  }
  .src-note {
    text-align: start;
  }
}
@media (max-width: 720px) {
  .page-hero {
    padding-top: 52px;
  }
  .plat-head {
    padding: 18px 18px;
    gap: 13px;
  }
  .plat-ver {
    font-size: 11.5px;
    padding: 5px 11px;
  }
  .src {
    padding: 20px 18px;
  }
  .src-mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
  .src-mark .mark {
    width: 26px;
    height: 26px;
  }
  .src-body {
    flex-basis: calc(100% - 64px);
  }
  .src-extra {
    padding: 20px 18px 22px;
  }
}