/* ============================================================
   MassageFM · front — секции главной (композиция = concept-bodymap.html)
   ============================================================ */

/* ============ HERO ============ */
/* overflow-x:clip — отсечение дизайн-bleed капли (.mask-drop right:max(-6vw,-30px)
   на ≤980px давал scrollWidth 393 на 390 → риск панорамирования в iOS Safari,
   QA №4). Именно clip, не hidden: по Y overflow остаётся visible (капля выходит
   за низ hero) и не создаётся scroll-контейнер. Сам bleed не трогать — дизайн. */
.hero{position:relative;padding:clamp(120px,15vh,170px) 0 0;min-height:92vh;overflow-x:clip}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0}
.hero-copy{position:relative;z-index:5;padding-top:clamp(10px,4vh,60px)}
.hero h1{font-size:clamp(54px,7.6vw,108px);max-width:9em;margin:18px 0 0 0}
.hero h1 em{font-style:normal;color:var(--terra)}
.hero h1 .shift{display:inline-block;transform:translateX(clamp(20px,5vw,84px))}
.hero-sub{max-width:32em;margin:26px 0 0;font-size:clamp(16px,1.35vw,19px);color:var(--ink-soft)}
.hero-actions{display:flex;align-items:center;gap:30px;margin:36px 0 0;flex-wrap:wrap}
.hero-price{margin-top:22px;font-size:14px;letter-spacing:.05em;font-weight:600;color:var(--ink-soft)}
.hero-price strong{color:var(--kastan)}

.hero-visual{position:relative;z-index:2;min-height:520px}
.mask-arch{
  position:absolute;top:-10px;right:0;width:min(40vw,470px);aspect-ratio:4/5;
  border-radius:var(--r-arch);overflow:hidden;z-index:2;
  box-shadow:0 30px 60px -30px rgba(74,50,42,.45);
}
.mask-arch img{width:100%;height:100%;object-fit:cover;object-position:62% 22%;filter:sepia(.24) saturate(.86) brightness(.99) contrast(1.04)}
.mask-drop{
  position:absolute;bottom:-40px;left:-70px;width:min(19vw,225px);aspect-ratio:3/4;
  border-radius:var(--r-organic-a);overflow:hidden;z-index:3;
  box-shadow:0 24px 44px -22px rgba(74,50,42,.5);
}
.mask-drop img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) sepia(.12) brightness(1.03)}
/* аннотация якорится к ФОТО (right-офсет от края арки), а не к зазору между
   колонками: ширина H1 у каждого языка своя — cs «Mobilní masáž» дотягивалась
   под рукопись (1-й баг Вадима). Текст — на размытом пустом углу кадра,
   к спине клиента ведёт длинная «анатомическая линия» (2-й фикс Вадима:
   короткая стрелка тыкала в руку массажиста) */
.hero-note{position:absolute;z-index:4;right:calc(min(40vw,470px) - 330px);top:10px;width:210px;text-align:left}
.hero-note .hand{width:148px;margin-left:0}
.hero-note .anat{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-top:4px}
.hero-arrow{width:118px;margin:4px 0 0 22px;display:block;color:var(--terra)}

@media (max-width:980px){
  .hero{min-height:0;padding-top:104px}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:0;margin-top:54px;display:flex;justify-content:center}
  .mask-arch{position:relative;top:0;width:min(78vw,420px)}
  .mask-drop{bottom:-34px;left:auto;right:max(-6vw,-30px);width:34vw;max-width:170px}
  /* фото центрировано (78vw/420px) — note на его верхне-левом углу;
     старый left:-190px уводил рукопись за край экрана */
  .hero-note{left:calc(50% - min(39vw,210px) + 16px);top:26px;width:185px}
  .hero-note .hand{width:140px}
  .hero h1 .shift{transform:translateX(clamp(14px,6vw,48px))}
}
@media (max-width:560px){
  .hero-visual{margin-top:96px}
  .hero-note{left:-8px;top:-78px;text-align:left}
  .hero-note .hand{margin-left:0;width:140px}
  .hero-arrow{margin:6px auto 0 14px;transform:scaleY(.8) rotate(38deg)}
}

/* ============ PÁS DŮVĚRY ============ */
.trust{padding:clamp(56px,9vh,110px) 0 clamp(40px,7vh,80px)}

/* ============ MAPA TĚLA ============ */
.bodymap{padding:clamp(30px,6vh,80px) 0 clamp(70px,10vh,130px)}
.bm-head{max-width:620px}
.bm-head h2{font-size:clamp(38px,4.6vw,68px);margin:14px 0 18px}
.bm-head p{color:rgba(246,241,232,.72)}
.bm-stage{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap-cols);margin-top:clamp(30px,5vh,60px);align-items:center}
@media (max-width:980px){
  .bm-stage{grid-template-columns:1fr}
  .bm-figure{max-width:330px}
  .bm-caption{display:block}
  .bm-srv .nm{font-size:21px}
}

