/* shahabmahd.com — طبق spec.md
   قاعده‌ی حاکم: هر زاویه ۹۰ یا ۴۵ درجه. بدون گرادیان، بدون سایه‌ی نرم.
   border-radius حداکثر ۴px و فقط روی دکمه‌ها و کارت‌ها. */

/* ————— فونت ————— */

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn-fa.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* ساب‌ست فارسی/عربی. حروف لاتین (نشانی ایمیل) عمداً به فونت سیستم می‌افتند
     تا ۳۴KB ساب‌ست لاتین به بودجه‌ی صفحه اضافه نشود. */
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}

/* ————— توکن‌ها ————— */

:root {
  --brand:      #007DC2;  /* آبی لوگو — مارک، آیکون، خطوط تأکید، متن بزرگ */
  --brand-deep: #005A8E;  /* آبی به‌عنوان متن روی زمینه‌ی روشن — ۷:۱ */
  --ink:        #0E1E28;
  --paper:      #F2F6F8;
  --surface:    #FFFFFF;
  --rule:       #DCE5EA;

  /* دو انحراف عمدی از جدول رنگ spec.md، هر دو به‌خاطر بند دسترس‌پذیری همان سند:
     ۱. #6B7A85 روی زمینه‌ی صفحه فقط ۴٫۰۷:۱ کنتراست دارد و از AA رد نمی‌شود.
        --slate یک پله تیره‌تر شد (۴٫۸۵:۱). خاکستری اصلی زیر --logo-gray دست‌نخورده ماند.
     ۲. سفید روی #007DC2 فقط ۴٫۴۶:۱ است. زمینه‌ی دکمه‌ی پر یک پله تیره‌تر شد (۵٫۲۳:۱).
        تفاوت با چشم غیرقابل تشخیص است و آبی لوگو هیچ‌جا عوض نشده. */
  --slate:      #5E6E79;
  --logo-gray:  #6B7A85;
  --brand-fill: #0071B3;

  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 40px; --s5: 64px; --s6: 96px;

  --wrap: 1080px;
  --r: 4px;
}

/* ————— پایه ————— */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.95;
  font-weight: 400;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0 0 var(--s2); line-height: 1.35; font-weight: 600; }
h2 { font-size: 20px; line-height: 1.5; }
h3 { font-size: 17px; }
p  { margin: 0 0 var(--s2); }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s3);
}

main > section { padding-block: var(--s5); }
main > section + section { border-block-start: 1px solid var(--rule); }

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s2);
  z-index: 10;
  background: var(--brand-fill);
  color: #fff;
  padding: var(--s1) var(--s2);
  text-decoration: none;
}
.skip:focus { inset-block-start: var(--s1); color: #fff; }

.dim   { color: var(--slate); font-size: 14px; line-height: 1.8; margin-block-end: var(--s1); }
.micro { color: var(--slate); font-size: 14px; line-height: 1.8; }

/* جای‌نگه‌دار — عمداً زشت است تا تصادفی منتشر نشود. با پر شدن محتوا، کلاس todo حذف می‌شود. */
.todo {
  display: inline-block;
  border: 1px dashed #C0392B;
  background: #FDECEA;
  color: #922B21;
  padding: 2px var(--s1);
  font-size: 14px;
}
.trust-item.todo { display: flex; }

/* ————— لوگو ————— */

.mark { inline-size: 38px; block-size: auto; flex: none; }
.mk-a { fill: var(--brand); }
.mk-b { fill: var(--logo-gray); }

.lockup {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 44px;
  text-decoration: none;
  color: inherit;
}

/* ناحیه‌ی لمسی حداقل ۴۴px — لینک‌های متنی به‌تنهایی به این ارتفاع نمی‌رسند */
.tel-list a, .dim a, .step-link, .foot-nav a, .quiet, .partner a, .note a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}
.lockup-txt { display: flex; flex-direction: column; line-height: 1.35; }
.lockup-txt b     { font-size: 18px; font-weight: 600; white-space: nowrap; }
.lockup-txt small { font-size: 13px; color: var(--slate); white-space: nowrap; }

/* زیر ۳۶۰px جا برای زیرعنوان نیست و دو خطی می‌شود — حذفش می‌کنیم تا هدر تمیز بماند */
@media (max-width: 359px) {
  .site-head .lockup-txt small { display: none; }
}

