/* Taski — landing page */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --text: #17181c;
  --hint: #6b7280;
  --border: #e6e8ec;
  --accent: #007aff;
  --accent-2: #5ac8fa;
  --card: #ffffff;
  --frame: #1b1d22;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.06), 0 24px 60px rgba(16, 24, 40, 0.14);
  --radius: 16px;
}

:root.dark {
  color-scheme: dark;
  --bg: #0f1115;
  --bg-soft: #16181d;
  --text: #f4f5f7;
  --hint: #9aa1ad;
  --border: #262a31;
  --accent: #2481cc;
  --accent-2: #3aa7e0;
  --card: #181b20;
  --frame: #0a0b0e;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.55);
}

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

html { -webkit-text-size-adjust: 100%; }

/* ---------------------------------------------------------------- fonts
 * Tajawal (Arabic) is SELF-HOSTED here exactly as the Mini App does it — the
 * same six files. A stylesheet cannot inherit @font-face declarations, so the
 * landing page needs its own, but there is no second copy of the font: this
 * file is served from the web root and the app serves the files from
 * /app/fonts/, so `app/fonts/...` is one hop down from here.
 * Why not Google Fonts: that would add a third-party request to every page load,
 * and fonts.googleapis.com is unreachable in some regions.
 * `unicode-range` is kept verbatim from web/app/style.css, so a browser downloads
 * only the subset it needs — and an English visitor downloads NOTHING, because
 * the family is applied only under html[lang="ar"] below.
 */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("app/fonts/tajawal-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("app/fonts/tajawal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("app/fonts/tajawal-500-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("app/fonts/tajawal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("app/fonts/tajawal-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("app/fonts/tajawal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arabic switches the page to Tajawal; English keeps the system stack, so an
   English visitor downloads none of the files above.
   The landing page only uses weights 600 and 700, and Tajawal ships 700, so
   nothing is synthesised — 600 resolves up to 700 by CSS font matching.
   Form controls do not inherit font-family, so button/input are listed too. */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* --- Nav --- */
.nav {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.15rem;
}
.brand-name { font-weight: 700; font-size: 1.15rem; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  line-height: 1;
  transition: transform .08s ease;
}
.icon-btn:active { transform: scale(0.92); }

/* Show the icon for the theme you are NOT in, without waiting for JavaScript.
   landing.js rewrites this button's textContent once it loads; the CSS mirrors
   that rule so the first paint already agrees with the page. */
:root.dark #theme-btn { visibility: hidden; font-size: 0; }
:root.dark #theme-btn::after {
  content: attr(data-icon);
  visibility: visible;
  font-size: 1.05rem;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.28);
}
.btn-small { padding: 9px 18px; font-size: 0.9rem; }
.btn-lg { padding: 16px 34px; font-size: 1.1rem; }

/* --- Hero --- */
.hero {
  padding: 72px 20px 56px;
  text-align: center;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
}
.hero-inner { max-width: 640px; margin: 0 auto; }

/* On a wide screen the hero becomes two columns: the pitch on the left, the app
   on the right. The shot is the reason the visitor believes the pitch, so it
   belongs above the fold rather than buried in the feature grid. */
@media (min-width: 900px) {
  .hero { text-align: start; padding: 84px 20px 72px; }
  .hero-inner {
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
  }
  .hero-copy { max-width: 560px; }
  .hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.1rem); }
  .hero .lead { margin-inline: 0; }
  .hero-actions { align-items: flex-start; }
  .phone { max-width: 320px; margin-inline: auto 0; }
}

/* --- Product shots ---
   These images are rendered from the shipped Mini App by the preview harness
   (telegram-mini-app-emulator/preview/landing-shots.mjs), never drawn by hand,
   so they cannot drift out of date. Each is a <picture> with a light and a dark
   variant, chosen by the visitor's colour scheme. */
