:root {
        --color1: #69a299; 
        --color2: #9ab99f; 
        --color3: #cacfb7; 
        --color4: #ebe6e4; 
        --color5: #f3f3f3; 
      }

      
      body {
        background-color: var(--color5);
        color: var(--color1);
        font-family: "Georgia", serif; 
        line-height: 1.7;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .nav-link,
      button {
        font-family: "Helvetica Neue", "Arial", sans-serif; 
        font-weight: 300; 
        letter-spacing: 0.5px;
      }

      h2 {
        font-size: 2.5rem; 
        font-weight: 400;
        color: var(--color1);
      }

      h3 {
        font-size: 1.75rem; 
        color: var(--color2);
        font-weight: 400;
      }

      
      .bg-color1 {
        background-color: var(--color1);
      }
      .bg-color2 {
        background-color: var(--color2);
      }
      .bg-color3 {
        background-color: var(--color3);
      }
      .bg-color4 {
        background-color: var(--color4);
      }
      .bg-color5 {
        background-color: var(--color5);
      }
      .text-color1 {
        color: var(--color1);
      }
      .text-color2 {
        color: var(--color2);
      }
      .text-color3 {
        color: var(--color3);
      }
      .text-color4 {
        color: var(--color4);
      }
      .text-color5 {
        color: var(--color5);
      }

      
      .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1),
          transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition-delay: 0.2s;
      }

      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }

      
      .parallax-bg-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        overflow: hidden;
      }

      .parallax-bg {
        width: 100%;
        height: 150%; 
        object-fit: cover;
        position: absolute;
        top: -25%; 
        left: 0;
        will-change: transform;
      }

      

      
      header {
        border-bottom: 1px solid var(--color4);
      }
      .nav-link {
        position: relative;
        color: var(--color2);
        text-decoration: none;
        transition: color 0.3s ease;
      }
      .nav-link:hover {
        color: var(--color1);
      }
      .nav-link::after {
        content: "";
        position: absolute;
        width: 0;
        height: 1px;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--color1);
        transition: width 0.4s ease;
      }
      .nav-link:hover::after {
        width: 100%;
      }

      
      #hero {
        height: 100vh;
        min-height: 700px;
      }
      
      #hero-deco-shape {
        position: absolute;
        bottom: -10vh;
        right: 10%;
        width: 30vw;
        height: 30vw;
        background-color: var(--color4);
        z-index: 1;
        opacity: 0.5;
        transform: rotate(15deg);
        transition: transform 1.5s ease-out, opacity 1.5s ease-out;
      }
      
      #hero.visible #hero-deco-shape {
        transform: rotate(0deg) scale(1.1);
        opacity: 0.8;
      }

      
      #wissenschaft .sticky-image-container {
        position: sticky;
        top: 10vh; 
        height: 80vh;
      }
      #wissenschaft-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      
      #techniken {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 1.5rem; 
      }
      
      .tech-item-1 {
        grid-column: 2 / span 5;
        grid-row: 1;
      }
      .tech-item-2 {
        grid-column: 7 / span 5;
        grid-row: 2;
      }
      .tech-item-3 {
        grid-column: 4 / span 6;
        grid-row: 3;
      }
      .tech-image-1 {
        grid-column: 8 / span 4;
        grid-row: 1;
        z-index: 5;
      }
      .tech-image-2 {
        grid-column: 1 / span 5;
        grid-row: 2;
        z-index: 5;
      }

      
      #alltag {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem; 
      }
      
      .deco-line {
        width: 3px;
        height: 100%;
        background-color: var(--color3);
        opacity: 0.6;
      }

      
      
      #app-image-wrapper {
        position: relative;
        z-index: 10;
        transform: translateX(-10%); 
      }
      #app-text-wrapper {
        position: relative;
        z-index: 5;
        background-color: var(--color4);
        padding: 4rem; 
        transform: translateX(10%); 
      }

      
      #kontakt-form {
        transition: background-color 0.5s ease;
      }
      #kontakt-form.success {
        background-color: var(--color2); 
      }
      #notification-message {
        display: none; 
      }
      #kontakt-form.success #notification-message {
        display: block; 
      }
      #kontakt-form.success form {
        display: none; 
      }

      
      #achtsamkeit {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 2rem;
      }
      .achtsamkeit-text-main {
        grid-column: 2 / span 1;
      }
      .achtsamkeit-image-left {
        grid-column: 1 / span 1;
        align-self: center;
      }
      .achtsamkeit-image-right {
        grid-column: 3 / span 1;
        align-self: end;
      }
      
      .text-backdrop-shape {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120%;
        height: 120%;
        background-color: var(--color5);
        opacity: 0.7;
        z-index: -1;
        border-radius: 50%; 
        filter: blur(20px); 
      }

      
      
      #stressabbau {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto auto;
        gap: 2rem;
      }
      .stress-item-1 {
        grid-column: 1 / span 4;
        grid-row: 1;
      } 
      .stress-item-2 {
        grid-column: 1 / span 2;
        grid-row: 2;
      } 
      .stress-item-3 {
        grid-column: 3 / span 2;
        grid-row: 2;
      } 
      .stress-item-4 {
        grid-column: 1 / span 4;
        grid-row: 3;
      } 

      
      #schlaf {
        background-color: var(--color1); 
        color: var(--color5);
      }
      #schlaf h2,
      #schlaf h3 {
        color: var(--color5);
      }
      #schlaf-container {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 3rem;
      }
      
      .schlaf-deco-img {
        grid-column: 2 / span 1;
        grid-row: 1 / span 2;
        transform: scale(1.2) rotate(-5deg); 
        opacity: 0.8;
        align-self: center;
      }

      
      #philosophie blockquote {
        border-left: 4px solid var(--color3);
        color: var(--color2);
        font-style: italic;
        font-size: 1.25rem; 
      }

      
      @media (max-width: 1024px) {
        
        #wissenschaft .sticky-image-container {
          position: relative;
          top: 0;
          height: 50vh; 
        }

        
        #app-image-wrapper {
          transform: translateX(0);
        }
        #app-text-wrapper {
          transform: translateX(0);
        }

        
        #schlaf-container {
          grid-template-columns: 1fr;
        }
        .schlaf-deco-img {
          grid-row: auto;
          transform: none;
          opacity: 1;
        }
      }

      @media (max-width: 768px) {
        h2 {
          font-size: 2rem; 
        }
        h3 {
          font-size: 1.5rem; 
        }

        
        #techniken {
          display: flex;
          flex-direction: column;
        }
        .tech-image-1,
        .tech-image-2 {
          order: -1; 
        }

        
        #alltag {
          grid-template-columns: 1fr;
        }
        .deco-line {
          display: none;
        }

        
        #achtsamkeit {
          grid-template-columns: 1fr;
        }
        .achtsamkeit-image-left,
        .achtsamkeit-image-right {
          grid-column: 1;
          width: 50%;
          margin: 0 auto;
        }

        
        #stressabbau {
          grid-template-columns: 1fr;
        }
        .stress-item-1,
        .stress-item-2,
        .stress-item-3,
        .stress-item-4 {
          grid-column: 1;
        }
      }