/* ————— دکمه‌ها ————— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-block-size: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-fill { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.btn-fill:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.btn-line { background: transparent; border-color: var(--brand); color: var(--brand-deep); }
.btn-line:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }

.btn-text { background: none; border: 0; color: var(--ink); padding-inline: var(--s1); }
.btn-text:hover { color: var(--brand); }

.ico {
  inline-size: 20px; block-size: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
}
/* آیکون دسته‌ها. وزن خط عمداً ۲ است: ۱٫۵ روی viewBox ۴۸ در ابعاد ۴۰px
   به ۱٫۲۵px می‌رسد و مثل خط‌خطی محو دیده می‌شود. */
.ico-lg {
  inline-size: 40px; block-size: 40px; flex: none;
  fill: none; stroke: var(--brand); stroke-width: 2;
  stroke-linecap: square; stroke-linejoin: miter;
}

/* مارک شبکه‌ها — تصویر با رنگ رسمی خودش، پس CSS رنگش را دست نمی‌زند */
.chan-mark { inline-size: 40px; block-size: 40px; flex: none; }
.chan-main .chan-mark { inline-size: 48px; block-size: 48px; }

/* ————— هدر ————— */

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--surface);
  border-block-end: 1px solid var(--rule);
}
.head-inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-block-size: 68px;
}
/* در موبایل هدر فقط لوگو و دکمه است و جا تنگ می‌شود — لاک‌آپ فشرده‌تر می‌شود تا دکمه دو خطی نشود */
.head-inner .lockup { gap: var(--s1); }
.head-cta { padding-inline: 14px; }
/* لاک‌آپ همه‌چیز را به انتها هل می‌دهد — مستقل از اینکه ناوبری دیده می‌شود یا نه */
.head-inner .lockup { margin-inline-end: auto; }
.head-nav { display: none; gap: var(--s3); }
.head-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
}
.head-nav a:hover { color: var(--brand); }

/* بنر مناسبتی */
.notice {
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  padding-block: var(--s1);
}

/* ————— هیرو ————— */

.hero { background: var(--surface); }
.eyebrow {
  color: var(--slate);
  font-size: 14px;
  letter-spacing: .02em;
  margin-block-end: var(--s2);
}
.hero h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.35;
  margin-block-end: var(--s3);
  max-inline-size: 18ch;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.lede {
  font-size: 17px;
  color: var(--slate);
  max-inline-size: 52ch;
  margin-block-end: var(--s4);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s2);
}
/* در موبایل هر کنش یک سطر کامل — هدف لمسی بزرگ‌تر و سلسله‌مراتب خواناتر */
.cta-row .btn { flex: 1 1 100%; }
.cta-row .btn-text { flex: 0 0 auto; align-self: flex-start; }

/* ————— نوار اعتماد ————— */

.trust { background: var(--paper); }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
}
.trust-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.5;
}
.trust-item b    { font-size: 24px; font-weight: 600; }
.trust-item span { font-size: 14px; color: var(--slate); }

/* ————— درباره ما ————— */

.about { background: var(--surface); }
.about-grid { display: grid; gap: var(--s3); }
.year {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  margin: 0;
}
.about p { max-inline-size: 60ch; }

/* ————— دسته‌ها ————— */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s2);
}
.offer-grid li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s3);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

/* ————— مراحل خرید — المان امضا ————— */

.steps { background: var(--surface); }
.rail { display: grid; gap: 0; }

.step {
  position: relative;
  padding-block-end: var(--s2);
}
.step h3 { margin-block-end: var(--s1); }
.step p  { margin-block-end: var(--s1); color: var(--slate); }
.step-link { font-size: 14px; font-weight: 600; }

/* عدد مرحله در یک مربع ۴۵ درجه — همان هندسه‌ی لوگو */
.badge {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--s2);
  background: var(--brand-fill);
  transform: rotate(45deg);
}
.badge i {
  transform: rotate(-45deg);
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  line-height: 1;
}

.link-v, .link-h {
  fill: none;
  stroke: var(--rule);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.link-v {
  display: block;
  inline-size: 40px;
  block-size: 40px;
  margin-inline-start: 0;
  margin-block: var(--s1) var(--s2);
}
.link-h { display: none; }
.step:last-child .link-v { display: none; }

/* ————— سؤالات متداول ————— */

.faq details {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-block-end: var(--s1);
  padding: 0 var(--s3);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding-block: var(--s2);
  min-block-size: 44px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  flex: none;
  background: var(--brand);
  transform: rotate(45deg);
}
.faq details[open] summary::before { background: var(--slate); }
.faq details p { color: var(--slate); padding-block-end: var(--s2); }

/* ————— اطلاعیه‌ها ————— */

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s2);
}
.note {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s3);
}
.note time { display: block; font-size: 14px; color: var(--slate); margin-block-end: var(--s1); }
.note p    { margin-block-end: var(--s1); }
.note a    { font-size: 14px; font-weight: 600; }

