@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{--orange:#ff7900;--ink:#0e1d26;--muted:#6f7378;--paper:#faf8f5;--card:#fff;--line:#f0e7db;--note:#fff6e6;--note-line:#ffb648}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Vazirmatn,Tahoma,sans-serif;font-size:16px;line-height:2}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #168cff;outline-offset:4px}
img{max-width:100%;display:block}

.topbar{max-width:860px;margin:0 auto;padding:18px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
.brand-mark{flex:none;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#ffa800,#ff5900);box-shadow:0 4px 12px #ff790040}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#ff6500;background:#ffead5;padding:6px 16px;border-radius:30px;transition:background .2s}
.back:hover{background:#ffdcb8}

.hero{max-width:860px;margin:0 auto;padding:24px 16px 8px;text-align:center}
.hero .os{width:64px;height:64px;margin:0 auto 14px;padding:13px;background:var(--card);border-radius:20px;box-shadow:0 6px 18px #c7b79c40}
.hero h1{margin:0;font-size:clamp(24px,5vw,34px);line-height:1.6;font-weight:800}
.hero p{margin:6px auto 0;max-width:520px;color:var(--muted);font-size:15px}

main{max-width:860px;margin:0 auto;padding:16px 16px 56px}
.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.download{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:16px;color:#fff;font-weight:700;font-size:17px;background:linear-gradient(110deg,#ffa800,#ff5900);box-shadow:0 8px 20px #ff790035;transition:transform .2s,box-shadow .2s}
.download.alt{background:linear-gradient(110deg,#21c5ef,#0062ff);box-shadow:0 8px 20px #0062ff30}
.download:hover{transform:translateY(-3px);box-shadow:0 12px 26px #ff790045}
.download svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.note{margin:18px 0 30px;padding:14px 18px;background:var(--note);border:1px solid #ffe2b3;border-right:4px solid var(--note-line);border-radius:14px;font-size:14.5px;line-height:2.1}
.note p{margin:0}

.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:18px}
.step{counter-increment:step;position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px 22px 22px;padding-right:70px;box-shadow:0 3px 12px #c7b79c22}
.step:before{content:counter(step,persian);position:absolute;right:20px;top:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ffa800,#ff5900);color:#fff;font-weight:800;font-size:16px;line-height:1}
.step h2{margin:0 0 4px;font-size:17px;font-weight:700;line-height:1.9}
.step p{margin:0 0 6px}
.step ul{margin:6px 0 0;padding-right:20px}
.step li{margin:2px 0}
.step li::marker{color:var(--orange)}
.step b{color:#e85d00;font-weight:700}
.step kbd{font-family:inherit;direction:ltr;display:inline-block;font-size:14px;background:#f4efe8;border:1px solid #e6dccf;border-bottom-width:2px;border-radius:7px;padding:0 7px;line-height:1.7}

.shots{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:16px}
.shots img{height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 6px 18px #0e1d2618;background:#f4f1ec}
.shots.phone img{width:auto;max-height:480px;max-width:min(260px,100%)}
.shots.desktop img{width:auto;max-width:100%}

.crumbs{max-width:860px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.crumbs a:hover{color:#ff6500}

.related{max-width:860px;margin:0 auto;padding:0 16px 32px}
.related h2{font-size:18px;margin:0 0 12px}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.related a{display:flex;flex-direction:column;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:16px;line-height:1.8;transition:border-color .2s,transform .2s}
.related a:hover{border-color:#ffc58f;transform:translateY(-2px)}
.related small{color:var(--muted);font-size:13px}

.footer{text-align:center;color:var(--muted);font-size:14px;padding:0 16px 40px}
.footer a{color:#ff6500;font-weight:700}

@media(max-width:560px){
  body{font-size:15px}
  .step{padding:62px 16px 18px}
  .step:before{right:16px;top:16px}
  .shots.phone img{max-height:420px;max-width:calc(50% - 8px)}
  .shots.phone img:only-child{max-width:78%}
}