/* =================================== */
/* =================================== */
/* =================================== */
/* Danylo Oliinyk - https://iamdev.lol/ */
/* =====Januar 2026 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* =================================== */
/* 01. Header Section */
/* 02. Hero Section */
/* 03. About Section */
/* 03.2 Mobile Slider Section */
/* 04. Decode Section */
/* 05. Add Section */
/* 06. Footer Section */
/* 07. TNX Section */
/* 08. Pop-Up Section */
/* 09. DISC Section */
/* 10. FAQ Section */
/* 00. Media Section */
/* =================================== */
/* =================================== */
/* =================================== */






/* 01. Header Section Start */
.header__wrap{
    display: flex;
    padding: 20px 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.header__wrap-col2{
  display: flex;

  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.header__wrap-col1-ul{
    display: flex;
    width: 672px;
    justify-content: space-between;
    align-items: center;
}

.header__link{
    color: #0D0D0D;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    cursor: pointer;
    text-decoration: none;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;     
    background-color: #fff; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

body {
    padding-top: 80px; 
}



.burger-icon {
    display: none; 
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    width: 30px;
    cursor: pointer;
}

.burger-line {
    background-color: #000;
    height: 4px;
    width: 100%;
    border-radius: 2px;
}

@media (max-width: 1024px) {
    .burger-icon {
        display: flex; 
    }

    .header__wrap-col1-ul {
        display: none; 
        flex-direction: column;
        gap: 16px;
        width: 95%;
        background-color: white;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 16px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    .header__link {
        font-size: 18px;
        text-align: center;
    }

    .header__wrap-col1-ul.active {
        display: flex; 
    }
}

.header__link {
    position: relative;
    text-decoration: none; 
    color: #0D0D0D;
    transition: color 0.3s ease;
}

.header__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; 
    width: 0;
    height: 2px; 
    background-color: #3A6EDD; 
    transition: width 0.3s ease;
}

.header__link:hover::after {
    width: 100%; 
}
/* 01. Header Section End */

/* 02. Hero Section */
.hero__wrap{
    display: flex;
    flex-direction: column;
    gap: 70px;
    justify-content: center;
    text-align: center;

    padding: 60px;
    border-radius: 24px;
    background-image: url("../img/bg/promo-bg.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__wrap-mob{
  padding: 60px 12px;
  border-radius: 24px;
  background-image: url("../img/bg/promo-bg.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  display: none;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.hero__wrap-mob-text{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero__wrap-mob-title{
  color: var(--white-100, #FFF);
  text-align: center;
  font-family: var(--font-accent);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 28.8px */
}

.hero__wrap-mob-subtitle{
  color: var(--white-100, #FFF);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 23.1px; /* 144.375% */
}

.hero__wrap-mob-topics{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.hero__wrap-mob-item{
  display: flex;
  align-items: center;
  gap: 13px;
}

.hero__wrap-mob-item-title{
  color: var(--white-100, #FFF);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 26.41px; /* 176.067% */
  letter-spacing: -0.66px;
}

.hero__uptitle-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.hero__content{
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.hero__uptitle{
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.41px; 
    letter-spacing: -0.66px;
}

.hero__uptitle-item{
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero__title{
    display: flex;
    flex-direction: column;
}

h1{
    color: var(--white-100, #FFF);
    text-align: center;
    font-family: var(--font-accent);
    font-size: 68px;
    font-style: normal;
    font-weight: 700;
    line-height: 78px; /* 114.706% */
    letter-spacing: -1px;
}

.hero__subtitle{
    color: var(--white-100, #FFF);
    text-align: center;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px; /* 160% */
    letter-spacing: -1px;
}

.hero__btn{
  display:inline-flex;
  padding:16px 40px;
  justify-content:center;
  align-items:center;
  gap:10px;
  border-radius:12px;
  background:linear-gradient(180deg,#E6EEF9 0%,#C4DDF5 100%);
  color:var(--Accent-color-3,#044788);
  font-size:16px;
  font-style:normal;
  font-weight:600;
  line-height:16px;
  border-color:#0000;
  width:max-content;
  transition:transform .2s ease, box-shadow .2s ease;
  transform:translateZ(0);
  will-change:transform;
}

.hero__btn:hover{
  transform:scale(1.03);
  cursor: pointer;
}

.hero__btn:active{
  transform:scale(0.99);
}


.acc-btn{
    display: flex;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    border-color: #ffffff00 !important;
    text-decoration: none;

    color: #E9F0FF;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 100% */

    transition:transform .2s ease, box-shadow .2s ease;
    transform:translateZ(0);
    will-change:transform;

    border-radius: 12px;
    background: linear-gradient(180deg, #00397A 0%, #001F3D 100%);
    box-shadow: 0 1px 1px 0 rgba(205, 231, 250, 0.08) inset, 0 -2px 1px 0 rgba(0, 7, 31, 0.24) inset, 0 0 1px 0 rgba(0, 7, 31, 0.32), 0 2px 2px 0 rgba(0, 7, 31, 0.06), 0 4px 4px 0 rgba(0, 7, 31, 0.06), 0 8px 8px 0 rgba(0, 7, 31, 0.06), 0 10px 16px -10px rgba(255, 255, 255, 0.06) inset;
}

.acc-btn:hover{
  transform:scale(1.03);
  cursor: pointer;
}

.acc-btn:active{
  transform:scale(0.99);
}
/* 02. Hero Section */

/* 03. About Section */
.main__wrap{
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding-bottom: 100px;
}

/* NEW */
.main__col {
  overflow: hidden;
}

.about__wrap{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about__promo-ico{
  padding-top: 6px;
}


h2{
    color: var(--Black, #0F0F0F);
    font-family: var(--font-accent);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 62.5px; /* 125% */
}

.about__content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.about__content p{
    color: var(--Black, #0F0F0F);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.7px; /* 165% */
}

aside{
    display: flex;
    padding: 20px 20px 20px 45px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 14px;
    background: var(--BG-color-1, #E9F3F9);
}

.promo__col{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.promo__item{
    width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 15px;
    padding: 30px 15px;
    border-radius: 20px;
    background: var(--Accent-color-1, #215FCB);
}

.promo__item-ico{
  border-radius: 12px;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
  height: 160.125px;
  align-self: stretch;
  aspect-ratio: 16/9;
}

.promo__item-ico-1{
  background: url('https://stratoplan-school.com/team/img/preview/banner.webp') rgba(211, 211, 211, 0) 50% / cover no-repeat;
}

.promo__item-ico-2{
  background: url('https://stratoplan-school.com/head/img/preview/banner.webp') rgba(211, 211, 211, 0) 50% / cover no-repeat;
}

.promo__item-ico-3{
  background: url('https://stratoplan-school.com/cto/img/preview/banner.webp') rgba(211, 211, 211, 0) 50% / cover no-repeat;
}

.promo__item-ico-4{
  background: url('https://stratoplan-school.com/coo/img/preview/banner.webp') rgba(211, 211, 211, 0) 50% / cover no-repeat;
}

.promo__item-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.promo__item-icon-wrap{
  display: flex;
  align-items: center;
  gap: -17px;
}

.promo__col-ev-text{
  color: var(--Black, #0F0F0F);
  font-family: var(--font-accent);
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 62.5px; /* 240.385% */
}

.promo__col-prog-p{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 30px;
}

.promo__col-prog{
    display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.promo__item-icon p{
  color: var(--white-100, #FFF);
  text-align: center;
  font-family: var(--font-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%; /* 15.4px */
}

.promo__item-icon-1{
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  border: 1px solid #FFF;
  background: url('../img/promo/1.svg');
}

.promo__item-icon-2{
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  border: 1px solid #FFF;
  background: url('../img/promo/2.svg');
  margin-left:-17px;
}

.promo__item-icon-3{
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  border: 1px solid #FFF;
  background: url('../img/promo/3.svg');
  margin-left:-17px;
}

.promo__item-icon-4{
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  border: 1px solid #FFF;
  background: url('../img/promo/4.svg');
  margin-left:-17px;
}

.promo__item-lilac{
    border-radius: 20px;
    background: var(--Accent-color-2, #6865D4);
}

.promo__item-blue{
    border-radius: 20px;
    background: #215FCB;
}

.promo__item-black{
    border-radius: 20px;
    background: #012326;
}

.promo__item-date{
  color: #FFF;
  text-align: center;
  font-family: Manrope;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 25px; /* 138.889% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.promo__item-head{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.promo__item-uptitle{
    color: #D7EBFF;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px; /* 113.636% */
}

.promo__item-title{
    color: var(--white-100, #FFF);
    text-align: center;
    font-family: var(--font-accent);
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 27.5px */
}

.promo__item-description{
    color: #D7EBFF;
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 129.412% */
}

.promo__item-cta{
    display: flex;
    padding: 16px 46px;
    justify-content: center;
    align-items: center;
    border-radius: 10.91px;
    background: var(--white-100, #FFF);
    color: var(--Accent-color-3, #044788);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    text-decoration: none;
    transition:transform .2s ease, box-shadow .2s ease;
    transform:translateZ(0);
    will-change:transform;
}

.promo__item-cta:hover{
  transform:scale(1.03);
  cursor: pointer;
}

.promo__item-cta:active{
  transform:scale(0.99);
}
/* 03. About Section */

/* 03.2 Mobile Slider Section */
.mob-slider{
    padding-top: 60px;
    padding-bottom: 10px;
    display: none;
}

.mob-slider__wrap{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.mob-slider__title{
    color: #000;
    font-family: var(--font-accent);
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; 
}

.mob-slider__btns{
    display: flex;
    gap: 16px;
}

.mob-slider__slider{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mob-slider__slider{
    position: relative;
    overflow: hidden;
    width: 100%;
    align-items: stretch;
}

.mob-slider__track{
    display: flex;
    gap: 16px;
    will-change: transform;
    transform: translate3d(0,0,0);
    transition: transform .28s ease;
}

.mob-slider__slider .promo__item{
    flex: 0 0 100%;
    max-width: 100%;
}

.mob-slider__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .2s ease;
}

.mob-slider__btn.is-disabled{
    opacity: .4;
    pointer-events: none;
}


.mob-slider__slider{
  position: relative;
  overflow: hidden;
  width: 100%;
}

.mob-slider__track{
  display: flex;
  gap: 16px;              
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform .28s ease;
}

.mob-slider__slider .promo__item{
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 03.2 Mobile Slider Section */

/* 04. Decode Section */
.decode{
    padding-top: 50px;
}

.decode__wrap{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.decode__content, .decode__types{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

h3{
    color: var(--Black, #0F0F0F);
    font-family: var(--font-accent);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 62.5px; /* 125% */
}

.decode__content p{
    color: var(--Black, #0F0F0F);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.7px;
}

.decode__content p strong{
    font-weight: 700;
}

.decode__types p{
    color: var(--Black, #0F0F0F);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.7px;
}

.decode__types p strong{
    font-weight: 600;
}

.decode__promo{
    padding: 60px 40px;
    display: flex;
    justify-content: space-between;
    border-radius: 20px;
    background: var(--Accent-color-1, #215FCB);
}

.decode__col1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    align-self: stretch;
}

.decode__title{
    color: var(--white-100, #FFF);
    font-family: var(--font-accent);
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px; /* 125% */

    /* NEW */
    margin-bottom: 20px;
}

.decode__subtitle{
    color: #FFF7F7;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 114.286% */
    width: 520px !important;
    /* NEW */
    margin-bottom: 20px;
}

.decode__col2{
  position: relative;
}

.decode__col2 img{
    height: 266px;
    z-index: 2;
    position: sticky;
}

/* фиксированный блоб */
.white-blob {
    z-index: 1;
    position: absolute;
    width: 195px;
    height: 195px;
    border-radius: 761px;
    background: #ffffff;
    filter: blur(40px);
    left: 45px;
    top: 35px;
}

/* 04. Decode Section */

/* 05. Add Section */
.add{
    padding-top: 80px;
}

.add__wrap{
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.add__header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

h4{
    color: var(--Black, #0F0F0F);
    font-family: var(--font-accent);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 62.5px; /* 125% */
}

.add__btns{
    display: flex;
    gap: 16px;
    align-items: center;
}

.add__slider-wrap{
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.add__slide{
    display: flex;
    flex: 1 0 0;
    padding: 16px 16px 24px 16px;
    flex-direction: column;
    gap: 30px;
    border-radius: 24px;
    background: var(--BG-color-2, #F5F5F7);
}

.add__slide-img{
    height: 285px;
    align-self: stretch;
    border-radius: 16px;
    background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.slide-img-1{ background: url('../img/news/pic-1.avif') center/cover no-repeat; }

.slide-img-2{ background: url('../img/news/pic-2.avif') center/cover no-repeat; }

.slide-img-3{ background: url('../img/news/pic-3.avif') center/cover no-repeat; }

.slide-img-4{ background: url('../img/news/pic-4.avif') center/cover no-repeat; }

.slide-img-5{ background: url('../img/news/pic-5.avif') center/cover no-repeat; }

.add__slide-title{
    color: var(--Black, #0F0F0F);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px; /* 135% */
    text-decoration: none;
}
.add__slider-wrap{
  overflow: hidden;
}

.add__track{
  display: flex;
  gap: 24px;
  will-change: transform;
  transition: transform .35s ease;
}

.add__slide{
  flex: 0 0 calc((100% - 24px) / 2);
}


@media (max-width: 1024px){
  .add__slide{ flex-basis: 100%; }
}


.add__btn.is-disabled{
  opacity: .35;
  pointer-events: none;
}


.add__slide{
  box-sizing: border-box;
  min-width: 0;
}


.add__track{
  min-width: 0;
}

/* 05. Add Section */


/* 06. Footer Section Start */

.footer__main-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.footer__title{
  color: #F5F5F5;
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px; /* 128% */
}

.footer__main-content-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.footer__main-content-wrap-top{
  display: flex;
  width: 100%;
  padding: 40px 0px;
  justify-content: space-between;
  align-items: center;
}

.footer__links-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.footer-link-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-link-btn:hover {
  transform: scale(1.1);
}

.footer__main-content-wrap-bottom{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.footer__main-content-col1{
  display: flex;
  width: 695px;
  align-items: flex-start;
  gap: 60px;
}

.footer__main-content-col1, .footer__main-content-col2{
  flex: 1;
}

.footer__main-content-col1-item{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__main-content-title{
  padding-bottom: 2px;
  color: #3A6EDD;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  text-transform: uppercase;
}

.footer__main-content-subtitle{
  color: #F5F5F5;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

.foot-lnk{
  text-decoration: none;
  cursor: pointer;
}

.footer__main-content-col2{
  display: flex;
  justify-content: end;
  align-items: flex-end;
  align-self: stretch;
  
}

.footer__main-content-col2 p{
  width: 50%;
  color: #F5F5F5;
  text-align: right;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

.footer__main-bottom{
  border-top: 1px solid #898989;
  display: flex;
  width: 100%;
  padding-top: 50px;
  justify-content: space-between;
  align-items: center;
}

.footer__main-bottom a {
  color: #F5F5F5;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; 
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration 0.3s ease; 
}

.footer__main-bottom a:hover {
  text-decoration: underline; 
}

.footer__main-bottom p{
  color: #F5F5F5;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

@media (max-width: 1024px) {
  .footer__main-content-wrap-bottom{
    flex-direction: column;
  }
  .footer__main-content-col1{
    width: 100%;
    flex-direction: column;
  }
  .footer__main-content-col2 p{
    margin-top: 60px;
    width: 100%;
    text-align: left;
  }
  .footer__main-content-col2{
    justify-content: start;
  }
  .footer__title{
    font-size: 31px;
    line-height: normal;
    text-align: start;
  }
  .footer__main-bottom{
    width: 100%;
    flex-direction: column;
    gap: 20px;
    text-align: start;
  }
  .footer__main-content-wrap-top{
    flex-direction: column;
    Gap: 20px;
    align-items: start;
  }
}
/* 06. Footer Section End */

/* 07. THX Section End */
.result{
    background: var(--BG-color-2, #F5F5F7);
    padding-bottom: 100px;
}

.thx__header-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
}

.result__content{
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.result__main{
    display: flex;
    justify-content: space-between;
    padding: 60px;
    border-radius: 24px;
    gap: 45px;
    background: var(--white-100, #FFF);
}

.result__main-left-col{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.result__text-wrap{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result__title{
    color: var(--Accent-color-1, #215FCB);
    font-family: var(--font-accent);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px; /* 146.667% */
    letter-spacing: -1px;
    text-transform: uppercase;
}

.result__subtitle{
    color: var(--Black, #0F0F0F);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 42px; /* 150% */
    letter-spacing: -1px;
}

.result__score-wrap{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result__score-title{
    color: var(--Accent-color-3, #044788);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 58px; /* 207.143% */
    text-transform: uppercase;
}

.result__score-content{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result__score{
    display: flex;
    padding: 14px 20px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 2px solid var(--Greenish, #80E596);
    background: rgba(128, 229, 150, 0.20);
}

.result__score span{
    color: var(--black-100, #000);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 33px; /* 165% */
}

.result__score-subtitle{
    color: rgba(15, 15, 15, 0.70);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}

.result__score-subtitle span{
color: #EA0808;
}

.result__link-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.result__link-title{
    color: var(--Accent-color-3, #044788);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

.copyfield{
  --cf-border: #cfe0ff;
  --cf-blue: #2563eb;
  --cf-bg: #ffffff;

  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;

  width: 100%;

  background: var(--cf-bg);
  border: 1px solid #E9E9E9;
  border-radius: 10px;
  overflow: hidden;
}

.copyfield__icon{
  height: 100%;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--cf-border);
  color: #93a6c7;
}

.copyfield__icon svg{
  width: 22px;
  height: 22px;
}

.copyfield__input{
  width: 100%;
  height: 64px;
  padding: 0 18px;
  border: 0;
  outline: 0;
  background: transparent;

  font: 600 18px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1f2937;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copyfield__btn{
  height: 64px;
  padding: 0 22px;
  border: 0;
  border-left: 1px solid var(--cf-border);
  background: var(--cf-blue);
  color: #fff;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  font: 700 18px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer;
}

.copyfield__btn:active{ transform: translateY(1px); }

.copyfield__btnIcon svg{
  width: 22px;
  height: 22px;
  display: block;
}

.copyfield__btn:focus-visible{
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: -3px;
}

/* mobile */
@media (max-width: 520px){
  .copyfield{ grid-template-columns: 52px 1fr auto; }
  .copyfield__input{ font-size: 16px; padding: 0 12px; }
  .copyfield__btn{ padding: 0 14px; }
  .copyfield__btnText{ display: none; }
}

.result__main-right-col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    max-width: 625px;
}

.result__main-right-col, .result__main-left-col{
  flex: 1 0 0;
}

.result__score--subtitle{
  color: var(--Black, #0F0F0F);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 34px; /* 141.667% */
  letter-spacing: -1px;
}

.result__score--subtitle a{
  color: var(--Accent-color-1, #215FCB);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -1px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.result__main-right-col-title{
    color: rgba(15, 15, 15, 0.80);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px; /* 125% */
    letter-spacing: -1px;
}

.vcover{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 22px;
  overflow: hidden;
  background: #0b0b0b;
  cursor: pointer;
}

.vcover__poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vcover__play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.vcover__playRing{
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.vcover__playTri{
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 8px;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 28px solid #2563eb;
}

.vcover:focus-visible{
  outline: 3px solid rgba(37,99,235,.45);
  outline-offset: 4px;
}

@media (max-width: 520px){
  .vcover__playRing{ width: 84px; height: 84px; }
  .vcover__playTri{
    margin-left: 6px;
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 22px;
  }
}


.result__promo{
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

.result__promo-left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 40px;
    border-radius: 20px;
    background: var(--Accent-color-2, #6865D4);
    width: 927px;
}

.result__promo-right{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 35px 40px;
    border-radius: 20px;
    background: var(--Accent-color-1, #215FCB);
}

.result__promo-uptitle{
    color: var(--white-100, #FFF);
    font-family: var(--font-accent);
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px; /* 135.714% */
}

.result__promo-title{
    color: #F8FFD7;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px; /* 146.154% */
}

.result__promo-name{
    color: var(--white-100, #FFF);
    font-family: var(--font-accent);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 36px */
}

.result__promo-tg{
    color: var(--white-100, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 120% */
}

.result__promo-left, .result__promo-right{
    position: relative;
    overflow: hidden;
}

.result__promo-gift{
    width: 328px;
    aspect-ratio: 1/1;
    background: url(../img/gift.svg) rgba(211, 211, 211, 0) 50% / cover no-repeat;

    position: absolute;
    bottom: -50px;
    right: 0px;
}

.result__promo-tg-ico{
    width: 228px;
    aspect-ratio: 1/1;
    background: url(../img/promo/tg.svg) rgba(211, 211, 211, 0) 50% / cover no-repeat;

    position: absolute;
    bottom: -60px;
    right: -60px;
}
/* 07. THX Section End */

/* 08. Pop-Up Section Start */
.disc-modal{
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
}

.disc-modal.is-open{ display: block; }

.disc-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,.65);
}

.disc-modal__dialog{
  position: relative;
  width: min(980px, calc(100% - 32px));
  max-height: min(90vh, 820px);
  margin: 5vh auto;
  border-radius: 16px;
  background: #fff;
  overflow: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}

.disc-modal__body{
  padding: 24px;
}

.disc-modal__title{
  /* margin: 0 0 16px; */
  font-size: 20px;
  line-height: 1.2;
  color: #0D0D0D;
}

.disc-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(13,13,13,.06);
  color: #0D0D0D;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.disc-modal__close:hover{
  background: rgba(13,13,13,.1);
}

/* NEW */
.disc-bottom {
  padding: 0 56px;
}

/* lock scroll */
html.no-scroll, body.no-scroll{
  overflow: hidden;
}

/* mobile */
@media (max-width: 640px){
  .disc-modal__dialog{
    width: calc(100% - 16px);
    margin: 8px auto;
    max-height: calc(100vh - 16px);
    border-radius: 14px;
  }

  .disc-modal__body{
    padding: 16px;
  }
}

.apruve{
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: none;
}

.apruve.is-open{ display: block; }

.apruve__overlay{
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,.55);
}

.apruve__dialog{
  position: relative;
  width: 85vw;
  margin: 60px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,.28);
  overflow: hidden;

  padding: 56px 72px 44px;
}

.apruve__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(13,13,13,.06);
  cursor: pointer;
}

.apruve__close::before,
.apruve__close::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: #8B8B8B;
  transform-origin: center;
}

.apruve__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.apruve__close::after{  transform: translate(-50%,-50%) rotate(-45deg); }

.apruve__close:hover{ background: rgba(13,13,13,.10); }

.apruve__head{
  text-align: center;
}

.apruve__title{
  margin: 0;
  color: var(--Black, #0F0F0F);
  font-family: var(--font-accent);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
}

.apruve__sub{
  margin: 14px auto 0;
  max-width: 760px;
  color: #3A3A3A;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
}

.apruve__sub span{
  color: #9A0505;
  font-weight: 500;
  padding-top: 20px;
}

.apruve__illustration{
  width: 220px;
  height: 220px;
  margin: 34px auto 0;
  border-radius: 18px;
  display: grid;
  place-items: center;

  /* фоновый плейсхолдер под картинку */
  background: #215FCB;
}

.apruve__illustration img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.apruve__form{
  margin: 32px auto 0;
  max-width: 760px;
}

.apruve__field{
  display: block;
  margin-top: 14px;
}

.apruve__input{
  width: 100%;
  height: 66px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid #E6E6E6;
  background: #fff;
  outline: 0;

  font-size: 18px;
  line-height: 1;
  color: #0F0F0F;
}

.apruve__input::placeholder{ color: #8F8F8F; }

.apruve__input:focus{
  border-color: rgba(33,95,203,.35);
  box-shadow: 0 0 0 4px rgba(33,95,203,.12);
}

.apruve__btn{
  width: 100%;
  height: 74px;
  margin-top: 18px;
  border: 0;
  border-radius: 14px;

  font-size: 20px;
  font-weight: 600;

  background: #CFCFCF;
  color: #ffffff;
  cursor: not-allowed;
}

.apruve__btn:not(:disabled){
  background: linear-gradient(180deg, #00397A 0%, #001F3D 100%);
  cursor: pointer;
}

.apruve__btn:not(:disabled):hover{ transform: translateY(-1px); }
.apruve__btn:not(:disabled):active{ transform: translateY(0px); }

.apruve__foot{
  margin: 18px auto 0;
  max-width: 760px;
  text-align: center;

  color: #6E6E6E;
  font-size: 14px;
  line-height: 1.45;
}

.apruve__link{
  color: #6E6E6E;
  text-decoration: underline;
}

.apruve__link:hover{ color: #215FCB; }

/* reuse your existing lock-scroll rule */
html.no-scroll, body.no-scroll{ overflow: hidden; }

/* responsive */
@media (max-width: 768px){
  .apruve__dialog{
    width: calc(100% - 16px);
    margin: 10px auto;
    padding: 26px 18px 20px;
    border-radius: 18px;
  }

  .apruve__title{ font-size: 30px; }
  .apruve__sub{ font-size: 15px; }

  .apruve__illustration{
    width: 180px;
    height: 180px;
    margin-top: 22px;
  }

  .apruve__input{ height: 60px; font-size: 16px; }
  .apruve__btn{ height: 66px; font-size: 18px; }
}
/* 08. Pop-Up Section End */

/* 09. Disc Section Start */
.disc-modal{position:fixed;inset:0;z-index:100001;display:none}
.disc-modal.is-open{display:block}
.disc-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.disc-modal__dialog{position:relative;width:min(1240px,calc(100% - 64px));margin:56px auto;background:#fff;border-radius:22px;box-shadow:0 40px 120px rgba(0,0,0,.28);overflow:hidden}
.disc-modal__close{position:absolute;top:24px;right:24px;width:48px;height:48px;border:0;background:transparent;font-size:0;cursor:pointer;opacity:.55}
.disc-modal__close::before,.disc-modal__close::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:2px;background:#7A7A7A;transform-origin:center}
.disc-modal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.disc-modal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.disc-modal__head{padding:48px 56px 18px;text-align:center}
.disc-modal__title{
    color: var(--Black, #0F0F0F);
    text-align: center;
    font-family: var(--font-accent);
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 62.5px; /* 208.333% */
}
.disc-modal__sub{
    /* margin-top:14px; */
    color: #272727;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; /* 347.222% */
}
.disc-modal__lead{
    margin-top:22px;
    color: var(--Green, #409C54);
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; /* 284.091% */
}

/* NEW */
.disc-modal__tabs{padding:0 56px 8px;display:flex;gap:8px; justify-content: center;}
.disc-tab{border:0;background:#EAF2FA;color:#2C2C2C;border-radius:10px;padding:14px 18px;font-size:22px;line-height:1;cursor:pointer}
.disc-tab.is-active{background:#1F5BD6;color:#fff}
.disc-modal__body{padding:16px 56px 52px;background:#ffffff}
.disc-pane{display:none}
.disc-pane.is-active{display:block}
.disc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:18px}
.disc-card{border:1px solid rgba(0,0,0,.18);border-radius:10px;overflow:hidden;background:#fff}
.disc-card__title{padding:16px 18px;font-size:26px;font-weight:800;color:#1C1C1C}
.disc-card__foot{padding:16px 18px;font-size:24px;font-weight:800;color:#1C1C1C;}
.disc-list{list-style:none; margin: 0px 20px;;padding:0;border:1px solid rgba(0,0,0,.12)}
.disc-item{position:relative;padding:18px 48px 18px 18px;font-size:20px;color:#2C2C2C;border-top:1px solid rgba(0,0,0,.12);cursor:grab;user-select:none;background:#fff}

/* drag-handle ("точечки") */
.disc-handle{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;touch-action:none;opacity:.75}
.disc-handle:hover{opacity:1}
.disc-handle svg{display:block;width:16px;height:16px}
.disc-item.is-dragging .disc-handle{cursor:grabbing}
.disc-item:first-child{border-top:0}
.disc-item.is-dragging{opacity:.55}
.disc-item.is-over{outline:2px dashed rgba(31,91,214,.45);outline-offset:-6px}
.disc-list.is-reordering{touch-action:none}
.disc-progress{margin:26px 56px 0;height:18px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.disc-progress__bar{height:100%;width:0;border-radius:999px;background:#6FE28A;transition:width .2s ease}
.disc-actions{margin:0 56px 0;display:flex;justify-content:space-between;align-items:center}
.disc-btn{border:1px solid rgba(0,0,0,.22);border-radius:999px;padding:16px 42px;font-size:24px;cursor:pointer;background:#fff;color:#1C1C1C}
.disc-btn--primary{border-color:transparent;background:#3A944A;color:#fff}
.disc-btn:disabled{opacity:.45;cursor:not-allowed}
html.no-scroll,body.no-scroll{overflow:hidden}
@media (max-width: 1100px){
  .disc-modal__dialog{width:calc(100% - 24px);margin:12px auto}
  .disc-modal__head{padding:28px 18px 12px}
  .disc-modal__body{padding:12px 18px 24px}
  .disc-modal__tabs{padding:0 18px 6px}
  .disc-grid3{grid-template-columns:1fr;gap:14px}
  .disc-progress{margin:16px 18px 0}
  .disc-actions{margin:18px 18px 0}
  .disc-modal__title{font-size:34px}
  .disc-modal__lead{font-size:20px}
  .disc-tab{font-size:18px;padding:12px 14px}
  .disc-item{font-size:18px}
}

.disc-progress{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.disc-actions{
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.disc-modal__dialog{
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.disc-modal__body{
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


.disc-modal__body{
  padding-bottom: 32px;
}


.disc-progress,
.disc-actions{
  position: sticky;
  background: #fff;
  z-index: 2;
}

.disc-actions{ bottom: 0; padding-bottom: 10px; }
.disc-progress{ bottom: 86px; } 

@media (max-width: 1100px){
  .disc-modal__dialog{
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .disc-modal__close{
    top: 16px;
    right: 16px;
  }
}


.disc-actions{
  gap: 12px;
}

.disc-btn{
  max-width: 100%;
}

@media (max-width: 520px){
  .disc-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .disc-btn{
    width: 100%;
  }
  .disc-progress{ bottom: 140px; }
}

/* NEW */
.disc-modal__dialog{
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

}


.disc-modal__body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding-bottom: 220px;
}


.disc-progress,
.disc-actions{
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.disc-progress,
.disc-actions{
  position: sticky;
  background: #fff;
  z-index: 5;
}

.disc-actions{
  bottom: 0;
  padding-top: 14px;
  padding-bottom: 16px;
}


.disc-progress{
  bottom: 110px; 
}


@media (max-width: 1100px){
  .disc-modal__dialog{
    width: calc(100% - 24px);
    margin: 12px auto;
    border-radius: 22px;
    max-height: calc(100vh - 24px);
  }

  .disc-modal__head{
    padding: 28px 18px 12px;
  }

  .disc-modal__body{
    padding: 12px 18px 0;
    padding-bottom: 220px; 
  }

  .disc-modal__tabs{
    padding: 0 18px 8px;
  }


  .disc-modal__tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }
  .disc-modal__tabs::-webkit-scrollbar{ height: 0; }


  .disc-grid3{
    grid-template-columns: 1fr;
    gap: 14px;
  }


  .disc-btn{
    font-size: 20px;
    padding: 14px 24px;
  }
}


@media (max-width: 520px){
  .disc-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .disc-btn{
    width: 100%;
  }

  .disc-progress{
    bottom: 170px; 
  }
}

@media (max-width: 1100px){

  .disc-modal__dialog{
    width: calc(100% - 24px);
    margin: 12px auto;
    border-radius: 22px;

    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);

    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .disc-modal__body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    padding-bottom: 66px !important;
  }

  /* NEW */
  .disc-bottom {
    padding: 0 !important;
  }

  .disc-progress,
  .disc-actions{
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    background: transparent !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .disc-progress{
    margin: 14px 18px 0 !important;
    background: rgba(0,0,0,.08) !important;
  }

  .disc-actions{
    margin: 16px 18px 18px !important;
    background: #fff !important;
    padding: 0 !important;

    flex: 0 0 auto;
  }


  .disc-btn{ max-width: 100%; }

  @media (max-width: 520px){
    .disc-actions{
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .disc-btn{ width: 100%; }
  }


  .disc-modal__tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px;

    padding: 0 18px 10px !important;
    margin: 0 !important;


    scroll-padding-left: 18px;
  }

  .disc-modal__tabs::-webkit-scrollbar{ height: 0; }

  .disc-tab{
    flex: 0 0 auto; 
    white-space: nowrap;
    touch-action: pan-x; /* тач-скролл по X */
  }


  .disc-modal__body{ touch-action: pan-y; }
}
.disc-modal__tabs { -webkit-overflow-scrolling: touch; }
@media (max-width: 1100px){
  .disc-modal__tabs{

    justify-content: flex-start !important;


    width: 100%;
    max-width: 100%;


    margin-left: 0 !important;
    margin-right: 0 !important;


    padding-left: 18px !important;
    padding-right: 18px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity; 
  }

  .disc-tab{
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}
@media (max-width: 1100px){
  .disc-modal__tabs{
    justify-content: flex-start !important;

    width: 100%;
    max-width: 100%;

    margin: 0 !important;


    padding-bottom: 16px !important;

    display: flex;
    flex-wrap: nowrap !important;
    gap: 10px;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;


    scroll-padding-left: 18px;
    scroll-padding-right: 18px;
  }

  .disc-modal__tabs::before,
  .disc-modal__tabs::after{
    content: "";
    flex: 0 0 18px;
  }

  .disc-tab{
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

@media (min-width: 1101px){
  .disc-modal__body{
    padding-bottom: 32px !important;
  }
}

/* 09. Disc Section End */


/* 10. FAQ Section Start */
.faq{
  padding-top: 60px;
}

.faq__wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
}

.faq__title{
  color: #0D0D0D;
  font-family: var(--font-accent);
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 62.4px; /* 124.8% */
  letter-spacing: -1px;
}

.faq__acc{
  display: flex;
  padding-top: 36px;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  align-self: stretch;
  text-decoration: none;
}

.faq__acc-btn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.faq__acc-title{
  color: #0D0D0D;
  font-family: var(--font-accent);
  font-size: 31px;
  font-style: normal;
  font-weight: 500;
  line-height: 37.2px; /* 120% */
  letter-spacing: -1px;
}

.faq__acc-content{
  display: none;
  flex-direction: column;
  gap: 5px;
}

.faq__acc-content p{
  color: #535353;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 152.941% */
}

.faq__acc-content p b{
  font-weight: 700;
}

.faq__acc-content p span{
  color: #EA0808;
}

.faq__acc-content-active{
  display: flex;
}

.faq__acc-ico .ico-v{
  transition: transform 200ms ease, opacity 200ms ease;
  transform-origin: 14px 14px; /* центр 28x28 */
}

/* открыто = минус (вертикаль уходит) */
.faq__acc.is-open .faq__acc-ico .ico-v{
  transform: scaleY(0);
  opacity: 0;
}

/* 10. FAQ Section End */


/* 00. Media Section */
@media (min-width: 1200px) and (max-width: 1440px) and (max-height: 850px) {
  h1{
    font-size: 50px;
    line-height: normal;
  }
  .hero__subtitle{
    font-size: 20px;
    line-height: normal;
  }
  .hero__content{
    gap: 30px;
  }
  .main__wrap{
    gap: 20px;
  }
  .promo__item{
    width: auto;
  }
  h2, h3, h4{
    font-size: 45px;
  }
  .about__wrap, .decode__wrap{
    gap: 25px;
  }
  .about__content, .decode__types{
    gap: 20px;
  }
  aside{
    padding: 20px;
  }
  .about__content p, .decode__content p{
    font-size: 16px;
  }
  .promo__item-title{
    font-size: 20px;
  }
  .promo__item-description{
    font-size: 14px;
    line-height: normal;
  }
  .promo__item-uptitle{
    font-size: 16px;
  }
  .promo__item-cta{
    font-size: 16px;
    padding: 16px;
  }
  .decode__title{
    font-size: 35px;
    line-height: 35px;
  }
  .decode__subtitle{
    font-size: 18px;
  }
  .decode__promo{
    padding: 40px;
  }
  .decode__col2 img{
    height: 216px;
  }
  .disc-item{
    font-size: 16px;
    padding: 10px 44px 10px 10px;
  }
  .disc-card__title, .disc-card__foot{
    font-size: 18px;
    padding: 16px;
  }
  .disc-modal__lead{
    font-size: 18px;
    margin-top: 10px;
  }
  .disc-modal__body {
    padding-bottom: 0px !important;
  }
  .disc-actions{
    padding-top: 0;
  }
  .disc-tab{
    font-size: 18px;
  }
  .apruve__title{
    font-size: 35px;
  }
  .apruve__illustration{
    display: none;
  }
  .result__subtitle{
    font-size: 18px;
  }
  .result__text-wrap{
    gap: 0px;
  }
  .result__main{
    padding: 30px;
    gap: 35px;
  }
  .result__main-left-col{
    gap: 30px;
  }
  .result__score-title, .result__link-title{
    font-size: 20px;
  }
  .result__score-wrap, .result__link-wrap{
    gap: 30px;
  }
  .result__score-subtitle{
    font-size: 16px;
    padding-top: 15px;
  }
  .result__promo-tg-ico{
    display: none;
  }
  .result__promo-uptitle{
    font-size: 20px;
    line-height: normal;
  }
  .result__promo-tg{
    font-size: 18px;
    line-height: normal;
  }
  .result__promo-gift {
    width: 228px;
    aspect-ratio: 1 / 1;
    background: url(../img/gift.svg) rgba(211, 211, 211, 0) 50% / cover no-repeat;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  .result__main-right-col{
    max-width: max-content;
  }
  .result__main-right-col-title{
    font-size: 20px;
    line-height: normal;
  }
}

.copyfield__btn.is-copied { background: #16a34a; }

@media (min-width: 1200px) and (max-width: 1440px) and (max-height: 850px) {

  .apruve{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }


  .apruve__dialog{
    margin: 45px auto;

    overflow: visible; 
  }

  .apruve__overlay{
    position: fixed;
    inset: 0;
  }

  .apruve{
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .apruve::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .white-blob{
    left: 20px;
    top: 15px;
  }
  .disc-progress{
    display: none;
  }
  .disc-actions {
    padding-top: 10px;
  }
  .disc-modal__body{
    padding-top: 0;
  }
  .disc-modal__head{
    padding-top: 26px;
  }
  .disc-modal__dialog, .apruve__dialog{
    margin: 5px auto;
    max-height: 98vh;
    width: min(1240px, calc(100% - 64px));
  }
  .disc-grid3{
    gap: 16px;
  }
}

.apruve__dialog{
  width: max-content !important;
}

@media (max-width: 1024px) {
    .promo__col{
        display: none;
    }
    .main__wrap{
        display: block;
        padding-bottom: 60px;
    }
    .hero__wrap{
        padding: 40px 20px;
        gap: 40px;
    }
    h1{
        font-size: 44px;
    }
    .hero__uptitle{
        font-size: 16px;
    }
    .hero__content{
        gap: 24px;
    }
    .decode__col2{
        display: none;
    }
    .decode__col1{
        gap: 15px;
    }
    .add__slide-img{
        height: 385px;
    }
    .mob-slider{
        display: block;
    }
    .promo__item img{
        width: 220px;
        align-self: center;
    }
    
    
    .result__main{
        flex-direction: column;
        gap: 60px;
    }
    .result__promo{
        flex-direction: column;
        gap: 24px;
    }
    .result__promo-left, .result__promo-right{
        width: auto;
        align-self: stretch;
    }
    .promo__item{
      height: 280px;
    }
}

.result__link-div{
  width: 643px;
  height: 1px;
  background: #E9E9E9;
}

@media (max-width: 768px) {
    .mob-slider__slider .promo__item{
      height: 360px;
    }
    .result__score--subtitle {
    color: var(--Black, #0F0F0F);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1px;
}
.result__score--subtitle a{
  font-size: 18px;
    font-style: normal;
    line-height: normal;
}
    .promo__col{
        display: none;
    }
    .main__wrap{
        display: block;
        padding-bottom: 60px;
    }
    .hero__wrap{
        display: none;
    }
    h1,     h2, h3, h4{
        font-size: 26px;
        line-height: normal;
    }
    .hero__uptitle{
        font-size: 15px;
        font-weight: 500;
    }
    .hero__content{
        gap: 24px;
    }
    .decode__col2{
        display: none;
    }
    .decode__col1{
        gap: 15px;
    }
    .add__slide-img{
        height: 326px;
    }
    .hero__subtitle{
        font-size: 16px;
        line-height: normal;
    }
    .hero__uptitle-wrap{
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
    }
    .hero__uptitle-item-div{
        display: none;
    }
    .distance-hero{
        padding-top: 20px;
    }
    .about__wrap, .decode__wrap{
        gap: 15px;
    }
    .decode__title{
        font-size: 24px;
        line-height: normal;;
    }
    .decode__subtitle{
        width: auto !important;
        font-size: 17px;
        line-height: normal;
        font-weight: 400;
    }
    .about__content p, .decode__content p, .decode__type{
        font-size: 15px;
    }
    .mob-slider{
        display: block;
    }
    .promo__item img{
        width: 220px;
        align-self: center;
    }
    .add__header{
        flex-direction: column;
        gap: 50px;
    }
    
    .result__main{
        flex-direction: column;
        gap: 30px;
    }
    .result__promo{
        flex-direction: column;
        gap: 24px;
    }
    .result__promo-left, .result__promo-right{
        width: auto;
        align-self: stretch;
    }

    .result__score{
        width: auto;
        padding: 8px 20px;
    }
    .result__title{
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 171.429% */
        text-align: center;
    }
    .result__main{
        padding: 40px 20px;
    }
    .result__subtitle{
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
        letter-spacing: -1px;
        text-align: center;
    }
    .result__score-title{
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal; /* 362.5% */
        text-transform: uppercase;
        text-align: center;
    }
    .result__main-left-col{
        gap: 30px;
    }
    .result__score-subtitle{
        color: #8D8D8D;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
    }
    .result__text-wrap{
        gap: 12px;
    }
    .result__link-title{
        color: #044788;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
    }

    .result__main-right-col-title{
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: -1px;
    }
    .result__promo-gift{
        width: 210px;
    }
    .thx__header-title{
        display: none;
    }
    .thx__header-wrap{
        justify-content: center;
    }
    .hero__wrap-mob{
      display: flex;
    }
    aside{
      padding: 20px;
    }
    .about__content p{
      line-height: 22px;
    }
    .about__content p, .decode__content p, .decode__type{
     line-height: 22px;
    }
    .distance-hero{
      padding-bottom: 50px;
    }
    .decode__promo{
      padding: 30px 20px;
    }
    .decode__subtitle{
      font-size: 16px;
      line-height: normal;
    }
    .disc-modal__title{
      font-size: 25px;
    }
    .disc-modal__sub, .disc-modal__lead{
      font-size: 16px;
    }
    .disc-modal__lead{
      margin-top: 10px;
    }
    .disc-card__title, .disc-card__foot{
    padding: 16px;
    font-size: 18px;
    font-weight: 800;
    color: #1C1C1C;
    }
    .disc-item{
      font-size: 16px;
      padding: 16px 48px 16px 16px;
    }
        .apruve__illustration {
        width: 110px;
        height: 115px;
        margin-top: 22px;
    }
    .apruve__dialog {
      width: calc(100% - 56px);
    }
    .result__promo-tg-ico{
      display: none;
    }

    .disc-modal__title, .disc-modal__sub, .disc-modal__lead, .apruve__title, .apruve__sub{
      text-align: start;
    }

    .result__link-div{
      width: 100%;
      height: 1px;
      background: #CCCBCB;
      display: flex;
      align-self: center;
    }

    .faq__acc{
      padding-top: 0;
    }
    .faq__wrap{
      gap: 30px;
    }
    .faq__title{
      color: #0D0D0D;
      font-family: var(--font-accent);
      font-size: 26px;
      font-style: normal;
      font-weight: 700;
      line-height: 62.4px; /* 240% */
      letter-spacing: -1px;
    }
    .faq__acc-title{
      color: #0D0D0D;
      font-family: var(--font-accent);
      font-size: 19px;
      font-style: normal;
      font-weight: 500;
      line-height: 37.2px; /* 195.789% */
      letter-spacing: -1px;
    }
    .faq__acc-content p{
      font-size: 15px;
    }
}


.disc-modal__body{
  -ms-overflow-style: none;
  scrollbar-width: none;      
}
.disc-modal__body::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;             
}

@media (max-width: 768px) {
    .apruve__dialog {
        width: calc(100% - 56px) !important;
    }
    .apruve__foot{
      margin-top: 5px;
    }
    .result__promo-uptitle{
      font-size: 22px;
    }
    .result__promo-name{
      font-size: 18px;
    }
    .result__promo-title{
      font-size: 18px;
    }
    .result__promo-left{
      gap: 15px;
    }
    .result__promo-uptitle{
      line-height: normal;
    }

    .vcover__playRing{
      height: 54px;
      width: 54px;
    }
}

    .fix-with{
      width: 210px;
    }
/* 00. Media Section */


.hero{ position: relative; }
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}

.news, .footer, .faq, .reviews {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}



/* =================================== */
/* Danylo Oliinyk - https://iamdev.lol/ */
/* =====Januar 2026 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* =================================== */