/* ————— کانال‌ها ————— */

.chan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s2);
}
.chan-card a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  block-size: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s3);
  text-decoration: none;
  color: var(--ink);
}
.chan-card a:hover { border-color: var(--brand); }
.chan-name { font-weight: 600; font-size: 17px; }
.chan-desc { font-size: 14px; color: var(--slate); line-height: 1.8; }
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--brand-fill);
  padding: 1px 8px;
  margin-inline-start: var(--s1);
}
.chan-main a { border-color: var(--brand); border-width: 2px; }
.chan-main .chan-name { font-size: 20px; }

/* ————— تماس ————— */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
}
.contact-block h3 { font-size: 14px; color: var(--slate); font-weight: 600; }
.tel-list li { margin-block-end: 2px; }
.tel-list a { font-size: 17px; font-weight: 600; text-decoration: none; }
.tel-list a:hover { text-decoration: underline; }
.map-links { display: flex; flex-wrap: wrap; gap: var(--s1); margin-block-start: var(--s3); }

/* ————— فوتر ————— */

.site-foot {
  background: var(--ink);
  color: #fff;
  padding-block: var(--s5);
}
.site-foot .mk-a, .site-foot .mk-b { fill: #fff; }
.site-foot .lockup-txt small { color: rgba(255,255,255,.65); }
.site-foot a { color: #fff; }
/* روی زمینه‌ی مرکبی، آبی برند فقط ۳٫۸:۱ می‌دهد — به‌جای رنگ، خط زیر می‌گذاریم */
.site-foot a:hover { color: #fff; text-decoration: underline; }

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--s3);
  border-block-end: 1px solid rgba(255,255,255,.15);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s3); }
.foot-nav a { text-decoration: none; font-size: 14px; }
.foot-social { display: flex; gap: var(--s2); margin: 0; }
.foot-social a {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
}
/* فوتر باید ساکت بماند — مارک‌ها کوچک و کمی کدر، با hover کامل روشن */
.foot-social img { inline-size: 22px; block-size: 22px; opacity: .75; }
.foot-social a:hover img { opacity: 1; }

.foot-bot { padding-block-start: var(--s3); font-size: 14px; line-height: 1.8; }
.foot-bot p { margin-block-end: var(--s1); }
.partner { color: rgba(255,255,255,.8); }
.quiet { color: rgba(255,255,255,.65) !important; font-size: 14px; }
.quiet:hover { color: #fff !important; }
.copy { color: rgba(255,255,255,.62); margin-block-start: var(--s2); }

/* ————— نوار چسبان موبایل ————— */

.dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  display: flex;
  gap: var(--s1);
  padding-inline: var(--s1);
  padding-block-end: env(safe-area-inset-bottom);
  background: var(--surface);
  border-block-start: 1px solid var(--rule);
}
.dock .btn { flex: 1 1 0; min-block-size: 56px; }
body { padding-block-end: 72px; }

/* ————— دسکتاپ ————— */

@media (min-width: 768px) {
  body { font-size: 17px; padding-block-end: 0; }
  h2 { font-size: 24px; }

  main > section { padding-block: var(--s6); }

  .head-inner { gap: var(--s3); }
  .head-inner .lockup { gap: var(--s2); }
  .head-cta { padding-inline: 20px; }
  .head-nav { display: flex; }
  .mark { inline-size: 52px; }

  .hero h1 { font-size: 46px; }
  .year { font-size: 88px; }

  .cta-row .btn { flex: 0 0 auto; }

  .about-grid { grid-template-columns: auto 1fr; gap: var(--s5); align-items: start; }

  /* بله باید از بقیه بزرگ‌تر باشد، نه فقط پررنگ‌تر */
  .chan-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

  .rail {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--s4);
  }
  .step { padding-block-end: 0; }
  .link-v { display: none; }
  /* رابط در شکاف سمت بعدیِ جریان می‌نشیند — در RTL یعنی سمت چپ کارت */
  .step:not(:last-child) .link-h {
    display: block;
    position: absolute;
    inset-inline-end: calc(var(--s4) * -1);
    inset-block-start: 0;
    inline-size: var(--s4);
    block-size: 40px;
  }

  .dock { display: none; }
}

/* ————— حرکت کمتر ————— */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ————— چاپ ————— */

@media print {
  .site-head, .dock, .foot-social { display: none; }
  body { background: #fff; }
}