/* --- Секція 1 (Про нас): Декоративна форма --- */
.mission-deco-shape {
  position: absolute;
  top: -10%;
  right: -15%;
  width: 40vw; /* Велика форма */
  height: 120%;
  background-color: var(--color4);
  z-index: 1;
  border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; /* Органічна "крапля" */
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), border-radius 2s ease-in-out;
  will-change: transform;
}

/* Анімація для форми */
.reveal.visible .mission-deco-shape {
  transform: translateX(-10%) rotate(-15deg);
  border-radius: 50% 50% 50% 50%; /* Стає більш круглою */
}

@media (max-width: 1024px) {
  .mission-deco-shape {
      opacity: 0.5;
      width: 80vw;
      right: -30%;
      height: 100%;
  }
}

/* --- Секція 2 (Про нас): Декоративна лінія --- */
.story-deco-line {
  position: absolute;
  top: 0;
  left: 45%; /* Зміщення від центру */
  width: 2px;
  height: 100%;
  background-color: var(--color3);
  z-index: 0;
  transform-origin: top;
  /* Ефект паралаксу буде додано через data-attribute */
}

@media (max-width: 768px) {
  .story-deco-line {
      left: 10%;
  }
}

/* --- Секція 3 (Про нас): Текстові блоки над фоном --- */
.approach-text-block {
  position: relative;
  z-index: 5;
  background-color: rgba(243, 243, 243, 0.85); /* Використовуємо --color5 з прозорістю */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(202, 207, 183, 0.3); /* --color3 з прозорістю */
  padding: 2rem; /* 32px */
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.approach-text-block:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05);
}
/* --- Секція 1 (Service): Декоративний "Шлях" --- */
#service-hero {
  position: relative;
  overflow: hidden;
}
.service-deco-path {
  position: absolute;
  top: 0;
  left: 50%;
  width: 60vw; /* Велика органічна форма */
  height: 150%;
  transform: translateX(-50%);
  z-index: 1;
  border: 2px solid var(--color3); /* Використовуємо --color3 для контуру */
  opacity: 0.5;
  /* Створення "органічної" краплеподібної форми */
  border-radius: 50% 50% 20% 80% / 80% 20% 80% 20%;
  will-change: transform;
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Анімація обертання для декоративного шляху */
.reveal.visible .service-deco-path {
  animation: slow-rotate 30s linear infinite;
}
@keyframes slow-rotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

.service-hero-content {
  position: relative;
  z-index: 5;
  max-width: 4xl; /* 896px */
  margin: 0 auto;
  text-align: center;
}

/* --- Секція 2 (Service): Процес ( overlapping grid) --- */
#service-prozess {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 2rem;
}
/* Зображення займає ліву половину і трохи центру */
.service-process-image-wrapper {
  grid-column: 1 / span 8;
  grid-row: 1;
  position: relative;
  z-index: 1;
  transform: translateX(-5%); /* Легкий зсув для динаміки */
}
/* Текст займає праву половину і перекриває зображення */
.service-process-text-stack {
  grid-column: 7 / span 6;
  grid-row: 1;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 32px */
}
.process-step-block {
  background-color: var(--color5); /* --color5 */
  border: 1px solid var(--color4); /* --color4 */
  padding: 2rem; /* 32px */
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.process-step-block:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
/* Адаптивність для сітки, що перекривається */
@media (max-width: 1024px) {
  #service-prozess {
      display: flex; /* Складаємо в стопку */
      flex-direction: column;
  }
  .service-process-image-wrapper {
      transform: translateX(0);
      width: 100%;
      order: 1; /* Зображення спочатку */
  }
  .service-process-text-stack {
      width: 100%;
      order: 2; /* Текст потім */
      margin-top: -6rem; /* Зберігаємо ефект перекриття */
  }
}
@media (max-width: 768px) {
  .service-process-text-stack {
      margin-top: -3rem; /* Менше перекриття на малих екранах */
  }
}

/* --- Секція 3 (Service): Трансформація --- */
#service-transformation {
  position: relative;
  padding-top: 8rem; /* 128px */
  padding-bottom: 8rem; /* 128px */
}
/* Декоративні лінії, що розходяться від центру */
.transformation-deco-line {
  position: absolute;
  top: 50%;
  width: 35vw; /* Довгі лінії, що виходять за межі блоку */
  height: 1px;
  background-color: var(--color3);
  z-index: 0;
  transform: scaleX(0); /* Початково приховані */
  transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0.3s;
}
.transformation-deco-line-left {
  left: 0;
  transform-origin: right;
}
.transformation-deco-line-right {
  right: 0;
  transform-origin: left;
}
/* Анімація появи ліній */
.reveal.visible .transformation-deco-line {
  transform: scaleX(1);
}
.transformation-content {
  position: relative;
  z-index: 5;
  background-color: var(--color4); /* Фон для центрального блоку */
  max-width: 3xl; /* 768px */
  margin: 0 auto;
  padding: 3rem; /* 48px */
}
/* --- Секція 1 (FAQ): Герой з накладенням --- */
#faq-hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  background-color: var(--color4); /* Фон для всієї секції */
  padding: 4rem 0; /* 64px */
}
.faq-hero-text {
  position: relative;
  z-index: 10; /* Текст завжди зверху */
  padding: 2rem;
}
.faq-hero-image-wrapper {
  position: relative;
  height: 100%;
  min-height: 500px;
  grid-column: 2 / span 1;
  grid-row: 1; /* Переконайтеся, що він у першому рядку */
}
/* Це <img>, стилізоване як паралакс-фон */
.faq-hero-img {
  position: absolute;
  top: -15%; /* Початкова позиція для паралаксу */
  left: 0;
  width: 100%;
  height: 130%; /* Більше висоти для ефекту зсуву */
  object-fit: cover;
  z-index: 1;
  will-change: transform; /* Оптимізація паралаксу */
}
/* Декоративна органічна форма, що перекриває зображення */
.faq-hero-deco-overlay {
  position: absolute;
  top: 50%;
  left: 20%; /* Зміщення вліво, щоб частково закрити зображення */
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--color4); /* --color4, той самий, що й фон секції */
  z-index: 2;
  /* Створення унікальної "маски" */
  clip-path: ellipse(60% 70% at 30% 50%);
  opacity: 0.9;
}
@media (max-width: 768px) {
  #faq-hero { grid-template-columns: 1fr; }
  .faq-hero-image-wrapper { 
      order: 1; /* Зображення спочатку */
      grid-column: 1;
      min-height: 300px;
  }
  .faq-hero-text { 
      order: 2; /* Текст потім */
      grid-column: 1;
      text-align: center;
  }
  .faq-hero-deco-overlay {
      /* Змінюємо маску для мобільного */
      clip-path: ellipse(80% 60% at 50% 30%);
  }
}

