body{
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      color:#111;
    }

    /* Layout */
    .sh-header{ background:#fff; }
    .sh-hero{ padding: 70px 0 90px; }

    /* Brand + nav */

    .sh-nav .nav-link{
      color:#8A8A8A;
      font-weight:400;
      padding: .45rem .8rem;
      opacity:.9;
    }
    .sh-nav .nav-link:hover{ opacity:1; }

    /* Pills */
    .sh-pill{
      border-radius:999px;
      box-shadow:none!important;
    }
    .sh-outline{
      border:1px solid #e8e8e8;
      background:#f5f5f5;
      color:#111;
    }
    .sh-outline:hover{
      background:#eee;
      color:#111;
    }

    /* Chips (rating) */
    .sh-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .85rem;
   border-radius: 999px;
border: 1px solid #E9E9E9;
background: #F2F2F2;
      font-size:.95rem;
      color:#111;
    }
    .sh-sep{
      width:1px;
      height:14px;
      background:#e6e6e6;
      display:inline-block;
    }
	
	
.pills_elipse-container {
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 10px;
    display: flex;
    position: relative
}


.pills_elipse-inner {
    background-color: #0ACF83;
    border: 0 #000;
    border-radius: 100%;
    width: 6px;
    height: 6px;
    position: static;
    inset: 70% 0% 0% 70%
}

.pills_elipse-outer {
    background-color: #ff424233;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 10px;
    display: flex;
    position: absolute;
    inset: 0%
}

	
	      @keyframes pulseScale {
                            0% {
                                transform: scale(0.85);
                                opacity: 0.4;
                            }

                            60% {
                                transform: scale(1);
                                opacity: 1;
                            }

                            100% {
                                transform: scale(1.05);
                                opacity: 0;
                            }
                        }

                        .pills_elipse-outer {
                            animation: pulseScale 1.6s ease-out infinite;
                            transform-origin: center;
                        }

                        .pills_elipse-outer:nth-child(2) {
                            animation-delay: 0.2s;
                        }

                        .pills_elipse-outer:nth-child(3) {
                            animation-delay: 0.4s;
                        }
						
						
    .sh-dot{
      width:8px;height:8px;border-radius:50%;
      background:#27c46b;
      display:inline-block;
    }
	


    .sh-gdot{
      width:18px;height:18px;border-radius:50%;
      border:1px solid #e6e6e6;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:.75rem;
      font-weight:700;
    }

    /* Hero typography */
    .sh-title{
		
		color: #000;
font-family: "PP Neue Montreal";
  font-size:clamp(2.6rem, 5vw, 4.2rem);
font-style: normal;
font-weight: 700;
line-height: 54px; /* 108% */


    }
    .sh-sub{
		
		color: #4B4B4B;
font-family: "PP Neue Montreal";

font-style: normal;
font-weight: 500;

   
      

      font-size:18px;
      line-height:1.6;
    }

    @media (min-width: 992px){
      .navbar-collapse{ align-items:center; }
    }
	
	
	/* Section */
.sh-logos{
  padding: 22px 0 10px;
  background:#fff;
}
.sh-logos .container{
	border-top: 1.5px solid #F5F5F5;
	padding-top:14px;
}
/* Layout: titulo izquierda / marquee derecha */
.sh-logos-row{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 188px;
}

/* Title */
.sh-logos-title{
  color:#111;
  font-size:.95rem;
  font-weight:500;
  opacity:.9;
  white-space: nowrap; /* evita salto raro en desktop */
}

/* Marquee container (con fade en bordes) */
.sh-marquee{
  position: relative;
  overflow: hidden;
  padding: 10px 0;

  /* difuminado en los bordes (entrada/salida suave) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* Track animado */
.sh-marquee-track{
  display:flex;
  width:max-content;
  animation: sh-marquee 22s linear infinite;
}

/* Grupos duplicados para loop */
.sh-marquee-group{
  display:flex;
  align-items:center;
  gap: 70px;
  padding-right: 70px;
}

/* Logos: normalización */
.sh-marquee img{
  height: 24px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity:.95;
  display: inline-block;
  vertical-align: middle;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}

.sh-marquee img:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* Pausa al hover (opcional) */
.sh-marquee:hover .sh-marquee-track{
 /* animation-play-state: paused;*/
}

@keyframes sh-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 576px){
	
	.sh-marquee img{
  height: 30px;
  
	}
  .sh-logos-row{
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }

  .sh-logos-title{
    white-space: normal;   /* ahora sí puede quebrar */
    margin-bottom: 6px;
  }

  .sh-marquee{
    padding: 12px 0;
    /* un poco más de fade en mobile para que se note */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }

  .sh-marquee-group{
    gap: 36px;
    padding-right: 36px;
  }

  .sh-marquee img{
    height: 28px;
    max-width: 130px;
  }
}

/*some*/
#work-section{margin-top:70px;}
.title-work{
	color: #000;
text-align: center;
font-family: "PP Mori"!important;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 112.5% */
}

.title-work span{
	color: #A4A4A4;
}
/*some*/

.bx0{  align-items: stretch;
	background-image:url('../images/bg2.jpg');
	background-repeat:no-repeat;
	background-size:cover;
}
.bx2{text-align:center!important; margin:auto!important;}

.bx1{
	border-radius: 16.069px;
background: #1C1C1C;

}

.bx1 h3{
	color: #FFF;
font-family: "PP Mori";
font-size:32px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align:left;
}

.bx1 p{
	margin-top:20px;
	color: #909090;
font-family: "PP Mori";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 23px;
text-align:left;
padding-bottom:0px!important;
}

.bx1 h4{
	text-align:left;
	color: #FFF;
font-family: "PP Mori";
font-size: 14px;
font-style: normal;
font-weight: 615;
line-height: 25px; /* 73.288% */
margin-left:17px;
}

.bx1-footer{
	padding-top: 155%;
	padding-bottom:0px!important;
  
  color: #fff;        /* ajustá según diseño */
  opacity: 0.9;
  text-align:left;
}

