/* ==========================================================================
   iGamingTextLab — страница услуги «iGaming Content Localization»
   Дополняет css/site.css и css/human.css (те же блоки: hero, карточки, путь, FAQ, CTA).
   ========================================================================== */

/* ---------- HERO: одна картинка справа ---------- */
/* ---------- HERO: пропорции первого экрана как на главной (стандарт сайта) ---------- */
.hhero{padding:0}
.hhero-in{display:block;min-height:38.8vw}
.hhero-copy{margin-left:5%;width:46%;padding:6.3vw 0 3.44vw}   /* текст ближе к картинке */
.hhero h1{margin-top:25px;font-size:clamp(31px,3.285vw,63px);line-height:1.2;letter-spacing:-.054em}
.hlead{margin-top:2.03vw;font-size:clamp(17px,1.25vw,24px);line-height:1.417}
.hhero .btn-hh{margin-top:3.44vw;min-height:0;height:clamp(46px,3.23vw,62px);
  padding:0 clamp(14px,1.04vw,20px);font-size:clamp(14px,1.09vw,21px)}
.chips{gap:10px}
.chips li{height:clamp(26px,1.56vw,30px);font-size:clamp(10px,.63vw,12px);padding:0 clamp(10px,.78vw,15px)}
/* картинка ближе к тексту и прижата к низу экрана — под ней сразу лаймовая строка */
.lhero-art{position:absolute;left:52%;right:4.44vw;top:0;bottom:0;height:auto;
  display:flex;align-items:flex-end;justify-content:flex-start;pointer-events:none}
.lhero-art img{position:static;width:auto;height:104%;max-width:none;transform:none}

/* ---------- WHAT WE LOCALIZE ---------- */
.l1 img{width:420px;right:-6px;bottom:-30px;top:auto}
.l2 img{width:330px;right:10px;bottom:-16px;top:auto}
.l3 img{width:250px;right:44px;top:-18px}
.l4 img{width:430px;right:-18px;top:-46px}
.l5 img{width:370px;right:8px;top:-40px}
.l6 img{width:330px;right:0;top:-24px}

/* ---------- YOUR TEAM: три карточки, в первой два героя ---------- */
.tcard{height:520px}
.tcard img{height:70%;bottom:96px}
.tcard span{font-size:26px;padding-bottom:36px;line-height:1.2}
.tgrid-3{grid-template-columns:1.6fr 1fr 1fr}
.tcard-wide img{position:absolute;bottom:96px;height:64%;width:auto;max-width:none;transform:none}
.tcard-wide .tw-a{left:14%}
.tcard-wide .tw-b{left:54%;height:52%;bottom:104px}
.tcard span{padding-left:14px;padding-right:14px}

/* ---------- CHOOSE YOUR ROUTE ---------- */
.route{padding-top:150px}
.route-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.route-h{font-size:clamp(26px,2.5vw,48px);line-height:1.16;letter-spacing:-.05em}
.route-line{position:absolute;left:31%;top:0;width:20%;height:100%;pointer-events:none}
.route-cards{display:flex;flex-direction:column;gap:20px}
.rcard{display:flex;align-items:flex-start;gap:26px;border:1px solid var(--tcard-bd);border-radius:var(--r);
  background:var(--tcard-bg);padding:30px 34px}
.rcard-ph{flex:0 0 150px}
.rcard-ph img{width:150px;height:auto}
.rcard-body h3{font-size:26px;line-height:1.2;letter-spacing:-.04em}
.rcard-body p{margin-top:12px;font-size:16px;line-height:1.45;color:var(--fg)}
.rcard-note{color:var(--purple)}
.rcard .btn{margin-top:18px}

/* ---------- SELECTED CASES: текста больше, чем на других страницах ---------- */
.hcase{height:auto;min-height:398px}
.hcase-body{padding-bottom:34px}
.hcase-body h3{font-size:30px}
.hcase-body p{font-size:16px;margin-top:20px}
/* ---------- SELECTED CASES: картинки под этот дизайн ---------- */
.lc1 .hcase-art img{width:300px;right:10px;top:60px}
.lc2 .hcase-art img{width:330px;right:-10px;top:-40px}

