/* The footer every public page shares (partials/footer.html, copied into
   each page by scripts/landing-footer.mjs). Its own colours, so it looks the
   same on a page whose sheet defines fewer of them: «فوتر توی همه صفحات
   یکسان باشه» (2026-10-29). */
.footer-wrap {
  --primary: #7f63f5;
  --primary-ink: #6147e3;
  --primary-deep: #4a33c4;
  --buy: #22b455;
  --ink: #171717;
  --ink-2: #4f5765;
  --ink-3: #646d7c;
  --surface: #ffffff;
  --stroke: #eff0f4;
  --gutter: clamp(16px, 4vw, 40px);
  font-family: "Koochak", "DanaFaNum", "IRANSans", Tahoma, system-ui, sans-serif;
  line-height: 1.9;
}
.footer-wrap .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A page's own sheet may style bare lists, paragraphs and links (terms,
   privacy): none of it reaches in here. */
/* :where() keeps these at a bare element's weight, so the footer's own
   rules below still win and only a page's bare rules are undone (this
   sheet comes after the page's). */
.footer-wrap { color: var(--ink); font-size: 16px; text-align: start; }
:where(.footer-wrap) :where(h3, p, ul, li) { margin: 0; }
:where(.footer-wrap) ul { list-style: none; padding: 0; }
:where(.footer-wrap) :where(p, li) { color: inherit; }
:where(.footer-wrap) a { color: inherit; }
:where(.footer-wrap) :where(img, svg) { max-width: none; }

/* ================================================================
   Footer - the white card floating over the page, with the brand
   strip stepping over its top edge and the side panel hanging off
   its outer edge.
   ================================================================ */
.footer-wrap {
  position: relative;
  width: min(1240px, 100% - 2 * var(--gutter));
  margin: clamp(64px, 9vw, 110px) auto 0;
}
/* The brand strip on the right and, from 1040px, the Instagram card on
   the left: one row stepping over the card's top edge. */
/* No z-index of its own, so its two children layer apart: the strip
   behind the card (its foot, all padding, tucks under the card's top
   edge and the purple panel there), the Instagram card over it. */
.footer-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: -38px;
}
.footer-stage { position: relative; }
.brand-strip {
  position: relative;
  z-index: 0;
  flex: 0 1 720px;
  padding: 22px 28px 52px;
  border-radius: 0 48px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(to left, var(--stroke) 0%, rgb(239 240 244 / 0) 100%);
}
.bs-id { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.bs-id img { width: 54px; height: 54px; flex: 0 0 54px; filter: drop-shadow(0 12px 20px rgb(127 99 245 / 0.3)); }
.bs-name { display: block; font-size: 1.45rem; font-weight: 900; line-height: 1.4; }
.bs-sub { display: block; font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; }
@media (min-width: 720px) { .bs-text { display: flex; align-items: baseline; gap: 10px; } }
.bs-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 4px;
  transition: opacity 220ms;
}
.bs-cta:hover { opacity: 0.72; }
.bs-cta svg { width: 20px; height: 20px; color: var(--primary); }
@media (max-width: 560px) { .bs-cta span { display: none; } .brand-strip { padding-inline: 18px; } }