@media (max-width: 768px) {
	
	    .sh-chip{

      font-size:.75rem;
 
    }
	
	.mm1{margin-top:20px;}
.bx0{ background-image:none;}
.bx1-footer{padding-top:20%;}
}
.bx1-footer small{
	color: #909090;
font-family: "PP Mori";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.bx1-footer strong{
	color: #FFF;
font-family: "PP Mori";
font-size: 18px;
font-style: normal;
font-weight: 615;
line-height: normal;
}

.we{
	padding-top: 100px;
	padding-bottom: 100px;
background: #F5F5F5;
}

.we h2{
	color: #000;
font-family: "PP Mori";
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 37.5px; /* 117.188% */
}

.we h2 span{
	color: #A4A4A4;
}

.boxf {
border-radius: 30px;
border: 1px solid #000;
background: #1C1C1C;
color:white;
}

.testimonial-name{
	color: #FFF;
font-family: "PP Mori";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
}
.testimonial-role{
	color: #FFF;
font-family: "PP Mori";
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 18px; /* 180% */
}
.testimonial-text{
	color: #FFF;
font-family: "PP Mori";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 138.462% */
}

/* Caja negra redondeada */
.rf-acc{
  background: #111;
  border-radius: 26px;
}

/* Saco el look default del accordion */
.rf-accordion .accordion-item{
  background: transparent;
  border: 0;
}

/* Separadores */
.rf-item{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rf-item:last-child{
  border-bottom: 0;
}

/* Botón */
.rf-btn{
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  padding: 18px 0;
  font-weight: 600;
  font-size: 16px;
}

/* Saco el caret default de Bootstrap */
.rf-btn::after{
  display: none !important;
}

/* Icono (círculo blanco + svg) */
.rf-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex: 0 0 28px;
}

.rf-icon svg{
  display:block;
  transition: transform .25s ease;
  transform: rotate(0deg);
}

/* Cuando está abierto, rotamos el SVG */
.rf-btn:not(.collapsed) .rf-icon svg{
  transform: rotate(90deg);
}

/* Body del collapse */
.rf-body{
  color: rgba(255,255,255,.75);
  padding: 0 0 18px 42px; /* indent como el diseño */
  font-size: 14px;
  line-height: 1.6;
}

.rf-title{
	color: white;
font-family: "PP Mori";
font-size: 16px;
font-style: normal;
font-weight: 615;
line-height: 18px; /* 25.635% */
letter-spacing: 0.16px;
text-transform: capitalize;
}

.rf-stats{
  align-items: flex-start;
}

.rf-stat{
  display: flex;
  gap: 16px;
}

.rf-value{
color: #000;
font-family: "PP Mori";
font-size: 33.083px;
font-style: normal;
font-weight: 500;
line-height: 42.5px; /* 128.463% */
  min-width: 70px;
}

.rf-text{
color: #A4A4A4;
font-family: "PP Mori";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 17.349px; /* 123.924% */
  max-width: 240px;
}



/*how*/
.how h2{
color: #000;
text-align: center;
font-family: "PP Mori";
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 35px; /* 109.375% */	
}

.how h2 span{
	color:#A4A4A4;
}
/*how*/

.pt-70{padding-top:70px!important;}
.pb-70{padding-bottom:70px!important;}

.box1 .number{
color: #6E6E6E;
text-align: center;
font-family: "PP Neue Montreal Mono";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 43.534px; /* 341.176% */
text-align:left;
}

.box1 h3{
	color: #000000;
text-align: center;
font-family: "PP Mori";
font-size: 18.014px;
font-style: normal;
font-weight: 615;
line-height: 43.534px; /* 241.667% */
text-align:left;
}

.box1 .text{
	color: #6E6E6E;
font-family: "PP Mori";
font-size: 15px!important;
font-style: normal;
font-weight: 500;
line-height: 18.014px; /* 150% */
}

.box1{
	border-radius: 19.515px;
background: #F5F5F5;
height:280px;
}

/*how2*/

/*how*/
.how0{
color: #000;
text-align: center;
font-family: "PP Mori";
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 35px; /* 109.375% */	
}
.how0 span{
	color: #A4A4A4;
}


.box2 .number{
color: #A1A1AA;
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align:left;
}

.box2{
	border-radius: 15px;
background: white;
border: 6px solid #D9D9D9;
padding-left: 20px;
padding-right: 30px;
padding-top:22px;
padding-bottom:22px;

}

.box2 h3{
	color: #000;
font-family: "PP Mori";
font-size: 16.098px;
font-style: normal;
font-weight: 615;
line-height: normal;
}
.box2 img{

  width: 14px; /* ajustá según el SVG */
  height: auto;
  cursor: pointer;

}

.box2 p{
	color: #000;
font-family: "PP Mori";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 16px;
}


.btn-viewplans{
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:12px 22px;

  border:0;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  
  color: #FFF;
font-family: "PP Mori";
font-size: 14px;
font-style: normal;
font-weight: 615;
line-height: normal;
}

.btn-viewplans:hover{
  background:#000;
  color:#fff;
}

/* la rayita de abajo a la derecha */
/* Asegura que el "track" esté alineado a la derecha, pero el fill crece L→R */
.progress-wrap{
  width: 45px;              /* el largo final */
  height: 4px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  display: flex;
  justify-content: flex-start; /* CLAVE: el fill nace a la izquierda */
}

.progress-line{
  width: 0px;
  height: 4px;
  background: #111;
  border-radius: 999px;
}


.closed{
	background:#F5F5F5!important;
	border-color: #F5F5F5!important;
}
.closed p{
	display:none!important;
}
.closed .foot{
	display:none!important;
}
.closed2{display:none!important;}


.ready{
	margin-top:100px;
	background-image: url('../images/ready.jpg');
	background-position: center center;
	background-size:cover;
	height:100%;
text-align:center;
padding-top: 131px;
padding-bottom: 121px;
	border-radius: 28.039px;
	
}

.ready h2{
	color: #FFF;
text-align: center;
font-family: "PP Mori";
font-size: 56px;
font-style: normal;
font-weight: 500;
line-height: 59px; /* 105.357% */
}
.ready p{
	color: #FFF;
text-align: center;
font-family: "PP Mori";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 19px; /* 156.98% */
letter-spacing: 0.363px;
}
.ready a{
	color: #000;
font-family: "PP Mori";
font-size: 16px;
font-style: normal;
font-weight: 615;
line-height: 16.07px; /* 146.094% */
text-decoration:none;
}

.ready button{
	color: #000;
font-family: "PP Mori";
font-size: 15px;
font-style: normal;
font-weight: 615;
line-height: 16.07px; /* 146.094% */
padding-top: 12px;
padding-bottom: 11px;
padding-left: 19px;
padding-right: 19px;
background-color:white;
border:none;
border-radius: 14.058px;
}


@media (max-width: 768px) {
	.sh-hero{margin-top:40px;}
	
.ready h2{

font-size: 36px;

line-height: 39px; /* 105.357% */
}	
}


.rf-list{
  display: flex;
  flex-direction: column;
 

}

.rf-row{
  display: flex;
  align-items: center;
  gap: 12px;
  
  transition: transform .22s ease;
  will-change: transform;
   cursor:pointer!important;
}

.rf-row:hover{
  transform: translateX(10px);
}

/* opcional: micro feedback del ícono */
.rf-row .rf-icon{
  display: inline-flex;
  transition: transform .22s ease;
}
.rf-row:hover .rf-icon{
  transform: translateX(2px);
}


/* contenedor: izquierda / centro real / derecha */
.rf-stats-grid{
  display: grid;
  gap: 24px;
}

@media (min-width: 768px){
  .rf-stats-grid{
    grid-template-columns: 1fr auto 1fr; /* centro REAL */
    align-items: center;
    gap: 0;
  }

  .rf-left{  justify-self: start; }
  .rf-center{justify-self: center; }
  .rf-right{ justify-self: end; }
}

/* cada stat: numero + texto en una sola línea */
.rf-stat{
  display: flex;
  align-items: center;  /* alinea verticalmente numero y texto */
  gap: 14px;
}

/* evita que "55%" o "48h" se rompa y empuje el texto abajo */
.rf-value{
  white-space: nowrap;
  line-height: 1;
}

/* el texto siempre alineado normal (NO a la derecha) */
.rf-text{
  text-align: left;
  line-height: 1.2;
}

/* si querés que el bloque del centro quede centrado visualmente */
.rf-center{
  justify-content: center;
}
@media (max-width: 767px){

  /* una sola columna */
  .rf-stats-grid{
    grid-template-columns: 1fr !important;
    gap: 54px !important;
  }

  /* cada stat centrado */
  .rf-stat{
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
  }

  /* seguridad extra */
  .rf-left,
  .rf-center,
  .rf-right{
    justify-self: center !important;
  }


.gap-little{margin-bottom:15px!important;}
}


@media (max-width: 991.98px) {
  .why-scroll-mobile {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
  }

  .why-scroll-mobile > [class*="col-"] {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }
}


:root {
  --proj-pag-max: 54.375rem;
  --proj-pag-gap: 1.25rem;
  --proj-pag-h: 4px;
}
@media (max-width: 480px){
  :root {
    --proj-pag-max: calc(260 / 360 * 100vw);
    --proj-pag-gap: calc(8 / 360 * 100vw);
  }
}
@keyframes bullet-fill {
  from { width: 0%; }
  to { width: 100%; }
}
.proj-pagination {
  width: 100%;
  max-width: var(--proj-pag-max);
  display: flex;
  align-items: center;
  gap: var(--proj-pag-gap);
}
.proj-bullet {
  position: relative;
  flex: 1 1 0;
  height: var(--proj-pag-h);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
}
.proj-bullet__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: inherit;
}
.proj-bullet.is-animating .proj-bullet__fill {
  animation: bullet-fill 10s linear forwards; /* 10s = autoplay.delay */
}
.swiper.is-project .swiper-slide {
  opacity: .3;
  transition: opacity .35s ease;
}
.swiper.is-project .swiper-slide.swiper-slide-active,
.swiper.is-project .swiper-slide.swiper-slide-duplicate-active {
  opacity: 1;
}
/* НЕактивний слайд */
.swiper.is-project .swiper-slide .swiper-image {
  opacity: .5;
  transform: translate3d(0, 6rem, 0);
  transition: none;
  will-change: transform, opacity;
}
.swiper.is-project .swiper-slide .swiper-content_block {
  opacity: 0;
  pointer-events: none;
  transition: none;
  will-change: opacity;
}
/* Активний */
.swiper.is-project .swiper-slide.swiper-slide-active .swiper-image,
.swiper.is-project .swiper-slide.swiper-slide-duplicate-active .swiper-image {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.swiper.is-project .swiper-slide.swiper-slide-active .swiper-content_block,
.swiper.is-project .swiper-slide.swiper-slide-duplicate-active .swiper-content_block {
  opacity: 1;
  pointer-events: auto;
}
/* Вмикаємо переходи тільки після init */
.swiper.is-project.is-anim-ready .swiper-slide .swiper-image {
  transition: opacity .6s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.swiper.is-project.is-anim-ready .swiper-slide .swiper-content_block {
  transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
/* Зменшена анімація */
@media (prefers-reduced-motion: reduce) {
  .swiper.is-project .swiper-slide .swiper-image,
  .swiper.is-project .swiper-slide .swiper-content_block {
    transition: none !important;
    transform: none !important;
  }
}

/* --- CONTROLES ABAJO --- */
.some-controls{
  gap: 12px;
}

/* Filtros centrados tipo figma */
.some-filters{
  gap: 28px;
  flex: 1 1 auto;
}

.some-filter{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(0,0,0,.55);
  font-family: "PP Mori", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.some-filter.is-active{
  color: #000;
}

/* Botones negros iguales */
.strip-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border:0 !important;
  background:#000 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.strip-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* --- SLIDER SIMPLE (uno visible por vez, centrado) --- */
.some-slides{
  position: relative;
  min-height: 1px;
}

.is-slide{
  display: none;           /* solo uno visible */
}
.is-slide.is-active{
  display: flex;           /* mantiene tu row/cols */
}

/* Responsive: filtros + botones */
@media (max-width: 768px){
  .some-controls{
    flex-direction: column;
    align-items: center;
  }
  .some-filters{
    order: 1;
    justify-content: center;
    gap: 18px;
  }
  .some-controls > div:last-child{
    order: 2; /* botones abajo */
  }
  
  .strip-viewport{
  touch-action: pan-y; /* deja scroll vertical normal */
}
.strip-track{
  touch-action: pan-y;
}

  .sh-title{
	  line-height:42px;
  }
  .sh-hero {
	  padding-bottom:10px!important;
  }
}

#project-swiper .swiper-wrapper,
#project-swiper .swiper-slide {
  touch-action: pan-y;
}


.navigation-block{
  --glass-bg: rgba(255,255,255,.08);   /* «лід» */
  --glass-blur: 100px;                  /* сила блюру */
  --glass-radius: 150px;                /* радіус */

  position: relative;
  border-radius: var(--glass-radius);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);

  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--glass-blur)) saturate(140%);

  overflow: hidden; /* акуратні краї псевдоелементів */
}

