/* سایت عمومی — روی base.css سوار می‌شود. بخش صفحهٔ اصلی (hero و …) پایین همین فایل است. */
.public { background: var(--glaze); }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; background: var(--lapis-800); color: #fff;
  padding: .5rem 1rem; border-radius: var(--r); z-index: 100; }
.skip:focus { inset-block-start: 1rem; }

.pub-head { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(251, 252, 254, .9); backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line); }
.pub-head__in { display: flex; align-items: center; gap: var(--s5); min-block-size: 68px; }
.pub-nav { display: flex; gap: var(--s5); margin-inline-start: var(--s5); }
.pub-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; padding-block: .3rem; border-block-end: 2px solid transparent; }
.pub-nav a:hover { color: var(--lapis-700); border-color: var(--firooze-500); }
.pub-head__cta { margin-inline-start: auto; display: flex; gap: var(--s2); align-items: center; }
@media (max-width: 820px) { .pub-nav { display: none; } }

.pub-foot { background: var(--lapis-900); color: #b9c2e0; margin-block-start: var(--s8); padding-block: var(--s7) var(--s5);
  font-size: var(--fs-sm); }
.pub-foot__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); }
.pub-foot .brand { color: #fff; margin-block-end: var(--s3); }
.pub-foot__about p { max-inline-size: 36ch; line-height: 1.9; }
.pub-foot__title { color: #fff; font-weight: 700; margin-block-end: var(--s3); }
.pub-foot nav { display: grid; gap: .5rem; align-content: start; }
.pub-foot a { color: #b9c2e0; text-decoration: none; } .pub-foot a:hover { color: #fff; }
.pub-foot__social { display: flex; gap: var(--s3); margin-block-start: var(--s3); }
.pub-foot__base { border-block-start: 1px solid rgba(255, 255, 255, .1); margin-block-start: var(--s6); padding-block-start: var(--s4);
  color: #7d88b3; font-size: var(--fs-xs); }
@media (max-width: 820px) { .pub-foot__in { grid-template-columns: 1fr 1fr; } .pub-foot__about { grid-column: 1 / -1; } }

/* بخش‌های صفحه‌های عمومی */
.section { padding-block: var(--s8); scroll-margin-block-start: 72px; }
#check { scroll-margin-block-start: 110px; }
.section--tint { background: var(--mist); border-block: 1px solid var(--line); }
.section__head { max-inline-size: 60ch; margin-block-end: var(--s6); }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.6;
  color: var(--lapis-800); }
.section__lead { color: var(--ink-2); font-size: var(--fs-md); margin-block-start: var(--s3); line-height: 2; }
.page-head { padding-block: var(--s7) var(--s5); border-block-end: 1px solid var(--line); background: var(--mist); }
.page-head__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); color: var(--lapis-800);
  line-height: 1.6; }
.page-body { padding-block: var(--s6); }

/* === صفحهٔ اصلی === (این بخش بعداً کامل می‌شود) */

/* ---------- hero ---------- */
.hero { padding-block: var(--s7) var(--s7); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.55rem, .8rem + 1.9vw, 2.2rem); line-height: 1.65;
  color: var(--lapis-800); letter-spacing: 0; text-wrap: balance; }
.hero__line { display: block; }
.hero__lead { margin-block-start: var(--s4); font-size: var(--fs-md); color: var(--ink-2); line-height: 2.1; max-inline-size: 52ch; }
.check-form { margin-block-start: var(--s6); }
.check-form__label { display: block; font-weight: 700; color: var(--lapis-800); margin-block-end: var(--s2); }
.check-form__row { display: flex; gap: var(--s2); }
.check-form__row .input { flex: 1; min-inline-size: 0; border-color: var(--lapis-200); border-width: 2px; }
.check-form__row .input:focus { border-color: var(--lapis-600); }
.check-form__note { margin-block-start: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; opacity: 0; }
.hero__art { position: relative; }
.hero__caption { font-size: var(--fs-xs); color: var(--ink-4); margin-block-start: var(--s2); text-align: end; }

/* کاشی‌کاری: هر ستاره یک صفحهٔ سایت؛ پرتو از راست به چپ می‌گذرد و وضعیت هر کاشی معلوم می‌شود */
.mosaic { position: relative; background: var(--lapis-900); border-radius: 28px; padding: clamp(14px, 2.4vw, 26px);
  margin-inline-end: clamp(-140px, -9vw, 0px); }
