:root {
        --color-primary: #017768;
        --color-accent: #b9995e;
        --color-bg: #fdfdfc;
      }
      body {
        font-family: 'Noto Sans Arabic', sans-serif;
        background-color: var(--color-bg);
        scroll-behavior: smooth;
      }
      .bg-primary { background-color: var(--color-primary); }
      .text-primary { color: var(--color-primary); }
      .border-primary { border-color: var(--color-primary); }
      .bg-accent { background-color: var(--color-accent); }
      .text-accent { color: var(--color-accent); }
      
      .geometric-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30-30-30z' fill='%23017768' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
      }

      @keyframes reveal {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .animate-reveal {
        animation: reveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
      }

      ::-webkit-scrollbar { width: 8px; }
      ::-webkit-scrollbar-track { background: #f1f1f1; }
      ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }