/* Dasht - the landing site.
   The app's own palette and type: IRANSans, the brand green and the navy panel.
   Light and dark follow the app's dynamic colours.

   THE PERSIAN TOUCHES ARE THE APP'S OWN, and kept as quiet as the app keeps
   them: the girih of the servant card (an eight-point star - two squares, one
   turned 45 degrees - on a 24pt grid, at single-digit opacity), the pointed
   arch of a tiled window around the illustrations, and one line of Hafez. */

@font-face { font-family: "IRANSans"; src: url("assets/fonts/IRANSansWeb.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IRANSans"; src: url("assets/fonts/IRANSansWeb_Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IRANSans"; src: url("assets/fonts/IRANSansWeb_Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ink: #0F2233;
  --ink-muted: #5F6C66;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --fill: #F2F4F3;
  --grouped: #F1F3F2;
  --line: #E2E5E4;
  --green: #16624A;
  --green-fill: #16624A;
  --green-soft: #E6F0EC;
  --panel: #0F2233;
  --panel-ink: #F1F5F3;
  --panel-caption: #C9CBCB;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(15, 34, 51, 0.12);
  /* The girih tile, exactly as CardPattern draws it: radius 0.42 of the side,
     a 1pt line at 9% of the ink. */
  --girih-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%230F2233' stroke-opacity='.09'%3E%3Cpath d='M19.13 19.13H4.87V4.87h14.26z'/%3E%3Cpath d='M12 22.08 1.92 12 12 1.92 22.08 12z'/%3E%3C/g%3E%3C/svg%3E");
  --girih: var(--girih-ink);
  --girih-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.07'%3E%3Cpath d='M19.13 19.13H4.87V4.87h14.26z'/%3E%3Cpath d='M12 22.08 1.92 12 12 1.92 22.08 12z'/%3E%3C/g%3E%3C/svg%3E");
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V42C0 22 26 9 50 0c24 9 50 22 50 42v78z'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E9EEEC;
    --ink-muted: #93A3AB;
    --paper: #0F1519;
    --card: #18222A;
    --fill: #1E2932;
    --grouped: #0F1519;
    --line: #2A3740;
    --green: #93E3BE;
    --green-fill: #1B7A57;
    --green-soft: #17302A;
    --panel: #22303A;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    --girih: var(--girih-light);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "IRANSans", Tahoma, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--green); }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* ---- girih -------------------------------------------------------------
   Behind content, never under words: .girih-fade is densest at the far side
   (where the phone stands in the hero) and gone by the text; .girih-light
   covers a dark panel evenly. */

.girih-fade, .girih-light { position: relative; isolation: isolate; }
.girih-fade::before, .girih-light::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--girih) center / 28px;
}
.girih-fade::before {
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 62%);
          mask-image: linear-gradient(to right, #000 0%, transparent 62%);
}
.girih-light::before {
  background-image: var(--girih-light);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 38%);
          mask-image: linear-gradient(to top, #000 0%, transparent 38%);
}
@media (max-width: 860px) {
  .girih-fade::before {
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 55%);
            mask-image: linear-gradient(to top, #000 0%, transparent 55%);
  }
}

/* ---- left to right ----------------------------------------------------
   English reads in the system face, as the app sets Latin in SF Pro and
   Roboto, at a line height meant for Latin rather than for Persian. The
   girih fades toward the words, which now stand on the left. */

[dir="ltr"] body, body[dir="ltr"], html[dir="ltr"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}
html[dir="ltr"] .hero h1 { letter-spacing: -1px; line-height: 1.15; }
html[dir="ltr"] h2, html[dir="ltr"] .story h2 { line-height: 1.25; }
/* Language names keep their own script's face on the English page. */
html[dir="ltr"] :is(.tongues, .lang-menu) [lang]:not([lang="en"]) { font-family: "IRANSans", Tahoma, sans-serif; }
/* Hafez stays in Persian, in the Persian face, set where the line starts. */
html[dir="ltr"] .verse [lang="fa"] { font-family: "IRANSans", Tahoma, sans-serif; text-align: left; }
html[dir="ltr"] .girih-fade::before {
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 62%);
          mask-image: linear-gradient(to left, #000 0%, transparent 62%);
}
html[dir="ltr"] .languages.girih-fade::before {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 26%, transparent 74%, #000);
          mask-image: linear-gradient(to right, #000, transparent 26%, transparent 74%, #000);
}

/* ---- header ------------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 22px; }

.site-nav { display: flex; gap: 26px; }
.site-nav a { color: var(--ink-muted); text-decoration: none; font-weight: 500; font-size: 15px; }
.site-nav a:hover { color: var(--ink); }

@media (max-width: 860px) { .site-nav { display: none; } }

.header-end { display: flex; align-items: center; gap: 8px; }

/* ---- language menu ---------------------------------------------------- */

.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 12px; border-radius: var(--radius);
  color: var(--ink-muted); font-weight: 500; font-size: 14px;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--ink); background: var(--fill); }
.lang-menu ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20;
  list-style: none; margin: 0; padding: 6px; min-width: 160px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.lang-menu a {
  display: block; padding: 8px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 500; text-align: start;
}
.lang-menu a:hover { background: var(--fill); }
.lang-menu a[aria-current] { color: var(--green); font-weight: 700; }
@media (max-width: 420px) { .lang-menu summary span { display: none; } }

/* ---- buttons ----------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--radius);
  font: inherit; font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease;
}
.button:active { transform: scale(.98); }
.button-primary { background: var(--green-fill); color: #fff; }
.button-primary:hover { background: color-mix(in srgb, var(--green-fill) 88%, #000); }
.button-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.button-quiet { min-height: 42px; padding: 0 16px; background: var(--fill); color: var(--ink); font-size: 14px; }

/* ---- hero ------------------------------------------------------------- */

.hero { padding: 72px 0 56px; overflow: hidden; }

.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px;
  background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 14px;
}
/* The same star, small and solid: two squares, one turned. */
.eyebrow::before {
  content: ""; width: 10px; height: 10px; flex: none; background: currentColor;
  clip-path: polygon(50% 0, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
}

.hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.35; margin: 18px 0 14px; letter-spacing: -0.5px; }

