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

/* ---------- HERO: картинка слева, текст справа ---------- */
/* ---------- HERO: пропорции первого экрана как на главной (стандарт сайта) ---------- */
.hhero{padding:0}
.hhero-in{display:block;min-height:38.8vw}
.hhero-copy{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)}
.mhero-in{display:block}
.mhero-art{position:absolute;left:4.44vw;top:0;bottom:0;height:auto;
  display:flex;align-items:flex-end;justify-content:flex-start;pointer-events:none}
.mhero-art img{position:static;width:auto;height:91%;max-width:none;transform:none}  /* низ картинки вплотную к лаймовой строке */
.mhero-in .hhero-copy{margin-left:50.56%;width:auto}

/* строка-бегунок тут длиннее, чем на других страницах услуг */
.marquee span{font-size:clamp(14px,1.36vw,26px)}

/* ---------- TWO MEDIA MODELS ---------- */
#models{padding-top:84px}
#models h2{margin-bottom:46px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.mcard{position:relative;overflow:hidden;height:320px;display:flex;align-items:flex-end;
  border:1px solid var(--tcard-bd);border-radius:var(--r);background:var(--tcard-bg)}
.mcard-art{position:absolute;inset:0;pointer-events:none}
.mcard-art img{position:absolute;max-width:none}
.m1 img{width:360px;right:-10px;bottom:-24px}
.m2 img{width:390px;right:-24px;bottom:-24px}
.mcard-body{position:relative;padding:0 34px 34px;max-width:62%}
.mcard-body h3{font-size:28px;line-height:1.16;letter-spacing:-.05em;color:var(--purple)}
.mcard-body p{margin-top:14px;font-size:16px;line-height:1.45;color:var(--fg)}

/* ---------- WHAT WE BUILD ---------- */
.wcard-wide{grid-column:1 / -1;height:180px}
.b1 img{width:780px;right:0;top:-40px}
.b2 img{width:330px;right:6px;top:-34px}
.b3 img{width:390px;right:-10px;top:-30px}
.b4 img{width:300px;right:10px;top:-50px}
.b5 img{width:330px;right:-6px;top:-46px}
.b6 img{width:350px;right:0;top:-30px}
.b7 img{width:330px;right:-10px;top:-54px}

/* ---------- YOUR TEAM: семь карточек ---------- */
.tgrid-4{grid-template-columns:repeat(4,1fr)}
.tcard-span2{grid-column:span 2}
.tcard{height:470px}
.tcard img{height:66%;bottom:92px}
.tcard span{font-size:24px;padding-bottom:34px;padding-left:14px;padding-right:14px;line-height:1.2}

/* ---------- SELECTED CASES ---------- */
.hcase{height:auto;min-height:398px}
.hcase-body{padding-bottom:34px}
.hcase-body p{font-size:16px;margin-top:20px}
.mc1 .hcase-art img{width:330px;right:-20px;top:20px}
.mc2 .hcase-art img{width:420px;right:-40px;top:0}

/* ---------- ПУТЬ: широкая карта, тянется мышью и пальцем ---------- */
.stage{zoom:.46;width:3024px;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.12%;top:34.04%;width:4.96%}
.p2{left:10.38%;top:55.77%;width:8.99%}
.p3{left:29.37%;top:25.58%;width:8.99%}
.p4{left:39.75%;top:45.19%;width:10.98%}
.p5{left:57.87%;top:10.58%;width:17.00%}
.p6{left:74.20%;top:53.00%;width:6.00%}

.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:6.28%;top:29.33%;width:14.32%}
.s2{left:19.41%;top:69.42%;width:14.32%}
.s3{left:32.01%;top:12.98%;width:17.13%}
.s4{left:50.96%;top:61.54%;width:14.81%}
.s5{left:73.78%;top:13.65%;width:18.62%}
/* в 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)}
.s6{left:80.62%;top:48.56%;width:15.94%;background:var(--purple);border-color:var(--purple);padding:20px 24px}
.s6 b,.s6 h4,.s6 p{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1700px){
  .mhero-in{grid-template-columns:1fr 1fr}
  .mcard-body{max-width:58%}
}
@media (max-width:1200px){
  .mhero-art{order:2}
  .hhero-in{display:flex;flex-direction:column;gap:30px;min-height:auto;padding:40px var(--pad) 60px}
  .hhero-copy,.mhero-in .hhero-copy{margin-left:0;width:auto;padding:0}
  .mhero-art{position:static;order:2;justify-content:center}
  .mhero-art img{width:72%;max-width:460px;height:auto;transform:none}
  .mgrid{grid-template-columns:1fr}
  .mcard{height:260px}
  .tgrid-4{grid-template-columns:1fr 1fr}
  .tcard-span2{grid-column:span 2}
  /* путь: как на других страницах услуг — вертикальный список шагов */
  .stage{zoom:1;width:100%;height:auto}
  /* шаги пути становятся обычным списком */
  .s1,.s2,.s3,.s4,.s5,.s6{position:static;left:auto;top:auto;width:100%}
  .iso-flat{display:none}
}
@media (max-width:760px){
  .wcard-wide{height:auto;min-height:200px}
  .mcard{height:auto;min-height:240px;padding-top:110px}
  .mcard-body{max-width:none;padding:0 20px 24px}
  .m1 img,.m2 img{width:190px!important;right:-10px!important;bottom:auto!important;top:-10px!important}
  .tgrid-4{grid-template-columns:1fr}
  .tcard-span2{grid-column:span 1}
}