cc/*
Theme Name: Nyumi Theme
Theme URI: https://nyumi.ru
Author: Твоё Имя или Студия
Description: Кастомная тема для лендинга с анимацией
Version: 1.0
*/


:root {
    
    --wp--preset--color--black: #262626;

}

@font-face {
    font-family: 'Agipo';
    src: url('/wp-content/themes/Nyumi%20Theme/fonts/Agipo.woff') format('woff');
}


*{    font-family: "Inter", sans-serif !important;}

html{
    margin: 0 !important;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif !important;
}

h2{
   font-family: "Inter", sans-serif !important;
font-weight: 500;
font-size: 44px;
line-height: 48px ;
letter-spacing: 0px;
text-align: center;
color:#262626;
line-height:48px;
}

.features-cards img {
    max-width: 336px;
    width: 100%;
}



.egg-img {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
/* ОСНОВНОЙ КОНТЕЙНЕР - ЕДИНАЯ СЕТКА 1040px */
.container {
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

   .site-header {
            padding: 20px;
            max-width: 1040px;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo svg {
            height: 14px;
            width: auto;
        }

        .nav-buttons {
            display: flex;
            gap: 15px;
        }

  

        .btn {
            border: none;
padding: 16px 32px;
            border-radius: 999px;
            font-size: 16px;
line-height:24px;
            cursor: pointer;
            transition: background 0.2s ease;
            text-decoration: none;
            display: inline-block;
    font-family: 'Inter', sans-serif;
        }

        .btn-login {
            background: #26262614;
            color: #262626;
                        font-weight:500;

        }

        .btn-login:hover {
            background: #ddd;
        }

        .btn-ask {
            background: #262626;
            color: white;
            font-weight:500;
        }

        .btn-ask:hover {
            background: #000;
        }

        /* БУРГЕР МЕНЮ - скрыто по умолчанию */
        .burger-container {
            display: none;
            align-items: center;
            gap: 15px;
        }

        .burger-menu {
            width: 24px;
            height: 24px;
            cursor: pointer;
            position: relative;
            z-index: 1001;
        }

        .burger-line {
            width: 100%;
            height: 2px;
            background: #222;
            position: absolute;
            transition: all 0.3s ease;
            border-radius: 1px;
        }

        .burger-line:nth-child(1) {
            top: 3px;
        }

        .burger-line:nth-child(2) {
            top: 9px;
        }

        .burger-line:nth-child(3) {
            top: 15px;
        }

        .burger-menu.active .burger-line:nth-child(1) {
            top: 9px;
            transform: rotate(45deg);
        }

        .burger-menu.active .burger-line:nth-child(2) {
            opacity: 0;
        }

        .burger-menu.active .burger-line:nth-child(3) {
            top: 9px;
            transform: rotate(-45deg);
        }

        /* МОБИЛЬНОЕ МЕНЮ */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100vh;
            background: white;
            z-index: 1000;
            transition: left 0.3s ease;
            padding: 20px 20px 20px 20px;
            box-sizing: border-box;
-webkit-overflow-scrolling: touch; 
        }

        .mobile-menu.active {
            left: 0;
        }

.mobile-menu-close {
display: flex;
gap: 12px;
align-items: center;
}

.icon-close {
wight:24px;
height: 24px;
}

.mobile-logo {
height:14px;
}
        .mobile-menu-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
margin-top:36px;
        }

        .mobile-menu .btn {
            width: 100%;
            text-align: center;
            padding: 16px 25px;
            font-size: 16px;
line-height:24px;
            box-sizing: border-box;
        }

        /* ОВЕРЛЕЙ */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* МЕДИА ЗАПРОСЫ */
        @media (max-width: 768px) {
            /* Скрываем десктопную навигацию */
            .nav-buttons {
                display: none;
            }

            /* Показываем бургер контейнер */
            .burger-container {
                display: flex;
align-items: center;
            }

            /* Меняем структуру навигации */
            .nav {
                justify-content: flex-start;
gap:16px;
            }

  .nav > .logo {
    display: block;
  }
  .burger-container .logo {
    display: none;
  }

}


.nav > .logo {
  display: none;
}
/* HERO СЕКЦИЯ */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-egg{
    max-height:300px;
}

.hero-content h1 {
    font-weight: 600;
    margin: 0;
    position: relative;
    font-size: 64px;
    line-height: 68px;
    letter-spacing: 0px;
    text-align: center;
}

.gradient {
  background: radial-gradient(47.14% 100% at 50% 0%, #F0A4AF 0%, #E789E2 34.83%, #262626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  text-fill-color: transparent;

  display: inline;
}


.hero-content p {
    font-size: 20px;
line-height:28px;
    color: #262626;
    margin-bottom: 30px;
}


.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.top{
    position: relative;
    top: 14px;
}

.btn-subscribe {
    background: radial-gradient(97.66% 735.55% at 100.2% -72.32%, #F0A4AF 0%, #E789E2 23.31%, #262626 100%);
    background-blend-mode: soft-light, normal;    color: white;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    padding: 16px 32px;
    border-radius: 999px;
      font-family: 'Inter Variable', sans-serif;

    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
  gap: 8px;
  align-items: center;

font-weight: 600;

font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: center;

}

.btn-trial {
    background: #f1f1f1;
    color: #262626;
    padding: 16px 32px;
    font-weight: 600;
    border-radius: 999px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s ease;
line-height: 24px;
}

.btn:hover {
    opacity: 0.9;
}

/* БЛОКИ И АНИМАЦИИ */
.egg-bubble.show {
    opacity: 1;
}

.text-bubble {
    position: relative;
    bottom: 100px;
    left: 20px;
    background-color: #fff;
    white-space: nowrap;
    box-shadow: 0px -7.4px 14.79px 0px #BFA9D6A3 inset;
    border-radius: 100px;
    width: fit-content;
    padding: 10px 17px;
}

.dots-bubble {
    background-color: #fff;
    position: relative;
    bottom: 90px;
    box-shadow: 0px -7.4px 14.79px 0px #BFA9D6A3 inset;
    width: fit-content;
    left: 20px;
    padding: 15px 12px;
    border-radius: 25px;
}

.bubble-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #999;
}

.dots-typing .dot {
    animation: dotPulse 1.5s infinite;
}
/* 
.dots-typing .dot:nth-child(1) { animation-delay: 0s; }
.dots-typing .dot:nth-child(2) { animation-delay: 0.3s; }
.dots-typing .dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes dotPulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.typing::after {
    content: '|';
    animation: blink 1s infinite;
    color: #666;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
} */



.bold{
    color: #262626;
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;

}

.magic-button {
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    height: 58px;
    width: 217px;
    font-size: 20px;
    font-weight: 500;
    line-height:29.18px;
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
    margin-left: -15px;
    bottom: -5px;
    background-image: url(/wp-content/themes/Nyumi%20Theme/assets/img/Button-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 0px;
    transform: rotate(-2deg);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    text-fill-color: initial !important;
}


.magic-button-wrapper {
  display: inline-block;
  position: relative;
  top: 4px; /* подстрой, если нужно */
}


.position_one{
    position: relative;
      display: inline-block; /* ← добавь обязательно */
    top: 30px;
}



.gradient-text {
  background: radial-gradient(47.14% 100% at 50% 0%, #F0A4AF 0%, #E789E2 34.83%, #262626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  color: transparent;

  font-family: 'Inter Variable', sans-serif;
  font-size: 64px;
  font-weight: 600;

  text-align: center;

  display: inline-block;
  max-width: 900px;
  margin: 0 auto;
}


/* 
.magic-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/wp-content/themes/Nyumi Theme/assets/img/glow.png');
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
} */

/* КАРТОЧКИ БЛОК 2 */

.cards-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap:8px;
    min-width: 248px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

.card:hover {
    transform: translateY(-5px);
}

.card-image img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.card:hover .card-image img {
    transform: scale(1.03);
}

.card-title {
  /* secondary text */

/* Body/Large Semibold */
  font-family: 'Inter Variable', sans-serif;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 32px;
/* or 133% */

color: #FFFFFF;


/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;

}

.card-title .highlight {
    font-weight: 600;
    font-size: 16px;
    color:#262626;
    line-height: 24px;
}

.template-card-description {
   /* secondary text */

/* Caption/Regular */
  font-family: 'Inter Variable', sans-serif;

font-weight: 400;
font-size: 14px;
line-height: 20px;
/* or 143% */
margin-bottom: 24px;
color: #FFFFFF;


}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* БЛОК 3 - FEATURES */

.features-title {
    margin-bottom: 40px;
    margin-top: 160px;
    text-align: center;
}

.features-sub {
    display: block;
    font-weight: 400;
    font-size: 20px;
line-height: 28px;
    color: #16161699;
    margin-top: 16px;
}

.features-cards {
    display: flex;
    gap: 20px;
}

/* 

.features-card.purple {
    background: #B88FDC;
}

.features-card.blue {
    background: #d9eefc;
}

.features-card.base {
    background-color: #EEEEEC !important;
}

.features-card.gray {
    background-image: url('/wp-content/themes/Nyumi Theme/assets/img/block.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.feature-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-item {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 8px 16px;
    margin-bottom: 16px;
    color:white;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    border:1px solid white;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
}

.handwritten-text {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 27px;
    line-height: 26px;
    letter-spacing: 0;
    color: #3B7ECA;
    padding-bottom: 35px;
}

.icon_f svg{
    margin-top: 5px;
}

.feature-icon {
    width: 48px;
    height: 48px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-icon {
    width: 60px;
    height: 60px;
    background: #4ade80;
    border-radius: 8px;
    position: relative;
    margin: 20px auto;
}

.lock-icon::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 20px;
    width: 20px;
    height: 15px;
    border: 3px solid #000;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.lock-icon::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 30px;
    height: 20px;
    background: #000;
    border-radius: 4px;
}

.feature-heading {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 12px;
}

.feature-text_zero {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.refresh-icon {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
}

.features-card.blue .feature-heading {
    color: #3B7ECA;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
}

.features-card.blue .feature-text {
    color:#3B7ECA ;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
}

.features-card.gray .feature-heading {
    font-weight: 600;
    color: #262626;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
}

.features-card.gray .feature-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #262626;
    height:100px !important;
}


 */





/* TEMPLATES СЕКЦИЯ */
.templates-section {
    text-align: center;
}

.section-header {
    margin-top: 160px;
    margin-bottom: 40px;
}

.features-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  cursor: pointer;
border-radius:32px;
}

.features-card:hover {
  transform: translateY(-6px);
border-radius:32px;
}


.section-title_one{
     color: #262626;
    font-size: 44px;
    font-weight: 500;
    line-height: 48px;
    margin: 0 0 16px;

  display: inline-block;            /* важно, чтобы background-clip заработал */
  background: radial-gradient(47.14% 100% at 50% 0%, #F0A4AF 0%, #E789E2 35%, #262626 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.section-title {
    color: #262626;
    font-size: 44px;
    margin-top: 140px;
    font-weight: 500;
    line-height: 48px;
    margin-bottom: 40px
    ;
}




.section-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #262626;
    line-height: 28px;
    max-width: 400px;
    margin: 0 auto;
}


.section-subtitle_one{

  font-family: 'Inter Variable', sans-serif;

font-weight: 400;
font-size: 20px;
line-height: 28px;
/* or 140% */
text-align: center;

color: #262626;
margin: 0;

/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;

}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.template-card {
 border-radius: 24px;
  padding: 0 24px;
  min-height: 365px;
   
  max-width: 251px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 16px;
    line-height: 32px;
    margin-top: 24px;
}

.card-description {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 24px;
    margin: 0;
}





/* Цвета карточек */
.template-card.purple-light {
    background-image: url('/wp-content/themes/Nyumi Theme/bl1.png');
    background-size: cover;
}

 

.template-card.purple-medium {
    background-image: url('/wp-content/themes/Nyumi Theme/bl2.png');
    background-size: cover;
}
.template-card.coral {
    background-image: url('/wp-content/themes/Nyumi Theme/bl3.png');
    background-size: cover;
}

.template-card.purple-bright {
    background-image: url('/wp-content/themes/Nyumi Theme/bl4.png');
    background-size: cover;
}





.template-card.purple-dark {
    background-image: url('/wp-content/themes/Nyumi Theme/bl5.png');
    background-size: cover;
}

.template-card.purple-gradient {
    background-image: url('/wp-content/themes/Nyumi Theme/bl6.png');
    background-size: cover;
}

.template-card.blue-light {
    background-image: url('/wp-content/themes/Nyumi Theme/bl7.png');
    background-size: cover;
}

.template-card.gray-purple {
    background-image: url('/wp-content/themes/Nyumi Theme/bl8.png');
    background-size: cover;
}

.bottom-text {
    font-size: 16px;
font-weight: 400;
line-height: 24px;
    color: #16161699;
    margin: 0 0 40px;
}

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

.template-card-btn-primary {
    background: linear-gradient(115deg, #262626, #E88DDC);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    font-family: "Inter Variable", sans-serif !important;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.template-card-btn-primary:hover {
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.template-card-btn-secondary {
    background: #EDEDED;
    color: #262626;
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    text-decoration: none;
        font-family: "Inter Variable", sans-serif ;

    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
}

.template-card-btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


/* COMPARISON БЛОК */
.comparison-block_vs {
    margin-top: 160px;
}

.comparison-block h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height:100%;
    align-items: start;
}

.comparison-grid .col {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 24px 20px;
}

.comparison-grid .col-header {
    font-weight:600;
    font-size: 20px;
    text-align: center;
    display: flex;
    min-height: 32px;
    padding: 15px 0;
    align-items:start;
justify-content:start;
   
}

.check-icon {
width: 24px;
height: 24px;
}

.topchick{
    position: relative;
    top: 5px;
}

.topchick{
    font-weight: 600;
}

.comparison-col-center {

position: relative;
  border-radius: 32px;
  background: linear-gradient(#FCFCFC, #FCFCFC) padding-box, conic-gradient( from 90deg at 50% 50%, #FACEFF 0deg, #FFC5EB 72deg, #F58 144deg, #B6F 216deg, #5AF 288deg, #FACEFF 360deg ) #2626260D  border-box;
    background-clip: padding-box, border-box;
  border: 2px solid transparent;
  padding: 1rem;
font-weight: 600;


  /* чтобы рамка лежала точно по border-box */
  background-clip: padding-box, border-box;
}



.template-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.template-card:hover {
  transform: translateY(-6px);
border-radius: 30px;

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.template-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -78%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
  z-index: 1;
}

.template-card:hover::before {
    opacity: 1;
  animation: stressGloss 1s ease-in-out forwards;
}

@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}



.comparison-block_vs h2{
    font-weight: 500;
    font-size: 44px;
    line-height: 48px;
    text-align: center;
    color: #262626;
} 

.comparison-grid p {
    display: inherit;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
    border-bottom: 1px solid #1616160D;
    margin: 0;
    padding: 12px 0;
}



/* Запрещаем скролл сайту */
html, body {
  overflow-x: hidden;
}





/* CONTENT SECTION */
.content-section {
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

.main-title {
font-weight: 500;
font-size: 44px;
line-height: 48px;
letter-spacing: 0px;
text-align: center;
    color:#262626;
    margin-top: 160px;
    margin-bottom: 16px;

}

.main-subtitle {
font-weight: 400;
font-size: 20px;
    line-height: 28px;
letter-spacing: 0px;
text-align: center;
color: #262626;
margin-bottom: 40px;
}

.main-description {
    font-size: 18px;
    color: #666;
    margin-bottom: 60px;
}


.comparison-block_anime {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 80px;
    height: 600px;
    box-sizing: border-box;
}

.left-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #f0f0f0;
    padding: 30px 40px 0;
    box-sizing: border-box;
    overflow-y: auto;
 right: auto;
}


.right-content {
    position: absolute;
    top: 0;
 left: auto;
 width: calc(100% - 50%);
    right: 0;
    width: 50%;
    height: 100%;
    background: #EDE3E9;
    padding: 30px 40px 0;
    box-sizing: border-box;
    overflow-y: auto;
}

h2{
    font-weight: 500;
    font-size: 44px;
    line-height: 48px;
    text-align: center;
    color: #161616;
}

.light_blue .stress-text h3{
    text-align: left;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #3B9CCA;
    
    margin-top: 8px;margin-bottom: 8px;
}

.stress-button{
    font-weight: 700;
    font-size: 16px;
    width: 276px;
    display: flex;
    gap: 8px;
    color: white;
    align-items: center;
    justify-content: center;
    height: 73px;
    background:  radial-gradient(100% 100% at 50.29% 0%, #FFAA9C 0%, #C192FF 100%);
    border-radius: 121.563px;
    border: 0;
}

.light_blue .stress-text p{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #3B9CCA;
    text-align: left;
    margin: 0;
}

.light_blue .stress-icon{
    display: flex;
}

.slider-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    cursor: col-resize;
user-select: none;
  touch-action: none;
z-index: 10;
}

.block-title {
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 8px;
    text-align: left;
    line-height: 28px;
}

.block-subtitle {
    font-size: 16px;
    color: #262626;
    margin-bottom: 24px;
    text-align: left;
    line-height: 24px;
    font-weight: 400;
}

.block-content {
    text-align: left;
    line-height: 24px;
    color: #262626;
    font-size: 16px;
    font-weight: 400;
}

.block-content p {
    margin-bottom: 15px;
}

.block-content ol {
    padding-left: 20px;
}

.block-content li {
    margin-bottom: 8px;
}

.regular-content {
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

/* STRESS CONTAINER */
.stres-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 16px;
}

.light_blue {
  grid-column: 1;
  grid-row: 1;
  background-image: url('/wp-content/themes/Nyumi Theme/assets/img/Blue-light.png');
background-size: cover;
  background-position: center;
  padding: 24px;
  border-radius: 20px;
  height: 396px;
  box-sizing: border-box;
  overflow: hidden; /* или auto, если нужен скролл */
}

.back_image {
  grid-column: 2;
  grid-row: 1 / span 2;
  background-image: url('/wp-content/themes/Nyumi Theme/assets/img/image.png');
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 24px;
  box-sizing: border-box;
  width: 512px;
  height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: left;
}
.back_image .stress-text h3{
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #FFFFFF;
        margin-top: 8px;
margin-bottom: 8px;
}

.back_image .stress-text p{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
margin:0;
}

.back_image_one {
  padding: 24px;
  grid-column: 1;
  text-align: left;
  grid-row: 2 / span 2;
  background-image: url('/wp-content/themes/Nyumi Theme/assets/img/image195.png');
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  box-sizing: border-box; /* Чтобы padding не добавлялся к размеру */
  width: 512px;
  height: 560px;
}

.back_image_one .stress-text h3{
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #FFFFFF;
    margin: 0;
    margin-top: 8px;
margin-bottom: 8px;
}

.back_image_one .stress-text p{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    margin:0;
}

.light_blue img{
    position: relative;
    top: 20px;
}

.light_pink {
    grid-column: 2;
    text-align: left;
background-image: url('/wp-content/themes/Nyumi Theme/assets/img/Pink.png');
background-size: cover;
  background-position: center;
    padding: 24px;
    border-radius: 20px;
    box-sizing: border-box;
    width: 512px;
    height: 395px;
    position: relative;
    overflow: hidden; /* или auto, если нужен скролл */
}

.light_pink h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #7E47AE;
    margin-bottom: 8px;
    margin-top: 8px;
}

.light_pink .stress-text p{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #7E47AE;
    margin:0;
}


/* Базовые стили всех карточек */
.stress_block {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover: подъём и тень */
.stress_block:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.link_but{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 62px 0 68px;
}

/* Глянец (псевдо-элемент) */
.stress_block::before {
  content: '';
  position: absolute;
  top: -80%;
  left: -50%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 1;
  /* не показываем блик без hover */
  opacity: 0;
}

/* При наведении: анимируем блик */
.stress_block:hover::before {
  opacity: 1;
  animation: stressGloss 1s ease-in-out forwards;
}

@keyframes stressGloss {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}


/* TESTIMONIALS */
.testimonials-section {
    padding: 80px 0;
}

.slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.stress-header h2{
    margin-top: 160px;
    margin-bottom: 40px;
color: #262626;
}


.slider-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 30px;
}

.testimonial-card {
    flex: 0 0 calc(33.333% - 20px);
    background: #e8e8e8;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.card-top {
    background: white;
    padding: 30px;
    border-radius: 20px 20px 0 0;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.user-details h3 {
    font-size: 20px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 4px;
}

.user-meta {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.card-bottom {
    background: #e8e8e8;
    padding: 30px;
}

.results-section {
    margin-bottom: 20px;
}

.results-section:last-child {
    margin-bottom: 0;
}

.results-label {
    font-size: 16px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 8px;
}

.results-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.navigation {
    display: flex;
    justify-content: center;
    gap: 15px   ;
}




.nav-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    color: #666;
}

.nav-button:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* REVIEWS */  .reviews {
            max-width: 1040px;
            margin: 0 auto;
        }

        .reviews h2 {
            margin-top: 160px;
            margin-bottom: 40px;
            text-align: center;
            font-size: 44px;
            color: #161616;
        }

        .slider-container {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 1040px;
            margin: 0 auto;
        }
        

        .review-box_cont{
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        
  

        .review-item {
            background-color: #2626260D;
            border-radius: 32px;
            padding: 8px;
            width: 341.33px;
            height: 476px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-shrink: 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            will-change: transform;
        }

        .review-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        .review-top {
            display: flex;
            align-items: flex-start;
            text-align: left;
            padding: 16px;
            gap: 16px;
            flex-direction: column;
            
        }

              .review-top img{
                width: auto !important;
        }


        .review-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            object-fit: cover;
        }

        .review-info {
            display: flex;
            flex-direction: column;
        }

        .review-name {
            font-weight: 600;
            font-size: 24px;
line-height:32px;
        }

        .review-meta {
            font-size: 16px;
            color: #262626;
            line-height: 24px;
margin-top:4px;
        }


        .review-box {
            background-color: white;
            border-radius: 20px 24px;
            padding: 20px 24px;
            text-align: left;
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
        }

        .review-title {
font-size: 20px;
line-height: 28px;
            font-weight: 600;
            margin-bottom: 4px;
color: #262626;
        }

        .review-text {
            font-size: 14px;
            line-height: 20px;
            color: #16161699;
margin-top:4px;
        }

        .slider-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }

        .slider-btn {
            color: white;
            border: none;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.3s ease;
        }

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

        .slider-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background: #4B3F72;
            transform: scale(1.2);
        }



#reviewsCarousel .owl-nav {
    display: none !important;
}




        .mobile_slider{
            display:none;
        }

        @media (max-width: 768px) {

            .comparison-grid .col{
    width: 294px;

}
      

        .templates-grid{
            display: none;
        }
            
            
            .slider-container {
                max-width:361px;
            }
        }





.cost summary h3{
    margin-bottom: 16px;
}

.summary{
    background-color: #EEEEEC;
    border-radius: 32px;
    padding: 24px;
    text-align: left;
}

.ai-method-wrapper {
  position: relative;
  width: 512px;
  height: 292px;
  padding: 2px;           /* толщина «бордера» */
  box-sizing: border-box;
  display: inline-block;
  /* внутренний фон убираем — он будет у .ai-method */
  background: none;
}

/* Псевдо-элемент, который рисует градиентную рамку */
.ai-method-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;               /* занимает весь .ai-method-wrapper */
  
  /* 1. Скругление рамки */
  border-radius: 32px;
  
  /* 2. Фон = градиент + обрезка по padding */
  background:
    conic-gradient(
      from 90deg at 50% 50%, 
      #FACEFF 0deg, 
      #FFC5EB 72deg, 
      #FF5588 144deg, 
      #BB66FF 216deg, 
      #55AAFF 288deg, 
      #FACEFF 360deg
    );
  
  /* 3. Обрезаем градиент так, чтобы внутри оставалась дырка толщиной 2px */
  mask:
    /* сначала весь прямоугольник */ 
    linear-gradient(#fff 0 0) content-box, 
    /* потом вырезаем внутренний скруглённый прямоугольник */ 
    linear-gradient(#000 0 0);
  mask-composite: exclude; /* поведение маски: вычесть второй слой из первого */
  -webkit-mask-composite: destination-out; /* для WebKit */
  
  padding: 2px;           /* «толщина» рамки */
  box-sizing: content-box;
  pointer-events: none;   /* чтобы не мешать кликам */
}

.bl{
font-weight: 600;
font-size: 24px;
line-height: 32px;
margin-bottom: 24px !important;
}


.box-title{
    margin: 0;
    text-align: left;
font-weight: 600;
font-size: 24px;
margin-bottom: 24px !important;

line-height: 32px;

}


.ai-method .item{
 text-align: left;
font-style: Medium;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
margin-bottom: 12px !important;

}

/* Внутренний блок с белым фоном и чуть меньшим скруглением */
.ai-method {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 32px;    /* 32px – 2px padding */
  padding: 24px;
  box-sizing: border-box;
  overflow: auto;
}


.ai-method .item {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.ai-method .item svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  display: block;
}

.cost .item svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  display: block;
}

.traditional-method.summary,
.saving_box,
.ai-method-wrapper {
  box-sizing: border-box;
}

/* 1) Блок «Дважды постите» */
.traditional-method.summary {
  width: 512px;
  height: 488px;
}

.savings_container{
    display: flex;
    gap: 16px;
}
.saving_box {
  width: 512px;
  height: 180px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-hours {
    font-size: 14px;
    color: #16161699;
    margin-bottom: 36px;
    font-weight: 400;
}

button.support-button {
    background: #262626;
    font-weight: 500;
    font-size: 16px;
    padding: 16px 32px;
}
 

.footer-avatar {
    margin-bottom: 24px;
}

.footer-subtitle {
    color: #262626;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 8px;
    margin-bottom: 24px;
}


.nyumi-footer-copyright {
    color: #262626;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}
.nyumi-footer-links a
 
 {
    color: #262626;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.footer-container {
    background-image: url(/wp-content/themes/Nyumi%20Theme/bleska.png);
    background-color: transparent !important;
background-size: cover;
}footer.nyumi-footer {
    border-top: 1px solid #2626260D;
    margin-top: 80px;
}
 
.card-title
 
 {
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: 16px;
    line-height: 32px;
    margin-top: 24px;
}




/* NEWMI SECTION */
.newmi-section {
    color: white;
      width: 100%; /* обязательно */
  box-sizing: border-box; /* на всякий случай */
}



  .newmi-content{
background-image: url("/wp-content/themes/Nyumi%20Theme/assets/img/back.png");
    background-size: auto 100%; /* высота блока = высоте картинки */
    background-position: center;
    background-repeat: no-repeat;
    height:846px;    
    display: flex;
    flex-direction: column;
    padding-top: 40px;
     border-radius: 32px;
 overflow: hidden;
  margin: 0 auto; 
  margin-top: 160px;
 }


 

.background_img {
  position: relative;
  /* захватываем всю ширину viewport, независимо от родительских ограничений: */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* ваш тёмный фон: */
  background-color: #1A1A1A;

  /* если нужно, можно добавить паддинги сверху/снизу: */
  padding: 80px 0;
  box-sizing: border-box;
}


.newmi-title{
    margin: 0;
    font-weight: 500;
    font-size: 44px;
    line-height: 48px;
    color: #FFFFFF;
    text-align: center;
}

.newmi-subtitle{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin: 0;
    color: #FFFFFF;
}

.timer_container{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.newmi-buttons {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.btn-newmi {
    background-color: #fff;
    color: #262626;
    padding: 16px 32px;
    border-radius: 100px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
line-height: 24px;
}

.arrow-icon {
    margin-left: 5px;
}

strong{
    color: #262626 !important;
font-weight: 500;
}

.box-top {
margin-top:6px;
}

.item{
font-weight: 400;
font-size: 16px;
color:#26262699;
line-height: 24px;
letter-spacing: 0px;

}

.cost .item{
    display: flex;
    gap: 10px;
}

.btn-newmi_one {
    background-color: rgba(255, 255, 255, 0.8);
    color: #fff;
    padding: 16px 32px;
    border-radius: 32px;
    text-decoration: none;
    font-size: 16px;
}

/* PRICING SECTION */
.pricing-section {
    padding: 160px 0;
    text-align: center;
}

.pricing-title {
    font-size: 48px;
    font-weight: 500;
    color: #262626;
    margin: 0 0 16px 0;
    line-height: 44px;
}

.pricing-subtitle {
    font-size: 20px;
    line-height: 28px;
    color: #262626;
    margin: 0 0 40px 0;
    font-weight: 400;
}

.discount-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.timer-label {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    background: #FFFFFF;
    border-radius: 16px;
}

.timer {
    background: #2d2d2d;
    color: white;
    border-radius: 0 0 32px 32px;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    display: inline-block;
    height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-cards {
    display: flex;
    gap: 16px;
    text-align: left;
    justify-content: center;
    align-items: stretch;
}

.pricing-card {
    background: white;
    border-radius: 20px;
    padding: 24px 24px;
    flex: 1;
    max-width: 400px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}


.pricing-card.base{
    background-color: #EEEEEC;
    padding: 24px 32px;

}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.margin{
    margin: 0 !important;
}

.discount-tag {
    background: #ff4d4f;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.discount-tag_black {
    background: #000;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.pro-discount-tag {
    background: #ff4d4f;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.pro-discount-tag_black {
    background: #000;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.popular-tag {
    background: #0FA50F;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.plan-name {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin: 0;
    text-align: left;
}


.price {
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
color: #262626;
}

.old-price {
    color: #16161699;
    text-decoration: line-through;
    font-size: 24px;
    line-height: 32px;
    text-decoration-color: red;
    font-weight: 400;
    margin-left: 8px;
}

.monthly-price {
    color: #262626;
    background-color: #EDEDED;
    font-size: 14px;
    font-weight: 400;
    width: 131px;
    padding: 8px 12px;
    border-radius: 100px;
    margin: 8px 0 20px 0;
}

.features {
    list-style: none;
    padding: 0;
    margin: 68px 0 0 0;
}

.feature {
    display: flex;
    align-items: start;
    gap: 12px;
    margin-bottom: 24px;
    text-align: left;
}

.feature:last-child  {
    margin-bottom: 0;
}

.feature-text {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

.feature-title {
font-size: 16px;
line-height:24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-desc {
    color: #16161699;
font-size: 14px;
line-height:20px;
    font-weight: 400;
}

.feature-row {
position: relative;
}

.tooltip svg {
position: absolute;
right: 0;
top:-28px;
weight:24px;
height:24px;
}

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip-text {
  position: absolute;
  bottom: 105%; /* над иконкой */
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  
  padding: 6px 10px;
  background: #EEEEEC;
  color: #262626;
  font-size: 14px;
  border-radius: 6px;
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}


.btn-primary {
    width: 100%;
    background: #2d2d2d;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
line-height:24px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-pro {
   margin-top: 32px;
    background: radial-gradient(97.66% 735.55% at 100.2% -72.32%, #F0A4AF 0%, #E789E2 23.31%, #262626 100%)
}

a.btn-pro {
    display: block;              
    width: auto;
    text-align: center;          
    text-decoration: none;       
    padding: 16px 24px;
    border-radius: 100px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #fff;                
    background: linear-gradient(90deg, #1a1a1a, #ff66cc); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.btn-pro:hover {
    text-decoration: none;       /* на hover тоже без подчёркивания */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.disabled-feature {
    opacity: 0.4;
}

/* CLIENT TESTIMONIALS */
.client-testimonials {
    padding: 80px 0;
}

.testimonials-title {
    font-size: 48px;
    font-weight: 800;
    color: #222;
    margin: 0 0 16px 0;
    text-align: center;
    line-height: 1.1;
}

.testimonials-subtitle {
    font-size: 18px;
    color: #666;
    margin: 0 0 60px 0;
    text-align: center;
    font-weight: 400;
    line-height: 1.4;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
}

.testimonial-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, box-shadow;
    position: relative;
    z-index: 1;
}

.testimonial-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-radius: 50%;
    flex-shrink: 0;
}

.testimonial-name {
    font-size: 16px;
    text-align: left;
    font-weight: 600;
    color: #222;
}

.testimonial-text {
    font-size: 14px;
    text-align: left;
    line-height: 1.5;
    color: #444;
}



/* FAQ SECTION */
.faq-section {
    padding: 160px 0 40px;
}

.faq-title {
    font-size: 44px;
    font-weight: 500;
    color: #262626;
    margin: 0 0 40px 0;
    text-align: center;
    line-height: 48px;
}

.faq-container {
    margin: 0 auto;
    background: #2525250D;
    border-radius: 32px;
    padding: 32px;
    overflow: hidden;
}

.faq-item {
    padding: 24px 0;
    border-bottom: 1px solid #d1d5db;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: transparent;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.1);
}

.faq-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    font-size: 16px;
    color: #262626;
    transform: rotate(180deg);
}

.faq-item.active .faq-arrow {
    transform: rotate(0deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer-content {
    padding: 8px 0 0 40px;
    font-size: 16px;
font-weight:400;
    line-height: 24px;
    color: #16161699;
    text-align: left;
}

.footer-container{
    margin-top: 160px;
text-align:center;
}


        /* SUPPORT SECTION */
.support-section
 
 {
    position: relative;
    width: 1040px;
    height: 360px;
    margin: 0 auto;
    border-radius: 40px;
    overflow: hidden;
    background-image: url(/wp-content/themes/Nyumi%20Theme/egg.png);
    background-size: cover ! IMPORTANT;
    background-repeat: no-repeat;
    background-position: center;
    text-align: left;
}

        .support-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 2;
padding:40px;
        }

        .support-title {
            font-size: 32px;
            font-weight: 500;
            text-align: left;
            color: #262626;
            line-height: 36px;
    text-align: left;
    margin: 0 0 8px 0;
        }

        p.support-description {
            font-size: 16px;
            color: #262626;
                        font-weight: 400;

            line-height: 24px;
            margin: 0 0 16px;
        }

        .support-schedule {
            font-size: 14px;
            color: #16161699;
            font-weight: 400;
        line-height: 20px;
        }

        .support-hours {
            font-size: 14px;
            color: #16161699;
            margin-bottom: 40px;
            font-weight: 400;
            line-height: 20px;

        }

        .support-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #262626;
            color: white;
            padding: 16px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            align-self: flex-start;
        }

        .support-button:hover {
            background: #000000d5;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45, 27, 105, 0.4);
        }

        .support-button svg {
            width: 16px;
            height: 16px;
            transition: transform 0.3s ease;
        }

        .support-button:hover svg {
            transform: translateX(2px);
        }


/* FOOTER */
.footer-container {
    background-color: #D0E5F4;
    border-radius: 24px 24px 0 0;
    width: 100%;
}

.content {
    max-width: 100%;
    margin: 0 auto;

}

.footer-logo {
    padding: 54px 0 24px;
}

.footer-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.footer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-title {
    font-size: 44px;
    font-weight: 400;
    color: #262626;
    line-height: 48px;
    margin:0;
}

.footer-subtitle {
    color: #262626;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top:8px;
    margin-bottom: 24px;
}

.footer-subscribe-btn {
    background: white;
    color: #262626;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-subscribe-btn:hover {
    background: #f9fafb;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.telegram-icon {
    width: 24px;
    height: 24px;
}

.nyumi-footer {
    padding: 24px 20px;
}

.nyumi-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 16px;
}

.nyumi-footer-links {
    display: flex;
    gap: 24px;
}

.nyumi-footer-link {
    text-decoration: underline;
    transition: color 0.2s ease;
}

.nyumi-footer-link:hover {
    color: #374151;
}

.comparison-mobile {
display:none;
}

.desctop-hidden {display:none;}


@media (max-width: 768px) {

.creator-burnout-section{
    display: none;
}

    
    .hero-content h1 {
    font-weight: 500;
    margin: 0;
    position: relative;
    font-size: 44px;
    line-height: 48px;
    letter-spacing: 0px;
    text-align: center;
}
  
    
    .cards-grid {
        flex-direction: column;
        padding: 0 16px;
    }

    .features-section{
        padding: 0 16px;

    }
    
    .card {
        min-width: unset;
    }
    
    
    .templates-grid {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
gap:12px;
    }
     .action-buttons button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
    .main-title {
        font-size: 36px;
    }
    

.comparison-block_anime {
height:1150px;
}

.left-content {
    padding:24px 16px;
overflow-y: auto;
height: 100%; 
 -webkit-overflow-scrolling: touch;
}


.right-content {
    padding:24px 16px;
overflow-y: auto; 
height: 100%;
 -webkit-overflow-scrolling: touch;
}

.comparison-mobile {
display:block;
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
 overflow-y: visible; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ДО — снизу, полностью виден */
.before-content {
    position: absolute;
    inset: 0;
    background: #ECDFE7;
    display: flex;
    flex-direction:column;
padding: 24px 16px;
    z-index: 1;
overflow-y: auto; 
text-align:left;
}

  .after-wrapper {
    position: absolute;
    inset: 0;
    width: 50%; /* старт */
    height: 100%;
    overflow: hidden;
    z-index: 2;
  }

/* ПОСЛЕ — сверху, ширина меняется */
.after-content {
    position: absolute;
    inset: 0;
    background: #EDEDED;
padding: 24px 16px;
    display: flex;
    flex-direction:column;
text-align:left;
overflow-y: auto; 
}



.mobile-hidden { display:none;}

.desctop-hidden {display:block;}

.block-title {
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 8px;
    text-align: left;
   line-height: 28px;
}

.block-subtitle {
    font-size: 16px;
    color: #16161699;
    margin-bottom: 24px;
    text-align: left;
   line-height: 24px;
    font-weight: 400;
}

.block-content {
    text-align: left;
    line-height: 24px;
    color: #262626;
    font-size: 16px;
    font-weight: 400;
}
  
    
    .testimonial-card {
        flex: 0 0 calc(50% - 15px);
    }
    
    .card-top,
    .card-bottom {
        padding: 25px;
    }
    
    .pricing-cards {
        flex-direction: column-reverse;
        gap: 24px;
    }
    
    .pricing-title {
        font-size: 32px;
    line-height: 36px;
margin: 0 0 8px;
    }

.pricing-subtitle {
width:361px;
        font-size: 16px;
    line-height: 24px;
}

.timer_container {
margin-bottom:24px;
}

.timer_box {
width:100%;
}

.pricing-card, .pricing-card.base {
padding: 24px 16px;
}

    
    
    .testimonials-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    
    .faq-question {
        padding: 0;
    }
    
    .faq-answer-content {
        padding: 8px 0 0 40px;
    }
    
    .support-section {
        width: 100%;
        height: 590px;
        padding: 24px;
        border-radius: 40px;
background-image:url(/wp-content/themes/Nyumi%20Theme/egg-mob.png);
box-sizing:border-box;
    }

.support-content {
padding: 24px;
justify-content:start;
}
    
    .support-title {
        font-size: 32px;
line-height:36px;
color:#FFF;
    }
    
    p.support-description {
        color:#FFF;
    }
    
    .support-schedule,
    .support-hours {
        color:#FFFFFFA3;
    }
    
    button.support-button {
        background: #FFF;
color: #000;
align-items: center;
justify-content:center;
display: flex;
width:100%;
    }
    
    .footer-title {
        font-size: 28px;
    }
    
    .nyumi-footer-container {
align-items:start;
        flex-direction: column;
        text-align: left;
gap:8px;
    }

.nyumi-footer-links {
flex-direction: column;
gap:8px
}
}

@media (max-width: 480px) {
    .testimonial-card {
        flex: 0 0 calc(100% - 20px);
    }
    
    .card-top,
    .card-bottom {
        padding: 20px;
    }
    
    .user-avatar {
        width: 50px;
        height: 50px;
    }
}













.timer_container{
    width: 100%;
    display: flex;
    justify-content: center;
margin-bottom: 40px;
}


.timer_box{
    width: 322px;
    height: 156px;
    border-radius: 24px;
    background-color: #EDEDED;
    padding: 12px 16px;
    padding-bottom: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}



.newmi-buttons {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-newmi {
    background-color: #fff;
    color: #262626;
    padding: 16px 32px;
    border-radius: 100px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
line-height: 24px;
}

.btn-newmi:hover {
            background: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45, 27, 105, 0.4);
        }

.arrow-icon {
    margin-left: 5px;
}


.item{
    margin-bottom: 20px;
}

.item:last-child {
    margin-bottom: 0;
}


.item svg{
    width: 20px;
    height: 20px;
}


.cost  .item{
    display: flex;
    gap: 10px;
}

.btn-newmi_one {
    background-color: rgba(255, 255, 255, 0.236);
    padding: 16px 32px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 16px;
line-height: 24px;
    
}

.btn-newmi_one:hover {
            background: rgba(255, 255, 255, 0.236);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(45, 27, 105, 0.4);
        }


        /* Стили для секции отзывов клиентов */
        .client-testimonials {
            padding: 80px 0;
        }
        
        .testimonials-title {
            font-size: 48px;
            font-weight: 800;
            color: #222;
            margin: 0 0 16px 0;
            text-align: center;
            line-height: 1.1;
        }
        
        .testimonials-subtitle {
            font-size: 18px;
            color: #666;
            margin: 0 0 60px 0;
            text-align: center;
            font-weight: 400;
            line-height: 1.4;
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            align-items: start;
        }
        
        .testimonial-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .testimonial-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .testimonial-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .testimonial-avatar {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #e5e7eb, #d1d5db);
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .testimonial-name {
            font-size: 16px;
            text-align: left;
            font-weight: 600;
            color: #222;
        }
        
        .testimonial-text {
            font-size: 14px;
            text-align: left;
            line-height: 1.5;
            color: #444;
        }
        
 



        @media (max-width: 768px) {
            .faq-title {
                font-size: 32px;
                margin-bottom: 40px;
            }
            
.template-card-btn-primary, .template-card-btn-secondary {
width:100%;
box-sizing:border-box;
}


            .mobile_slider {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.templates-slider {
    padding: 20px 0;
}

.templates-slider .template-card {
    border-radius: 24px;
    padding: 24px;
    max-height: 365px;
margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
}

.templates-slider .card-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

        }

.templates-slider .template-card-description {
    margin:0;
}





        /* ПРЕЛОАДЕР */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

/* Прыгающий логотип */
.preloader-logo {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    animation: bounce 1.5s infinite ease-in-out;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.preloader-logo svg {
    width: 60px;
    height: auto;
}

/* @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-20px) scale(1.1);
    }
    60% {
        transform: translateY(-10px) scale(1.05);
    }
} */

/* Текст загрузки */
.preloader-text {
    color: white;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.8;
    animation: pulse 2s infinite ease-in-out;
}

/* @keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
} */

/* Прогресс бар */
.preloader-progress {
    width: 200px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin-top: 20px;
    overflow: hidden;
}

.preloader-progress-bar {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 0%;
    animation: loadProgress 3s ease-out forwards;
}

/* @keyframes loadProgress {
    0% { width: 0%; }
    100% { width: 100%; }
} */

/* АНИМАЦИИ ПОЯВЛЕНИЯ */
/* .fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-right.animated {
    opacity: 1;
    transform: translateX(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.fade-in.animated {
    opacity: 1;
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scale-in.animated {
    opacity: 1;
    transform: scale(1);
} */

/* АНИМАЦИИ ДЛЯ HERO СЕКЦИИ */
/* .hero-content {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-content.loaded {
    opacity: 1;
    transform: translateY(0);
}

.hero-egg {
    opacity: 0;
    transform: translateX(-60px) scale(0.9);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-egg.loaded {
    opacity: 1;
    transform: translateX(0) scale(1);
} */

/* Анимация кнопок */
.hero-buttons {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.hero-buttons.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация пузырей */
.egg-bubble {
    opacity: 0;
    transform: scale(0.8);
    animation: bubbleFloat 3s ease-in-out infinite;
}

.egg-bubble.loaded {
    opacity: 1;
    transform: scale(1);
}

.text-bubble.loaded {
    animation-delay: 0.5s;
}

.dots-bubble.loaded {
    animation-delay: 1s;
}

@keyframes bubbleFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

/* ПЛАВНЫЙ СКРОЛЛ */
html {
    scroll-behavior: smooth;
}

/* АНИМАЦИИ ДЛЯ БЛОКОВ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Задержки для последовательного появления */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }

/* АНИМАЦИЯ ГРАДИЕНТНОГО ТЕКСТА */
.gradient {
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


.magic-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: left 0.5s;
}

.magic-button:hover::before {
    left: 100%;
}

.magic-button:hover {
    transform: translateY(-2px);
}

/* СТИЛИ ДЛЯ КНОПОК HERO */
.btn {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}


h3.box-title.bl {
    color: #262626;
}


.cost.summary .item {
    color: #262626;
    font-weight: 500;
}
.ai-method-wrapper .item {
    color: #262626;
    font-weight: 500;
}.brand-name {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}h3.newmi-title {
    margin-bottom: 8px;
}.btn-newmi {
    font-weight: 600;
}a.btn-newmi_one {
    font-weight: 600;
}



h2.plan-name
 
 {
    font-size: 20px ! IMPORTANT;
font-weight: 600;
    line-height: 28px !important;
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: left ! IMPORTANT;
}






ul.features {
    margin-top: 20px;
}.pricing-card.base ul.features {
    margin-top: 65px;
}

.pricing-card.base a.feature-btn-primary
 
 {
    width: 100%;
    background: #262626;
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 32px;
    margin-bottom: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
justify-content: center;
box-sizing:border-box;
}
.pricing-card.base a.feature-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }

.feature-btn-primary-bottom,
a.feature-btn-primary-bottom {
    display: block;
    background: #fff;
    color: #262626;
    border: none;
    padding: 16px 24px;
    border-radius: 100px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}
.feature-btn-primary-bottom:hover,
a.feature-btn-primary-bottom:hover {
            background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }


.unique-client-grid {
    margin-top: -30px;
}

.unique-client-grid 
 {
    
    gap: 0px;
}


.unique-client-grid {
    padding: 0px !important;
}

.timer-label {
    color: #262626;
    font-weight: 600;
    border: 2px dashed #EDEDEC;
    margin-top: 8px;
}

.card-row {
display: flex;
align-items: center;
gap:6px;
}


.card-row {
margin: 20px 0 8px;
}

.card-row .plan-name {
margin:0;
}



/* МЕДИАЗАПРОСЫ */
@media (max-width: 1024px) {
main.hero.container {
padding: 0 20px;
}

.creator-burnout-section{
    display: none;
}

.stress_block {
width: 100%;
}

.light_blue img {
width: 100%;
}
 
.templates-grid {
     grid-template-columns: repeat(3, 1fr);
  }

 .testimonials-grid {
                grid-template-columns: repeat(2, 1fr);
            }


.savings_container {
flex-direction: column;
}

.traditional-method.summary, .saving_box, .ai-method-wrapper {
width: 100%;
height: 100%;
}

.unique-client-grid {
grid-template-columns:repeat(3, 1fr) !important;
grid-template-rows:repeat(3, auto) !important;
}

.support-section {
width: 100%;
background-image:url(/wp-content/themes/Nyumi%20Theme/egg2.png);
}

.newmi-content {
height: 750px;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
}

.support-title, p.support-description {
color: #fff;
}

.support-schedule, .support-hours {
color: #FFFFFFA3;
}

.comparison-grid {
width: 768px;
padding: 0 0 0 20px;
}

.pricing-card, .pricing-card.base {
max-width: 100%;
}

.tooltip-text {
bottom:200%;
}

.pricing-subtitle {
margin: 0 auto;
padding-bottom: 24px;
}

.features-cards img {
max-width:336px;
}

#client-slider {
width:768px;
}


}


@media (max-width: 768px) {
  .comparison-scroll-container {
      overflow-x: auto;
  overflow-y: hidden;      /* запрещаем вертикальный скролл */
  -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
  overscroll-behavior-x: contain; /* не даём скроллу пробиваться наружу */
  overscroll-behavior-y: none;    /* отключаем "bounce" по вертикали */
  }
  
  .comparison-grid {
    width: 361px;
box-sizing:border-box;
padding: 0 0 0 16px;
  }
  
  .comparison-grid .col {
    padding:30px 24px;
  }

.comparison-grid .col-header {
    align-items:center;
justify-content:center;
   
}

  .col.topchick {
    padding:30px 24px 30px 0;
width:200px;
  }


.pad_cont{
    padding: 0 16px;
}

.template-card:hover {
  transform: translateY(0px);
border-radius: 24px;

  box-shadow: none;
}



  

}



/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {


    .preloader-logo {
        width: 100px;
        height: 100px;
    }
    
    .preloader-text {
        font-size: 16px;
    }
    
    .fade-in-up, .fade-in-left, .fade-in-right {
        transform: translateY(30px);
    }
    
    .fade-in-left {
        transform: translateX(-30px);
    }
    
    .fade-in-right {
        transform: translateX(30px);
    }
}


.owl-carousel .owl-stage {
  display: flex;
}


/* Адаптивность для мобильных */
@media (max-width: 768px) {

    .stres-container {
      display: flex;
      flex-direction: column;
gap:8px;
      min-width: 100%;
    }

    .mobile_slider{
            display:block !important;
        }

    
.reviews-wrapper{
    flex-direction: column;
}

.features-card{
    min-width: 100%;
}

.features-card {
  transition: none;
  will-change: initial;
border-radius24px;
}

.features-card:hover {
  transform: translateY(0px);
border-radius:24px;
}

.savings_container{
    flex-direction: column;
}


.review-item{
    width: 100%;
}

.stress_block{
    width: 100%;
}
/* Hover-анимация «пупыря» для колонок в .savings-section */
.summary,
.cost,
.ai-method-wrapper {
  /* уже есть у вас базовые стили — просто добавляем transition */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.summary:hover,
.cost:hover,
.ai-method-wrapper:hover {
  /* лёгкий подъём и масштаб */
  transform: translateY(-6px) scale(1.04);
  /* мягкая тень */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

}



/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
  .newmi-content {
    background-image: url('/wp-content/themes/Nyumi%20Theme/assets/img/back2-mob.png'); /* Заменяем фоновое изображение */
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        gap: 0;
        padding: 20px 16px 0;
        margin-top: 80px;
height: 570px;
  }

  .btn-newmi{
    text-align: center;
    justify-content: center;
  }


  .newmi-buttons{
    flex-direction: column;
  }

  .btn-newmi_one{
    margin-top:20px;
  }
}


.unique-client-slider {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.client-item {
  text-align: left;
  padding: 24px;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}




.client-item p {

font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #262626;
margin:0;

}

.client-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}



/* Owl Carousel Custom Styles */
.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  font-size: 2em;
  color: #007bff;
  cursor: pointer;
}

.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 10px;
}

.owl-carousel .owl-dot {
  height: 10px;
  width: 10px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  margin: 0 5px;
}

.client-info{
    display: flex;
    align-items: center;
margin-bottom: 16px;
}


.client-info h3{
   font-size:16px;
font-weight:600;
line-height:24px;
   padding: 0 0 0 12px;
  margin: 0;
}


.owl-carousel .owl-dot.active {
  background: #007bff;
}

/* Responsive Design */
@media (max-width: 768px) {

  .client-avatar {
    width: 60px;
    height: 60px;
  }





}




.unique-client-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 20px;
}


.client-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* Media Query for Slider below 800px */
@media (max-width: 768px) {
  .unique-client-grid {
    display: none;
  }
  .unique-client-slider {
    display: block;
background:none;
padding:0;
  }

#client-slider {
width:361px;
}


  .client-item {
    margin: 0 12px 12px;
  }
  .client-avatar {
    width: 60px;
    height: 60px;
  }

.client-info {
gap:0px;
}

#client-slider.owl-carousel .owl-item img {
width:32px;}

  .client-info img{
    width: 32px;
height:32px;
  }

  .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
  }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next {
    font-size: 2em;
    color: #007bff;
    cursor: pointer;
  }
  .owl-carousel .owl-dots {
    text-align: center;
    margin-top: 10px;
  }
  .owl-carousel .owl-dot {
    height: 10px;
    width: 10px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
  }
  .owl-carousel .owl-dot.active {
    background: #007bff;
  }

.unique-client-slider_mobile {
  display: block !important;
}

}

/* Hide slider by default on desktop */
.unique-client-slider_mobile {
  display: none;
}


@keyframes flyInUp {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.header-animate-in {
    opacity: 0;
    animation: flyInUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.2s; /* чуть позже основного контента */
}


@keyframes logoDrop {
    0% {
        opacity: 0;
        transform: translateY(-80px) rotate(-10deg) scale(0.9);
    }
    70% {
        opacity: 1;
        transform: translateY(10px) rotate(2deg);
    }
    100% {
        transform: translateY(0) rotate(0) scale(1);
    }
}

.logo-fall {
    animation: logoDrop 1s ease-out forwards;
    animation-delay: 0.3s;
}


@keyframes flyInLeft {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flyInRight {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flyInTop {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flyInBottom {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  opacity: 0; /* стартовое состояние */
}

.anim-from-left {
  animation: flyInLeft 0.9s ease-out forwards;
}

.anim-from-right {
  animation: flyInRight 0.9s ease-out forwards;
  animation-delay: 0.2s;
}

.anim-from-top {
  animation: flyInTop 0.9s ease-out forwards;
  animation-delay: 0.4s;
}

.anim-from-bottom {
  animation: flyInBottom 0.9s ease-out forwards;
  animation-delay: 0.6s;
}




@media screen and (max-width:768px) {

.hero-content h1 {
    font-weight: 500;
    margin: 0;
    position: relative;
    font-size: 44px;
    line-height: 48px;
    letter-spacing: 0px;
    text-align: center;
}
.magic-button
 
 {
    width: 149px;
height:48px;
padding:7px 19px;
    margin: 0px;
    margin-left: -12px;
    margin-top: -4px;
    margin-bottom: -8px;
font-size: 16px;
    line-height: 24px;

}

.gradient-text {
    background: radial-gradient(47.14% 100% at 50% 0%, #F0A4AF 0%, #E789E2 35%, #262626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
h1.gradient-text {
    display: none;
}h1.gradient-text.mob {
    display: block ! IMPORTANT;
}
.hero-content p {
    line-height: 20px;
    font-size: 16px;
font-weight:400;
    line-height: 24px;
    margin: 8px 0 24px;
} 

.hero-buttons {
gap:8px;
}
 
a.btn.btn-subscribe {
    width: 100%;
    justify-content: center;
}

a.btn.btn-trial {
    width: 100%;
    justify-content: center;
}
h2.features-title
 
 {
    margin-top: 80px;
    font-size: 32px;
font-weight:500;
    line-height: 36px;
    margin-bottom:24px;
}

.features-sub {
    font-size: 16px;
    line-height: 24px;
}
section.features-section
 
 {
    padding: 0px;
}
.features-cards {
    display: flex;
    flex-direction: column;
gap:8px;
}
main.hero.container {
    padding: 16px 16px 0;
}
.features-cards img {
    max-width: 100%;
    width: 100%;
}

.section-header {
margin:80px 0 24px;
}

h2.section-title_one {
    font-size: 32px;
    line-height: 36px;
    color: #262626;
    margin: 0 0 8px 0;
}

.highlight {
    color: #262626 ! IMPORTANT;
    background: transparent;
    -webkit-text-fill-color: #262626 ! IMPORTANT;
}
span.highlight {
    display: contents;
}p.section-subtitle_one {
    font-size: 16px;
    line-height: 24px;
}p.section-subtitle_one br {
    display: none;
}
.owl-dots { display:none;}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    text-align: center;
    height: 25px;
    background: #262626 !IMPORTANT;
    color: white !IMPORTANT;
    width: 25px;
    border-radius: 360px;
    padding-bottom: 2px !IMPORTANT;
    font-weight: 400 !IMPORTANT;
}button.owl-prev {
    margin-left: -5px ! IMPORTANT;
}
button.owl-next {
    margin-right: -5px ! IMPORTANT;
}
.action-buttons {
margin-top:24px;
}
button.template-card-btn-primary,
a.template-card-btn-primary {
    display: inline-block;
    width: 100%;
    justify-content: center;
    text-decoration: none;
box-sizing:border-box;
}button.template-card-btn-secondary {
    width: 100%;
}
.action-buttons.pks {
    display: none;
}p.bottom-text.pks {
    display: none;
}section.templates-section.mob {
    display: block ! IMPORTANT;
width: 100%;
}

.templates-slider.owl-carousel.owl-theme.owl-loaded.owl-drag {
    padding: 0px;
}
.bottom-text {
    margin: 24px 0;
}


.comparison-block_vs {
margin-top: 0px;
}
.comparison-block_vs h2 {
    margin: 80px 0 24px;
    font-size: 32px;
    line-height: 36px;
}

.col.topchick
 
 {
    width: 178px;
}.main-title {
    margin-top: 80px ! IMPORTANT;
    font-size: 32px ! IMPORTANT;
    line-height: 36px ! IMPORTANT;
}h1.main-title br {
    display: none;
}p.main-subtitle {
    font-size: 16px;
    line-height: 24px;
margin: 8px 0 24px;
}
.stress-header h2 {
    margin-top: 80px;
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 36px;
}
.light_blue {
background-image: url(/wp-content/themes/Nyumi%20Theme/assets/img/Blue-light-mob.png);
height: 393px;
}

.light_blue .stress-icon svg path {
  fill: #FFFFFF; /* Изменяем цвет заливки */
}

section.pad_cont {
    padding: 0px;
}
.light_blue .stress-text h3 {
    font-size: 20px;
    line-height: 28px;
color: #FFFFFF;
}
.light_blue .stress-text p {
color: #FFFFFF;
}
.back_image .stress-text h3 {
    font-size: 20px;
    line-height: 28px;
}.back_image_one .stress-text h3 {
    font-size: 20px;
    line-height: 28px;
}

.light_pink h3 { font-size: 20px;
    line-height: 28px;}
.reviews h2 {
    font-size: 32px;
    line-height: 36px;
margin: 80px 0 24px;
}

.slider-controls {
margin-top:16px;
}

.review-top {
padding: 32px 24px;
}

.review-top img {
width: 64px;
heigth: 64px;
}

.stress_block.back_image_one {
    height: 425px;
order:2;
}.stress_block.light_pink {
    height: 356px;
order:1;
}.stress_block.back_image {
    height: 425px;
}.stress_block.light_blue img {
    max-width: 380px;
}
h2.section-title {
    font-size: 32px;
    line-height: 36px;
    margin: 80px 0 24px;
}
.box-title {
font-size:20px;
line-height:28px;
}

.traditional-method.summary {
    height: 100%;
    width: 100%;
}
.saving_box {
    height: 100%;
    width: 100%;
}
.ai-method-wrapper {
    height: 100%;
    width: 100%;
}


h3.newmi-title {
    font-size: 32px;
    line-height: 36px;
}

a.btn-newmi_one {
    margin-top: 0px;
    text-align: center;
}

.pricing-section {
padding:80px 16px;
}
.pricing-card.base ul.features {
    margin-top: 25px;
}p.pricing-subtitle br {
    display: none;
}

.faq-section {
padding:80px 0 24px;
}
.faq-container {
padding:16px;
}
h2.faq-title {
    font-size: 32px ! IMPORTANT;
    line-height: 36px ! IMPORTANT;
}.faq-question {
    text-align: left;
}

.footer-container {
    background-position: center;
    margin-top: 80px;
    height: 100%;
    text-align: center;
background-image:url(/wp-content/themes/Nyumi%20Theme/footer-mob.png);
}footer.nyumi-footer {
    background: #D0E5F4 ! IMPORTANT;
}h2.footer-title {
    font-size: 32px;
line-height:36px;
}
.footer-container .content {
padding: 0 16px;
}









}