.hero .lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-muted); max-width: 34ch; margin: 0 0 30px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pills { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-muted); font-size: 14px; font-weight: 500;
}
.pills li::before { content: "●"; color: var(--green); font-size: 9px; margin-inline-end: 8px; vertical-align: middle; }

/* ---- story ------------------------------------------------------------ */

.story { background: var(--panel); color: var(--panel-ink); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.story h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.55; margin: 0; }
.story p { color: var(--panel-caption); font-size: 18px; margin: 0 0 14px; }
.story p { margin: 0 0 14px; }
.story > .wrap > div > p:nth-child(2) { color: var(--panel-ink); font-weight: 500; }

.verse { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.verse p { margin: 0; color: var(--panel-ink); font-size: 19px; font-weight: 500; }
.verse-meaning { font-size: 15px !important; font-weight: 400 !important; color: var(--panel-caption) !important; margin-top: 4px !important; }
.verse-meaning:empty { display: none; }
.verse cite { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--panel-caption); }

@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; gap: 20px; } }

@media (max-width: 860px) {
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ---- the phone -------------------------------------------------------- */

.phone {
  position: relative; width: min(320px, 100%); margin-inline: auto;
  aspect-ratio: 9 / 19; border-radius: 46px; padding: 12px;
  background: #0B1117; box-shadow: var(--shadow);
}

.phone::before {
  content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 28px; border-radius: 20px; background: #0B1117; z-index: 2;
}

.screen {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden;
  background: var(--paper); padding: 62px 18px 18px; display: flex; flex-direction: column; gap: 14px;
}

.screen-bar { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green); font-size: 14px;
}

.wallet {
  position: relative; border-radius: 22px; padding: 14px 16px; min-height: 116px;
  background: var(--panel); color: var(--panel-ink); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.wallet svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wallet > * { position: relative; }
.wallet-caption { font-size: 12px; color: var(--panel-caption); display: flex; align-items: center; gap: 6px; }
.wallet-caption .eye { opacity: .8; }
.wallet-figure { font-size: 30px; font-weight: 700; line-height: 1.2; }
.wallet-unit { font-size: 13px; font-weight: 500; opacity: .7; text-align: end; }

.screen-heading { font-weight: 700; font-size: 14px; margin-top: 4px; }

.row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.row:last-of-type { border-bottom: 0; }
.row-icon { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--fill); color: var(--green); flex: none; }
.row-text { flex: 1; line-height: 1.5; }
.row-text small { display: block; color: var(--ink-muted); font-size: 11px; }
.row-amount { font-weight: 700; color: var(--green); white-space: nowrap; }

.fab {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-fill); color: #fff; box-shadow: 0 10px 24px rgba(22, 98, 74, .35);
}

/* ---- sections --------------------------------------------------------- */

section { padding: 88px 0; }
section.tinted { background: var(--grouped); }

