:root {
    --color1: #F7E5C7; /* Светлый кремовый/слоновая кость */
    --color2: #C7957B; /* Теплый терракотовый/коричневый */
    --color3: #59271E; /* Темный кофейный/шоколадный (Основной текст) */
    --color4: #A83A2E; /* Красная глина/Бордовый (Сильный акцент) */
    --color5: #F2C84B; /* Горчично-желтый/Медовый (Вторичный акцент/Кнопки) */

    --font-serif: "Playfair Display", "Georgia", serif;
    --font-sans: "Lato", "Helvetica Neue", sans-serif;
   }

   body {
    font-family: var(--font-sans);
    color: var(--color3);
    background-color: #FFF9F0; /* Очень светлый, почти белый фон */
    overflow-x: hidden;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
    font-family: var(--font-serif);
    font-weight: 700;
   }
/* ... Оставшаяся часть style.css остается без изменений, 
так как она использует переменные, которые были обновлены ... */

      
      .reveal-element {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 1s 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-element.is-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: 130%; 
        object-fit: cover;
        position: absolute;
        top: -15%; 
        left: 0;
        will-change: transform;
      }

      
      .deco-line {
        display: block;
        width: 100px;
        height: 2px;
        background-color: var(--color5);
        transition-delay: 0.5s;
      }

      .deco-shape {
        position: absolute;
        z-index: -5;
        background-color: var(--color1);
        opacity: 0.5;
        transition: all 1s ease-out;
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        will-change: transform;
      }

      
      .mobile-menu {
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        transform: translateX(100%);
      }

      .mobile-menu.is-open {
        transform: translateX(0);
      }

      
      .notification-form {
        background-color: var(--color4);
        color: var(--color1);
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
      }

      .notification-form input {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid var(--color5);
        color: white;
      }

      .notification-form input::placeholder {
        color: var(--color5);
      }

      
      .toast-container {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        z-index: 200;
        pointer-events: none;
      }
      .toast {
        background: rgba(67, 20, 0, 0.98); 
        color: var(--color2);
        border: 1px solid var(--color5);
        border-radius: 9999px;
        padding: 12px 18px;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 250ms ease, transform 250ms ease;
        pointer-events: auto;
      }
      .toast.show {
        opacity: 1;
        transform: translateY(0);
      }

      
      .glitch-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        gap: 1rem;
      }

      .glitch-item-1 {
        grid-column: 1 / span 3;
        grid-row: 1;
      }
      .glitch-item-2 {
        grid-column: 4 / span 3;
        grid-row: 2;
      }
      .glitch-item-3 {
        grid-column: 2 / span 4;
        grid-row: 3;
      }
      .glitch-item-4 {
        grid-column: 1 / span 2;
        grid-row: 2;
      }

      @media (max-width: 768px) {
        .glitch-grid {
          display: flex;
          flex-direction: column;
        }
      }