/* --- Секція 2 (FAQ): Акордеон --- */
#faq-accordion-list {
  position: relative;
  max-width: 4xl; /* 896px */
  margin: 0 auto;
  padding: 2rem 0;
}
/* Декоративна центральна "вісь" */
#faq-accordion-list::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background-color: var(--color3); /* --color3 */
  z-index: 1;
}
.faq-item {
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem; /* 24px */
}
.faq-question {
  background-color: var(--color5); /* --color5 */
  border: 1px solid var(--color4); /* --color4 */
  padding: 1.5rem 2rem; /* 24px 32px */
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
  margin-right: 2rem; /* Відступ для індикатора */
}
.faq-question:hover {
  background-color: var(--color4);
}
/* Декоративний "вузол" на осі */
.faq-question::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% - 11px); /* (22px / 2) */
  transform: translateY(-50%) scale(0.5); /* Початково маленький */
  width: 22px;
  height: 22px;
  background-color: var(--color2); /* --color2 */
  border-radius: 50%;
  border: 4px solid var(--color5);
  z-index: 5;
  transition: transform 0.4s ease;
}
.faq-item.active .faq-question::before {
  transform: translateY(-50%) scale(1); /* Збільшується при відкритті */
}
.faq-question h3 {
  margin: 0;
  font-size: 1.5rem; /* 24px */
  font-weight: 400;
  color: var(--color1);
}
/* Індикатор плюс/мінус */
.faq-toggle {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.faq-toggle::before, .faq-toggle::after {
  content: '';
  position: absolute;
  background-color: var(--color1);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.faq-toggle::before { /* Вертикальна */
  width: 2px;
  height: 20px;
  left: 9px;
  transform: rotate(0deg);
}
.faq-toggle::after { /* Горизонтальна */
  width: 20px;
  height: 2px;
  top: 9px;
  transform: scaleX(1);
}
.faq-item.active .faq-toggle::before {
  transform: rotate(90deg); /* Обертаємо вертикальну */
}
.faq-item.active .faq-toggle::after {
  transform: scaleX(0); /* Ховаємо горизонтальну */
}
.faq-answer {
  display: none; /* Приховано за замовчуванням */
  padding: 2rem;
  background-color: var(--color5);
  border: 1px solid var(--color4);
  border-top: none;
  font-size: 1.1rem; /* 17.6px */
  line-height: 1.8;
}
/* Адаптивність для акордеону */
@media (max-width: 768px) {
  #faq-accordion-list::before { left: 20px; } /* Вісь зліва */
  .faq-question::before { left: 9px; } /* Вузол зліва */
  .faq-item { padding-left: 40px; } /* Простір для осі */
  .faq-question { margin-right: 0; }
  .faq-question h3 { font-size: 1.25rem; } /* 20px */
}

/* --- Секція 3 (FAQ): Контакт --- */
#faq-contact {
  display: grid;
  grid-template-columns: 4fr 5fr; /* Асиметрія */
  gap: 3rem;
  align-items: center;
}
.faq-contact-image-frame {
  position: relative;
  padding: 1.5rem; /* 24px */
  background-color: var(--color4);
  width: 100%;
}
/* Декоративні кутові рамки */
.faq-contact-image-frame::before,
.faq-contact-image-frame::after {
  content: '';
  position: absolute;
  background-color: transparent;
  border: 3px solid var(--color3); /* --color3 */
  width: 20%;
  height: 30%;
  transition: all 0.5s ease;
}
.faq-contact-image-frame::before {
  top: -12px;
  left: -12px;
  border-right: none;
  border-bottom: none;
}
.faq-contact-image-frame::after {
  bottom: -12px;
  right: -12px;
  border-left: none;
  border-top: none;
}
.faq-contact-image-frame:hover::before {
  width: 30%;
  height: 40%;
}
.faq-contact-image-frame:hover::after {
  width: 30%;
  height: 40%;
}
.faq-contact-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
@media (max-width: 768px) {
  #faq-contact { grid-template-columns: 1fr; }
  .faq-contact-image-frame { order: 1; }
  .faq-contact-text { order: 2; }
}
/* --- Секція 1 (Contact): Форма та Інфо --- */
#contact-page-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem; /* 48px */
  align-items: start;
  overflow: hidden;
}