/* ============ JAK TO PROBÍHÁ ============ */
.steps{padding:clamp(60px,9vh,120px) 0 clamp(50px,7vh,90px);position:relative}
.steps-flow{position:relative;margin-top:clamp(36px,6vh,70px);max-width:1040px;margin-left:auto;margin-right:auto}
.route{position:absolute;left:50%;top:0;height:100%;width:200px;transform:translateX(-50%);color:var(--terra);z-index:0}
.route svg{width:100%;height:100%}
.step{position:relative;z-index:2;display:flex;margin:0 0 clamp(34px,6vh,64px);max-width:480px}
.step:nth-child(odd){margin-right:auto}
.step:nth-child(even){margin-left:auto}
@media (max-width:760px){
  .route{display:none}
  .step{max-width:100%}
}

/* co přivezu */
.bring{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(40px,7vh,90px)}
.bring-mask{position:relative;width:min(100%,360px);aspect-ratio:3/4;justify-self:center}
.bring-mask img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:sepia(.16) saturate(.9);border-radius:var(--r-arch);box-shadow:0 26px 50px -26px rgba(74,50,42,.45)}
.bring-note{position:absolute;right:-26px;bottom:-18px;width:190px;transform:rotate(-5deg)}
.bring-foot{margin-top:18px;font-size:15px;color:var(--ink-soft)}
@media (max-width:860px){.bring{grid-template-columns:1fr}.bring-note{right:6px}}

/* ============ PRO VÁS, POKUD ============ */
.fit{padding:var(--sec-pad) 0}

/* ============ O MNĚ ============ */
.about{padding:var(--sec-pad-lg) 0}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-cols-lg);align-items:center}
.about-mask{position:relative;width:min(100%,380px);aspect-ratio:4/5;border-radius:var(--r-egg);overflow:hidden;justify-self:center;box-shadow:0 30px 56px -28px rgba(74,50,42,.5)}
.about-mask img{width:100%;height:100%;object-fit:cover;object-position:55% 30%;filter:sepia(.16) saturate(.9)}
.about-quote{font-family:var(--serif);font-size:clamp(22px,2.3vw,32px);line-height:1.32;margin:20px 0 22px;max-width:21em}
.about-quote em{font-style:normal;color:var(--terra)}
.about-text p{color:var(--ink-soft);max-width:36em}
.about-text p + p{margin-top:14px}
.about-sign{margin-top:26px}
.about-sign .who{font-weight:700;font-size:16px;display:block}
.about-sign .what{font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;display:block}
.about-sign .hand{width:150px;margin-top:10px}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}

/* ============ CENÍK ============ */
.pricing{padding:var(--sec-pad) 0}
.price-foot{margin-top:22px;font-size:15.5px;max-width:46em}
.price-foot strong{color:var(--terra-deep)}
.price-actions{margin-top:30px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}

/* ============ RECENZE ============ */
.reviews{padding:clamp(56px,8vh,110px) 0 clamp(70px,9vh,120px)}
.rev-flow{display:flex;gap:clamp(22px,3vw,44px);margin-top:40px;flex-wrap:wrap}
.rev:nth-child(2){transform:translateY(26px) rotate(.5deg)}
.rev:nth-child(3){transform:translateY(-6px) rotate(-.6deg)}
@media (max-width:760px){.rev:nth-child(2),.rev:nth-child(3){transform:none}}

/* ============ PRAHA + FAQ ============ */
.geo{padding:var(--sec-pad) 0}
.geo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-cols-lg)}
.geo .hand{width:240px;margin:18px 0 6px}
.vltava{width:min(100%,330px);margin-top:24px;color:var(--terra)}
.vltava .dot-fill{fill:var(--kastan)}
.vltava .p-label{font:700 11px var(--sans);letter-spacing:.08em;fill:rgba(74,50,42,.65)}
.geo-note{font-size:15px;color:var(--ink-soft);max-width:24em}
@media (max-width:860px){.geo-grid{grid-template-columns:1fr}}

/* ============ OBJEDNÁVKA ============ */
.order{padding:clamp(40px,7vh,90px) 0 clamp(70px,9vh,120px)}
.order-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-cols-lg);margin-top:18px}
.order h2{font-size:clamp(38px,4.6vw,66px)}
.order-side p{color:rgba(246,241,232,.7);max-width:24em;margin-top:18px}
.order .msgr{margin-top:28px}
@media (max-width:860px){.order-grid{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}}