:root {
        --color1: #bdd3e2; 
        --color2: #f2d1bf; 
        --color3: #431400; 
        --color4: #6b5f4f; 
        --color5: #a4a5b7; 

        --font-serif: "Georgia", "Times New Roman", serif;
        --font-sans: "Helvetica Neue", "Arial", sans-serif;
      }

      body {
        font-family: var(--font-sans);
        color: var(--color3);
        background-color: #fffcfa; 
        overflow-x: hidden;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: var(--font-serif);
        font-weight: 700;
      }

      
      .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;
        }
      }