/* ==========================================================================
   iGamingTextLab — service page "100% Human iGaming Copywriting"
   Extends css/site.css (same tokens, same header/footer).
   ========================================================================== */

/* ---------- shared ---------- */
.hsec{padding:0}
.hsec>.wrap>h2{margin-bottom:0}

/* ============ HERO ============ */
.hhero{position:relative;overflow:hidden;padding:87px 0 89px;background:var(--bg)}
.hhero-in{display:grid;grid-template-columns:886px 1fr;gap:var(--gap);align-items:start}
.hhero-copy{position:relative;z-index:2}

.chips{display:flex;flex-wrap:wrap;gap:14px;list-style:none}
.chips li{display:inline-flex;align-items:center;height:35px;padding:0 18px;border-radius:999px;
  border:1px solid var(--chip-bd);font-family:var(--mono);font-size:14px;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--fg)}

.hhero h1{margin-top:25px;line-height:1.073}
.hlead{margin-top:25px;font-size:clamp(16px,1.2vw,23px);line-height:1.35;color:var(--fg)}
.btn-hh{font-size:22px;padding:16px 46px;min-height:61px;margin-top:82px}

.hhero-art{position:relative;height:584px}
.hhero-art .hb{position:absolute;left:-22%;top:-21.2%;width:108.2%;max-width:none}
.hhero-art .hm{position:absolute;left:4.3%;top:-24.1%;width:67.2%;max-width:none}

/* ============ MARQUEE ============ */
.marquee{background:var(--lime);color:#000;height:60px;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.marquee span{font-family:var(--mono);font-size:clamp(16px,1.72vw,33px);letter-spacing:-.05em;
  text-transform:uppercase;white-space:nowrap}

/* ============ WHAT WE CREATE ============ */
#create{padding-top:84px;padding-bottom:0}
#create h2{margin-bottom:57px}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:23px 20px}
.wcard{height:217px;display:flex;flex-direction:column;justify-content:flex-end}
.wart{position:absolute;inset:0;pointer-events:none}
.wart img{position:absolute;max-width:none}
.w1 img{width:513px;right:2px;top:-100px}
.w2 img{width:438px;right:2px;top:-100px}
.w3 img{width:481px;right:2px;top:-4px}
.w4 img{width:443px;right:2px;top:-95px}
.w5 img{width:509px;right:1px;top:-100px}
.w6 img{width:480px;right:2px;top:-93px}
.w7 img{width:267px;right:50px;top:15px}
.w8 img{width:343px;right:32px;top:24px}
.wbody{position:relative;padding:0 28px 34px}
.wbody h3{font-size:32px;line-height:1.16;letter-spacing:-.05em}
.wbody p{margin-top:14px;font-size:17px;line-height:1.4;color:var(--panel-mut)}

