@font-face{font-family:Vazir;src:url(/assets/vazir.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Vazir;src:url(/assets/vazir-bold.ttf) format('truetype');font-weight:700;font-display:swap}

:root{
  --ground:#0E1520; --surface:#16202E; --edge:#25344A;
  --text:#EDF3FA; --muted:#8CA1BB;
  --green:#46A55F; --amber:#E8821E; --light:#F2F5F9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--text);
  font-family:Vazir,Tahoma,sans-serif; font-size:16px; line-height:1.9;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto}

/* ── hero ───────────────────────────────────────── */
.hero{
  text-align:center;
  padding:clamp(2.5rem,7vw,4.5rem) 1.25rem clamp(2rem,5vw,3rem);
  max-width:46rem;margin-inline:auto;
}
/* The ring turns, the mountain does not — spinning the whole mark would tip
   the peaks over and read as a loading spinner rather than a logo. */
.mark{
  position:relative;
  width:clamp(96px,22vw,132px);
  aspect-ratio:1;
  margin-inline:auto;
}
.mark img{position:absolute;inset:0;width:100%;height:100%}
.mark-gear{animation:spin 26s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
h1{
  font-size:clamp(2.6rem,9vw,4rem);font-weight:700;
  margin:.4rem 0 0;letter-spacing:-.02em;line-height:1;
}
.tag{color:var(--muted);margin:.45rem 0 1.4rem;font-size:clamp(.95rem,2.6vw,1.1rem)}
.lede{margin:0 auto 2rem;max-width:34rem;color:var(--text);opacity:.92}

.cta{
  display:inline-block;background:var(--amber);color:#1a1005;
  font-weight:700;font-size:clamp(1rem,3vw,1.15rem);
  padding:.95rem 2.2rem;border-radius:14px;text-decoration:none;
  box-shadow:0 6px 20px rgba(232,130,30,.28);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cta:hover,.cta:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,130,30,.36)}
.cta:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.meta{color:var(--muted);font-size:.85rem;margin-top:.9rem}

/* ── cards ──────────────────────────────────────── */
main{max-width:62rem;margin-inline:auto;padding:0 1.25rem 3rem}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-bottom:2.5rem}
.cards article{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:1.3rem 1.4rem}
.cards h2{margin:0 0 .5rem;font-size:1.1rem;color:var(--green)}
.cards p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.85}

/* ── install ────────────────────────────────────── */
.install{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:1.4rem 1.6rem;margin-bottom:2.5rem}
.install h2{margin:0 0 .7rem;font-size:1.1rem}
.install ol{margin:0;padding-inline-start:1.2rem;color:var(--muted)}
.install li{margin-bottom:.5rem;font-size:.93rem}

/* ── partners ───────────────────────────────────── */
.partners{text-align:center}
.partners-title{color:var(--muted);font-size:.85rem;margin:0 0 .9rem}
/* pure white, not off-white: the بسیج mark ships on a solid white ground and
   any tint behind it would show up as a visible rectangle */
.logos{
  background:#fff;border-radius:16px;padding:1.4rem 1.2rem 1.2rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.2rem;align-items:end;
}
.logos figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.logos img{height:58px;width:auto;object-fit:contain}
.logos figcaption{
  color:#3B4658;font-size:.75rem;line-height:1.6;font-weight:700;text-align:center;
}

/* ── footer ─────────────────────────────────────── */
footer{border-top:1px solid var(--edge);padding:1.6rem 1.25rem 2.4rem;text-align:center;color:var(--muted)}
footer p{margin:.2rem 0;font-size:.88rem}
.small{font-size:.78rem;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .cta{transition:none}
  .mark-gear{animation:none}
}

/* ── second call to action: the web app ─────────── */
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.cta.alt{background:transparent;color:var(--text);border:1px solid var(--edge);box-shadow:none}
.cta.alt:hover,.cta.alt:focus-visible{
  border-color:var(--amber);color:var(--amber);box-shadow:none;transform:translateY(-2px)}