/* Лендинг — общий для продуктов (app/static/products/<продукт>/landing.html):
   первый экран со входом, инструкция-анимация в четыре шага, карточки, вопросы. */
@font-face{font-family:Amiri;src:url("/fonts/Amiri-Regular.ttf")}
@font-face{font-family:Amiri;font-weight:bold;src:url("/fonts/Amiri-Bold.ttf")}

.wrap{max-width:1040px}
.l-nav{gap:6px}
.l-nav .btn{min-height:40px;padding:6px 14px}

/* первый экран: слова и мечеть рядом, на телефоне мечеть сверху */
.hero{display:grid;gap:14px;align-items:start;margin:4px 0 34px}
.hero h2{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
.hero .lead{font-size:15px;color:var(--muted);margin:0}
.free{margin:10px 0 0}
.free b{color:var(--accent)}
#register .tabs{max-width:none}
#register .card{margin-bottom:10px}
#help{margin:0 0 6px}
#register .more{display:flex;width:max-content;margin:0 auto}

section{margin:0 0 34px}
section>h2{font-size:22px;margin:0 0 6px;letter-spacing:-.015em}
section>.muted{margin:0 0 16px}

/* инструкция в картинках: шаги слева, справа — нарисованный экран сервиса,
   который сам проигрывает каждый шаг. Итоговое состояние каждой сцены —
   это её обычные стили, а keyframes только проводят к нему: без анимации
   (prefers-reduced-motion) видно готовый кадр, а не пустоту. */
.how{display:grid;gap:14px}
.hsteps{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.hs{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:start;min-height:0;
  padding:12px 14px;border-radius:var(--radius-sm);border:1px solid transparent;background:none;
  position:relative;overflow:hidden;color:var(--ink);font-weight:400}
.hs:hover{border-color:var(--line);background:var(--card)}
.hs.on{background:var(--card);border-color:var(--line);box-shadow:var(--shadow)}
.hs .n{flex:0 0 28px;height:28px;border-radius:50%;background:var(--panel);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;transition:.2s}
.hs.on .n{background:var(--accent);color:#fff}
.hs h3{margin:2px 0 2px}
.hs p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.hs .pb{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:0;background:var(--accent)}
.how.auto .hs.on .pb{animation:pb var(--T) linear both}
@keyframes pb{from{width:0}to{width:100%}}

.screen{--T:6.5s;background:#fbfcfa;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 10px 30px #17201c14;overflow:hidden;display:flex;flex-direction:column}
.screen .bar-top{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.screen .bar-top i{width:9px;height:9px;border-radius:50%;background:#d3d8d2}
.screen .bar-top span{margin-inline-start:8px;font-size:12px;color:var(--muted);background:#fff;
  border-radius:8px;padding:2px 12px;direction:ltr}
.stagebox{position:relative;min-height:330px;padding:18px}
.scene{position:absolute;inset:18px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;font-size:14px}
.scene.on{opacity:1;visibility:visible}
.scene .ar{font-family:Amiri,"Noto Naskh Arabic",serif;direction:rtl;font-size:17px}
.m-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;
  border-radius:10px;padding:7px 14px;font-weight:600;font-size:13px;border:1px solid var(--line);background:#fff}
.m-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.m-pill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;color:#1f6b3f;background:#eef8f1;
  border:1px solid #1f6b3f33;white-space:nowrap}
.muted-s{color:var(--muted);font-size:12px}
/* курсор живёт внутри своей цели и прилетает к ней издалека — так он
   попадает в кнопку при любой ширине экрана и в арабской раскладке */
.cur{position:absolute;top:55%;inset-inline-start:55%;width:22px;height:22px;pointer-events:none;opacity:0;z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.6L10 19z' fill='%2317201c' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.cur{--dx:1}
[dir=rtl] .cur{transform:scaleX(-1);--dx:-1}

/* 1 — загрузка */
.drop{border:2px dashed #c9d2cc;border-radius:14px;padding:18px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.drop svg{width:30px;height:30px;color:var(--accent)}
.drop .file{margin-top:8px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:7px 12px;box-shadow:0 4px 14px #17201c1a;font-weight:600;font-size:13px}
.file .fi{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:13px}
.urlrow{display:flex;gap:8px;align-items:center}
.urlrow .url{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:7px 12px;background:#fff;
  color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-up.on .drop{animation:dropHi var(--T) both}
.s-up.on .file{animation:fileIn var(--T) both}
.s-up.on .urlrow .cur{animation:curGo 2s 2.2s both}
.s-up.on .urlrow .m-btn{animation:press .35s 3.6s both}
.s-up.on .sent{animation:popIn .45s 3.9s both}
.sent{display:flex;align-items:center;gap:6px;font-weight:600;color:#1f6b3f;font-size:13px}
@keyframes dropHi{0%,14%{border-color:#c9d2cc;background:none}22%,40%{border-color:var(--accent);background:var(--accent-soft)}55%,100%{border-color:#c9d2cc;background:none}}
@keyframes fileIn{0%,6%{opacity:0;transform:translate(90px,-90px) rotate(10deg)}28%{opacity:1;transform:translate(0,0) rotate(-2deg)}34%,100%{opacity:1;transform:none}}

/* 2 — ожидание */
.rowm{display:flex;align-items:center;gap:10px}
.rowm .ttl{flex:1;min-width:0;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{height:7px;background:var(--panel);border-radius:4px;overflow:hidden;margin-top:9px}
.prog b{display:block;height:100%;width:100%;background:var(--accent);border-radius:4px}
.eq{display:flex;align-items:center;gap:3px;height:40px;justify-content:center}
.eq i{width:4px;border-radius:2px;background:var(--accent);opacity:.75;height:30%}
.s-wait.on .prog b{animation:fill var(--T) both}
.s-wait.on .eq i{animation:eq .9s ease-in-out infinite alternate}
.s-wait .eq i:nth-child(3n){animation-delay:-.3s}.s-wait .eq i:nth-child(3n+1){animation-delay:-.6s}
.s-wait .eq i:nth-child(4n){height:60%}.s-wait .eq i:nth-child(5n){height:85%}
.s-wait.on .st-run{animation:hideAt .15s 4.6s both}
.s-wait.on .st-done{animation:popIn .45s 4.65s both}
.stwrap{display:grid}.stwrap>*{grid-area:1/1;justify-self:end}
.st-run{opacity:0;color:var(--warn);font-size:11px;font-weight:600}
@keyframes fill{0%,4%{width:0}70%{width:100%}100%{width:100%}}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
@keyframes hideAt{from{opacity:1}to{opacity:0}}

/* 3 — редактор */
.player{display:flex;align-items:center;gap:10px}
.play{flex:0 0 32px;height:32px;border-radius:50%;background:var(--accent);position:relative}
.play::after{content:"";position:absolute;inset:10px 9px 10px 12px;background:#fff;
  clip-path:polygon(0 0,100% 50%,0 100%)}
.wave{flex:1;height:30px;position:relative;
  background:repeating-linear-gradient(90deg,#c9d2cc 0 3px,transparent 3px 6px)}
.wave b{position:absolute;inset-block:0;inset-inline-start:0;width:48%;
  background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 6px)}
.s-edit.on .wave b{animation:playh var(--T) linear both}
@keyframes playh{from{width:8%}to{width:62%}}
.etxt{line-height:1.8;font-size:14px}
.etxt.ar{font-size:18px;line-height:1.9}
.fix{position:relative;display:inline-grid;vertical-align:baseline}
.fix>*{grid-area:1/1;white-space:nowrap}
.fix .bad{text-decoration:underline wavy #d0342c;text-underline-offset:4px;color:#b3261e;opacity:0}
.fix .good{background:#eef8f1;color:#1f6b3f;border-radius:4px;padding:0 3px;margin:0 -3px}
.s-edit.on .fix .bad{animation:hideAt .15s 3.1s both}
.s-edit.on .fix .good{animation:popIn .45s 3.15s both}
.s-edit.on .fix .cur{animation:curGo 2s 1.6s both}

/* 4 — выгрузка */
.dl{display:flex;gap:8px;flex-wrap:wrap}
.s-get.on .dl .pdf{animation:press .35s 1.8s both}
.s-get.on .dl .cur{animation:curGo 2s .4s both}
.mini{align-self:center;width:min(300px,90%);background:#fff;border:1px solid #d9dcd6;border-radius:6px;
  padding:10px 12px 12px;box-shadow:0 10px 24px #17201c1f;position:relative}
.s-get.on .mini{animation:rise var(--T) both}
.mini .hd{display:flex;justify-content:space-between;gap:6px;margin-bottom:6px}
.mini .hd i{height:12px;border-radius:6px;background:#1f3a5f;width:45%}
.mini .hd i+i{background:#2c5d9c;width:20%}
.mini .bs{text-align:center;font-family:Amiri,serif;font-size:14px;color:#1b2733;line-height:1.3}
.mini .t{height:14px;background:#dde5f3;border:1px solid #555;margin:4px 0 7px}
.mini .l{height:5px;border-radius:3px;background:#cfd3cf;margin:5px 0}
.mini .l.r{background:#d88}
.mini .l.s{width:62%}
.mini .ok{position:absolute;top:-10px;inset-inline-end:-10px}
.s-get.on .mini .ok{animation:popIn .45s 4s both}
@keyframes rise{0%,36%{opacity:0;transform:translateY(40px) scale(.92)}52%,100%{opacity:1;transform:none}}

/* общие движения, время задаёт задержка: курсор кликает через 1.4s после
   своего старта — в тот же миг начинается press у кнопки */
@keyframes curGo{0%{opacity:0;translate:calc(70px*var(--dx)) 60px}
  15%{opacity:1;translate:calc(70px*var(--dx)) 60px}
  55%{translate:0 0;scale:1}
  70%{translate:0 0;scale:.8}
  80%{scale:1}
  90%{opacity:1}100%{opacity:0;translate:0 0}}
@keyframes press{50%{transform:scale(.93)}}
@keyframes popIn{from{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:none}}

.feats p{margin:0;color:var(--muted);font-size:15px}
.feats{display:grid;gap:12px}
.feats .card{margin:0;display:flex;gap:14px;align-items:flex-start}
.ico{flex:0 0 40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.ico svg{width:20px;height:20px}

details.card{padding:0}
details summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;
  display:flex;justify-content:space-between;gap:10px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--muted);font-weight:400;font-size:22px;line-height:1}
details[open] summary::after{content:"−"}
details p{padding:0 16px 14px;margin:0;color:var(--muted)}

.final{text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-grad));color:#fff;border:none;
  padding:28px 18px}
.final h2{margin:0 0 8px;font-size:22px}
.final p{color:#ffffffc7;margin:0 0 18px}
.final .btn{background:#fff;color:var(--accent);border-color:#fff}
.final .btn:hover{background:#eaf3ef}

footer{justify-content:center;gap:4px;flex-wrap:wrap}

@media (max-width:799px){.how .screen{order:-1}}
@media (prefers-reduced-motion:reduce){.scene *,.hs .pb{animation:none !important}}
@media (min-width:561px){
  .hero h2{font-size:34px}
  .hero .lead{font-size:17px}
}
@media (min-width:800px){
  .hero{grid-template-columns:1fr 420px;gap:40px;align-items:center;margin:32px 0 56px}
  .how{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px;align-items:center}
  .stagebox{min-height:360px}
  .feats{grid-template-columns:1fr 1fr}
  section{margin-bottom:48px}
}