.navigation-block::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg,#ffffff, #dbdbdb);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

.navigation-block::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  mix-blend-mode: normal;
}

@media (max-width: 767px){
  .navigation-block{ --glass-blur: 12px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .navigation-block{ background: rgba(255,255,255,.6); }
}

  .nav-btn_wrap.is-plans-click{ cursor:pointer; }
  
/* 0–1439px — гумова типографіка від бази 1440px (16px → 1.111...vw) */


/* 1440–1919px — фіксований розмір */
@media (min-width: 1440px) and (max-width: 1919.98px){
  :root{ font-size: 16px; }
}

/* 1920px+ — ТЕЖ фіксований, як і на 1440–1919px */
@media (min-width: 1920px){
  :root{ font-size: 16px; }
}

.back-image{
  border-radius: 32px !important;
  /* дублюємо заокруглення через clip-path для WebKit */
  clip-path: inset(0 round 32px) !important;

  /* примусова обрізка в Safari */
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;

  -webkit-background-clip: padding-box !important;
          background-clip: padding-box !important;
}
.back-image > *{ border-radius: inherit !important; } 

.tabs-image_back{
  border-radius: 44px !important;
  clip-path: inset(0 round 44px) !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  -webkit-background-clip: padding-box !important;
          background-clip: padding-box !important;
}
.tabs-image_back > *{ border-radius: inherit !important; }

.about-contant{
  overflow: clip !important;
}

.footer{
  overflow: clip !important;
}

.back-image,
.tabs-image_back{
  will-change: transform;         /* тригерить коректний композитинг */
  isolation: isolate;             /* окремий контекст для масок/кліпів */
}





@media screen and (max-width: 479.98px){
  .nav-body{
    --glass-blur: 16px;
    --glass-bg: rgba(255,255,255,.06);   
    --glass-brd: rgba(255,255,255,.14);  


    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur)) saturate(140%);



  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .nav-body{
      background: rgba(255,255,255,.12); 
    }
  }
}
.nav-body{
position:fixed; width:93%!important; top:1px!important;z-index:9999!important;}