.site-footer { position: relative; z-index: 1; }
.footer-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 -18px 34px rgb(127 99 245 / 0.18));
}
@media (max-width: 767px) {
  .footer-shape { display: none; }
  .site-footer { background: var(--surface); border: 1px solid var(--stroke); border-bottom: 0; border-radius: 32px 32px 0 0; }
}
.footer-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  padding: 54px 22px calc(26px + env(safe-area-inset-bottom));
}
@media (min-width: 1040px) {
  .footer-body {
    grid-template-columns: 1fr 2fr;
    padding: 40px 40px 34px;
    padding-inline-end: 11%;
    align-items: stretch;
    min-height: 360px;
  }
}
.footer-main { display: flex; flex-direction: column; }
.footer-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .footer-cards { grid-template-columns: repeat(3, 1fr); } }
.fcol { border-radius: 24px; padding: 18px; background: linear-gradient(180deg, #fafafa 0%, rgb(250 250 250 / 0) 100%); }
.fhead { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fhead svg { width: 18px; height: 18px; flex: none; }
.fhead p { font-size: 1rem; font-weight: 700; }
.flist { padding: 0 4px; }
.flist li + li { margin-top: 4px; }
.flist a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 8px;
  transition: color 220ms;
}
.flist a::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #c4c4c4; flex: none; transition: background 220ms; }
.flist a:hover { color: var(--primary-ink); }
.flist a:hover::before { background: var(--primary); }
.fcol-seal { position: relative; overflow: hidden; isolation: isolate; }
.fcol-seal::before {
  content: "";
  position: absolute;
  inset-inline-start: -18%;
  bottom: -28%;
  width: 150%;
  aspect-ratio: 306 / 218;
  background: url("images/popular-bg-right.svg") no-repeat center / contain;
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
.seal-slot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 124px; padding: 4px; }
.seal-slot a { display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; transition: opacity 220ms; }
.seal-slot a:hover { opacity: 0.82; }
.seal-slot img { display: block; max-width: 110px; height: auto; }
.footer-bottom {
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 48px 0 0 0;
  border-top: 1px solid var(--stroke);
  border-inline-end: 1px solid var(--stroke);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-3);
  font-size: 0.8125rem;
}
.footer-bottom a { color: var(--ink-2); text-decoration: none; transition: color 220ms; }
.footer-bottom a:hover { color: var(--primary-ink); }
/* «© 2026 تمامی حقوق … برای طلاکُنش محفوظ است», the name in the brand
   purple and a link home. */
/* One sentence that wraps like one, on a phone too. */
.rights { line-height: 1.9; }
.rights svg { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-inline-end: 5px; }
.footer-bottom a.rights-brand { color: var(--primary-ink); font-weight: 700; }
.footer-bottom a.rights-brand:hover { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 4px; }
/* «طراحی اکتان‌کد»: opposite the copyright on a wide screen; on a phone
   on its own line, at the left, under the right-aligned copyright. */
@media (max-width: 599px) {
  .footer-bottom .credit { flex-basis: 100%; text-align: left; }
}
/* </> between «طراحی» and the name, drawn as a symbol - not read out. */
.credit-code { display: inline-block; width: 17px; height: 17px; vertical-align: -4px; color: var(--primary-ink); }
/* ================================================================
   Social links - the white pills tucked behind the footer card's
   slanted outer edge on a wide screen, a row inside it otherwise.
   The list itself comes from the app (dash «شبکه‌های اجتماعی»,
   lib/siteSocials); what is written here is only what shows before
   it answers, or if it never does.
   ================================================================ */
.socials[hidden] { display: none !important; }
.soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--stroke), 0 12px 20px 0 var(--stroke);
  transition: transform 300ms, background 300ms, color 300ms, box-shadow 300ms;
}
.soc svg { width: 22px; height: 22px; flex: 0 0 22px; transition: color 300ms; }
.soc-telegram svg { color: #229ed9; }
.soc-whatsapp svg { color: #25d366; }
.soc-youtube svg { color: #ff0000; }
.soc-instagram svg { color: #e1306c; }
.soc-aparat svg { color: #ed145b; }
.soc:hover, .soc:focus-visible {
  background: linear-gradient(226.94deg, color-mix(in srgb, var(--primary) 70%, white) 23.03%, var(--primary) 80.46%);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.28), inset 0 0 3px 2px rgb(255 255 255 / 0.38), 0 14px 32px 0 color-mix(in srgb, var(--primary) 28%, transparent);
}
.soc:hover svg, .soc:focus-visible svg { color: #fff; }
.soc:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Inside the footer, under the cards. */
.socials-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin: 22px auto 0;
}
/* Wrapping, never wider than the footer: a grid's minimum here would
   push a phone's page sideways. */
.socials-row .soc { flex: 1 1 140px; }
.socials-row .soc:hover { transform: translateY(-2px); }

/* Behind the card's outer edge, as far out as the page has room for:
   only from 1540px, where the margin beside the footer is wider than
   the part that shows - never a sideways scroll. */
.socials-side { display: none; }
@media (min-width: 1540px) {
  .socials-row { display: none; }
  .socials-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    z-index: 0;
    left: -143px;
    top: 110px;
    width: 264px;
  }
  .socials-side .soc { justify-content: flex-end; }
  .socials-side .soc:hover, .socials-side .soc:focus-visible { transform: translateX(-6px); }
}

/* ================================================================
   «ما را در اینستاگرام دنبال کنید» - the card beside the brand strip,
   its 3D mark rising over the top. Drawn from the shape's own
   600x199 box, so text and button keep their places at any width.
   Hidden until the app says Instagram is on (dash «شبکه‌های
   اجتماعی»), since its link is the one it opens.
   ================================================================ */
.insta-banner[hidden] { display: none !important; }
.insta-banner {
  position: relative;
  z-index: 3;
  display: block;
  container-type: inline-size;
  aspect-ratio: 600 / 199;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform 300ms, filter 300ms;
  filter: drop-shadow(0 18px 30px rgb(107 79 225 / 0.28));
}
.insta-banner:hover { transform: translateY(-3px); filter: drop-shadow(0 24px 38px rgb(107 79 225 / 0.38)); }
.insta-banner:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 28px; }
.ib-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.ib-dots {
  position: absolute;
  inset: 6% 45% 6% 20%;
  z-index: -1;
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.35) 1.2px, transparent 1.6px);
  background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 45%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 45%, transparent);
}
.ib-icon {
  position: absolute;
  left: 2.5%;
  top: -17%;
  width: 33%;
  height: auto;
  transform: rotate(-8deg);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: drop-shadow(0 16px 22px rgb(46 20 120 / 0.35));
}
.insta-banner:hover .ib-icon { transform: rotate(-3deg) translateY(-4px) scale(1.03); }
.ib-text {
  position: absolute;
  right: 22%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.25;
}
.ib-text small { font-size: 5cqw; font-weight: 800; color: rgb(255 255 255 / 0.62); }
.ib-text b { font-size: 7.6cqw; font-weight: 900; }

