/* ============================================================
   STZ Developer — shared stylesheet
   Brand: charcoal #14181C · off-white #F4F3EF · green #1D9E75
   Type: Inter (headings/body) · JetBrains Mono (labels/brand)
   ============================================================ */

:root {
  --bg: #101418;
  --bg-soft: #14181c;
  --bg-card: #181e23;
  --bg-raised: #1f262c;
  --line: #2a3138;
  --accent: #1d9e75;
  --accent-bright: #2cc492;
  --accent-dim: rgba(29, 158, 117, 0.14);
  --text: #f4f3ef;
  --text-soft: #9aa3ab;
  --text-faint: #6e7781;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --radius: 18px;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

html[data-theme="light"] {
  --bg: #f4f3ef;
  --bg-soft: #eceae3;
  --bg-card: #ffffff;
  --bg-raised: #efede6;
  --line: #dbd8ce;
  --accent: #178a66;
  --accent-bright: #116b4f;
  --accent-dim: rgba(23, 138, 102, 0.12);
  --text: #14181c;
  --text-soft: #4a545c;
  --text-faint: #7a828a;
  --shadow: 0 18px 50px rgba(30, 40, 35, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s ease, color 0.35s ease;
}

::selection { background: var(--accent); color: #f4f3ef; }

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

a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand small {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.18em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}

.nav-links a {
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent-bright); text-decoration: none; }

.nav-cta {
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-bright) !important;
  transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--accent); color: #f4f3ef !important; }

.theme-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--text-soft);
  transition: border-color 0.2s, transform 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(15deg); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 780px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-links.open { max-height: 360px; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 15px 24px; width: 100%; }
  .nav-cta { border: none; border-radius: 0; }
  .nav-cta:hover { background: var(--accent-dim); color: var(--accent-bright) !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 100px 0 90px;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 130%;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, var(--accent-dim), transparent 70%),
    radial-gradient(ellipse 35% 30% at 18% 25%, rgba(29, 158, 117, 0.06), transparent 70%),
    radial-gradient(ellipse 35% 30% at 82% 25%, rgba(29, 158, 117, 0.06), transparent 70%);
  pointer-events: none;
}

.hero > .container { position: relative; }

.hero-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 28px;
  background: var(--bg-soft);
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-bright);
}

.hero p.lead {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--text-soft);
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-accent {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: #0f1418;
  box-shadow: 0 8px 24px rgba(29, 158, 117, 0.3);
}
.btn-accent:hover { box-shadow: 0 12px 32px rgba(29, 158, 117, 0.42); }
html[data-theme="light"] .btn-accent { color: #f4f3ef; }

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: var(--bg-soft);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-bright); }

/* ---------- Brand video panel ---------- */
.brand-video {
  width: min(560px, calc(100% - 8px));
  margin: 52px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #14181c;
}
.brand-video video,
.brand-video img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 70px;
}

.stat {
  background: var(--bg-card);
  padding: 28px 18px;
  text-align: center;
}

.stat b {
  display: block;
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent-bright);
  line-height: 1.2;
}

.stat span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section.alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 660px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 14px;
}

.section-head h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 14px;
}

.section-head p { color: var(--text-soft); font-size: 1.05rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.badge-live { background: var(--accent-dim); color: var(--accent-bright); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
.badge-dev { background: rgba(154, 163, 171, 0.12); color: var(--text-soft); border: 1px solid var(--line); }
.badge-soon { background: rgba(110, 119, 129, 0.12); color: var(--text-faint); border: 1px solid var(--line); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.5); }
  55% { box-shadow: 0 0 0 6px rgba(29, 158, 117, 0); }
}

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- Featured app ---------- */
.featured {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) {
  .featured { grid-template-columns: 1fr; }
  .featured .featured-media-first { order: 2; }
}

.featured-copy .badge { margin-bottom: 20px; }

.featured-copy h3 {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.featured-copy p { color: var(--text-soft); margin-bottom: 14px; }

.app-icon-lg {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.store-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 20px 10px 15px;
  transition: border-color 0.2s, transform 0.2s;
}
.store-badge:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.store-badge svg { width: 26px; height: 26px; fill: var(--text); flex-shrink: 0; }
.store-badge small { display: block; font-size: 0.68rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }
.store-badge b { display: block; font-size: 1rem; color: var(--text); line-height: 1.25; }

.phone-stack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}