.shot { display: block; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* The phone. A thin bezel and rounded corners are enough to read as a device —
   no notch, because a notch would have to be painted over the app's own header
   row and would collide with the greeting text. */
.hero-visual { position: relative; }
.phone {
  position: relative;
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 46px;
  background: var(--frame);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.phone .shot { border-radius: 36px; overflow: hidden; }
.pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--hint);
  font-size: 0.82rem;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.grad {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { color: var(--hint); font-size: 1.15rem; max-width: 480px; margin: 0 auto 28px; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hint { color: var(--hint); font-size: 0.9rem; }
.hint code {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 0.85rem;
}

/* --- Sections --- */
.features, .how { padding: 56px 20px; }
.section-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.section-head h2 { font-size: 1.7rem; letter-spacing: -0.01em; }
.sub { color: var(--hint); margin-top: 8px; }

/* --- Feature grid --- */
.grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  /* Exactly two columns — deliberately NOT auto-fit. There are two icon cards,
     and the two screenshot cards below span the full width
     (`grid-column: 1 / -1`). auto-fit fitted THREE 260px tracks into this
     1040px container (3x260 + 2x16 = 812 <= 1040), so the icon cards filled
     columns 1-2 and column 3 stayed empty: a hole to the right of "Smart
     reminders" at every desktop width. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
/* Cards carrying a product shot take the full width and put the shot on the
   left, so the image reads as a screenshot rather than as a giant zoomed UI.
   The text keeps its own padding; the shot bleeds to the card's edges.
   `align-items: start` matters: stretching the media cell would give it a
   layout height shorter than the image inside it, leaving a visible gap. */
.grid .card.wide {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: start;
}
.card-media {
  display: block;
  overflow: hidden;
  background: var(--bg-soft);
  /* Logical property: in RTL this becomes the left border on its own. */
  border-inline-end: 1px solid var(--border);
}
.card-body { padding: 24px 26px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card .icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-bottom: 14px;
}
.card .icon svg { width: 20px; height: 20px; }
.card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.card p { color: var(--hint); font-size: 0.95rem; }

/* --- Trust row ---
   Table stakes, kept deliberately small: they are not reasons to choose a task
   app, but they are things a visitor checks before committing. */
.trust {
  max-width: 1040px;
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hint);
  font-size: 0.9rem;
}
.trust svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* --- How it works --- */
.how { background: var(--bg-soft); }
.steps {
  max-width: 560px;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.steps h3 { font-size: 1.05rem; }
.steps p { color: var(--hint); font-size: 0.95rem; }

/* --- CTA --- */
.cta {
  padding: 72px 20px;
  text-align: center;
}
.cta h2 { font-size: 1.8rem; margin-bottom: 10px; }
.cta-sub { color: var(--hint); margin-bottom: 8px; }
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.14);
  border: 1px solid rgba(52, 199, 89, 0.35);
  color: #34c759;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.free-note { color: var(--hint); font-size: 0.95rem; margin-bottom: 26px; }

/* --- Footer --- */
.footer {
  padding: 32px 20px;
  text-align: center;
  color: var(--hint);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* --- Mobile ---
   The nav CTA is redundant with the hero CTA. */
@media (max-width: 480px) {
  .nav .btn-small { display: none; }
}

/* Below the two-column hero, a wide card stacks: shot on top, text beneath. */
@media (max-width: 899px) {
  .grid .card.wide { grid-template-columns: 1fr; }
  .card-media {
    border-inline-end: none;
    border-bottom: 1px solid var(--border);
  }
  .phone { max-width: 300px; }
}

/* Two of the icon cards stop fitting side by side once the grid container is
   narrower than 536px (2x260 + 16) — i.e. a viewport under 576px once the
   section's 20px gutters are taken off. That is where the old auto-fit
   collapsed to one column too, so the behaviour below is unchanged; only the
   three-track hole at desktop widths is gone. */
@media (max-width: 575px) {
  .grid { grid-template-columns: 1fr; }
}