@font-face {
    font-family: "GTEestiProDisplay";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("GTEestiProDisplay"),url(../fonts/GTEestiProDisplayRegular.woff2) format("woff2")
}

@font-face {
    font-family: "GTEestiProDisplay";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("GTEestiProDisplay"),url(../fonts/GTEestiProDisplayLight.woff2) format("woff2")
}

@font-face {
    font-family: "GTEestiProDisplay";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local("GTEestiProDisplay"),url(../fonts/GTEestiProDisplayLightItalic.woff2) format("woff2")
}

@font-face {
    font-family: "GTEestiProDisplay";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local("GTEestiProDisplay"),url(../fonts/GTEestiProDisplayMedium.woff2) format("woff2")
}

@font-face {
    font-family: "GTEestiProDisplay";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("GTEestiProDisplay"),url(../fonts/GTEestiProDisplayBold.woff2) format("woff2")
}

:root{
  --bg:#fff;
  --card:#141621;
  --text:#1a1a1a;
  --muted:#616d83;
  --main-color: #c39dff;
  --main-color-h: #9d80cb;
  --two-color:#FFD479;
  --two-color-h: #dbb463;
  --three-color: #eafffd;
  --three-color-h: #c6dddb;
  --accent:#FFC2A1;
  --ok:#30D158;
  --danger:#FF5C5C;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --radius:14px;
	--border-radius:10px;
  --radius-sm:10px;
}

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"GTEestiProDisplay",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    .container{width:100%;max-width: 1400px;margin:0 auto;}
   .backfffnot{
   background: #fff;
   -webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
   box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
   padding:40px 50px;
   border-radius: 0 0 20px 20px;
   }
.backfff{
    background: #fff;
    -webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
    box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
    padding:40px 50px;
    border-radius: 20px;
    }
.flex-butt{display:flex;gap:10px}
.btn{
            display:inline-flex;
            align-items:center;
            gap:10px;
            border-radius: 100px;
            text-transform: uppercase;
            height: 67px;
            padding: 2px 30px 0;
            color: #fff;
            background-color: var(--main-color);
            font-size: 12px;
            border: none;
            line-height: 1.5;
            font-weight: 600;
            letter-spacing: .2em;
            -webkit-box-shadow: inset 0 2px 15px 0 rgba(255,255,255,.3);
            box-shadow: inset 0 2px 15px 0 rgba(255,255,255,.3);
            border-bottom: 2px solid var(--main-color-h);
            font-family: "GTEestiProDisplay", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            }

    .btn:hover{transform:translateY(-2px)}
