:root {
        --green: #075f3f;
        --green-light: #0a7a51;
        --green-pale: #e8f5ef;
        --green-glow: rgba(7, 95, 63, 0.12);
        --gold: rgb(249, 61, 129);
        --gold-light: #e0b654;
        --gold-pale: #fdf6e7;
        --cream: #faf9f6;
        --white: #ffffff;
        --text-dark: #1a1a2e;
        --text-mid: #4a5568;
        --text-soft: #718096;
        --border: rgba(0, 0, 0, 0.07);
        --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
        --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.13);
        --radius-pill: 100px;
        --radius-card: 20px;
        --radius-lg: 28px;
        --font: "Heebo", sans-serif;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--font);
        color: var(--text-dark);
        direction: rtl;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      /* ─── ANIMATIONS ─── */
      .animate-in {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .animate-in.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .animate-in:nth-child(1) {
        transition-delay: 0.05s;
      }
      .animate-in:nth-child(2) {
        transition-delay: 0.12s;
      }
      .animate-in:nth-child(3) {
        transition-delay: 0.19s;
      }
      .animate-in:nth-child(4) {
        transition-delay: 0.26s;
      }
      .animate-in:nth-child(5) {
        transition-delay: 0.33s;
      }
      .animate-in:nth-child(6) {
        transition-delay: 0.4s;
      }
      .animate-in:nth-child(7) {
        transition-delay: 0.47s;
      }
      .animate-in:nth-child(8) {
        transition-delay: 0.54s;
      }