/* ---------- ПУТЬ: широкая карта, тянется мышью и пальцем ---------- */
.stage{zoom:.46;width:3279px;max-width:none;height:1040px;margin:46px 0 0;flex:0 0 auto}
.iso-flat{position:absolute;inset:0;
  background-image:repeating-linear-gradient(26.57deg,var(--iso) 0 1px,transparent 1px 96px),
                   repeating-linear-gradient(-26.57deg,var(--iso) 0 1px,transparent 1px 96px)}

.toy{position:absolute;max-width:none}
.p1{left:2.07%;top:39.04%;width:3.96%}
.p2{left:12.62%;top:71.54%;width:3.96%}
.p3{left:24.88%;top:15.19%;width:7.99%}
.p4{left:40.06%;top:33.85%;width:10.00%}
.p5{left:58.29%;top:45.77%;width:7.99%}
.p6{left:71.83%;top:21.15%;width:10.00%}
.p7{left:86.59%;top:33.08%;width:7.99%}

.path .step{padding:16px 20px;gap:16px;align-items:flex-start}
.path .step b{font-size:64px;line-height:.9}
.path .step h4{font-size:25px}
.path .step p{font-size:14px;line-height:1.4}
.s1{left:4.57%;top:30.55%;width:13.21%}
.s2{left:15.65%;top:67.28%;width:13.21%}
.s3{left:30.71%;top:9.11%;width:13.21%}
.s4{left:39.01%;top:71.03%;width:13.21%}
.s5{left:50.59%;top:24.68%;width:13.21%}
.s6{left:66.30%;top:7.66%;width:13.21%}
/* в human.css пятый шаг — финальный и фиолетовый; здесь он обычный */
.path .step.s5{background:var(--bg);border-color:var(--fg);align-items:flex-start;padding:16px 20px}
.path .step.s5 b{color:var(--purple)}
.path .step.s5 h4{color:var(--fg)}
.s7{left:81.95%;top:10.16%;width:13.21%;border:none;background:none;padding:0}
.s7 h4{color:var(--purple);font-size:20px}
.s8{left:86.22%;top:62.09%;width:10.00%;background:var(--purple);border-color:var(--purple);
  align-items:center;padding:20px 24px}
.s8 b,.s8 h4{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1700px){
  .rcard{padding:24px 26px;gap:20px}
  .rcard-ph{flex:0 0 120px}
  .rcard-ph img{width:120px}
  .rcard-body h3{font-size:22px}
  .rcard-body p{font-size:15px}
}
@media (max-width:1200px){
  .hhero-in{display:flex;flex-direction:column;gap:30px;min-height:auto;padding:40px var(--pad) 60px}
  .hhero-copy{margin-left:0;width:auto;padding:0}
  .lhero-art{position:static;order:2;justify-content:center}
  .lhero-art img{width:72%;max-width:460px;height:auto;transform:none}
  .tgrid-3{grid-template-columns:1fr 1fr}
  .tcard-wide{grid-column:1 / -1}
  .route{padding-top:80px}
  .route-in{grid-template-columns:1fr;gap:28px}
  .route-line{display:none}
  .route-h{text-align:left}
  /* путь: как на других страницах услуг — вертикальный список шагов */
  .stage{zoom:1;width:100%;height:auto}
  /* шаги пути становятся обычным списком */
  .s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8{position:static;left:auto;top:auto;width:100%}
  .iso-flat{display:none}
  .s7{padding:16px 20px;border:1px solid var(--purple);background:none}
}
@media (max-width:760px){
  .tgrid-3{grid-template-columns:1fr}
  .tcard-wide .tw-a{left:8%}
  .tcard-wide .tw-b{left:56%}
  .rcard{flex-direction:column;gap:16px}
  .rcard-ph{flex:none}
  .l1 img,.l2 img,.l3 img,.l4 img,.l5 img,.l6 img{width:220px!important;right:-10px!important;top:auto!important;bottom:-10px!important}
}