/* ===== VARIABLES ===== */
    :root {
      --primary:    #059669;
      --primary-d:  #047857;
      --primary-l:  #D1FAE5;
      --primary-bg: #ECFDF5;
      --red:        #DC2626;
      --white:      #FFFFFF;
      --surface:    #F8FAFC;
      --gray-100:   #F1F5F9;
      --gray-200:   #E2E8F0;
      --gray-300:   #CBD5E1;
      --gray-400:   #94A3B8;
      --gray-500:   #64748B;
      --gray-600:   #475569;
      --gray-800:   #1E293B;
      --gray-900:   #0F172A;
      --text:       #1E293B;
      --radius-sm:  8px;
      --radius:     14px;
      --radius-lg:  20px;
      --radius-xl:  28px;
      --sh-sm:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      --sh-md:  0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
      --sh-lg:  0 20px 50px rgba(0,0,0,.10), 0 8px 20px rgba(0,0,0,.06);
      --sh-xl:  0 32px 64px rgba(0,0,0,.11), 0 12px 24px rgba(0,0,0,.07);
      --tr: .2s cubic-bezier(.4,0,.2,1);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Cairo', sans-serif;
      background: var(--white);
      color: var(--text);
      direction: rtl;
      overflow-x: hidden;
      line-height: 1.7;
      font-size: 15px;
    }