/* Beside the brand strip, over the card's top edge, from 1040px. */
.insta-top { display: none; }
.insta-inline { width: 100%; max-width: 440px; margin: 46px auto 0; }
@media (min-width: 1040px) {
  .insta-top { display: block; flex: 0 1 350px; margin-inline-end: 18px; }
  .insta-inline { display: none; }
}
/* With the social pills out past the card, the banner's outer edge
   lines up with theirs. */
@media (min-width: 1540px) {
  .insta-top { flex-basis: 410px; margin-inline-end: -143px; }
}

.footer-side { display: flex; }
.side-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 30px 28px;
  border-radius: 28px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(226.94deg, color-mix(in srgb, var(--primary) 70%, white) 23.03%, var(--primary) 80.46%);
  box-shadow: 0 24px 44px -22px color-mix(in srgb, var(--primary) 72%, transparent);
  transition: transform 300ms, box-shadow 300ms;
}
@media (min-width: 1040px) { .side-cta { margin-inline-end: -54px; margin-block: -14px; } }
.side-cta:hover { transform: translateY(-3px); box-shadow: 0 30px 52px -22px color-mix(in srgb, var(--primary) 82%, transparent); }
.side-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.side-cta { position: relative; overflow: hidden; isolation: isolate; }
/* The mark twice, in white: small above the title, and large and faint
   in the corner, cut by the card's edge. */
.side-cta .side-logo { width: 52px; height: 52px; filter: brightness(0) invert(1); }
.side-cta .side-mark {
  position: absolute; z-index: -1; inset-inline-end: -46px; bottom: -52px;
  width: 200px; height: 200px; opacity: 0.14; filter: brightness(0) invert(1);
  transform: rotate(-12deg);
}
.side-cta h3 { font-size: 1.375rem; font-weight: 800; }
.side-cta p { font-size: 0.9rem; line-height: 2; color: rgb(255 255 255 / 0.92); }
.side-cta .go {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: flex-start;
  margin-top: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.3);
  font-family: "DanaFaNum", "Koochak", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
}
.side-cta .go svg { width: 17px; height: 17px; }