.mosaic__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.m-gem { fill: #24336b; }
.m-tile rect { fill: #1d2b62; transition: fill .2s; }
.m-tile__in { transform-box: fill-box; transform-origin: center; }
.m-crack { fill: none; stroke: var(--lapis-900); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.m-beam { fill: var(--saffron-500); opacity: 0; }
.m-label { opacity: 0; }
.m-label rect, .m-label path { fill: var(--glaze); }
.m-label text { font-family: var(--font); font-size: 11.5px; font-weight: 700; fill: var(--lapis-900); }
.m-label--bad rect, .m-label--bad path { fill: #ffe9e5; } .m-label--bad text { fill: var(--lal-700); }

.mosaic .m-tile--ok rect { animation: tile-ok .5s var(--ease) var(--d) both; }
.mosaic .m-tile--warn rect { animation: tile-warn .5s var(--ease) var(--d) both; }
.mosaic .m-tile--bad rect { animation: tile-bad .5s var(--ease) var(--d) both; }
.mosaic .m-tile--skip rect { animation: tile-skip .5s var(--ease) var(--d) both; }
.mosaic .m-tile--bad .m-tile__in { animation: tile-drop .6s var(--ease) calc(var(--d) + .15s) both; }
.mosaic .m-tile--bad .m-crack { animation: fade-in .3s ease calc(var(--d) + .25s) both; }
.mosaic .m-label { animation: label-in .45s var(--ease) var(--d) both; }
.mosaic .m-beam { animation: beam 2.6s linear .05s both; }
@keyframes tile-ok { from { fill: #1d2b62; } 40% { fill: #d9f4f2; } to { fill: var(--firooze-500); } }
@keyframes tile-warn { from { fill: #1d2b62; } 40% { fill: #fff3d6; } to { fill: var(--saffron-500); } }
@keyframes tile-bad { from { fill: #1d2b62; } 40% { fill: #ffd9d3; } to { fill: var(--lal-500); } }
@keyframes tile-skip { from { fill: #1d2b62; } to { fill: #33427c; } }
@keyframes tile-drop { to { transform: translate(2px, 4px) rotate(7deg); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes label-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes beam { 0% { opacity: 0; transform: translateX(0); } 6% { opacity: .95; } 94% { opacity: .95; }
  100% { opacity: 0; transform: translateX(var(--travel)); } }

.mosaic__card { position: absolute; inset-block-end: -26px; inset-inline-start: -22px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); display: flex; align-items: center;
  gap: var(--s4); box-shadow: var(--shadow-pop); }
.mosaic__ringbar { transition: stroke-dashoffset 1.6s var(--ease) 2.2s; }
.mosaic__facts { display: grid; gap: .15rem; font-size: var(--fs-sm); min-inline-size: 150px; }
.mosaic__facts > div { display: flex; justify-content: space-between; gap: var(--s4); }
.mosaic__facts dt { color: var(--ink-3); display: flex; align-items: center; gap: .4rem; }
.mosaic__facts dd { font-weight: 800; color: var(--lapis-800); font-variant-numeric: tabular-nums; }
.lg { inline-size: .6rem; block-size: .6rem; border-radius: 2px; transform: rotate(45deg); display: inline-block; }
.lg--bad { background: var(--lal-500); } .lg--warn { background: var(--saffron-500); }

@media (max-width: 900px) {
  .hero { padding-block: var(--s6) var(--s7); }
  .hero__in { grid-template-columns: 1fr; gap: var(--s6); }
  .mosaic { margin-inline-end: 0; border-radius: 20px; }
  .mosaic__card { inset-inline-start: 12px; inset-block-end: -30px; padding: var(--s2) var(--s3); gap: var(--s3); }
  .hero__caption { margin-block-start: 38px; }
  .check-form__row { flex-direction: column; }
}
@media (max-width: 480px) { .m-label text { font-size: 14px; } }

/* ---------- دفترِ دسته‌ها ---------- */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); border-block-start: 2px solid var(--lapis-800); }
.ledger__row { display: grid; grid-template-columns: 11.5rem 1fr; gap: var(--s4); padding-block: var(--s4); border-block-end: 1px solid var(--line);
  align-items: baseline; }
.ledger dt { font-weight: 800; color: var(--lapis-800); display: flex; align-items: center; gap: .6rem; }
.ledger dt .ic { color: var(--firooze-600); }
.ledger dd { color: var(--ink-2); line-height: 1.9; }
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ledger__row { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---------- نمونهٔ گزارش ---------- */
.sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s7); align-items: center; }
.ticks { margin-block-start: var(--s5); display: grid; gap: var(--s3); color: var(--ink-2); }
.ticks li { display: flex; gap: .7rem; align-items: baseline; }
.ticks .ic { color: var(--firooze-600); translate: 0 .15em; }
.sample__card { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; }
.finding { padding: var(--s4) var(--s5); border-block-end: 1px solid var(--line); display: grid; gap: var(--s2); }
.finding__head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.finding__title { font-size: var(--fs-md); font-weight: 800; color: var(--lapis-800); margin-inline-end: auto; }
.finding__count { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.finding__why { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.9; }
.finding__fix { font-size: var(--fs-sm); line-height: 1.9; background: var(--firooze-50); border-inline-start: 3px solid var(--firooze-500);
  padding: var(--s2) var(--s3); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: #07585d; }
.finding__url { font-size: .78rem; color: var(--ink-3); text-align: left; background: var(--mist); padding: .3rem .6rem; border-radius: var(--r-sm);
  overflow-x: auto; white-space: nowrap; }
.finding--fold { padding-block: var(--s3); }
.sample__note { font-size: var(--fs-xs); color: var(--ink-4); padding: var(--s2) var(--s5); }
@media (max-width: 900px) { .sample { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- روش کار ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); counter-reset: none; position: relative; }
.steps::before { content: ""; position: absolute; inset-block-start: 1.35rem; inset-inline: 1.4rem; block-size: 2px; background: var(--line-strong); }
.steps__item { position: relative; display: grid; gap: var(--s2); align-content: start; }
.steps__n { inline-size: 2.8rem; block-size: 2.8rem; display: grid; place-items: center; background: var(--lapis-800); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); border-radius: var(--r-tile); transform: rotate(45deg);
  margin-block-end: var(--s3); box-shadow: 0 0 0 6px var(--glaze); }
.steps__n > span { display: inline-block; transform: rotate(-45deg); line-height: 1; }
.steps__item h3 { font-size: var(--fs-md); font-weight: 800; color: var(--lapis-800); }
.steps__item p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.95; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .steps::before { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- دو ستون گوگل/هوش مصنوعی ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper);
  overflow: hidden; }
.duo__col { padding: var(--s6); display: grid; gap: var(--s3); align-content: start; }
.duo__col + .duo__col { border-inline-start: 1px solid var(--line-strong); }
.duo__title { font-size: var(--fs-lg); font-weight: 800; color: var(--lapis-800); display: flex; gap: .6rem; align-items: center; line-height: 1.6; }
.duo__title .ic { color: var(--firooze-600); }
.duo__col p { color: var(--ink-2); line-height: 2; }
.frank { margin-block-start: var(--s5); display: flex; gap: .8rem; align-items: flex-start; padding: var(--s4) var(--s5);
  border: 1px dashed var(--saffron-500); background: var(--saffron-50); border-radius: var(--r-lg); color: #6b4300; line-height: 1.9; }
.frank .ic { margin-block-start: .35rem; color: var(--saffron-700); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } .duo__col + .duo__col { border-inline-start: 0; border-block-start: 1px solid var(--line-strong); } }

/* ---------- تعرفهٔ خلاصه ---------- */
.plans-lite { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--paper); }
.plans-lite .table th { background: transparent; }
.plans-lite .table td { padding-block: var(--s4); font-size: var(--fs-base); }
.plans-lite tr.is-featured td { background: var(--firooze-50); }
.plans-lite tr.is-featured td:first-child { box-shadow: inset 4px 0 0 var(--firooze-500); }
[dir="rtl"] .plans-lite tr.is-featured td:first-child { box-shadow: inset -4px 0 0 var(--firooze-500); }

/* ---------- بستن ---------- */
.closing { background: var(--lapis-800); color: #dfe5f7; padding-block: var(--s8); margin-block-start: var(--s8); position: relative; overflow: hidden; }
.closing + .pub-foot { margin-block-start: 0; }
.closing::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56.57' height='56.57' viewBox='0 0 56.57 56.57'%3E%3Cg fill='%231b2e6e'%3E%3Crect x='9.3' y='9.3' width='38' height='38' rx='2.5'/%3E%3Crect x='9.3' y='9.3' width='38' height='38' rx='2.5' transform='rotate(45 28.28 28.28)'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: linear-gradient(to left, transparent 30%, #000 100%); -webkit-mask-image: linear-gradient(to left, transparent 30%, #000 100%); }
.closing__in { position: relative; display: grid; gap: var(--s3); justify-items: start; }
.closing__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); color: #fff; line-height: 1.7; }
.closing__btn { background: var(--saffron-500); border-color: var(--saffron-500); color: var(--lapis-900); margin-block-start: var(--s3); font-weight: 800; }
.closing__btn:hover { background: #ffb53a; border-color: #ffb53a; color: var(--lapis-900); }