@media (min-width: 1024px) {
  #contact-page-wrapper {
      /* Асиметрична сітка 5/4 для десктопу */
      grid-template-columns: 5fr 4fr; 
  }
}

/* Декоративний контейнер для форми */
.contact-form-container {
  position: relative;
  padding: 2.5rem; /* 40px */
  background-color: var(--color4);
  z-index: 5;
}

/* Декоративна рамка, що зміщується */
.contact-form-container::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: 12px;
  bottom: 12px;
  border: 2px solid var(--color3);
  z-index: -1;
  opacity: 0.7;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.contact-form-container:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

/* Стилі полів вводу */
.contact-input {
  width: 100%;
  padding: 1rem; /* 16px */
  font-size: 1rem; /* 16px */
  background-color: var(--color5);
  border: 1px solid var(--color3);
  color: var(--color1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
.contact-input:focus,
.contact-input:active {
  outline: none;
  border-color: var(--color1);
  /* Тінь у фірмовому кольорі */
  box-shadow: 0 0 0 3px rgba(105, 162, 153, 0.3); 
}

/* Стилі для HTML5 валідації */
.contact-input:invalid:not(:placeholder-shown) {
  border-color: #a26969; /* М'який червоний, що пасує до палітри */
}

/* Кнопка відправки */
.contact-button {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem; /* 17.6px */
  letter-spacing: 0.5px;
  background-color: var(--color1);
  color: var(--color5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.contact-button:hover {
  background-color: #5a8e86; /* Трохи темніший --color1 */
}

/* Сповіщення про успіх (приховане за замовчуванням) */
#contact-success-notification {
  display: none; 
  padding: 3rem 2rem;
  background-color: var(--color2); /* Використовуємо --color2 для успіху */
  text-align: center;
}
#contact-success-notification h3 {
  color: var(--color5);
  font-size: 1.75rem; /* 28px */
  font-weight: 400;
}
#contact-success-notification p {
  color: var(--color4);
  font-size: 1.1rem; /* 17.6px */
}