.phone-stack img {
  width: 225px;
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.4s ease;
}

.phone-stack img:first-child {
  transform: rotate(-7deg) translateX(46px);
  z-index: 1;
}
.phone-stack img:last-child {
  transform: rotate(5deg) translateX(-46px) translateY(24px);
  z-index: 2;
}
.phone-stack:hover img:first-child { transform: rotate(-9deg) translateX(58px) translateY(-8px); }
.phone-stack:hover img:last-child { transform: rotate(7deg) translateX(-58px) translateY(16px); }

/* ---------- App grid ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 26px;
}

.app-card { padding: 30px; display: flex; flex-direction: column; }

.app-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.app-glyph {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  flex-shrink: 0;
}

.app-card h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.app-card p { color: var(--text-soft); font-size: 0.97rem; margin: 10px 0 18px; flex: 1; }

.app-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

.app-card .card-link {
  margin-top: 16px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--accent-bright);
}
.app-card .card-link::after { content: " →"; transition: margin 0.2s; }
.app-card .card-link:hover::after { margin-left: 4px; }

/* progress bar */
.progress {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 14px;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width 1.1s cubic-bezier(0.25, 0.9, 0.3, 1);
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 46px;
}

.filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #f4f3ef; }

.app-card.hidden { display: none; }

/* ---------- App detail page ---------- */
.app-hero {
  padding: 90px 0 70px;
  position: relative;
  overflow: hidden;
}
.app-hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto;
  height: 120%;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.app-hero .container { position: relative; }

.app-hero-inner {
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
}

.app-hero-icon {
  width: 128px;
  height: 128px;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.app-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.app-hero .tagline { color: var(--text-soft); font-size: 1.1rem; max-width: 560px; margin-top: 10px; }

/* screenshots strip */
.shots {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 10px 4px 26px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shots::-webkit-scrollbar { height: 8px; }
.shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.shots img {
  width: 235px;
  flex-shrink: 0;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  scroll-snap-align: center;
  cursor: zoom-in;
  transition: transform 0.25s;
}
.shots img:hover { transform: translateY(-6px); }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 15, 18, 0.92);
  display: none;
  place-items: center;
  padding: 30px;
  cursor: zoom-out;
}
.lightbox.open { display: grid; }
.lightbox img {
  max-height: 88vh;
  max-width: 92vw;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute;
  top: 22px;
  right: 28px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.7;
}
.lightbox-close:hover { opacity: 1; }

/* feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.feature-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.25s, border-color 0.25s;
}
.feature-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.feature-item .fi-icon { font-size: 1.6rem; margin-bottom: 14px; }
.feature-item h4 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.feature-item p { color: var(--text-soft); font-size: 0.95rem; }

/* books */
.books {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
@media (max-width: 700px) { .books { grid-template-columns: 1fr; } }

.book-card {
  padding: 34px;
  text-align: center;
}
.book-card h4 { font-family: var(--display); font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.book-card p { color: var(--text-soft); font-size: 0.95rem; }

/* quote band */
.quote-band {
  text-align: center;
  padding: 80px 24px;
}
.quote-band cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* ---------- Timeline ---------- */
.timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--accent), var(--line));
}
.timeline-item { position: relative; padding-bottom: 38px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}
.timeline-item h4 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.timeline-item .tl-when { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); font-weight: 700; }
.timeline-item p { color: var(--text-soft); font-size: 0.97rem; margin-top: 6px; }

/* ---------- Contact / footer ---------- */
.contact-band {
  text-align: center;
  padding: 90px 24px;
}
.contact-band h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.contact-band p { color: var(--text-soft); max-width: 520px; margin: 0 auto 30px; }

