@font-face {
  font-family: 'Chillax';
  src: url('fronts/Chillax-Extralight.otf') format('opentype');
  font-weight: 200; /* Extralight */
  font-style: normal;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    background-color: #D3B3C7;
    font-family: 'Metrophobic', sans-serif;
   transition:background-color 1.2s ease, opacity 1s ease;
    opacity: 0;
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 24px;
}

/* меню */
.navigation-buttons {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* черепашка */
.hero-image-turtle {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

/* текст */
.center-block {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
/* активное состояние */
.show {
    opacity: 1 !important;
    transform: none !important;
}
* {
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  width:100%;
  max-width: 100vw;
}
html {
  scroll-behavior: smooth; /* Это база для плавности */
}
.page {
    width: 100%;
    max-width:100%;
    min-height: 100vh;
    display: block;
    padding: 0;
}
.page-1 {
    background-color: #D3B3C7;
    color: #332D2D;
    position: relative;
    pointer-events: auto !important;
       overflow-x: hidden;  /* ← ДОБАВЬТЕ */
    overflow-y: visible;  /* ← ДОБАВЬТЕ */
  
}
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 80px clamp(20px,8vw,140px) 0 clamp(20px,8vw,140px);
    position: relative;
    z-index: 1010;
    flex-wrap: nowrap;
}

.nav-btn {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 25px;
    color: #332D2D;
    text-decoration: none;
font-size:clamp(11px,0.9vw,12px);
    font-family: 'Metrophobic', sans-serif;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
}

.nav-btn:hover {
    border-color: #332D2D;
}

.nav-btn:active {
    transform: scale(0.98);
}

.center-block {
    max-width: 600px;
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    pointer-events: none;
    position: relative;
    z-index: 0;
}

.after-text {
    color: #332D2D;
   font-size:clamp(15px,1.2vw,16px);
    font-family: 'Metrophobic', sans-serif;
    line-height: 1.4;
    max-width: 650px;
}

.after-text p {
    margin-bottom: 16px;
}

/* Обёртка для картинки */
.wrapper {
    display: flex;
    justify-content: flex-end;
}

.logo {
    width: 15vw;
    height: auto;
    margin: 20px;
}

.hero-image-turtle {
    position: absolute;
   right: clamp(20px,6vw,120px);
    bottom: 40px;
    z-index: 0;
    pointer-events: none;  
}

.hero-image-turtle img {
    width: 140px;
animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}
@media (max-width: 900px) {

    .navigation-buttons {
        padding: 40px 20px 0 20px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .logo {
        width: 120px;
    }

    .hero-image-turtle {
        display: none;
    }
}
/* --- БЕСШОВНЫЙ ПЕРЕХОД И ФОН --- */
.page-1{
opacity:1;
visibility:visible;
transition:opacity .8s ease, filter .8s ease;
}

.page-1.fade-out{
filter:blur(12px);
opacity:0.35;
transition:filter .8s ease, opacity .8s ease;
}

.page-1.hidden{
display:none;
}

.page2-grid{
width:100%;
position:relative;
}

.block{
min-height:auto;
display:block;
padding-top:clamp(20px,4vh,60px);
padding-bottom:clamp(32px,5vh,70px);
}

.block-2{
margin-top:clamp(-40px,-4vh,-16px);
padding-top:0;
}

.block-1,
.block-2{
opacity:1;
transform:none;
filter:none;
}

.block-1{
justify-content:flex-start;
padding-left:8vw;
}

.block-2 .page2-right{
margin-right:8vw;
margin-left:auto;
}

.left{
  margin-left:8vw;
}

.right{
  margin-left:auto;
  margin-right:8vw;
}

.page-2.scroll-layout {
    background-color: #D3B3C7;
    transition: background-color 0.8s ease;
    padding: 0;
    z-index: 2;
    position: relative;
}

.blur-layer{
position:absolute;
inset:0;
pointer-events:none;
background:rgba(255,255,255,0.001);
backdrop-filter:blur(12px);
--blur-pos:0%;
mask-image:linear-gradient(
to bottom,
black 0%,
black var(--blur-pos),
transparent calc(var(--blur-pos) + 120px)
);
z-index:5;
}

.page,
.block{
position:relative;
}

/* ============================= */
/* ========== PAGE 2 =========== */
/* ============================= */

.page-2{
position:relative;
background:#D3B3C7;
padding:clamp(40px,6vh,70px) clamp(20px,6vw,80px) clamp(40px,6vh,80px);
min-height:auto;
z-index:2;
}

.page2-left{
    max-width:520px;
}

.page2-text{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:18px;

}
.page2-text p{
   font-size:clamp(16px,1.3vw,18px);
    line-height:1.6;
    color:#332D2D;
}

.page2-right{
    max-width:420px;
}
.page2-right .page-2-num,
.page2-right .side-title{
opacity:0;
transform:translateY(25px);
transition:opacity .6s ease, transform .6s ease;
}

.page2-right.show .page-2-num,
.page2-right.show .side-title{
opacity:1;
transform:none;
}

.topics-grid{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.topic-card{
    display:flex;
    align-items:baseline; /* выравнивание по базовой линии текста */
    gap:20px;
    padding:22px 30px;
    border-radius:24px;
    background:#F9F2F6;
    font-size:clamp(15px,1.2vw,16px);
    line-height:1.35;
    opacity:0;
    transform:translateY(35px);
    transition:opacity .45s ease, transform .45s ease;
}

.topic-icon{
    font-size:20px; /* одинаковая оптическая высота */
    width:28px;
    text-align:center;
    color:#D3B3C7;
    flex-shrink:0;
}

.topic-card span{
    display:block;
    position:relative;
    top:-1px;  
}

.topic-card.visible{
opacity:1;
transform:translateY(0);
}
.page-2-num{

    font-size:14px;
    letter-spacing:2px;
    color:#332D2D;
    opacity:0.6;
    display:block;
    margin-bottom:12px;

}
.side-title{
    font-family:'Metrophobic', sans-serif;
    font-size:clamp(32px,4vw,54px);
    color:#332D2D;
}
@media (min-height:900px){

.block{
padding-top:30px;
padding-bottom:40px;
}

.block-2{
margin-top:-30px;
}

}
/* ---------- АДАПТИВ ---------- */

@media (max-width: 900px) {

    .scroll-section {
        flex-direction: column;
        padding: 40px 20px;
    }

    .sticky-side {
        position: relative;
        margin-bottom: 40px;
    }

    .side-content {
        position: relative;
        top: 0;
        transform: none;
        opacity: 1;
    }

    .scroll-content {
        padding: 0;
    }

    .topics-grid {
        position: relative;
        height: auto;
    }

    .topic-card {
        position: relative;
        transform: none;
        opacity: 1;
        margin-bottom: 20px;
    }

}

.page-3 {
    position: relative;
    margin-top: 0;
    z-index: 3;
}
.page-3,
.page-4 {
    position: relative;
    z-index: 5;
}
/* --- СЕКЦИЯ PAGE-3 --- */
.page-3 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
      800px 400px at 80% 10%,
      rgba(211, 179, 199, 0.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #2F2A2D 0%,
      #2B2629 100%
    );
  color: #E6CFE0;
  padding: clamp(80px,10vw,140px) 20px clamp(140px,12vw,220px);
  min-height: 100vh;
}

.page-3-header {
  max-width: 1100px;
  margin: 0 auto 60px auto;
}

/* --- ЗАГОЛОВКИ И АНИМАЦИЯ ПОЯВЛЕНИЯ --- */
.faq-title, .faq-subtitle, .faq-item {
  opacity: 0;
  transform: translateY(60px);
  /* Единая плавная настройка появления */
  transition: 
    opacity 1.5s cubic-bezier(.22,.61,.36,1),
    transform 1.5s cubic-bezier(.22,.61,.36,1),
    background 0.4s ease,
    border 0.4s ease;
}

/* Класс, который добавляет JS при скролле */
.faq-title.visible, .faq-subtitle.visible, .faq-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.faq-title {
    font-size: 56px;
    font-weight: 300;
    letter-spacing: 2px; 
    background: linear-gradient(90deg, #E6CFE0, #C08CB4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
}

.faq-subtitle {
  font-family: 'Chillax', sans-serif;
  font-size: 20px;
  font-weight: 200;
  line-height: 1.4;
  color: rgba(211, 179, 199, 0.85);
}

/* --- FAQ СЕТКА И КАРТОЧКИ --- */
.faq {
  max-width: 1100px;
  margin: 40px auto 0 auto;
  display: grid;
  gap: 28px;
}

/* --- КАРТОЧКА FAQ --- */
.faq-item {
    position: relative;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 20px;
    
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.4s ease, 
        border 0.4s ease,
        box-shadow 0.4s ease; /* Добавили плавность для тени */
}

/* --- ВСТАВЛЯЙ СЮДА --- */
.faq-item:hover {
    background: rgba(255, 255, 255, 0.03); /* Фон чуть светлее */
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Тень глубже */
    transform: none; /* transition уже описан в основном блоке, здесь он сработает автоматически */
}

/* Активная карточка (первая или открытая) */
.faq-item.active {
    background: rgba(211, 179, 199, 0.08);
    border: 1px solid rgba(211, 179, 199, 0.3);
}

.faq-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ВОПРОС И ТОНКИЙ ПЛЮСИК --- */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    /* Выравнивание текста и плюсика строго по центру */
    align-items: center; 
    cursor: pointer;
    font-family: 'Metrophobic', sans-serif;
    font-size:clamp(17px,1.6vw,20px);
    color: #D3B3C7;
    transition: color 0.3s ease;
}

.faq-question:hover {
  color: #E6CFE0;
text-shadow: none;
}
.faq-question:hover::after {
    opacity: 1;
    background: 
        linear-gradient(#E6CFE0, #E6CFE0) center/100% 1px no-repeat,
        linear-gradient(#E6CFE0, #E6CFE0) center/1px 100% no-repeat;
}

/* Плюс/Крестик справа */
.faq-question::after {
    content: "";
    width: 20px;
    height: 20px;
    /* Идеально тонкие линии в 1 пиксель */
    background: 
        linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
        linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
    display: inline-block;
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-question::after {
    transform: rotate(45deg);
    opacity: 0.9;
}

/* --- ОТВЕТ --- */
.faq-answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 40px;
    font-size:clamp(15px,1.2vw,16px);
    box-sizing: content-box;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.faq-answer > div {
    padding-top: 10px;
    /* Комфортный отступ снизу, чтобы не прижималось к рамке */
    padding-bottom: 35px; 
    line-height: 1.6;
    color: rgba(230, 207, 224, 0.9);
}

.faq-item.active .faq-answer {
    opacity: 1;
}
/* Начальное состояние элементов до появления */
/* Твое начальное состояние (верул как ты просила) */
.animate-on-scroll, .faq-title, .faq-subtitle, .faq-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Твое состояние видимости */
.animate-on-scroll.visible, .faq-title.visible, .faq-subtitle.visible, .faq-item.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    }

.arrow {
    position: fixed;
    bottom: 40px;
    right: 120px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 1000;
    color: #332D2D; /* цвет по умолчанию */
    fill: none;  
    transition: color 0.3s ease, transform 0.4s ease;
}

.arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* стрелка вверх */
.arrow.up {
    transform: rotate(180deg);
}

/* розовая на 3 странице */
.arrow.pink {
    color: #D3B3C7;
}

/* ====== СТРАНИЦА 4 ====== */
.page-4 {
  background: #FFFFFF;
   padding: 80px 0 40px 0;
}
.page-4-title {
  max-width: 900px;
 margin: 0 clamp(20px,6vw,120px) 80px;

  font-family: 'Chillax', sans-serif;
  font-size: 40px;
  font-weight: 200;
  letter-spacing: 0.5px;
  line-height: 1.2;

  color: #2F2A2D;
}
.page-4-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px 120px;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  box-sizing: border-box;
}

/* РОЗОВЫЕ СТОЛБИКИ */
/* РОЗОВЫЕ СТОЛБИКИ */
.page-4-card {
  background: #F9F2F6;
  border-radius: 28px;
  padding: 60px 50px;
  font-family: 'Metrophobic', sans-serif;
  font-size:clamp(15px,1.3vw,17px);
  line-height: 1.6;
  color: #332D2D;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);

  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity 0.8s cubic-bezier(.22,.61,.36,1),
    transform 0.4s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.4s ease;

  position: relative;
  z-index: 1;
}
.page-4-card.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* hover работает ТОЛЬКО когда карточка уже visible */
.page-4-card.visible:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  cursor: pointer;
}

/* Текст */
.page-4-card p {
  margin-bottom: 28px;
}

.page-4-card strong {
  font-weight: 600;
}
/* МЕЛКОЕ ПРИМЕЧАНИЕ */
.page-4-note {
  font-size: 14px;
  opacity: 0.75;
}
.card-disclaimer {
  margin-top: 20px;
  font-size: 14px;
  opacity: 0.6;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.star-icon {
  width: 16px;   /* равен размеру текста */
  height: 16px;
  margin-top: 3px; /* лёгкое выравнивание по строке */
  flex-shrink: 0;
}
.card-image {
   width: 180px;
  max-width:100%;
  margin-top: 24px;
  display: block;
filter: grayscale(100%) brightness(1.2) contrast(0.6);
}
/* ===== PAGE 5 — REVIEWS ===== */
.page-5 {
  position: relative;
  background: #F3D6E6;
  min-height:100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Подняли контент */
  padding-top: 100px; 
   width: 100%;
  max-width: 100vw;
  box-sizing: border-box;/* Отступ сверху для заголовка */
  overflow-x: hidden;
}

/* ОФОРМЛЕНИЕ ТЕКСТА (Сделали приятнее) */
.page-5-center {
  position: relative;
  text-align: center;
  max-width: 650px;
  padding-bottom: 220px;
  z-index: 20;
}

.page-5-title {
  font-family: 'Metrophobic', sans-serif;
  font-size: 40px;
  margin-bottom: 25px;
  color: #5F5A5A;
}

.page-5-text {
  font-family: 'Metrophobic', sans-serif;
  font-size:clamp(15px,1.3vw,17px);
  line-height: 1.7; /* Увеличили расстояние между строками */
  margin-bottom: 45px;
  color: #6F6A6A;
}

/* ТВОИ ОРИГИНАЛЬНЫЕ КНОПКИ (ВОЗВРАЩЕНО БЕЗ ИЗМЕНЕНИЙ) */
.page-5-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Metrophobic', sans-serif;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  color: #6F6A6A;
  border: 1px solid #D3B3C7;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.contact-btn:hover {
    background: #F6EEF3;
    color: #332D2D;
}

.social-icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* КАРТИНКИ (Подняты и без рамок) */
.page-5-images {
  position: absolute;
  left: clamp(20px,5vw,60px);
  bottom: 150px;
  z-index: 50;
}

.page-5-img {
  position: absolute;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.4s ease;
}

.img-april { 
  width: 240px; 
  bottom: 80px; 
  left: 0; 
  z-index: 1; 
}

/* Tyl — опустили ниже (bottom: 10px) */
.img-tyl { 
  width: 170px; 
  bottom: 50px; 
  left: 40px; 
  z-index: 2; 
}

/* Rin — поверх всех (z-index: 3) */
.img-rin { 
  width: 170px; 
  bottom: 70px; 
  left: 90px; 
  z-index: 3; 
  animation: reviewFloat 4s ease-in-out infinite 0.5s;
}
@keyframes reviewFloat {
 0%,100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
}
/* --- ОТЗЫВЫ --- */

.reviews-wrapper {
  position: absolute;
  right: clamp(24px, 5vw, 60px);
  bottom: 70px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  z-index: 5;
}

.reviews-wrapper.open {
  position: absolute;
  right: clamp(24px, 5vw, 60px);
  bottom: 70px;

  align-items: flex-end;
  z-index: 30;
}

.reviews-stack {
  position: relative;
  width: min(420px, 92vw);
  height: 260px;

  overflow: visible;
}

/* Анимация появления */
@keyframes fadeInStack {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* --- Карточки --- */

.review-card {
  position: absolute;
  right: 0;

  width: min(380px, 92vw);
  height: 240px;
max-width: 100%;
  background: #ffffff;
  border-radius: 20px;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
transition:
transform 1.4s cubic-bezier(.16,1,.3,1),
box-shadow 1s ease,
opacity .6s ease;
}
.reviews-stack.open .review-card:not(.expanded) .review-text{
opacity:.95;
}

.review-card.expanded .review-text{
opacity:1;
}

/* --- Открытое состояние --- */

.reviews-stack.open .review-card {
  position: relative;
  top: 40px;

  width: clamp(200px, 22vw, 300px);
  height: 210px;

  flex: 1 1 0;
min-width:0;
  transform: scale(.96);
  opacity: .9;
}

/* Скрываем текст задних карточек в закрытом состоянии */

.reviews-stack:not(.open) .review-card:not(:first-child) .card-content {
  opacity: 0;
}

/* --- Hover --- */

.reviews-stack.open .review-card:first-child {
 transform:scale(.96);
  opacity: .9;

  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  z-index: 2;
}

.reviews-stack.open .review-card:not(.expanded):hover {
  transform: translateY(-6px) scale(.96);

  box-shadow: 0 24px 45px rgba(0,0,0,.16);

  opacity: 1;
  z-index: 20;
}

/* --- Контент карточки --- */

.card-content{
width:100%;
max-width:100%;

padding:28px;
box-sizing:border-box;

display:flex;
flex-direction:column;

gap:14px;

min-width:0;
}

/* Ограниченный текст */

.reviews-stack.open .review-card:not(.expanded) .review-text{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

overflow:hidden;
}

/* --- Раскрытая карточка --- */

.reviews-stack.open .review-card.expanded{
width:min(420px,40vw,90vw);
height:auto;
transform:translateY(-28px) scale(1.02);
max-width:100%;
box-shadow:0 40px 80px rgba(0,0,0,.22);

z-index:200;
}
.review-card.expanded .card-content{
width:100%;
min-width:0;
}

.review-card.expanded .review-text{

-webkit-line-clamp:unset;
max-height:none;

font-size:clamp(12px,0.85vw,14px);
line-height:1.5;

overflow-wrap:break-word;
word-break:break-word;

white-space:normal;

display:block;
}

/* --- Текст --- */
.review-text{
width:100%;

min-width:0;
flex-shrink:1;
max-width:100%;
font-size:clamp(13.4px,1vw,15.5px);
line-height:1.6;
transition:opacity .18s ease;
margin:0;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}

.review-card.expanded .card-content{
gap:16px;
padding:28px;
box-sizing:border-box;
justify-content:flex-start;
}

.reviews-stack.open .review-card:first-child .review-text {
  opacity: 1;
}

/* --- Автор --- */

.review-author {
  margin-top: 12px;

  font-size: 13px;
  color: #8A8585;

  flex-shrink: 0;

  font-family: 'Playfair Display', serif;
}

/* Гарантия видимости текста */

.reviews-wrapper.open .card-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- Стопка карточек --- */

.review-card:nth-child(1) {
  transform: translate(0,0) scale(1);
  z-index: 4;
}

.review-card:nth-child(2) {
  transform: translate(10px,12px) scale(.98);
  z-index: 3;
  opacity: .95;
}

.review-card:nth-child(3) {
  transform: translate(20px,24px) scale(.96);
  z-index: 2;
  opacity: .9;
}

.review-card:nth-child(4) {
  transform: translate(30px,36px) scale(.94);
  z-index: 1;
  opacity: .85;
}

/* Hover в закрытом состоянии */

.review-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 25px 45px rgba(0,0,0,.16);
}

/* --- Открытая линия карточек --- */

.reviews-stack.open {
  position: relative;

  display: flex;
  flex-direction: row;

  gap: 12px;

  margin-top: 70px;

  animation: fadeInStack .5s ease;
max-width:calc(100vw - 80px);
  width: auto;
transition:gap .8s cubic-bezier(.16,1,.3,1);
  align-items: flex-start;
}
.reviews-stack.open .review-card:nth-child(3).expanded{
transform:translateY(-36px) scale(1.02);
}
/* Кнопка */
.reviews-toggle {
  position: absolute;
  right: 0;
bottom: 270px;
  z-index: 25;
  padding: 12px 25px;
  border-radius: 999px;
  border: 1px solid #D3B3C7;
  background: white;
  cursor: pointer;
  font-family: 'Metrophobic', sans-serif;
  transition: all 0.3s ease;
}

.reviews-toggle:hover {
  background: #D3B3C7;
  color: white;
}
/* Включаем видимость для 4 страницы, чтобы работал hover */
.page-4-card.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Шрифты и кнопки (без изменений) */
.page-5-title { font-family: 'Metrophobic', sans-serif; font-size: 40px; color: #5F5A5A; margin-bottom: 20px; }
.page-5-text { color: #6F6A6A; margin-bottom: 40px; }
.page-5-buttons { display: flex; gap: 20px; justify-content: center; }

/* АДАПТИВ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */
@media (max-width: 900px) {
  /* Исправляем отступы для 4-й страницы */
  .page-4-inner {
    grid-template-columns: 1fr;
    padding: 60px 20px;
  }

  /* Добавляем адаптив для 5-й страницы, чтобы картинки и отзывы не перекрывали текст */
  .page-5-images, .reviews-wrapper {
    position: relative; /* На мобилках лучше выстроить их в поток, а не фиксировать по углам */
    left: auto;
    right: auto;
    bottom: auto;
    margin: 20px auto;
    align-items: center;
  }
  
  .page-5-title {
    font-size: 32px; /* Уменьшаем заголовок для экранов смартфонов */
  }
}

.page-6 {
    position: relative;
    min-height: 100vh;
    background-image: url("images/me.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor:  default;
}
.page-6 .navigation-buttons {
    position: relative;
    z-index: 3;
}
.page-6 .navigation-buttons::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;      /* прижимаем к нижней границе кнопок */

    width: 100%;
    height: 40px;   /* регулируешь только это */

    background: #F4DCE7;
     border-radius: 20px;
    z-index: -1;
}
.page-6::before{
    content:"";
    position:absolute;
   inset:0;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    background:rgba(255,255,255,0.25);

    pointer-events:none;
    z-index:1;

mask-image:
radial-gradient(circle 220px at var(--x1,-200px) var(--y1,-200px), transparent 40%, black 70%),
radial-gradient(circle 140px at var(--x2,-200px) var(--y2,-200px), transparent 40%, black 70%),
radial-gradient(circle 100px at var(--x3,-200px) var(--y3,-200px), transparent 40%, black 70%),
radial-gradient(circle 70px at var(--x4,-200px) var(--y4,-200px), transparent 40%, black 70%),
radial-gradient(circle 50px at var(--x5,-200px) var(--y5,-200px), transparent 40%, black 70%),
radial-gradient(circle 35px at var(--x6,-200px) var(--y6,-200px), transparent 40%, black 70%),
radial-gradient(circle 25px at var(--x7,-200px) var(--y7,-200px), transparent 40%, black 70%),
radial-gradient(circle 18px at var(--x8,-200px) var(--y8,-200px), transparent 40%, black 70%),
radial-gradient(circle 12px at var(--x9,-200px) var(--y9,-200px), transparent 40%, black 70%),
radial-gradient(circle 8px at var(--x10,-200px) var(--y10,-200px), transparent 40%, black 70%);
    -webkit-mask-image:
radial-gradient(circle 220px at var(--x1,-200px) var(--y1,-200px), transparent 40%, black 70%),
radial-gradient(circle 140px at var(--x2,-200px) var(--y2,-200px), transparent 40%, black 70%),
radial-gradient(circle 100px at var(--x3,-200px) var(--y3,-200px), transparent 40%, black 70%),
radial-gradient(circle 70px at var(--x4,-200px) var(--y4,-200px), transparent 40%, black 70%),
radial-gradient(circle 50px at var(--x5,-200px) var(--y5,-200px), transparent 40%, black 70%),
radial-gradient(circle 35px at var(--x6,-200px) var(--y6,-200px), transparent 40%, black 70%),
radial-gradient(circle 25px at var(--x7,-200px) var(--y7,-200px), transparent 40%, black 70%),
radial-gradient(circle 18px at var(--x8,-200px) var(--y8,-200px), transparent 40%, black 70%),
radial-gradient(circle 12px at var(--x9,-200px) var(--y9,-200px), transparent 40%, black 70%),
radial-gradient(circle 8px at var(--x10,-200px) var(--y10,-200px), transparent 40%, black 70%);

}
.page-6::after {
    content: "";
    position: absolute;
    inset:0;

    background: rgba(255,255,255,0.35); /* регулируется */
    z-index: 0;
}
.page-6-content {
  position: relative;
  z-index: 2;

   height: calc(100vh - 160px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.donut-text.top{
    position: relative;
    padding-bottom: 18px;
}

.donut-text.top::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:#332D2D;
    opacity:0.4;
}
.page-6-footer {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    padding: 0 clamp(20px,6vw,80px);
    z-index: 3;
}

.footer-line {
    width: 100%;
    height: 1px;
    background: #332D2D;
    opacity: 0.4;
    margin-bottom: 20px;
}

.footer-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    font-size: 14px;
    letter-spacing: 1px;
}

.footer-link {
    text-decoration: none;
    color: #332D2D;
   position: relative;
}
.footer-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 1px;
    background: #332D2D;
    transition: width 0.5s ease;
}

.footer-link:hover::after {
    width: 100%;
}
.nav-btn-outline {
    border: 1px solid #332D2D;
}
.arrow{
    position:fixed;
   bottom:clamp(30px,6vw,80px);
right:clamp(20px,6vw,80px);

    display:flex;
    align-items:center;
    gap:12px;
    z-index:100;
    cursor:pointer;
}
.arrow-text {
    display: none;
    font-family: 'Metrophobic', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.instagram-link i{
    font-size: 25px;
    color: #332D2D;
     font-weight:300;
    transform:scaleX(0.9);
    opacity:0.8;
    transition:opacity .3s ease, transform .3s ease;
}
.instagram-link:hover i{
    opacity:1;
    transform:scaleX(0.9) scale(1.05);
}
/* ---------- TABLET ---------- */

@media (max-width:1024px){

.scroll-section{
flex-direction:column;
padding:60px 30px;
}

.topics-grid{
position:relative;
top:0;
right:0;
width:100%;
}

}

/* ---------- MOBILE ---------- */

@media (max-width:768px){

/* общие отступы */

.scroll-section{
padding:40px 20px;
}

.side-title{
font-size:28px;
}

.topic-card{
padding:18px;
border-radius:20px;
}
  
.page-1 .arrow{
display:none !important;
}
  .scroll-section:first-of-type .arrow{
display:none !important;
}
/* страницы */

.page-2{
padding:80px 20px;
}

.page-3{
padding:100px 20px 180px;
}

.page-4-inner{
padding:40px 20px;
}

/* ---------- PAGE 1 BUTTONS ---------- */

.navigation-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
padding:40px 20px 0;
margin-bottom:80px;
justify-items:center;
}

.navigation-buttons .nav-btn{
max-width:220px;
justify-self:center;
}

.navigation-buttons .nav-btn:last-child{
grid-column:1 / -1;
margin:auto;
width:65%;
text-align:center;
}

/* ---------- PAGE 5 ---------- */

.page-5{
height:auto;
padding:80px 20px 120px;
}

.page-5-center{
padding-bottom:30px;
 margin-bottom:40px;
}

/* картинки */

.page-5-images{
display:flex;
justify-content:center;
margin-top:320px;
clear:both;
}

.img-april{
width:160px;
}

.img-tyl,
.img-rin{
display:none;
}

/* отзывы */

.reviews-wrapper,
.reviews-toggle,
.reviews-stack{
display:none;
}

/* ---------- PAGE 6 ---------- */

.page-6{
padding-bottom:180px;
}

.page-6-footer{
bottom:10px;
}

/* стрелка */

.arrow{
bottom:90px;
}

}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

.side-title{
font-size:24px;
}

.review-card{
flex:0 0 90%;
}

}