.play{
    padding: 2px 20px 0;
    height: 50px;
    font-size: 11px;
}
.btn-small{
    padding: 2px 20px 0;
    height: 50px;
    font-size: 11px;
    background-color: var(--three-color);
    border-bottom: 2px solid #cbe1df;
    color: #544f4f;
}
    .btn.secondary{background-color: var(--three-color);border-bottom-color: var(--three-color-h);color: #544f4f;}
    .badge{display: flex;background-color: #fff;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);color: #141414;align-items: center;width: 250px;gap: 10px;justify-content: center;padding: 7px 20px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
    .badge img{width:30px}.muted{color:var(--muted)}
    header{
      position:sticky;
      top:0;
      z-index:50;
      border-bottom: 1px solid rgb(240 246 251);
      background: #ffffffd9;
    }
.desktop{display:flex}
.flex{display:flex;justify-content:start;margin: 30px 0;gap: 10px;}
    .nav{display:flex;align-items:center;justify-content:space-between;padding: 10px 0;}
    .nav .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size: 23px;}
    .nav .logo i{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--main-color-h),var(--main-color))}
    .nav .links{display:flex;gap:18px;align-items:center}
   .hero{background: url(../images/bg-head.png);background-size: cover;}
 .hero-grid{display: grid;grid-template-columns: 200px minmax(0, 1fr) 385px;gap: 40px;         align-items: start;}
    .h1{font-size: 47px;line-height:1.1;margin: 15px 0 15px;font-weight:800;width: 500px;}
    .h1 .highlight{background: var(--main-color-h);-webkit-background-clip:text;background-clip:text;color:transparent}
    .lead{font-size: 17px;line-height: 1.4;font-weight: 400;margin: 25px 0;width: 400px;color:var(--muted);background-color: #ffffffd1;padding: 10px 20px;border-radius: 10px;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);}
    .hero-card{background: #FFF;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:20px;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);}
    .row{display:flex;gap:12px;flex-wrap:wrap;/* margin-top: 25px; */}
.flex-rev h4{margin:10px 0 5px 0;font-size: 20px;}
.flex-rev{display:flex;justify-content:space-between;align-items: center;font-size: 15px;}
.backwhite{
    background: #fff;
    -webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
    box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
    display: flex;
    padding: 20px 30px;
    border-radius: 20px;
    width: 490px;
    border-bottom: 1px solid #cdd7df;
    margin: 20px 0;
}
.backwhite .btn{}
.left-cont{display:flex;gap: 20px;}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top: 35px;}
    .kpi{border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:16px;text-align: left;border-bottom: 1px solid #cdd7df;align-items: center;gap: 15px;display: flex;background-color: #ffffff;border-radius: 10px;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);font-size: 15px;}
    .kpi b{font-size: 30px;margin: 0 0 5px;display: block;}
.kpi span{font-size:30px}
.kpi img{width: 45px;height: 45px;}
    section{border-bottom:1px solid rgba(255,255,255,.06);padding: 30px 0 30px 0;}
    .sec-title{font-size: 37px;font-weight:800;margin:0 0 10px}
    .sec-lead{color:var(--muted);margin:0 0 24px;font-size: 18px;width: 75%;line-height: 1.4;}
    .features{display:grid;grid-template-columns: repeat(4,1fr);gap: 35px;}
    .card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px}
    .card h4{margin: 0;}
    .process{display:grid;grid-template-columns: repeat(2,1fr);gap:12px;width: 100%;}
    .step{position:relative;padding: 20px 25px 10px 25px;border-radius:14px;background: #fff;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);border-bottom: 2px solid #cdd7df;}
    .step h4{margin:0;font-size: 20px;}.step .num{position:absolute;top:12px;right:12px;width: 30px;display: flex;height: 30px;align-items: center;justify-content: center;border-radius:999px;background-color: #dff5f3;border-bottom: 1px solid #ccdfdd;font-size: 15px;padding:6px 10px;color: #5f6c6b;}
    .step p{line-height:1.4}
.genre p{padding: 15px 20px;background:#FAF1E8;border-radius: 10px;line-height: 1.3;}
.genres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.genre h4{margin:0 10px 10px;font-size: 20px;}
    .genre{padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background: #fff;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);border-bottom: 2px solid #cdd7df;}
    .genre .controls{display:flex;gap:10px;margin-top:10px}
  
   .reviews{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:16px;
}@media (max-width: 768px){
  .reviews{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 480px){
  .reviews{
    grid-template-columns: 1fr;
  }
}


.review{
  border-radius:14px;
  padding:10px 25px;
  background:#fff;
  -webkit-box-shadow:0 14px 50px 0 rgba(133,143,160,.2);
  box-shadow:0 14px 50px 0 rgba(133,143,160,.2);
  border-bottom:2px solid #cdd7df;
}

    .review p{line-height:1.4}.faq{display: flex;gap:16px;flex-direction: column;margin: 0 0 30px;}
    details{border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px;border-radius: 10px;padding: 20px 25px;background: #fff;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);border-bottom: 2px solid #cdd7df;}
    summary{cursor:pointer;font-weight:700;font-size: 18px;}
 details p{padding:0!important;margin:15px 0 0}
    .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
    footer{padding:26px 0;color:var(--muted)}
    .grid-2{display: flex;gap: 40px;justify-content: space-between;padding: 30px 40px 30px 40px;border-radius: 20px;display: grid;grid-template-columns: minmax(0, 1fr) 450px;gap: 50px;align-items: start;overflow: hidden;background: #fff;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);border-bottom: 2px solid #cdd7df;}
.faq-left{width: 100%;}
    .form{border: 1px solid rgba(255, 255, 255, .06);border-radius: var(--radius);padding: 0px;}
    .form .field{display:flex;flex-direction:column;margin-bottom:12px}
    .form label{font-size: 16px;margin-bottom:6px;color: #141414;}
  /* карточки с изображениями */
.review.review-img{
  padding:0;              /* убираем внутренние отступы */
  overflow:hidden;        /* обрезаем края по радиусу */
}

.review.review-img img{
  display:block;
  width:100%;
  height: 100%;           /* задаёт «полоску» — горизонтальный формат */
  object-fit:cover;       /* картинка заполняет блок без искажений */
  border-radius:14px;
}
.form input,.form select,.form textarea{
     height: 51px;
     font-size: 15px;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     position: relative;
     border: none;
     display: flex;
     justify-content: center;
     background-color: #f1f1f1;
     border-bottom: 1px solid #cdd7df;
     border-radius: 5px;
     cursor: pointer;
     padding: 0 30px 0 15px;
     z-index: 10;
     font-family: "GTEestiProDisplay", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
.panel{margin:0;padding:10px 0}
    .trust{display:flex;gap:12px;flex-wrap:wrap;margin-top: 20px;}
    .pill{border:1px solid rgba(255,255,255,.06);color: #202020;border-radius:999px;padding:8px 10px;font-size: 13px;background-color: #fff;border-radius: 10px;-webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);}
    .notice{display:flex;align-items:center;gap:10px;background: #ffffff;border: 1px dashed #b1bfcb;border-radius:12px;padding:12px;color: #121212;margin: 0 0 1vw;}
    .audio{width:100%}
    @media (max-width:1024px){
      .hero-grid{grid-template-columns:1fr;padding: 0 20px;}
      .features{grid-template-columns:repeat(2,1fr)}
      .process{grid-template-columns:repeat(3,1fr)}
      .genres{grid-template-columns:repeat(2,1fr)}
      .reviews{grid-template-columns:repeat(2,1fr)}
      .faq{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr;padding: 30px 30px;}
    }
    @media (max-width:640px){
		.nav {
    padding:10px 10px
}
	.nav .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
}	
		.btn-small {
    padding: 2px 15px 0;
    height: 45px;
    font-size: 10px;
    background-color: var(--three-color);
    border-bottom: 2px solid #cbe1df;
    color: #544f4f;
}
      .features{grid-template-columns: 1fr;gap: 10px;}
      .process{grid-template-columns:1fr}
      .genres{grid-template-columns:1fr}
      .reviews{grid-template-columns:1fr}.genre h4 {
    margin: 0 10px 10px;
    font-size: 20px;
}.flex {
    display: flex;
    flex-direction:column;
    margin: 30px 0;
    gap: 10px;
}.backwhite {
   width: 100%;
  
}
	.notice {
   margin:0 0 20px
}	
		.cd {
    display: flex
;
    gap: 5px;
    align-items: center;
    justify-content: left!important;
}
	.left-cont {
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: left;
}	
		
		.kpis {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    margin-top: 35px;
}
      .h1{font-size:34px;width: 100%;}
		#value .card2 p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 15px!important;
    font-weight: 400;
}
      .sec-title{font-size:24px}
	.sec-lead{font-size:14px;width: 100%;}
		.backfffnot {
    padding: 30px 30px;
   
}
		 footer .container{padding:0 20px}
		.backfff {
     padding: 30px 30px;
}.blue-cont {
    padding: 30px 30px!important;
    display: flex!important;
    flex-direction: column;
}
#how .blue-cont{padding: 30px 30px 0px 30px!important;}
		
		.rcontp{height: 400px!important;justify-content: center;display: flex;overflow: auto!important;}
.rcontp img{height: 100%;/* width: 100%; */object-fit: cover;}
.tabs{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        /* -webkit-flex-wrap: wrap; */
        -ms-flex-wrap: wrap;
        /* flex-wrap: wrap; */
        width: 100%;
        overflow-x: auto;
  }
		.tab{font-size:12px}
    }
	
	
	
.value-grid{
  display:grid;
  gap:24px;
}

.value-left{
  display:flex;
  flex-direction:column; 
  gap:16px;
}

#value .card{
  background:#fff;
  border-radius:14px;
  padding: 22px 18px 21px 18px;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  -webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
  box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
  border-bottom: 1px solid #cdd7df;
}
#value .card h4{font-size:16px}
#value .card2 p{padding: 0;margin:10px 0;line-height: 1.4;font-size: 16px;font-weight: 400;}
#value .img-prem{border-radius:20px;overflow:hidden;margin: 0 0 10px;height: 170px;}
#value .img-prem img{height:100%;width:100%;object-fit: cover;}

#value .card2{
  background:#fff;
  border-radius:14px;
  padding: 22px 20px 21px;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  -webkit-box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
  box-shadow: 0 14px 50px 0 rgba(133, 143, 160, .2);
  border-bottom: 1px solid #cdd7df;
}
#value .card2 h4{margin: 0;font-size: 20px;}
@media (max-width:1024px){
  .value-grid{ grid-template-columns:1fr; }
}
.card2{background: url(../images/bgcenter.png);padding: 10px 30px;border-radius: 20px;line-height: 1.3;}
.card2 h4{margin:10px 0 0 0!important}
.card2 p{margin:5px 0 10px 0!important}
.backblue{background: #f8f4ffad;padding: 40px 50px 40px 50px;border-radius: 20px;}
.blue-cont{background: #fffcfc;padding: 40px 50px 0px 50px;border-radius: 20px;display: grid;grid-template-columns: minmax(0, 1fr) 450px;gap: 30px;align-items: start;overflow: hidden;}
.rcontp{height: 450px;justify-content: center;display: flex;overflow: hidden;}
.rcontp img{height: 100%;/* width: 100%; */object-fit: cover;}

.cd{
  display:flex;
  gap: 5px;
  align-items:center;
  justify-content:center;
}

/* Квадратные боксы */
.cd__box{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e7e7e7;
  border-bottom: 1px solid #c7c7c7;
  display:grid;
  place-items:center;
  position: relative;
  overflow:hidden;
  isolation:isolate;
}

/* Декоративные блики */
.cd__box::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at -20% -20%, rgba(79,140,255,.25), transparent 45%),
    radial-gradient(120% 120% at 120% 120%, rgba(79,140,255,.08), transparent 50%);
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.65;
}

/* Цифры */
.cd__d{
  color: #3e3e3e;
  font-size: 19px;
  letter-spacing:.5px;
  min-width: 2ch; /* стабильная ширина для 2 цифр */
  text-align:center;
  transform: translateZ(0);
  will-change: contents;
}

/* Светлая тема (опционально, раскомментируйте при необходимости)
@media (prefers-color-scheme: light){
  .cd__box{
    background: #ffffff;
    background-image: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
  }
  .cd__d{ color:#0f1115; }
}
*/
.flex-column{display:flex;flex-direction:column;font-size: 16px;line-height: 1.3;}

/* Расширение сеток для stats/pricing */
.kpis--wide{ grid-template-columns: repeat(4,1fr); }
@media (max-width:1024px){ .kpis--wide{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:768px){ .desktop{display:none!important}.kpis--wide{ grid-template-columns: 1fr; } }

/* Цены: используем существующую .features, только отступы */
.features.pricing .card2 h4{ margin:0 0 8px; }
.features.pricing .card2 .row{ margin-top:10px; }

/* Таймлайн: деликтная сетка в 5 колонок */
.process.process--timeline{ grid-template-columns: repeat(5,1fr); }
@media (max-width:1024px){ .process.process--timeline{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:768px){ .process.process--timeline{ grid-template-columns: 1fr; } }

.nop{padding: 0!important;}

/* Контейнер табов */
.tabs{
  display:flex;
  gap:10px;
  background-color: #ffffff;
  font-family: "GTEestiProDisplay", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.tab{
  appearance:none;
  text-transform: uppercase;
  border:none;
  border: 1px solid #f0f6fb;
  background: #ffffff;
  color:#1a1a1a;
  padding: 20px 34px;
  border-radius: 5px 5px 0 0;
  cursor:pointer;
  font-weight:600;
  font-family: "GTEestiProDisplay", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.tab.is-active,
.tab[aria-selected="true"]{
  color: #1c1c1c;
  font-weight: 700;
  pointer-events: none;
  background-color: #efeff6 !important;
}

/* Панели */
.panels{border-radius:0 12px 12px 12px;padding:16px;background-color: #efeff6;}
.panel[hidden]{ display:none; }

/* Сетка карточек */
.grid{display:grid;grid-template-columns: repeat(4,1fr);gap:14px;}
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

.tile{
  background:#ffffff;
  border-radius:12px;
  padding: 12px 22px;
  border-bottom: 2px solid #cdd7df;
}
.tile p{margin:10px 0;font-size:14px }
.tile__media{
  position:relative;
  border-radius:10px;
  overflow:hidden;
}
.tile__media img{ width:100%; display:block; }
.tile__play{
  position:absolute;
  inset:auto 10px 10px auto;
  width: 56px;
  height: 56px;
  border-radius:50%;
  right: 40%;
  bottom: 30%;
  border:none;
  background:var(--main-color);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tile__title{margin:10px 0 6px;font-size: 20px;}
.field { display: grid; gap: 10px; }

.messenger-select {
  display: flex;
  gap: 10px;
  align-items: center;
}

.messenger-select input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.messenger-select label {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease;
  display: grid;
  place-items: center;
}

.messenger-select label img {
  width: 100%;
  height: 100%;
  display: block;
}

.messenger-select input:checked + label {
  transform: translateY(-1px);
  border: 2px solid #44726e;
}

.messenger-select label:hover {
  border-color: #c7c7c7;
}