.footer {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  background: var(--bg-soft);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer p { color: var(--text-faint); font-size: 0.88rem; }
.footer nav { display: flex; gap: 20px; }
.footer nav a { color: var(--text-soft); font-size: 0.9rem; }
.footer-lockup { height: 44px; width: auto; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ============================================================
   Qalam additions — appended 3 Sep 2026
   Used only by qalam.html (plus the Qalam cards on index/upcoming).
   ADDITIVE ONLY: nothing above this line is modified.

   Urdu / Nastaliq rules, in order of how often they go wrong:
     1. line-height must be >= 2.4 — Nastaliq glyphs are tall and the
        descenders clip at the normal 1.65 line height.
     2. direction: rtl on every Urdu run.
     3. unicode-bidi: isolate on inline Urdu, so an Urdu phrase can never
        flip the direction of the English sentence around it.
   ============================================================ */

/* Block of Urdu — its own line/paragraph. */
.urdu {
  font-family: "Noto Nastaliq Urdu", serif;
  direction: rtl;
  text-align: right;
  line-height: 2.4;
}

/* A word or phrase of Urdu inside an English line.
   Sized up to 1.15em: Nastaliq has a much smaller apparent x-height than
   Inter, so at 1em it reads as fine print next to the Latin around it. */
.urdu-inline {
  font-family: "Noto Nastaliq Urdu", serif;
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 2.4;
  font-size: 1.15em;
  vertical-align: -0.06em;
}

/* The قلم wordmark under the Latin name in the app hero.
   direction stays rtl (correct for the script); text-align is overridden to
   left so the mark sits directly beneath "Qalam" rather than flying to the
   far edge of the flex column. */
.urdu-wordmark {
  font-family: "Noto Nastaliq Urdu", serif;
  direction: rtl;
  text-align: left;
  line-height: 2.4;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--accent-bright);
  margin-top: 2px;
}
.quote-band .urdu-wordmark,
.contact-band .urdu-wordmark { text-align: center; }

/* Headings that carry an inline Urdu span need room for it. */
.has-urdu { line-height: 1.9; }

/* Landscape desktop screenshots. The stock .shots img is 235px, sized for
   portrait phone shots; Qalam's are 16:10 Mac windows. */
.shots.shots-wide img {
  width: min(660px, 84vw);
  border-radius: 14px;
}

/* Framed seal / feature image (quote band). */
.seal-frame {
  width: min(520px, 100%);
  margin: 0 auto 26px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Free vs Pro tier cards — reuses .card, adds the plan chrome. */
.tier { padding: 34px; display: flex; flex-direction: column; text-align: left; }
.tier h4 { font-family: var(--display); font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; }
.tier .tier-price {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 18px;
}
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.tier li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.62rem;
  line-height: 2.6;
  color: var(--accent);
}

/* Placeholder blocks a human must replace before this page is published. */
.todo-slot {
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius);
  background: var(--accent-dim);
  padding: 18px 22px;
  margin: 22px 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  text-align: left;
}
.todo-slot b {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------
   Sher-card gallery (qalam.html) — real cards made in the app.
   Mixed aspect ratios: three squares and one tall portrait, so the
   row is height-led rather than width-led and the portrait keeps
   its proportions instead of being cropped. Inherits the lightbox
   from .shots.
   --------------------------------------------------------------- */
.card-gallery {
  align-items: flex-start;
  gap: 20px;
}
.card-gallery img {
  height: 340px;
  width: auto;
  max-width: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-card);
}
.card-gallery-note {
  max-width: 680px;
  margin: 22px auto 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
}
@media (max-width: 760px) {
  .card-gallery img { height: 260px; }
}

/* ============================================================
   Site restructure additions — appended 4 Sep 2026
   Every page now lives at a clean path (/qalam, /homeport, …) and the
   Published / Upcoming pages carry brief cards instead of long-form copy.
   ADDITIVE ONLY: nothing above this line is modified.
   ============================================================ */

/* Hero mark for an app that has no icon artwork yet. Mirrors the geometry
   of .app-hero-icon (128px, 30px radius) so the two hero layouts line up,
   but draws the app's emoji glyph on the accent wash used by .app-glyph. */
.app-hero-glyph {
  width: 128px;
  height: 128px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  font-size: 3.6rem;
  line-height: 1;
  flex-shrink: 0;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: var(--shadow);
}
@media (max-width: 560px) {
  .app-hero-glyph { width: 96px; height: 96px; border-radius: 24px; font-size: 2.7rem; }
}

/* A card link that leaves this site (SadaCast → sadacast.com). The base rule
   .app-card .card-link::after sets a → arrow; this swaps it for the outbound
   ↗ so a card that navigates away is distinguishable at a glance. */
.app-card .card-link.external::after { content: " ↗"; }
.card-link.external { font-weight: 600; }