.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.45; margin: 10px 0 8px; }
.section-head p { color: var(--ink-muted); margin: 0; font-size: 18px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.step-number {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 20px; margin-bottom: 16px;
}
.step h3 { margin: 0 0 6px; font-size: 20px; }
.step p { margin: 0; color: var(--ink-muted); }

@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.audience + .audience { margin-top: 88px; }
.audience.flip .audience-art { order: 2; }
/* A pointed arch, as a tiled window frames its view. */
.audience-art {
  position: relative; isolation: isolate; aspect-ratio: 1 / 1.08;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 22% 9% 7%;
  background: var(--green-soft);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
          mask: var(--arch) center / 100% 100% no-repeat;
}
.audience-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--girih) center / 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
}
.audience-art img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  /* The illustrations carry a white ground of their own; multiplied, it takes
     the arch's tint instead of standing in it as a box. */
  mix-blend-mode: multiply;
}
/* In the dark the arch is a lit window - light, so the multiply still holds. */
@media (prefers-color-scheme: dark) {
  .audience-art { background: #DCE8E2; }
  .audience-art::before { background-image: var(--girih-ink, none); }
}
@media (max-width: 860px) { .audience-art { width: min(420px, 100%); margin-inline: auto; } }
.audience h3 { font-size: clamp(24px, 3vw, 32px); margin: 10px 0 10px; line-height: 1.5; }
.audience p { color: var(--ink-muted); margin: 0 0 18px; font-size: 17px; }

.tag {
  display: inline-block; margin-inline-start: 6px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-muted); font-size: 12px; font-weight: 500; line-height: 22px;
  vertical-align: 1px; white-space: nowrap;
}

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-inline-start: 34px; }
.checks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2316624A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

@media (max-width: 860px) {
  .audience { grid-template-columns: 1fr; gap: 28px; }
  .audience.flip .audience-art { order: 0; }
}

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; }
.feature h3 { margin: 0 0 6px; font-size: 19px; }
.feature p { margin: 0; color: var(--ink-muted); }

.feature .checks li::before { top: 6px; }

/* ---- languages ------------------------------------------------------- */

.languages { padding: 64px 0; text-align: center; }
/* Centred words: the tiling comes in from both edges and stops short of them. */
.languages.girih-fade::before {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 26%, transparent 74%, #000);
          mask-image: linear-gradient(to right, #000, transparent 26%, transparent 74%, #000);
}
.languages h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 22px; }
.tongues { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tongues a, .tongues span {
  display: block; padding: 8px 20px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none;
}
.tongues a { transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.tongues a:hover { border-color: var(--green); color: var(--green); }
.tongues a:active { transform: scale(.97); }
.tongues a[aria-current] { background: var(--green-fill); border-color: var(--green-fill); color: #fff; }
/* Offered in the app, no page here yet: shown, not linked. */
.tongues span { color: var(--ink-muted); background: transparent; border-style: dashed; font-weight: 500; }

@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 4px 24px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--ink-muted); }

/* ---- download --------------------------------------------------------- */

.download {
  background: var(--panel); color: var(--panel-ink); border-radius: 32px; padding: 56px;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; position: relative; overflow: hidden;
}
.download h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; line-height: 1.45; }
.download p { margin: 0; color: var(--panel-caption); font-size: 17px; }
.stores { display: grid; gap: 10px; }
.store {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  color: var(--panel-ink); font-weight: 700;
}
.store span { font-weight: 500; font-size: 13px; color: var(--panel-caption); }
/* The one entry that can be live before any store: the APK from the site. */
.store-link { text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.store-link:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }
.store-link span {
  padding: 2px 12px; border-radius: 999px; background: var(--green-fill); color: #fff; font-weight: 700;
}

@media (max-width: 860px) { .download { grid-template-columns: 1fr; padding: 36px 26px; } }

/* ---- footer ----------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--ink-muted); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-row nav { display: flex; gap: 20px; }
.footer-row a { color: var(--ink-muted); text-decoration: none; }
.footer-row a:hover { color: var(--ink); }
.trust-seal { display: inline-flex; }
.trust-seal img { display: block; height: 72px; width: auto; cursor: pointer; }

/* ---- legal pages ------------------------------------------------------ */

.legal { max-width: 760px; padding: 48px 0 80px; }
.legal h1 { font-size: 34px; line-height: 1.5; margin: 0 0 12px; }
.legal h2 { font-size: 22px; margin: 36px 0 8px; }
.legal p, .legal li { color: var(--ink-muted); }
.legal strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}