/* ============ YOUR TEAM ============ */
#yourteam{padding-top:174px}
#yourteam h2{margin-bottom:34px}
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.tcard{position:relative;height:599px;border:1px solid var(--tcard-bd);border-radius:var(--r);
  background:var(--tcard-bg) url('../assets/human/Team BG.webp') center bottom/cover no-repeat;
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.tcard img{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;height:82%;width:auto;max-width:none}
.tcard span{position:relative;z-index:2;padding-bottom:45px;font-family:var(--mono);font-size:32px;
  letter-spacing:-.05em;text-transform:uppercase;color:var(--purple);text-align:center}

/* ============ SELECTED CASES ============ */
.hcases{background:#000;color:#fff;padding:83px 0 89px;margin-top:90px}
.hcases h2{color:#fff;margin-bottom:35px}
.hcase{height:398px;display:flex;align-items:flex-start}
.hcase-body{position:relative;z-index:2;padding:42px 40px 0;max-width:434px}
.hcase-body h3{font-size:34px;line-height:1.2;text-transform:none;letter-spacing:-.02em}
.hcase-body p{margin-top:26px;font-size:18px;line-height:1.47;color:rgba(255,255,255,.78)}
.li-link{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:14px;
  text-transform:uppercase;color:#a074f5;text-decoration:underline;text-underline-offset:4px}
.li-link:hover{color:var(--purple)}
.hcase-art{position:absolute;inset:0;pointer-events:none}
.hcase-art img{position:absolute;max-width:none}
.hc1 .hcase-art img{width:515px;right:48px;top:26px}
.hc2 .hcase-art img{width:333px;right:-3px;top:-173px}

/* ============ PATH ============ */
.path{padding-top:89px}
.path-h{text-align:center;line-height:1.16}
.stage{position:relative;zoom:.72;width:100%;max-width:1920px;margin:46px auto 0;height:1180px}

.iso{position:absolute;left:50%;top:-5.1%;width:1262px;height:1262px;margin-left:-631px;
  transform:scaleY(.69) rotate(45deg);transform-origin:50% 50%}
.iso-grid{width:100%;height:100%;
  background-image:linear-gradient(to right,var(--iso) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--iso) 1px,transparent 1px);
  background-size:115px 115px}
.iso-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.toy{position:absolute;max-width:none}
.t1{left:22.82%;top:9.26%;width:20.73%}
.t2{left:46.84%;top:-0.69%;width:6.45%}
.t3{left:36.67%;top:24.66%;width:16.44%}
.t4{left:56.19%;top:38.11%;width:19.83%}
.t5{left:6.46%;top:23.32%;width:16.55%}
.t6{left:48.54%;top:45.1%;width:11.21%}
.t7{left:-1%;top:57%;width:28%}
.t8{left:57.90%;top:65.94%;width:10.03%}

.step{position:absolute;display:flex;align-items:flex-start;gap:20px;background:var(--bg);
  border:1px solid var(--fg);border-radius:10px;padding:18px 24px}
.step b{font-family:var(--mono);font-size:100px;line-height:.86;font-weight:400;color:var(--purple);letter-spacing:-.04em}
.step h4{font-size:31px;line-height:1.2;text-transform:none;letter-spacing:-.03em}
.step p{margin-top:8px;font-size:17px;line-height:1.42;color:var(--fg)}
.s1{left:11.9%;top:0%;width:24.9%}
.s2{left:55.1%;top:1.9%;width:23.8%}
.s3{left:15.2%;top:48.6%;width:25.6%}
.s4{left:66.3%;top:30.2%;width:26.9%}
.s5{left:64.8%;top:74.1%;width:18.2%;background:var(--purple);border-color:var(--purple);
  align-items:center;padding:22px 26px}
.s5 b{color:#fff}
.s5 h4{color:#fff}

/* ---- широкая карта пути: тянется мышью (класс rail) и пальцем ---- */
.pscroll{overflow-x:auto;scrollbar-width:none;scroll-snap-type:none}
.pscroll::-webkit-scrollbar{display:none}
.pscroll>*{scroll-snap-align:none}

/* последний экран идёт после тёмного CTA — даём воздух, чтобы телефон на него не заезжал */
.social{margin-top:170px}

/* ---- соцсети в самом низу страницы (стандарт сайта) ---- */
.soc-strip{display:flex;justify-content:center;padding:54px 0 58px}

/* ============ FAQ ============ */
.faq{padding-top:0}
#faq{padding-top:2px;padding-bottom:90px}
#faq h2{margin-bottom:27px}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line);padding:21px 0 22px}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;font-family:var(--mono);font-size:23px;line-height:1.3;letter-spacing:-.03em;color:var(--fg)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--mono);font-size:24px;line-height:1;color:var(--purple);flex:0 0 auto}
.acc details[open] summary::after{content:"–"}
.acc p{margin-top:22px;font-size:16px;line-height:1.5;color:var(--fg)}

/* ============ CTA ============ */
.hcta{position:relative;overflow:clip;background:#000;color:#fff;padding:174px 0 169px}
.hcta .cta-l{position:absolute;left:-23px;top:60px;width:408px;max-width:none;z-index:0}
.hcta .cta-r{position:absolute;left:1086px;top:-150px;width:968px;max-width:none;z-index:0}
.hcta .cta-r-light{display:none}
.hcta-in{position:relative;z-index:1;text-align:center}
.hcta h2{color:#fff}
.hcta p{margin-top:20px;font-size:clamp(16px,1.09vw,21px);line-height:1.48;color:rgba(255,255,255,.9)}
.hcta .btn-hh{margin-top:39px}

/* ---------- theme tokens for this page ---------- */
:root,:root[data-theme="dark"]{--chip-bd:rgba(255,255,255,.35);--tcard-bg:#0d0d0d;--tcard-bd:#2a2a2a;
  --line:#2a2a2a;--iso:#3a3a3a}
:root[data-theme="light"]{--chip-bd:#c9c9c9;--tcard-bg:#fff;--tcard-bd:#e4e4e4;
  --line:#e4e4e4;--iso:#cfcfcf}
:root[data-theme="light"] .hcta .cta-r{display:none}
:root[data-theme="light"] .hcta .cta-r-light{display:block}
:root[data-theme="dark"] .hhero-art .hb{filter:invert(1)}

/* ============ RESPONSIVE ============ */
@media (max-width:1700px){
  .hhero-in{grid-template-columns:1fr 1fr}
  .stage{height:62vw}
  .iso{width:54vw;height:54vw;margin-left:-27vw}
  .iso-grid{background-size:6vw 6vw}
  .step{padding:14px 18px;gap:14px}
  .step b{font-size:48px}
  .step h4{font-size:21px}
  .step p{font-size:14px}
  .hcta .cta-r{left:auto;right:-240px;width:820px;top:-60px}
}
@media (max-width:1200px){
  .hhero{padding:56px 0}
  .hhero-in{grid-template-columns:1fr;gap:34px}
  .hhero-art{height:auto;aspect-ratio:1/.8;order:2;overflow:hidden}
  .hhero-art .hb{left:-12%;top:-4%;width:112%}
  .hhero-art .hm{left:13%;top:-1%;width:70%}
  .marquee span{animation:mq 18s linear infinite;padding-left:100%}
  .acc p br,.hlead br,.hcta p br,.step p br{display:none}
  .btn-hh{margin-top:44px;font-size:18px;padding:14px 30px;min-height:54px}
  #create{padding-top:70px}
  #create h2,#yourteam h2,.hcases h2,#faq h2{margin-bottom:34px}
  #yourteam{padding-top:80px}
  .tgrid{grid-template-columns:1fr 1fr;gap:var(--gap)}
  .tcard{height:460px}
  .tcard img{bottom:44px;height:78%}
  .tcard span{font-size:24px;padding-bottom:32px}
  .hcases{margin-top:60px;padding:60px 0}
  .hcase{height:auto;min-height:340px;flex-direction:column;padding-top:180px}
  .hcase-body{padding:0 28px 28px;max-width:none}
  .hcase-art img{height:160px!important;width:auto!important;right:16px!important;top:16px!important;bottom:auto!important}
  .social{margin-top:70px}
  .path{padding-top:64px}
  .pscroll{overflow-x:visible}
  .stage{zoom:1;height:auto;padding-bottom:20px;display:flex;flex-direction:column;gap:16px;margin-top:34px;
    padding-left:var(--pad);padding-right:var(--pad)}
  .iso,.iso-route,.toy{display:none}
  .step{position:static;width:100%}
  .s5{justify-content:flex-start}
  #faq{padding-top:70px;padding-bottom:70px}
  .hcta{padding:100px 0}
  .hcta .cta-l{width:260px;left:-60px;top:30px}
  .hcta .cta-r{right:-260px;width:620px}
}
@media (max-width:760px){
  .wgrid{grid-template-columns:1fr}
  .wcard{height:auto;min-height:200px;padding-top:70px}
  .wart img{width:230px!important;right:-10px!important;top:auto!important;bottom:-20px!important}
  .wbody{padding:0 20px 24px}
  .wbody h3{font-size:24px}
  /* «Your team» на телефоне — карусель смахиванием, как кейсы на главной */
  .tgrid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:var(--gap);
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
  .tgrid::-webkit-scrollbar{display:none}
  .tgrid > *{flex:0 0 min(86%,320px);scroll-snap-align:start}
  .tcard{height:400px}
  .chips li{font-size:12px;height:31px;padding:0 14px}
  .marquee{height:46px}
  .acc summary{font-size:18px}
  .step b{font-size:40px}
  .btn-hh{width:100%}
}

@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}