:root{
  --container: 1168px;
  --space: 20px;
  --radius: 30px;
  --accent: #ff2a2a;

  --bg-dark: #111211;
  --card-dark: #232529;

  --text: #111;
  --text-inv: #fff;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body{
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.45;
}

@media (min-width: 1023px){ .mhead{ display:none; } }

.dhead{
  position: absolute;  
  left: 0; right: 0; top: 59px;
  z-index: 1001;
  pointer-events: none; 
}

.dhead__socials{
  display: flex;
  gap: 10px;
}
.dhead__inner{
  width: min(var(--container), 100%);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: auto;
}
.dhead__menu{
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
.dhead__menu a{
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.dhead__menu a:hover{ 
  opacity: .85; 
}

.dhead__right{
  display: flex;
  align-items: center;
  gap: 42px;
}

.soc{
  width: 40px; 
  height: 40px;
  border-radius: 999px;
  background: url(assets/telegram.png);
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.soc:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.soc .ico{
  width: 20px; height: 20px;
  background: #111;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}

.dhead__cta{
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 10px 41px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.dhead__cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,42,42,.5); }

.dhead__lang{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 26px;
}
.dhead__lang a{
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s ease;
}
.dhead__lang a.is-active{ color:#fff; }
.dhead__lang a:hover{ color:#fff; }
.dhead__lang span{ color: rgba(255,255,255,.35); }

@media (max-width: 1023px){
  .dhead{ display: none; }
}

.mhead{
  position: absolute;        
  left: 0; right: 0; top: 0;
  z-index: 1000;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,0) 100%
  );
  padding-top: 20px;
  padding-bottom: 8px;
  color: #fff;
}

.mhead__inner{
  width: min(1168px, 100%);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mhead__brand{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 19px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.mhead__actions{
  display: inline-flex;
  align-items: center;
}

.mhead__btn{
  width:auto;
  height:auto;
  padding:4px;
  border-radius:8px;
  background: transparent;
  box-shadow:none;
}
.mhead__btn:active{ transform: translateY(1px); }

.mhead__ico{
  width: 35px;
  height: 35px;
  display: block;
  background: transparent;
  background-image: var(--icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.wrap{
  width: min(var(--container), 100%);
  margin: 0 auto;
  padding: 0;
}

.section{
  margin: 20px;
  border-radius: var(--radius);
  background: #fff;
  margin-top: 367px;
  margin-bottom: 100px;
}

.section--dark{
  background: var(--bg-dark);
  color: var(--text-inv);
}

@media (max-width: 560px){
  .section{
    margin: 10px;
    border-radius: 18px;
  }
}

.h-xxl{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-size: 40px;
}

.h-xl{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1;
  font-size: 40px;
  margin-bottom: 20px;
}

.accent{ color: var(--accent); }

.btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
}

.btn--accent{ background: var(--accent); color: #fff; }

.banner{
  margin: 20px 20px 0;
  height: 805px;
  position: relative;
  display: grid;
  align-items: start;
  border-radius: var(--radius);
  color: #fff;
  background: #0b1220 center / cover no-repeat;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)),
    url(assets/bg.png);
  background-position-y: top;
}

.banner__content{
  width: min(var(--container), 100%);
  margin: auto;
  position: relative;
  top: 20px;
  padding: 0;
}

.title{
  margin: 0 0 22px;
  line-height: 1.8;
}

.title .hl{
  display: inline-block;
  background: rgba(0,0,0,.6);
  padding: 6px 14px;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 49px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.title .under{
  position: relative;
  display: inline-block;
}

.title .under::after{
  content:"";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 8px;
  height: 6px;
  border-radius: 6px;
  background: var(--accent);
}

.kpis{
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.kpi{
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 280px;
}

.kpi__label{
  opacity: .85;
  font-size: 17px;
  margin-bottom: 6px;
}

.kpi__value{
  font-weight: 800;
  font-size: 50px;
  color: var(--accent);
}

.form-card{
  position: absolute;
  left: 50%;
  top: 722px;
  transform: translateX(-50%);
  width: 1167px;
  background: #0e0e10;
  color: #fff;
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  z-index: 2;
}

.form-title{
  margin: 0 0 28px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 25px;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 12px;
  margin-bottom: 10px;
}

.input,
.select{
  width: 100%;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: #fff;
  color: #111;
  padding: 0 14px;
}

.submit{
  grid-column: 1 / -1;
  height: 54px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  border: 0;
  cursor: pointer;
}

.checks{
  display: grid;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.checks label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.why__title{
  margin: 0 0 55px;
  text-align: center;
}

.why__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tile{
  background: #0f1011;
  color: #fff;
  border-radius: 22px;
  padding: 18px 18px 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 250px;
}

.tile__circle{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255,42,42,.35);
  display: grid;
  place-items: center;
  margin-top: 4px;
}

.tile__icon{
  width: 30px;
  height: 30px;
  background: #fff;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}

.tile__title{
  margin: 6px 0 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.25;
}

.tile__desc{
  margin: 0;
  color: #e9edf2;
  font-size: 14px;
  line-height: 1.45;
}

.pay{
  background: var(--bg-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 95px 0 80px;
  margin: 20px;
}

.pay__title{
  margin: 0 0 36px;
  line-height: 1.15;
  text-transform: uppercase;
}

.pay-card{
  background: #232529;
  border-radius: 18px;
  padding: 24px 28px;
  margin-top: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.pay-card__title{
  font-size: 18px;
  opacity: .9;
  margin: 0 0 12px;
}

.pay-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
}

.pay-item__num{
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 44px);
  color: var(--accent);
  white-space: nowrap;
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,.18);
}

.pay-item__caption{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.9);
}

.conditions{
  background: #fff;
  border-radius: var(--radius);
  margin: 20px;
  margin-top: 100px;
  margin-bottom: 100px;
}

.conditions__title{
  margin: 0 0 40px;
  line-height: 1.1;
  text-transform: uppercase;
}

.conditions__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.cond-card{
  border-radius: 28px;
  padding: 26px 28px;
}

.cond-card--dark{ background: #2a2b2e; color: #fff; }
.cond-card--red { background: var(--accent); color: #fff; }

.cond-card__title{
  margin: 0 0 27px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .02em;
}

.list{
  margin: 0;
  padding: 0!important;
  list-style: none;
  display: grid;
  gap: 28px;
}

.list li{
  position: relative;
  padding-left: 28px;
  line-height: 1.45;
  font-size: 16px;
}

.list li::before{
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-3px);
  font-size: 18px;
  color: #f5d770;
}

.benefits-brief{
  margin: 20px;
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 100px;
}

.bb__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.bb-card{
  background: #232529;
  color: #fff;
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.bb-card__title{
  margin: 0 0 27px;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .02em;
}

.bb-list{
  margin: 0;
  padding: 0!important;
  list-style: none;
  display: grid;
  gap: 28px;
  font-size: 16px;
  line-height: 1.45;
}

.bb-list li{
  position: relative;
  padding-left: 28px;
}

.bb-list li::before{
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-3px);
  font-size: 16px;
  color: #f5d770;
}

.vacancies{
  margin: 20px;
  border-radius: var(--radius);
  background: var(--bg-dark);
  color: #fff;
  padding: 48px 0 70px;
}

.vac__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.vac-card{
  background: #232529;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  gap: 35px;
  justify-content: space-between;
}

.vac-card__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.vac-card__title{
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.25;
}

.vac-card__num{
  display: block;
  font-weight: 800;
  color: var(--accent);
  font-size: 18px;
  white-space: nowrap;
}

.vac-card__per{
  display: block;
  font-size: 12px;
  opacity: .85;
}

.vac-card__desc{
  margin: 0;
  color: #eef2f6;
  font-size: 14px;
  line-height: 1.45;
}

.steps{
  margin: 20px;
  border-radius: var(--radius);
  background: #fff;
  margin-top: 100px;
  margin-bottom: 100px;
}

.steps__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.step-card{
  background: #232529;
  color: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-head{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-color: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  position: relative;
}

.step-icon--white{
  background-image: none; 
}

.step-icon--white::before{
  content:"";
  width: 28px;          
  height: 28px;
  background: #fff;      
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}

.step-num{
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

.step-title{
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.2;
}

.step-desc{
  margin: 0;
  color: #eef2f6;
  font-size: 14px;
  line-height: 1.45;
}

.steps__note{
  margin-top: 20px;
  background: var(--accent);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.contact{
  margin: 20px;
  border-radius: var(--radius);
  background: var(--bg-dark);
  color: #fff;
  padding: 40px 0 64px;
  margin-bottom: 70px;
}

.f-card{
  background: #232529;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.f-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
}

.f-row{ grid-column: 1 / -1; }

.check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.9);
}

@media (max-width: 1286px){
  .banner{
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .banner__content{
    width: 100%;
    padding: 0 20px;
  }
  .form-card{
    width: calc(100% - 40px);
  }
  .pay, .vacancies, .contact{
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
    border-radius: 0;
  }
  .t-rec_pb_90 {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 992px) {
  .why__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .conditions__grid{
    grid-template-columns: 1fr;
  }
  .bb__grid{
    grid-template-columns: 1fr;
  }
  .vac__grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .steps__grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .kpi__value, .title .hl{
    font-size: 35px;
  }
}

@media (max-width: 640px) {
  .why__grid, .pay-grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .kpi__value, .title .hl{
    font-size: 22px;
  }
  .title .under::after{
    left: 2px;
    right: 0px;
    bottom: 2px;
    height: 2px;
    border-radius: 6px;
    background: var(--accent);
  }
  .banner__content{
    top: 0;
    margin-top: 110px;
    margin-bottom: 34px;
    padding: 0 20px;
  }
  .form-card{
    width: 100%;
    border-radius: 0;
    position: relative;
    bottom: 0;
    top: 0;
    transform: none;
    right: 0;
    left: 0;
    padding: 22px 20px 18px;
  }
  .section, .conditions{
    margin: 85px 20px;
  }
  .form-title{
    font-size: 18px;
  } 
  .form-grid{
    grid-template-columns: 1fr;
  }
  .banner{
    height: max-content;
    background-position-x: right;
    background-size: 1076px;
  }
  .t-rec_pt_165{
    padding-top: 0px !important;
  }
  .t-rec_pb_210 {
    padding-bottom: 90px !important;
  }
  .h-xxl, .h-xl{
    font-size: 31px;
  }
  .h-xl{
    font-size: 25px;
    margin: 0;
  }
  .tile__desc{
    font-size: 15px;
  }
  .pay-item__caption{
    font-size: 15px;
  }
  .pay-item__num{
    font-size: 24px;
  }
  .cond-card{
    padding: 26px 18px;
  }
  .cond-card__title{
    font-size: 20px;
  }
  .conditions{
    padding-bottom: 0;
  }
  .benefits-brief{
    padding-top: 0;
  }
  .bb__inner p, contact__inner p{
    margin-top: 11px!important;
  }
  .steps__note{
    align-items: flex-start;
    flex-direction: column;
  }
  .f-grid{
    grid-template-columns: 1fr;
  }
  .pay, .vacancies, .contact{
    padding-left: 20px;
    padding-right: 20px;
  }
  .lang__btn{
    gap: 3px!important;
    padding: 8px 6px!important;
  }
}

@media (max-width: 380px) {
  .vac-card__top{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    flex-direction: column;
  }
}

.dftr{
  background: #111;
  color: #fff;
  padding: 22px 0;
}

.dftr__inner{
  width: min(var(--container), 100%);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dftr__left{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
}

.dftr__brand{
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
}

.dftr__copy{
  opacity: .95;
}

.dftr__right{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 640px){
  .dftr__inner{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  .dftr__left{
    justify-content: center;
    align-items: center;
  }
}

.okmodal{
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.55); z-index: 9999;
}
.okmodal[hidden]{ display: none; }
.okmodal__box{
  width: min(92vw, 420px);
  background: #0e0e10; color: #fff; border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  text-align: center;
}
.okmodal__title{ font-weight: 800; font-size: 20px; margin-bottom: 8px; }
.okmodal__text{ opacity: .95; margin-bottom: 16px; }
.okmodal__btn{
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 10px; font-weight: 800;
}

.lang{ position: relative; user-select: none; }
.lang__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:12px;border:0;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-weight:800;
}
.lang__chev{ opacity:.8; font-weight:700; }
.lang__menu{
  position:absolute; right:0; top:calc(100% + 8px);
  width:240px; margin:0; padding:8px; list-style:none;
  background:#111; color:#fff; border-radius:14px;
  box-shadow:0 14px 32px rgba(0,0,0,.35); display:none; z-index:2000;
}
.lang.is-open .lang__menu{ display:block; }
.lang__item{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:10px; cursor:pointer;
}
.lang__item:hover{ background:rgba(255,255,255,.06); }
.lang__more{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,.08); }
.lang__more > button{
  width:100%; padding:10px; border-radius:10px; border:0; cursor:pointer;
  background:rgba(255,255,255,.06); color:#fff; font-weight:700;
}
.lang__more > button:hover{ background:rgba(255,255,255,.1); }

.flag{
  width:18px; height:18px; border-radius:999px; 
  flex:0 0 18px;
  background: #dddddd00 center / cover no-repeat;
  background-image:var(--flag);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.lang__code{ letter-spacing:.02em; }

.country-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); z-index:3000; }
.country-modal[hidden]{ display:none; }
.country-modal__box{
  width:min(92vw,720px); background:#0e0e10; color:#fff; border-radius:18px;
  padding:18px 18px 22px; box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.country-modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.country-close{
  width:36px; height:36px; border-radius:10px; border:0; cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff; font-size:20px; line-height:1;
}
.country-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.country{
  display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; border:0; cursor:pointer;
  background:rgba(255,255,255,.06); color:#fff; text-align:left;
}
.country:hover{ background:rgba(255,255,255,.1); }

@media (max-width: 640px){ .country-grid{ grid-template-columns:repeat(2,1fr);} }

.personaldata{
  color: var(--accent);
  text-decoration: none;
}

.mhead { z-index: 3000; }
.dhead { z-index: 4000; }
.lang { position: relative; z-index: 5001; }
.lang__btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lang__menu { z-index: 5000; pointer-events: auto; }
.mhead__inner, .dhead__inner { overflow: visible; }
.country-modal { z-index: 9000; }
.country-modal__box { pointer-events: auto; }

.lang__item:focus-visible,
.lang__btn:focus-visible,
.country-close:focus-visible,
.country:focus-visible{
  outline: 2px solid rgba(255,255,255,.28);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (hover: none) and (pointer: coarse){
  .lang__btn{ padding: 10px 12px; }
  .lang__item{ padding: 12px; }
}


.pgallery{padding:60px 0}
.pg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pg-ctrl{display:flex;gap:12px}
.pg-btn{width:44px;height:44px;border-radius:999px;background:#111;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 16px rgba(0,0,0,.25);font-size:28px;line-height:1;display:grid;place-items:center;cursor:pointer}
.pg-btn:hover{background:#181818}

.pg-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 6px 2px;border-radius:16px; height: 482px;}
.pg-track::-webkit-scrollbar{height:10px}
.pg-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}
.pg-item{flex:0 0 calc(25% - 18px);scroll-snap-align:start;display:block;border-radius:16px;overflow:hidden;position:relative}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/11;transform:scale(1);transition:transform .25s ease}
.pg-item:hover img{transform:scale(1.04)}

@media(max-width:1200px){.pg-item{flex-basis:calc(33.333% - 16px)}}
@media(max-width:900px){
  .pg-item{
    flex-basis:calc(50% - 12px)
  }
  .pgallery{
        margin: 0 20px;
  }
  .lb-img{
        max-width: 100%!important;
  }
}
@media(max-width:560px){.pg-item{flex-basis:100%}}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;gap:12px;z-index:99999}
.lightbox[hidden]{display:none}
.lb-img{max-width:90vw;max-height:88vh;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff;font-size:26px;border:1px solid rgba(255,255,255,.18);cursor:pointer}
.lb-nav{width:48px;height:56px;border-radius:12px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff;font-size:34px;border:1px solid rgba(255,255,255,.18);cursor:pointer}
.lb-prev{grid-column:1}
.lb-next{grid-column:3}
@media(max-width:640px){.lb-nav{width:42px;height:50px;font-size:30px}}