@font-face {
  font-family: 'Vazirmatn';
  src: url('Vazirmatn.ttf') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:        oklch(0.984 0.004 220);
  --bg-warm:   oklch(0.978 0.006 220);
  --surface:   #ffffff;
  --ink:       oklch(0.20 0.01 220);
  --ink-2:     oklch(0.40 0.01 220);
  --ink-3:     oklch(0.58 0.01 220);
  --ink-4:     oklch(0.70 0.01 220);
  --line:      oklch(0.92 0.005 220);
  --line-2:    oklch(0.88 0.006 220);

  --accent:        oklch(0.55 0.09 200);
  --accent-ink:    oklch(0.42 0.10 200);
  --accent-soft:   oklch(0.95 0.03 200);
  --accent-glow:   oklch(0.55 0.09 200 / 0.22);

  --good:      oklch(0.62 0.13 155);
  --good-soft: oklch(0.95 0.04 155);
  --warn:      oklch(0.68 0.12 75);
  --warn-soft: oklch(0.96 0.04 75);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Vazirmatn', Tahoma, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

.page {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}
@media (max-width: 920px) {
  .page { grid-template-columns: 1fr; min-height: 0; }
}

/* Story column (RTL-leading) */
.story {
  background: var(--bg);
  padding: 56px 80px 36px;
  display: flex; flex-direction: column;
  border-inline-end: 1px solid var(--line);
  position: relative; overflow: hidden;
}
@media (max-width: 1100px) { .story { padding: 48px 56px 32px; } }
@media (max-width: 920px)  { .story { padding: 40px 32px 28px; border-inline-end: 0; border-bottom: 1px solid var(--line); } }

.story::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 86% -10%, var(--accent-glow) 0%, transparent 55%),
    radial-gradient(circle at 110% 90%, oklch(0.62 0.09 200 / 0.10) 0%, transparent 50%);
  pointer-events: none;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  position: relative;
}

.ym-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font: 700 12px/1 Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em;
}

.wordmark {
  font: 500 18px/1 Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em; color: var(--ink);
}
.wordmark .y { color: var(--ink); }
.wordmark .m { color: var(--accent); }

.story-body {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; max-width: 480px;
  position: relative; padding: 48px 0;
}

.persian-mark {
  font: 800 64px/1 Vazirmatn, Tahoma, sans-serif;
  letter-spacing: -0.02em; color: var(--ink);
}
.persian-mark::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  margin-inline-start: 6px;
  vertical-align: super;
  transform: translateY(-12px);
}
.latin-mark {
  font: 400 14px/1 Helvetica, Arial, sans-serif;
  color: var(--ink-3); margin-top: 14px;
  letter-spacing: 0.01em;
}
.latin-mark strong { color: var(--ink-2); font-weight: 500; }

.story-eyebrow {
  font: 600 12.5px/1 Vazirmatn, Tahoma, sans-serif;
  color: var(--accent-ink);
  letter-spacing: 0.02em;
  margin-top: 28px;
}

.story-lede {
  font: 400 15.5px/2 Vazirmatn, Tahoma, sans-serif;
  color: var(--ink-2);
  margin: 16px 0 0;
  text-wrap: pretty;
}

.story-name-origin {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.story-name-origin .label {
  font: 600 11px/1 Vazirmatn, Tahoma, sans-serif;
  color: var(--ink-3); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.story-name-origin .text {
  font: 400 13px/1.85 Vazirmatn, Tahoma, sans-serif;
  color: var(--ink-2); margin-top: 8px;
}
.story-name-origin .text b {
  color: var(--ink); font-weight: 600;
}

.contact {
  margin-top: 32px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.contact a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-2);
  font: 500 12.5px/1 Vazirmatn, Tahoma, sans-serif;
  transition: border-color .15s, color .15s, background .15s;
}
.contact a:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--surface);
}
.contact a.email { direction: ltr; font-family: Helvetica, Arial, sans-serif; }

.story-foot {
  font: 400 11px/1.6 Vazirmatn, Tahoma, sans-serif;
  color: var(--ink-3);
  position: relative;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.story-foot .ltr { direction: ltr; font-family: Helvetica, Arial, sans-serif; color: var(--ink-4); }

/* Apps column */
.apps {
  background: var(--surface);
  padding: 56px 64px 36px;
  display: flex; flex-direction: column;
}
@media (max-width: 1100px) { .apps { padding: 48px 48px 32px; } }
@media (max-width: 920px)  { .apps { padding: 40px 32px 32px; } }

.apps-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 28px;
}
.apps-head .title {
  font: 600 13px/1 Vazirmatn, Tahoma, sans-serif;
  color: var(--ink-3); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.apps-head .count {
  font: 400 11.5px/1 Helvetica, Arial, sans-serif;
  color: var(--ink-3);
  direction: ltr;
}

.apps-list { display: flex; flex-direction: column; gap: 14px; flex: 1; }

.app-card {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.app-card:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 14px 32px -16px var(--accent-glow);
}
.app-card:hover .app-arrow {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.app-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.app-meta .left {
  display: flex; align-items: center; gap: 10px;
  font: 500 12px/1 Helvetica, Arial, sans-serif;
  color: var(--ink-3);
  direction: ltr;
}
.app-meta .num {
  color: var(--ink-4);
  font-weight: 400;
}
.app-meta .latin {
  color: var(--ink); font-weight: 600; letter-spacing: -0.005em;
}
.app-meta .right {
  display: flex; align-items: center; gap: 8px;
}

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11px/1 Vazirmatn, Tahoma, sans-serif;
  padding: 4px 8px; border-radius: 999px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.live { background: var(--good-soft); color: oklch(0.36 0.10 155); }
.pill.live .dot { background: var(--good); box-shadow: 0 0 0 3px oklch(0.62 0.13 155 / 0.18); }
.pill.beta { background: var(--warn-soft); color: oklch(0.42 0.12 75); }
.pill.beta .dot { background: var(--warn); }
.pill.soon { background: oklch(0.94 0.005 220); color: var(--ink-3); }
.pill.soon .dot { background: var(--ink-4); }

.version {
  font: 400 11.5px/1 Helvetica, Arial, sans-serif;
  color: var(--ink-3);
  direction: ltr;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
}

.app-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 18px;
}
.app-name {
  font: 700 22px/1.35 Vazirmatn, Tahoma, sans-serif;
  letter-spacing: -0.01em; color: var(--ink);
}
.app-desc {
  font: 400 13.5px/1.85 Vazirmatn, Tahoma, sans-serif;
  color: var(--ink-2); margin-top: 8px;
  max-width: 420px;
  text-wrap: pretty;
}

.app-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
}

.app-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.app-url {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1 Helvetica, Arial, sans-serif;
  color: var(--ink-3);
  direction: ltr;
}
.app-card:hover .app-url { color: var(--accent-ink); }
.app-url svg { opacity: 0.6; }

.app-updated {
  font: 400 11.5px/1 Vazirmatn, Tahoma, sans-serif;
  color: var(--ink-3);
}
.app-updated time { color: var(--ink-2); font-weight: 500; direction: ltr; }

.app-card.disabled {
  pointer-events: none;
  opacity: 0.62;
}