/* Small caption under a brief card's primary link — used for the direct
   store link on Published, so the card stays brief but still gets you there. */
.card-sublink {
  display: block;
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--text-faint);
}
.card-sublink a { color: var(--text-soft); }
.card-sublink a:hover { color: var(--accent-bright); }

/* Status rows on the unreleased app pages: a plain definition list of the
   few things we can state truthfully (platforms, stage, availability). */
.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.status-list li {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.status-list b {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}
.status-list span { color: var(--text-soft); font-size: 0.95rem; }

/* Guard against horizontal page overflow on narrow screens: long unbroken
   strings (URLs, email addresses) in centred bands would otherwise widen the
   viewport. Scoped to the two bands that carry them. */
.contact-band .btn, .quote-band p { overflow-wrap: anywhere; }

/* Very narrow phones (iPhone SE and similar, 320px).
   .app-grid and .feature-grid declare minmax(310px/280px, 1fr) tracks. Inside
   .container that leaves 272px of room at a 320px viewport, so the track is
   wider than the page and the whole document scrolls sideways. Below 380px a
   single column is the right layout anyway, so pin it — this only ever applies
   where the multi-column layout could not fit in the first place. */
@media (max-width: 380px) {
  .app-grid, .feature-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Owner review fixes — appended 4 Sep 2026
   ADDITIVE ONLY: nothing above this line is modified.
   ============================================================ */

/* ---------- Platform glyphs (Apple / Microsoft / Google Play) ----------
   The store rows and platform chips used emoji (a red apple fruit, a window
   pane) which are not the platform marks. These are monochrome inline SVGs
   that inherit the surrounding text colour and size, so they read correctly
   in both the day and night themes. */
.pf-glyph {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: -0.15em;
}

/* A chip that leads with a platform mark: inline-flex so the glyph and the
   label sit on one baseline-aligned row with a real gap. */
.chip-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip-platform .pf-glyph { vertical-align: baseline; }

/* A store badge that is deliberately not a link yet (an app awaiting store
   approval). Same geometry as .store-badge, visibly inert. */
.store-badge.is-pending {
  cursor: default;
  opacity: 0.62;
  border-style: dashed;
}
.store-badge.is-pending:hover {
  border-color: var(--line);
  transform: none;
}

/* ---------- Lightbox navigation ----------
   The overlay now steps through the group of screenshots the opened image
   belongs to. Buttons are injected by main.js, so every page carrying the
   .lightbox markup gets them. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  place-items: center;
  padding: 0 0 4px;
  transition: background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-nav.is-shown { display: grid; }
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.55); }
.lightbox-nav:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 14px;
  white-space: nowrap;
}
.lightbox-counter.is-shown { display: block; }

/* The image sits on top of nothing, so a click on it must not close the
   overlay any more — only the backdrop does. Keep the cursor honest. */
.lightbox img { cursor: default; }

/* Narrow screens: the edge-anchored arrows would sit on top of the image, so
   they drop below it and flank the counter instead. */
@media (max-width: 720px) {
  .lightbox { padding: 24px 12px 104px; }
  .lightbox img { max-height: 70vh; max-width: 94vw; }
  .lightbox-nav { top: auto; bottom: 20px; transform: none; width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-prev { left: calc(50% - 100px); }
  .lightbox-next { right: calc(50% - 100px); }
  .lightbox-counter { bottom: 32px; }
}

/* Wide screens: keep the arrows clear of the image. .lightbox img caps at
   92vw, which on a desktop viewport reaches under the edge-anchored buttons,
   so cap it against the button gutters too. */
@media (min-width: 721px) {
  .lightbox img { max-width: min(92vw, calc(100vw - 190px)); }
}

/* …and clear of the counter pill at the bottom: reserve the strip it sits in
   so a full-height image stops above it rather than running underneath. */
@media (min-width: 721px) {
  .lightbox { padding: 30px 30px 80px; }
  .lightbox img { max-height: calc(100vh - 140px); }
}

/* ---------------------------------------------------------------
   Trademark / attribution note. Quiet by design — it should be
   findable and readable, never a banner.
   --------------------------------------------------------------- */
.legal-note {
  max-width: 720px;
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.85rem;
  line-height: 1.65;
  text-align: center;
}