/* =========================================================
   NAV PILL – SOLUCIÓN DEFINITIVA
========================================================= */

/* Estado normal */
.main-nav{
  position: relative;
  transition: all .25s ease;
}

/* Estado fixed */
.main-nav.is-fixed{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 9999;

  /* pill */
  border-radius: 999px;
border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);

  -webkit-backdrop-filter: blur(80px) saturate(140%);
          backdrop-filter: blur(80px) saturate(140%);

  /* animación */
  opacity: 0;
  animation: navDrop .3s ease-out forwards;

  /* evita pegarse a los bordes de la pantalla */
  max-width: calc(100vw - 32px);
}

/* Animación desde arriba */
@keyframes navDrop{
  from { opacity: 0; transform: translateX(-50%) translateY(-30px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =========================
   CLAVE: EL AIRE REAL
========================= */
.main-nav.is-fixed .navbar-collapse{
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;

  /* 🔥 ESTE ES EL PADDING QUE FALTABA */
  padding: 9.5px 18px;

  /* evita que bootstrap lo estire */
  width: auto !important;
}

/* UL sin empujes automáticos */
.main-nav.is-fixed .sh-nav{
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  align-items: center;
}

/* Links */
.main-nav.is-fixed .nav-link{
  color: #000 !important;
  font-weight: 500;
  font-size:13.5px;
  padding: 3px 3px;
}

/* Logo fuera */
/* Logo normal (logo.svg) */
.main-nav .navbar-brand:first-of-type{
  display: block;
}

/* Logo scroll (logo2.svg) */
.main-nav .navbar-brand:last-of-type{
  display: none;
}

/* Al hacer scroll */
.main-nav.is-fixed .navbar-brand:first-of-type{
  display: none !important;
}

.main-nav.is-fixed .navbar-brand:last-of-type{
  display: block !important;
  margin-top:-5px;
}

/* Botón intacto, solo separación */
.main-nav.is-fixed .sh-pill{
  margin-left: 24px;
  flex: 0 0 auto;
}

/* Cada item como fila */
.main-nav.is-fixed .nav-item{
  display: flex;
  align-items: center;
}

/* Separador perfectamente centrado */
.main-nav.is-fixed .nav-item + .nav-item::before{
  content: "|";
  display: flex;
  align-items: center;

  margin: 0 14px;
  height: 100%;
  line-height: 1;
  color: rgba(0,0,0,.35);
}

.main-nav.is-fixed .navbar-brand:last-of-type img{
  height: 40px;
  width: auto;
  transition: height .2s ease, opacity .2s ease;
  margin-left:28px;
}



.auto-tabs_tab.w--current .is-hidden {
	display: flex;
}

.auto-tabs_tab.w--current .auto-tabs-contant {
  background-color: #fff;
}
.auto-tabs_tab.w--current .icon-medium.is-minus {
	opacity: 1;
}
.auto-tabs_tab.w--current .icon-medium.is-plus {
 	opacity: 0 ;
}
.auto-tabs_tab.w--current .auto-tabs_img-mobile-wrapper {
	display: block;
}

/* трек */
.timer-bar-wrapper{
  width: 60px;              /* як у Figma */
  height: 4px;              /* як у Figma */
  border-radius: 100px;     /* як у Figma */
  background: rgba(0,0,0,.10); /* #000000 @ 10% */
  overflow: hidden;
  position: relative;
}

/* повзунок (заповнення за 7 c) */
.auto-tabs_timer-bar{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: #1B1B1B;      /* світлий бігунок поверх темного треку */
  border-radius: inherit;
  transition: width 7000ms linear; /* 7 секунд */
  will-change: width;
}


.strip-heading{
  color: #000;
  font-family: "PP Mori", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 42.5px;
  max-width: 70%; /* evita que empuje los botones */
}

@media (max-width: 768px){
  .strip-heading{
    font-size: 18px;
    line-height: 28px;
    max-width: 100%;
  }

  .strip-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}


/* evita scroll horizontal por el bleed */
.img-strip{ overflow-x:hidden; border-radius: 20px;
background: #F5F5F5;}

.strip-bleed-right{
  width: calc(100vw - ( (100vw - 100%) / 2 ));
}

.strip-viewport{ overflow:hidden; }

.strip-track{
  display:flex;
  will-change:transform;
  transition: transform .55s ease;
}

/* CARD grande */
.strip-card{
  flex:0 0 auto;
  width: 520px;
  height: 720px;
  border-radius: 22px;
  overflow:hidden;
  position:relative;
  margin-right:18px;
  text-decoration:none;
  background:#ddd;
}

/* imagen real */
.strip-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* overlay suave (opcional) para legibilidad del texto */
.strip-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.25) 100%);
  pointer-events:none;
}

/* Título arriba (texto real => NO pixelado) */
.strip-title{
  position:absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  color: #FFF;

font-family: "PP Mori";
font-size: 34px;
font-style: normal;
font-weight: 615;
line-height: normal;
  z-index:2;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Tags abajo */
.strip-tags{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  z-index:2;
}

.strip-tags .tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(3px);
}

/* botones */
.strip-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border:0!important;
  background:#000!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.strip-btn:disabled{ opacity:.35; cursor:not-allowed; }




/* Title */
.plans{
margin-top:100px;}
.plans-title{
  color:#000;
  font-family:"PP Mori", sans-serif;
  font-size:34px;
  font-weight:600;
  line-height:1.05;
}
.plans-title span{
  display:inline-block;
  color:#9a9aa0;
  font-weight:500;
}

/* Card base */
.plan-card{
  border-radius:22px;
  padding:22px;
  background:#f5f5f5;
  border:1px solid rgba(0,0,0,.06);
}
.plan-dark{
  background:#1b1b1b;
  color:#fff;
  border-color: rgba(255,255,255,.06);
}
.plan-light{ color:#000; }

.plan-top{ margin-bottom:16px; }

/* Small pill */
.plan-pill{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-family:"PP Mori", sans-serif;
  font-size:12px;
  font-weight:600;
}
.plan-dark .plan-pill{
  background:#fff;
  color:#111;
}

/* Price */
.plan-price{
  margin-top:10px;
  font-family:"PP Mori", sans-serif;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:4px;
}
.plan-currency{ font-size:18px; font-weight:600; }
.plan-amount{ font-size:34px; font-weight:700; letter-spacing:-.02em; }
.plan-per{ font-size:12px; opacity:.7; font-weight:600; }

/* Description */
.plan-desc{
  font-family:"PP Mori", sans-serif;
  font-size:15px;
  line-height:18px;
  opacity:.85;
  max-width: 260px;
}
.plan-dark .plan-desc{ opacity:.75; }

/* Button */
.plan-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:45px;
  border-radius:999px;
  text-decoration:none;
  font-family:"PP Mori", sans-serif;
  font-size:14px;
  font-weight:700;
  margin: 10px 0 14px;
}
.plan-btn-dark{ 

background-image: linear-gradient(#292929, #1b1b1b);
 color:#fff; 

        box-shadow: inset 0 .45vw .45vw #ffffff4d, 0 1.11vw 1.66vw #00000024;
		
}
.plan-btn-light{ background:#fff; color:#111; }

/* Review */
.plan-review{
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(0,0,0,.06);
}
.plan-review-dark{
  background:#2a2a2a;
  border-color: rgba(255,255,255,.08);
}
.review-left{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
}
.review-avatar{
  width:28px;
  height:28px;

  object-fit:cover;
  flex:0 0 auto;
}
.review-text{ min-width:0; }
.review-quote{
  font-size:11px;
  line-height:14px;
  font-family:"PP Mori", sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
}
.review-meta{
  margin-top:2px;
  font-size:10px;
  opacity:.7;
  font-family:"PP Mori", sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
}
.plan-review-dark .review-quote{ color:#fff; opacity:.95; }
.plan-review-dark .review-meta{ color:#fff; opacity:.65; }

.review-score .score-num{
  font-family:"PP Mori", sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

/* Included */
.plan-mid{
  margin-top:8px;
  margin-bottom:10px;
  font-family:"PP Mori", sans-serif;
  font-size:12px;
  font-weight:700;
  opacity:.9;
}
.plan-dark .plan-mid{ opacity:.95; }

.plan-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.plan-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-family:"PP Mori", sans-serif;
  font-size:15px;
  line-height:18px;
  opacity:.9;
}
.plan-dark .plan-list li{ opacity:.85; }

.tick{
  width:16px;
  height:16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  flex:0 0 auto;
  background:#fff;
  color:#111;
}
.plan-light .tick{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.plan-dark .tick{
  background:#fff;
  color:#111;
}





/* Responsive */
@media (max-width: 992px){
  .strip-card{ width: 380px; height: 520px; }
  .strip-title{ font-size: 34px; }
}
@media (max-width: 576px){
  .strip-card{ width: 290px; height: 400px; }
  .strip-title{ font-size: 26px; top:16px; left:16px; right:16px; }
  .strip-tags{ left:14px; right:14px; bottom:14px; gap:8px; }
  .strip-tags .tag{ font-size: 10px; padding: 5px 9px; }
}

@media (max-width: 576px){

  /* en mobile NO queremos bleed raro */
  .strip-bleed-right{
    width: 100%;
  }

  /* viewport con padding para centrar la card */
  .strip-viewport{
    overflow: hidden;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* card ocupa todo el ancho disponible del viewport */
  .strip-card{
      /* 18px + 18px */
    height: 420px;              /* ajustá */
    margin-right: 18px;         /* gap real entre cards */
  }

  /* título / tags un poco más cómodos */
  .strip-title{ font-size: 26px; top:16px; left:16px; right:16px; }
  .strip-tags{ left:14px; right:14px; bottom:14px; gap:8px; }
  .strip-tags .tag{ font-size: 10px; padding: 5px 9px; }
}